add validation badge to content apps more button
This commit is contained in:
Mads Rasmussen
@@ -226,8 +226,6 @@
|
||||
|
||||
$scope.content = data;
|
||||
|
||||
console.log($scope.content);
|
||||
|
||||
// TODO: remove all of this - hacking for testing with starter kit
|
||||
if ($scope.content.contentTypeAlias === 'home') {
|
||||
$scope.content.apps = $scope.content.apps.filter(app => app.alias !== 'umbContent');
|
||||
@@ -258,8 +256,6 @@
|
||||
|
||||
$scope.content.variants.forEach(variant => {
|
||||
variant.tabs.forEach(tab => {
|
||||
console.log(tab.alias);
|
||||
|
||||
if (tab.alias === 'Hero') {
|
||||
tab.testId = '1';
|
||||
}
|
||||
@@ -284,10 +280,6 @@
|
||||
|
||||
$scope.content.apps = [...$scope.content.test, ...$scope.content.apps];
|
||||
}
|
||||
|
||||
if ($scope.content.contentTypeAlias === 'products') {
|
||||
|
||||
}
|
||||
|
||||
appendRuntimeData();
|
||||
init();
|
||||
|
||||
@@ -47,18 +47,23 @@
|
||||
|
||||
function onInit() {
|
||||
var firstRun = true;
|
||||
scope.$watch("navigation.length",
|
||||
(newVal, oldVal) => {
|
||||
if (firstRun || newVal !== undefined && newVal !== oldVal) {
|
||||
firstRun = false;
|
||||
scope.showNavigation = newVal > 1;
|
||||
calculateVisibleItems($window.innerWidth);
|
||||
}
|
||||
});
|
||||
calculateVisibleItems($window.innerWidth);
|
||||
;
|
||||
scope.$watch("navigation", (newVal, oldVal) => {
|
||||
const newLength = newVal.length;
|
||||
const oldLength = oldVal.length;
|
||||
|
||||
if (firstRun || newLength !== undefined && newLength !== oldLength) {
|
||||
firstRun = false;
|
||||
scope.showNavigation = newLength > 1;
|
||||
calculateVisibleItems($window.innerWidth);
|
||||
}
|
||||
|
||||
setMoreButtonErrorState();
|
||||
}, true);
|
||||
}
|
||||
|
||||
function calculateVisibleItems(windowWidth) {
|
||||
|
||||
// if we don't get a windowWidth stick with the default item limit
|
||||
if(!windowWidth) {
|
||||
return;
|
||||
@@ -82,6 +87,10 @@
|
||||
scope.showMoreButton = false;
|
||||
scope.overflowingItems = 0;
|
||||
}
|
||||
|
||||
scope.moreButton.name = scope.itemsLimit === 0 ? "Menu" : "More";
|
||||
setMoreButtonActiveState();
|
||||
setMoreButtonErrorState();
|
||||
}
|
||||
|
||||
function runItemAction(selectedItem) {
|
||||
@@ -100,18 +109,30 @@
|
||||
|
||||
// set clicked item to active
|
||||
selectedItem.active = true;
|
||||
|
||||
// set more button to active if item in dropdown is clicked
|
||||
var selectedItemIndex = scope.navigation.indexOf(selectedItem);
|
||||
if (selectedItemIndex + 1 > scope.itemsLimit) {
|
||||
scope.moreButton.active = true;
|
||||
} else {
|
||||
scope.moreButton.active = false;
|
||||
}
|
||||
|
||||
setMoreButtonActiveState();
|
||||
setMoreButtonErrorState();
|
||||
}
|
||||
}
|
||||
|
||||
function setMoreButtonActiveState() {
|
||||
// set active state on more button if any of the overflown items is active
|
||||
scope.moreButton.active = scope.navigation.findIndex(item => item.active) + 1 > scope.itemsLimit;
|
||||
};
|
||||
|
||||
function setMoreButtonErrorState() {
|
||||
if (scope.overflowingItems === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const overflow = scope.navigation.slice(scope.itemsLimit, scope.navigation.length);
|
||||
const active = scope.navigation.find(item => item.active)
|
||||
// set error state on more button if any of the overflown items has an error. We use it show the error badge and color the item
|
||||
scope.moreButton.hasError = overflow.filter(item => item.hasError).length > 0;
|
||||
// set special active/error state on button if the current selected item is has an error
|
||||
// we don't want to show the error badge in this case so we need a special state for that
|
||||
scope.moreButton.activeHasError = active.hasError;
|
||||
};
|
||||
|
||||
var resizeCallback = function(size) {
|
||||
if(size && size.width) {
|
||||
calculateVisibleItems(size.width);
|
||||
@@ -136,8 +157,7 @@
|
||||
scope: {
|
||||
navigation: "=",
|
||||
onSelect: "&",
|
||||
onAnchorSelect: "&",
|
||||
test: "<"
|
||||
onAnchorSelect: "&"
|
||||
},
|
||||
link: link
|
||||
};
|
||||
|
||||
@@ -72,14 +72,6 @@
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: umb-sub-views-nav-item--badge-bounce;
|
||||
animation-timing-function: ease;
|
||||
@keyframes umb-sub-views-nav-item--badge-bounce {
|
||||
0% { transform: translateY(0); }
|
||||
20% { transform: translateY(-6px); }
|
||||
40% { transform: translateY(0); }
|
||||
55% { transform: translateY(-3px); }
|
||||
70% { transform: translateY(0); }
|
||||
100% { transform: translateY(0); }
|
||||
}
|
||||
}
|
||||
.badge.--error-badge {
|
||||
display: block;
|
||||
@@ -219,3 +211,38 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.umb-sub-views-nav-item-more {
|
||||
.umb-sub-views-nav-item__action {
|
||||
&.-has-error {
|
||||
&.is-active {
|
||||
color: @red !important;
|
||||
|
||||
.badge {
|
||||
display: block;
|
||||
animation-duration: 1.4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: umb-sub-views-nav-item--badge-bounce;
|
||||
animation-timing-function: ease;
|
||||
}
|
||||
|
||||
&.-active-has-error {
|
||||
color: @ui-light-active-type !important;
|
||||
|
||||
.badge {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes umb-sub-views-nav-item--badge-bounce {
|
||||
0% { transform: translateY(0); }
|
||||
20% { transform: translateY(-6px); }
|
||||
40% { transform: translateY(0); }
|
||||
55% { transform: translateY(-3px); }
|
||||
70% { transform: translateY(0); }
|
||||
100% { transform: translateY(0); }
|
||||
}
|
||||
@@ -9,4 +9,5 @@
|
||||
<span class="umb-button-ellipsis__icon" aria-hidden="true">•••</span>
|
||||
<span class="umb-button-ellipsis__text" ng-class="{'sr-only': vm.showText !== true}">{{vm.text}}</span>
|
||||
</span>
|
||||
<ng-transclude></ng-transclude>
|
||||
</button>
|
||||
|
||||
@@ -93,20 +93,12 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div ng-if="splitViewOpen">
|
||||
<button type="button" class="btn-reset umb-editor-header__close-split-view" ng-click="closeSplitView()">
|
||||
<umb-icon icon="icon-delete" class="icon-delete"></umb-icon>
|
||||
<span class="sr-only"><localize key="general_closepane">Close Pane</localize></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div ng-if="editor.variantApps">
|
||||
<umb-editor-navigation
|
||||
data-element="editor-sub-views"
|
||||
navigation="editor.variantApps"
|
||||
on-select="selectNavigationItem(item)"
|
||||
on-anchor-select="selectAnchorItem(item, anchor)"
|
||||
test="splitViewOpen === true"> <!-- TODO: clean up -->
|
||||
on-anchor-select="selectAnchorItem(item, anchor)">
|
||||
</umb-editor-navigation>
|
||||
</div>
|
||||
|
||||
@@ -119,6 +111,13 @@
|
||||
</umb-editor-menu>
|
||||
</div>
|
||||
|
||||
<div ng-if="splitViewOpen">
|
||||
<button type="button" class="btn-reset umb-editor-header__close-split-view" ng-click="closeSplitView()">
|
||||
<umb-icon icon="icon-delete" class="icon-delete"></umb-icon>
|
||||
<span class="sr-only"><localize key="general_closepane">Close Pane</localize></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,72 +1,44 @@
|
||||
<div>
|
||||
<ul ng-if="!test" class="umb-sub-views-nav" ng-show="showNavigation">
|
||||
<ul class="umb-sub-views-nav" ng-show="showNavigation">
|
||||
|
||||
<li ng-repeat="navItem in navigation | limitTo: itemsLimit ">
|
||||
<div ng-show="navItem.alias !== 'more'"
|
||||
ng-class="navItem.errorClass">
|
||||
<li ng-repeat="navItem in navigation | limitTo: itemsLimit ">
|
||||
<div ng-show="navItem.alias !== 'more'"
|
||||
ng-class="navItem.errorClass">
|
||||
<umb-editor-navigation-item
|
||||
item="navItem"
|
||||
on-open="openNavigationItem(item)"
|
||||
on-open-anchor="openAnchorItem(item, anchor)"
|
||||
hotkey="$index + 1">
|
||||
</umb-editor-navigation-item>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li ng-show="showMoreButton">
|
||||
<div class="umb-sub-views-nav-item umb-sub-views-nav-item-more">
|
||||
<umb-button-ellipsis
|
||||
element="sub-view-{{moreButton.alias}}"
|
||||
action="toggleDropdown()"
|
||||
color="{{ moreButton.hasError ? '#d42054' : '#1b264f' }}"
|
||||
text="{{moreButton.name}}"
|
||||
show-text="true"
|
||||
mode="tab"
|
||||
css-class="umb-sub-views-nav-item__action umb-outline umb-outline--thin {{moreButton.active ? 'is-active' : ''}} {{ moreButton.hasError ? '-has-error' : '' }} {{moreButton.activeHasError ? '-active-has-error' : ''}}"
|
||||
>
|
||||
<div class="badge -type-alert --error-badge">!</div>
|
||||
</umb-button-ellipsis>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li style="position: relative;">
|
||||
<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)"
|
||||
on-open-anchor="openAnchorItem(item, anchor)"
|
||||
hotkey="$index + 1">
|
||||
index="{{$index}}">
|
||||
</umb-editor-navigation-item>
|
||||
</div>
|
||||
</li>
|
||||
</umb-dropdown-item>
|
||||
</umb-dropdown>
|
||||
</li>
|
||||
|
||||
<li ng-show="showMoreButton" style="position: relative;">
|
||||
|
||||
<div class="umb-sub-views-nav-item umb-sub-views-nav-item-more">
|
||||
|
||||
<umb-button-ellipsis
|
||||
element="sub-view-{{moreButton.alias}}"
|
||||
action="toggleDropdown()"
|
||||
color="#1b264f"
|
||||
text="{{moreButton.name}}"
|
||||
show-text="true"
|
||||
mode="tab"
|
||||
css-class="umb-sub-views-nav-item__action umb-outline umb-outline--thin {{moreButton.active ? 'is-active' : ''}}"
|
||||
>
|
||||
</umb-button-ellipsis>
|
||||
|
||||
<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)"
|
||||
on-open-anchor="openAnchorItem(item, anchor)"
|
||||
index="{{$index}}">
|
||||
</umb-editor-navigation-item>
|
||||
</umb-dropdown-item>
|
||||
</umb-dropdown>
|
||||
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<!-- TODO: clean up -->
|
||||
<ul ng-if="test" class="umb-sub-views-nav" ng-show="showNavigation">
|
||||
<li ng-repeat="navItem in navigation | filter: { active: true }">
|
||||
<div ng-class="navItem.errorClass">
|
||||
<umb-editor-navigation-item
|
||||
item="navItem"
|
||||
on-open="toggleDropdown()"
|
||||
hotkey="$index + 1">
|
||||
</umb-editor-navigation-item>
|
||||
</div>
|
||||
</li>
|
||||
<li style="position: relative;">
|
||||
<umb-dropdown ng-show="showDropdown" on-close="hideDropdown()" class="umb-sub-views-nav-item-more__dropdown">
|
||||
<umb-dropdown-item ng-repeat="navItem in navigation">
|
||||
<umb-editor-navigation-item
|
||||
item="navItem"
|
||||
on-open="openNavigationItem(item)"
|
||||
on-open-anchor="openAnchorItem(item, anchor)"
|
||||
index="{{$index}}">
|
||||
</umb-editor-navigation-item>
|
||||
</umb-dropdown-item>
|
||||
</umb-dropdown>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ul>
|
||||
Reference in New Issue
Block a user