yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactoring of umb-editor-navigation

Browse Source
This commit is contained in:
Niels Lyngsø
2019-02-06 11:26:39 +01:00
parent 2f0d8b75df
commit 64d2940c3b
10 changed files with 188 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
View File

@@ -11,17 +11,27 @@
if (!scope.serverValidationAliasField) {
scope.serverValidationAliasField = "Alias";
}
scope.vm = {};
scope.vm.dropdownOpen = false;
scope.vm.currentVariant = "";
function onInit() {
setCurrentVariant();
/*
angular.forEach(scope.content.apps, (app) => {
if (app.alias === "umbContent") {
console.log("content app", app)
app.type = "dropdown";
app.groups = scope.content.tabs;
}
});
*/
}
function setCurrentVariant() {
angular.forEach(scope.variants, function (variant) {
angular.forEach(scope.content.variants, function (variant) {
if (variant.active) {
scope.vm.currentVariant = variant;
}
@@ -72,10 +82,10 @@
onInit();
//watch for the active culture changing, if it changes, update the current variant
if (scope.variants) {
if (scope.content.variants) {
scope.$watch(function () {
for (var i = 0; i < scope.variants.length; i++) {
var v = scope.variants[i];
for (var i = 0; i < scope.content.variants.length; i++) {
var v = scope.content.variants[i];
if (v.active) {
return v.language.culture;
}
@@ -100,10 +110,9 @@
nameDisabled: "<?",
menu: "=",
hideMenu: "<?",
variants: "=",
content: "=",
openVariants: "<",
hideChangeVariant: "<?",
navigation: "=",
onSelectNavigationItem: "&?",
showBackButton: "<?",
splitViewOpen: "=?",

4
src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigation.directive.js
View File

@@ -17,9 +17,7 @@
name: "More"
};
scope.openNavigationItem = function (item) {
console.log("openNavigationItem", item)
scope.openNavigationItem = function(item) {
scope.showDropdown = false;
runItemAction(item);

10
src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigationitem.directive.js
View File

@@ -15,12 +15,12 @@ Use this directive to render tab content. For an example see: {@link umbraco.dir
function UmbEditorNavigationItemController($scope, $element, $attrs) {
console.log("LINKKK!")
$element[0].classList.add('umb-sub-views-nav-item')
var vm = this;
this.callbackOpen = function(item) {
console.log("callbackOpen")
vm.open({item:vm.item});
this.callOpen = function() {
vm.onOpen({item:vm.item});
};
}
@@ -32,7 +32,7 @@ Use this directive to render tab content. For an example see: {@link umbraco.dir
controllerAs: 'vm',
bindings: {
item: '=',
open: '&',
onOpen: '&',
index: '@'
}
});

1
src/Umbraco.Web.UI.Client/src/less/belle.less
View File

@@ -105,6 +105,7 @@
@import "components/editor/umb-editor.less";
@import "components/umb-sub-views.less";
@import "components/umb-editor-navigation.less";
@import "components/umb-editor-navigation-item.less";
@import "components/umb-editor-sub-views.less";
@import "components/editor/subheader/umb-editor-sub-header.less";
@import "components/umb-flatpickr.less";

132
src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less Normal file
View File

@@ -0,0 +1,132 @@
.umb-sub-views-nav-item {
}
.umb-sub-views-nav-item a {
text-align: center;
cursor: pointer;
display: block;
padding: 4px 10px 0 10px;
min-width: 70px;
border-right: 1px solid @gray-9;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: @editorHeaderHeight;
position: relative;
color: @ui-active-type;
&:hover {
color: @ui-active-type-hover !important;
}
&::after {
content: "";
height: 0px;
left: 8px;
right: 8px;
background-color: @ui-light-active-border;
position: absolute;
bottom: 0;
border-radius: 3px 3px 0 0;
opacity: 0;
transition: all .2s linear;
}
}
.umb-sub-views-nav-item a:focus {
outline: none;
}
.umb-sub-views-nav-item a:hover,
.umb-sub-views-nav-item a:focus {
text-decoration: none;
}
.umb-sub-views-nav-item a.is-active {
color: @ui-light-active-type;
&::after {
opacity: 1;
height: 4px;
}
}
.show-validation .umb-sub-views-nav-item a.-has-error {
color: @red;
}
.umb-sub-views-nav-item .icon {
font-size: 24px;
display: block;
text-align: center;
margin-bottom: 7px;
}
.umb-sub-views-nav-item .badge {
position: absolute;
top: 6px;
right: 6px;
min-width: 16px;
color: @white;
background-color: @ui-active-type;
border: 2px solid @white;
border-radius: 50%;
font-size: 10px;
font-weight: bold;
padding: 2px;
line-height: 16px;
display: block;
&.-type-alert {
background-color: @red;
}
&.-type-warning {
background-color: @yellow-d2;
}
&:empty {
height: 12px;
min-width: 12px;
}
}
.umb-sub-views-nav-item-text {
font-size: 12px;
line-height: 1em;
}
.umb-sub-views-nav-item-more__icon {
margin-bottom: 10px;
}
.umb-sub-views-nav-item-more__icon i {
height: 5px;
width: 5px;
border-radius: 50%;
background: @ui-active-type;// fallback if browser doesnt support currentColor
background: currentColor;
display: inline-block;
margin: 0 5px 0 0;
}
.umb-sub-views-nav-item-more__icon i:last-of-type {
margin-right: 0;
}
.umb-sub-views-nav-item-more__dropdown {
left: auto;
right: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
min-width: auto;
margin-top: 10px;
}
.umb-sub-views-nav-item-more__dropdown > li {
display: flex;
}
.umb-sub-views-nav-item-more__dropdown .umb-sub-views-nav-item:first {
border-left: none;
}

134
src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less
View File

@@ -4,137 +4,3 @@
margin: 0;
border-left: 1px solid @gray-9;
}
.umb-sub-views-nav-item {
text-align: center;
cursor: pointer;
display: block;
padding: 4px 10px 0 10px;
//border-bottom: 4px solid transparent;
min-width: 70px;
border-right: 1px solid @gray-9;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: @editorHeaderHeight;
position: relative;
color: @ui-active-type;
&:hover {
color: @ui-active-type-hover !important;
}
&::after {
content: "";
height: 0px;
left: 8px;
right: 8px;
background-color: @ui-light-active-border;
position: absolute;
bottom: 0;
border-radius: 3px 3px 0 0;
opacity: 0;
transition: all .2s linear;
}
}
.umb-sub-views-nav-item:focus {
outline: none;
}
.umb-sub-views-nav-item:hover,
.umb-sub-views-nav-item:focus {
text-decoration: none;
}
.umb-sub-views-nav-item.is-active {
//color: @ui-active;
//border-bottom-color: @ui-active;
//background-color: rgba(@ui-active, 0.25);
color: @ui-light-active-type;
//border-bottom-color: @ui-active;
&::after {
opacity: 1;
height: 4px;
}
}
.show-validation .umb-sub-views-nav-item.-has-error {
color: @red;
}
.umb-sub-views-nav-item .icon {
font-size: 24px;
display: block;
text-align: center;
margin-bottom: 7px;
}
.umb-sub-views-nav-item .badge {
position: absolute;
top: 6px;
right: 6px;
min-width: 16px;
color: @white;
background-color: @ui-active-type;
border: 2px solid @white;
border-radius: 50%;
font-size: 10px;
font-weight: bold;
padding: 2px;
line-height: 16px;
display: block;
&.-type-alert {
background-color: @red;
}
&.-type-warning {
background-color: @yellow-d2;
}
&:empty {
height: 12px;
min-width: 12px;
}
}
.umb-sub-views-nav-item-text {
font-size: 12px;
line-height: 1em;
}
.umb-sub-views-nav-item-more__icon {
margin-bottom: 10px;
}
.umb-sub-views-nav-item-more__icon i {
height: 5px;
width: 5px;
border-radius: 50%;
background: @ui-active-type;// fallback if browser doesnt support currentColor
background: currentColor;
display: inline-block;
margin: 0 5px 0 0;
}
.umb-sub-views-nav-item-more__icon i:last-of-type {
margin-right: 0;
}
.umb-sub-views-nav-item-more__dropdown {
left: auto;
right: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
min-width: auto;
margin-top: 10px;
}
.umb-sub-views-nav-item-more__dropdown > li {
display: flex;
}
.umb-sub-views-nav-item-more__dropdown .umb-sub-views-nav-item:first {
border-left: none;
}

7
src/Umbraco.Web.UI.Client/src/views/components/content/umb-variant-content.html
View File

@@ -1,19 +1,18 @@
<div>
<umb-load-indicator
<umb-load-indicator
ng-if="vm.editor.loading">
</umb-load-indicator>
<div class="umb-split-view__content" ng-show="!vm.editor.loading">
<ng-form name="contentHeaderForm">
<umb-editor-content-header
<umb-editor-content-header
menu="vm.page.menu"
hide-menu="vm.page.hideActionsMenu"
name="vm.editor.content.name"
name-disabled="vm.nameDisabled"
navigation="vm.editor.content.apps"
content="vm.editor.content"
on-select-navigation-item="vm.selectApp(item)"
variants="vm.editor.content.variants"
open-variants="vm.openVariants"
hide-change-variant="vm.page.hideChangeVariant"
show-back-button="vm.page.listViewPath !== null"

8
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
View File

@@ -29,7 +29,7 @@
autocomplete="off" />
</ng-form>
<a ng-if="variants.length > 0 && hideChangeVariant !== true" class="umb-variant-switcher__toggle" href="" ng-click="vm.dropdownOpen = !vm.dropdownOpen">
<a ng-if="content.variants.length > 0 && hideChangeVariant !== true" class="umb-variant-switcher__toggle" href="" ng-click="vm.dropdownOpen = !vm.dropdownOpen">
<span>{{vm.currentVariant.language.name}}</span>
<ins class="umb-variant-switcher__expand" ng-class="{'icon-navigation-down': !vm.dropdownOpen, 'icon-navigation-up': vm.dropdownOpen}">&nbsp;</ins>
</a>
@@ -39,7 +39,7 @@
</span>
<umb-dropdown ng-if="vm.dropdownOpen" style="width: 100%; max-height: 250px; overflow-y: scroll; margin-top: 5px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
<umb-dropdown-item class="umb-variant-switcher__item" ng-class="{'umb-variant-switcher_item--current': variant.active, 'umb-variant-switcher_item--not-allowed': variantIsOpen(variant.language.culture)}" ng-repeat="variant in variants">
<umb-dropdown-item class="umb-variant-switcher__item" ng-class="{'umb-variant-switcher_item--current': variant.active, 'umb-variant-switcher_item--not-allowed': variantIsOpen(variant.language.culture)}" ng-repeat="variant in content.variants">
<a href="" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, variant)" prevent-default>
<span class="umb-variant-switcher__name" ng-class="{'bold': variant.language.isDefault}">{{variant.language.name}}</span>
<umb-variant-state variant="variant" class="umb-variant-switcher__state"></umb-variant-state>
@@ -60,10 +60,10 @@
</a>
</div>
<div ng-if="navigation && splitViewOpen !== true" style="margin-left: 20px;">
<div ng-if="content.apps && splitViewOpen !== true" style="margin-left: 20px;">
<umb-editor-navigation
data-element="editor-sub-views"
navigation="navigation"
navigation="content.apps"
on-select="selectNavigationItem(item)">
</umb-editor-navigation>
</div>

3
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html
View File

@@ -1,8 +1,7 @@
<a data-element="sub-view-{{vm.item.alias}}"
tabindex="-1"
class="umb-sub-views-nav-item"
ng-href=""
ng-click="vm.callbackOpen(vm.item)"
ng-click="vm.callOpen(vm.item)"
hotkey="{{vm.index+1}}"
hotkey-when-hidden="true"
ng-class="{'is-active': vm.item.active, '-has-error': vm.item.hasError}">

47
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html
View File

@@ -1,11 +1,11 @@
<ul class="umb-sub-views-nav" ng-show="showNavigation">
<li ng-repeat="item in navigation | limitTo: itemsLimit ">
<div ng-show="item.alias !== 'more'"
ng-class="item.errorClass">
<li ng-repeat="navItem in navigation | limitTo: itemsLimit ">
<div ng-show="navItem.alias !== 'more'"
ng-class="navItem.errorClass">
<umb-editor-navigation-item
item="item"
open="openNavigationItem"
item="navItem"
on-open="openNavigationItem(item)"
index="{{$index}}">
</umb-editor-navigation-item>
</div>
@@ -13,24 +13,27 @@
<li ng-show="showMoreButton" style="position: relative;">
<a data-element="sub-view-{{moreButton.alias}}"
class="umb-sub-views-nav-item umb-sub-views-nav-item-more"
href=""
ng-click="toggleDropdown()"
ng-class="{'is-active': moreButton.active}">
<div class="umb-sub-views-nav-item-more__icon"><i></i><i></i><i></i></div>
<span class="umb-sub-views-nav-item-text">{{ moreButton.name }}</span>
</a>
<div class="umb-sub-views-nav-item umb-sub-views-nav-item-more">
<umb-dropdown ng-show="showDropdown" on-close="hideDropdown()" class="umb-sub-views-nav-item-more__dropdown">
<umb-dropdown-item ng-repeat="item in navigation | limitTo: overflowingItems">
<umb-editor-navigation-item
item="item"
open="openNavigationItem"
index="{{$index}}">
</umb-editor-navigation-item>
</umb-dropdown-item>
</umb-dropdown>
<a data-element="sub-view-{{moreButton.alias}}"
href=""
ng-click="toggleDropdown()"
ng-class="{'is-active': moreButton.active}">
<div class="umb-sub-views-nav-item-more__icon"><i></i><i></i><i></i></div>
<span class="umb-sub-views-nav-item-text">{{ moreButton.name }}</span>
</a>
<umb-dropdown ng-show="showDropdown" on-close="hideDropdown()" class="umb-sub-views-nav-item-more__dropdown">
<umb-dropdown-item ng-repeat="navItem in navigation | limitTo: overflowingItems">
<umb-editor-navigation-item
item="navItem"
on-open="openNavigationItem(item)"
index="{{$index}}">
</umb-editor-navigation-item>
</umb-dropdown-item>
</umb-dropdown>
</div>
</li>