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

Collapse navigation items based on container size

Browse Source 
- Previously a maximum of 8 items were shown.
- This change calculates the width of each item and displays as many as possible in the container.
- Any overflowing items will be moved to the ... menu
This commit is contained in:
Chris Oliver
2020-03-20 17:42:10 +00:00
committed by Sebastiaan Janssen
parent ff2027df07
commit 3edfc42623
2 changed files with 18 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsections.directive.js
View File

@@ -12,26 +12,25 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
var sectionItemsWidth = [];
var evts = [];
var maxSections = 8;
//setup scope vars
scope.maxSections = maxSections;
scope.overflowingSections = 0;
scope.sections = [];
scope.visibleSections = 0;
scope.currentSection = appState.getSectionState("currentSection");
scope.showTray = false; //appState.getGlobalState("showTray");
scope.showTray = false;
scope.stickyNavigation = appState.getGlobalState("stickyNavigation");
scope.needTray = false;
function loadSections() {
sectionService.getSectionsForUser()
.then(function (result) {
scope.sections = result;
scope.visibleSections = scope.sections.length;
// store the width of each section so we can hide/show them based on browser width
// we store them because the sections get removed from the dom and then we
// can't tell when to show them gain
$timeout(function () {
$("#applications .sections li").each(function (index) {
$("#applications .sections li:not(:last)").each(function (index) {
sectionItemsWidth.push($(this).outerWidth());
});
});
@@ -42,25 +41,22 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
function calculateWidth() {
$timeout(function () {
//total width minus room for avatar, search, and help icon
var windowWidth = $(window).width() - 150;
var containerWidth = $(".umb-app-header").outerWidth() - $(".umb-app-header__actions").outerWidth();
var trayToggleWidth = $("#applications .sections li.expand").outerWidth();
var sectionsWidth = 0;
scope.totalSections = scope.sections.length;
scope.maxSections = maxSections;
scope.overflowingSections = scope.maxSections - scope.totalSections;
scope.needTray = scope.sections.length > scope.maxSections;
// detect how many sections we can show on the screen
for (var i = 0; i < sectionItemsWidth.length; i++) {
var sectionItemWidth = sectionItemsWidth[i];
sectionsWidth += sectionItemWidth;
if (sectionsWidth > windowWidth) {
scope.needTray = true;
scope.maxSections = i - 1;
scope.overflowingSections = scope.maxSections - scope.totalSections;
break;
if (sectionsWidth + trayToggleWidth > containerWidth) {
scope.visibleSections = i;
return;
}
}
scope.visibleSections = scope.sections.length;
});
}
@@ -134,14 +130,9 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
};
scope.currentSectionInOverflow = function () {
if (scope.overflowingSections === 0) {
return false;
}
var currentSection = scope.sections.filter(s => s.alias === scope.currentSection);
return (scope.sections.indexOf(currentSection[0]) >= scope.maxSections);
return currentSection.length > 0 && scope.sections.indexOf(currentSection[0]) > scope.visibleSections - 1;
};
loadSections();

8
src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html
View File

@@ -2,7 +2,7 @@
<div id="applications" ng-class="{faded:stickyNavigation}">
<ul class="sections" data-element="sections">
<li data-element="section-{{section.alias}}" ng-repeat="section in sections | limitTo: maxSections" ng-class="{current: section.alias == currentSection}">
<li data-element="section-{{section.alias}}" ng-repeat="section in sections | limitTo: visibleSections" ng-class="{current: section.alias == currentSection}">
<a href="#/{{section.alias}}"
ng-dblclick="sectionDblClick(section)"
ng-click="sectionClick($event, section)"
@@ -11,13 +11,13 @@
</a>
</li>
<li data-element="section-expand" class="expand" ng-class="{ 'open': showTray === true, current: currentSectionInOverflow() }" ng-show="needTray">
<li data-element="section-expand" class="expand" ng-class="{ 'open': showTray === true, current: currentSectionInOverflow() }" ng-show="visibleSections < sections.length">
<a href="#" ng-click="trayClick()" prevent-default>
<span class="section__name"><i></i><i></i><i></i></span>
<span class="section__name">&bull;&bull;&bull;</span>
</a>
<ul id="applications-tray" class="sections-tray shadow-depth-2" ng-if="showTray" on-outside-click="trayClick()">
<li ng-repeat="section in sections | limitTo: overflowingSections" ng-class="{current: section.alias == currentSection}">
<li ng-repeat="section in sections | limitTo: sections.length | limitTo: -(sections.length - visibleSections)" ng-class="{current: section.alias == currentSection}">
<a href="#/{{section.alias}}"
ng-dblclick="sectionDblClick(section)"
ng-click="sectionClick($event, section)"