Initial commit on "more" button
This commit is contained in:
copilaurobert
+79
-79
@@ -10,62 +10,62 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
|
||||
templateUrl: 'views/components/application/umb-sections.html',
|
||||
link: function (scope, element, attr, ctrl) {
|
||||
|
||||
var sectionItemsWidth = [];
|
||||
var evts = [];
|
||||
var maxSections = 7;
|
||||
var sectionItemsWidth = [];
|
||||
var evts = [];
|
||||
var maxSections = 7;
|
||||
|
||||
//setup scope vars
|
||||
scope.maxSections = maxSections;
|
||||
scope.overflowingSections = 0;
|
||||
scope.maxSections = maxSections;
|
||||
scope.overflowingSections = 0;
|
||||
scope.sections = [];
|
||||
scope.currentSection = appState.getSectionState("currentSection");
|
||||
scope.showTray = false; //appState.getGlobalState("showTray");
|
||||
scope.stickyNavigation = appState.getGlobalState("stickyNavigation");
|
||||
scope.needTray = false;
|
||||
|
||||
function loadSections(){
|
||||
sectionService.getSectionsForUser()
|
||||
.then(function (result) {
|
||||
scope.sections = result;
|
||||
// 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) {
|
||||
sectionItemsWidth.push($(this).outerWidth());
|
||||
});
|
||||
});
|
||||
calculateWidth();
|
||||
});
|
||||
}
|
||||
|
||||
function calculateWidth(){
|
||||
$timeout(function(){
|
||||
//total width minus room for avatar, search, and help icon
|
||||
var windowWidth = $(window).width()-200;
|
||||
var sectionsWidth = 0;
|
||||
scope.totalSections = scope.sections.length;
|
||||
scope.maxSections = maxSections;
|
||||
scope.overflowingSections = 0;
|
||||
scope.needTray = false;
|
||||
|
||||
// detect how many sections we can show on the screen
|
||||
for (var i = 0; i < sectionItemsWidth.length; i++) {
|
||||
var sectionItemWidth = sectionItemsWidth[i];
|
||||
sectionsWidth += sectionItemWidth;
|
||||
function loadSections() {
|
||||
sectionService.getSectionsForUser()
|
||||
.then(function (result) {
|
||||
scope.sections = result;
|
||||
// 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) {
|
||||
sectionItemsWidth.push($(this).outerWidth());
|
||||
});
|
||||
});
|
||||
calculateWidth();
|
||||
});
|
||||
}
|
||||
|
||||
if(sectionsWidth > windowWidth) {
|
||||
scope.needTray = true;
|
||||
scope.maxSections = i - 1;
|
||||
scope.overflowingSections = scope.maxSections - scope.totalSections;
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function calculateWidth() {
|
||||
$timeout(function () {
|
||||
//total width minus room for avatar, search, and help icon
|
||||
var windowWidth = $(window).width() - 200;
|
||||
var sectionsWidth = 0;
|
||||
scope.totalSections = scope.sections.length;
|
||||
scope.maxSections = maxSections;
|
||||
scope.overflowingSections = 0;
|
||||
scope.needTray = false;
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//Listen for global state changes
|
||||
evts.push(eventsService.on("appState.globalState.changed", function(e, args) {
|
||||
evts.push(eventsService.on("appState.globalState.changed", function (e, args) {
|
||||
if (args.key === "showTray") {
|
||||
scope.showTray = args.value;
|
||||
}
|
||||
@@ -74,44 +74,44 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
|
||||
}
|
||||
}));
|
||||
|
||||
evts.push(eventsService.on("appState.sectionState.changed", function(e, args) {
|
||||
evts.push(eventsService.on("appState.sectionState.changed", function (e, args) {
|
||||
if (args.key === "currentSection") {
|
||||
scope.currentSection = args.value;
|
||||
}
|
||||
}));
|
||||
|
||||
evts.push(eventsService.on("app.reInitialize", function(e, args) {
|
||||
evts.push(eventsService.on("app.reInitialize", function (e, args) {
|
||||
//re-load the sections if we're re-initializing (i.e. package installed)
|
||||
loadSections();
|
||||
}));
|
||||
|
||||
//ensure to unregister from all events!
|
||||
scope.$on('$destroy', function () {
|
||||
for (var e in evts) {
|
||||
eventsService.unsubscribe(evts[e]);
|
||||
}
|
||||
});
|
||||
scope.$on('$destroy', function () {
|
||||
for (var e in evts) {
|
||||
eventsService.unsubscribe(evts[e]);
|
||||
}
|
||||
});
|
||||
|
||||
//on page resize
|
||||
window.onresize = calculateWidth;
|
||||
//on page resize
|
||||
window.onresize = calculateWidth;
|
||||
|
||||
scope.sectionClick = function (event, section) {
|
||||
scope.sectionClick = function (event, section) {
|
||||
|
||||
if (event.ctrlKey ||
|
||||
event.shiftKey ||
|
||||
event.metaKey || // apple
|
||||
(event.button && event.button === 1) // middle click, >IE9 + everyone else
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if (event.ctrlKey ||
|
||||
event.shiftKey ||
|
||||
event.metaKey || // apple
|
||||
(event.button && event.button === 1) // middle click, >IE9 + everyone else
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (scope.userDialog) {
|
||||
closeUserDialog();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
navigationService.hideSearch();
|
||||
navigationService.showTree(section.alias);
|
||||
|
||||
navigationService.hideSearch();
|
||||
navigationService.showTree(section.alias);
|
||||
|
||||
//in some cases the section will have a custom route path specified, if there is one we'll use it
|
||||
if (section.routePath) {
|
||||
@@ -123,22 +123,22 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
|
||||
$location.path(path);
|
||||
}
|
||||
navigationService.clearSearch();
|
||||
|
||||
};
|
||||
|
||||
scope.sectionDblClick = function(section){
|
||||
navigationService.reloadSection(section.alias);
|
||||
};
|
||||
};
|
||||
|
||||
scope.trayClick = function () {
|
||||
if (appState.getGlobalState("showTray") === true) {
|
||||
navigationService.hideTray();
|
||||
} else {
|
||||
navigationService.showTray();
|
||||
}
|
||||
};
|
||||
scope.sectionDblClick = function (section) {
|
||||
navigationService.reloadSection(section.alias);
|
||||
};
|
||||
|
||||
loadSections();
|
||||
scope.trayClick = function () {
|
||||
if (appState.getGlobalState("showTray") === true) {
|
||||
navigationService.hideTray();
|
||||
} else {
|
||||
navigationService.showTray();
|
||||
}
|
||||
};
|
||||
|
||||
loadSections();
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
+15
@@ -208,9 +208,23 @@ Use this directive to construct a header inside the main editor window.
|
||||
|
||||
function link(scope, el, attr, ctrl) {
|
||||
|
||||
var maxApps = 2;
|
||||
|
||||
scope.vm = {};
|
||||
scope.vm.dropdownOpen = false;
|
||||
scope.vm.currentVariant = "";
|
||||
scope.vm.inputWidth = "";
|
||||
scope.maxSections = maxApps;
|
||||
scope.overflowingApps = 0;
|
||||
scope.navigationOverflow = [];
|
||||
|
||||
|
||||
var moreButton = {
|
||||
alias: "more",
|
||||
name: "More",
|
||||
icon: "icon-thumbnails-small",
|
||||
view: "views/content/apps/info/info.html"
|
||||
};
|
||||
|
||||
function onInit() {
|
||||
setCurrentVariant();
|
||||
@@ -293,6 +307,7 @@ Use this directive to construct a header inside the main editor window.
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var directive = {
|
||||
transclude: true,
|
||||
restrict: 'E',
|
||||
|
||||
+41
-5
@@ -5,12 +5,30 @@
|
||||
|
||||
function link(scope, el, attr, ctrl) {
|
||||
|
||||
|
||||
|
||||
scope.showNavigation = true;
|
||||
scope.showMore = false;
|
||||
scope.showTray = false;
|
||||
scope.overflow = [];
|
||||
scope.currentApps = 0;
|
||||
|
||||
|
||||
|
||||
scope.clickNavigationItem = function (selectedItem) {
|
||||
setItemToActive(selectedItem);
|
||||
runItemAction(selectedItem);
|
||||
eventsService.emit("app.tabChange", selectedItem);
|
||||
console.log(scope.something);
|
||||
|
||||
if (selectedItem.alias !== "more") {
|
||||
runItemAction(selectedItem);
|
||||
eventsService.emit("app.tabChange", selectedItem);
|
||||
setItemToActive(selectedItem);
|
||||
} else {
|
||||
if (scope.showTray === false) {
|
||||
scope.showTray = true;
|
||||
} else {
|
||||
scope.showTray = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function runItemAction(selectedItem) {
|
||||
@@ -39,11 +57,28 @@
|
||||
if (scope.navigation.length <= 1) {
|
||||
scope.showNavigation = false;
|
||||
}
|
||||
scope.currentApps = scope.navigation.length;
|
||||
|
||||
var maxApps =4;
|
||||
var navLenght = scope.navigation.length - 1;
|
||||
|
||||
|
||||
var appsToPop = navLenght - maxApps;
|
||||
|
||||
if (navLenght > maxApps) {
|
||||
|
||||
for (var i = 0; i < appsToPop +1; i++) {
|
||||
var v = scope.navigation.pop();
|
||||
scope.overflow.push(v);
|
||||
}
|
||||
scope.showMore = true;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
activate();
|
||||
|
||||
|
||||
}
|
||||
|
||||
var directive = {
|
||||
@@ -51,7 +86,8 @@
|
||||
replace: true,
|
||||
templateUrl: 'views/components/editor/umb-editor-navigation.html',
|
||||
scope: {
|
||||
navigation: "="
|
||||
navigation: "=",
|
||||
something: "="
|
||||
},
|
||||
link: link
|
||||
};
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
<ng-form data-element="editor-icon" name="iconForm">
|
||||
<div class="umb-panel-header-icon" ng-if="!hideIcon" ng-click="openIconPicker()" ng-class="{'-placeholder': $parent.icon==='' || $parent.icon===null}"
|
||||
title="{{$parent.icon}}">
|
||||
title="{{$parent.icon}}">
|
||||
<i class="icon {{$parent.icon}}" ng-if="$parent.icon!=='' && $parent.icon!==null"></i>
|
||||
<div class="umb-panel-header-icon-text" ng-if="$parent.icon==='' || $parent.icon===null">
|
||||
<localize key="settings_addIcon"></localize>
|
||||
@@ -20,8 +20,7 @@
|
||||
</div>
|
||||
</ng-form>
|
||||
|
||||
<div style="flex: 1 1 auto;">
|
||||
|
||||
<div id="nameField" style="flex: 1 1 auto;">
|
||||
<div class="umb-editor-header__name-wrapper">
|
||||
<ng-form name="headerNameForm">
|
||||
<input
|
||||
@@ -104,7 +103,9 @@
|
||||
<div ng-if="navigation && splitViewOpen !== true" style="margin-left: 20px;">
|
||||
<umb-editor-navigation
|
||||
data-element="editor-sub-views"
|
||||
navigation="navigation">
|
||||
navigation="navigation"
|
||||
something="something"
|
||||
navigationOverflow ="navigationOverflow">
|
||||
</umb-editor-navigation>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,14 +1,51 @@
|
||||
<ul class="umb-sub-views-nav" ng-show="showNavigation">
|
||||
<li ng-repeat="item in navigation">
|
||||
<a data-element="sub-view-{{item.alias}}"
|
||||
tabindex="-1"
|
||||
class="umb-sub-views-nav-item"
|
||||
href=""
|
||||
ng-click="clickNavigationItem(item)"
|
||||
hotkey="{{$index+1}}"
|
||||
ng-class="{'is-active': item.active, '-has-error': item.hasError}">
|
||||
<i class="icon {{ item.icon }}"></i>
|
||||
<span class="umb-sub-views-nav-item-text">{{ item.name }}</span>
|
||||
</a>
|
||||
<li ng-repeat="item in navigation | limitTo: currentApps ">
|
||||
<div ng-show="item.alias !== 'more'">
|
||||
<a data-element="sub-view-{{item.alias}}"
|
||||
tabindex="-1"
|
||||
class="umb-sub-views-nav-item"
|
||||
href=""
|
||||
ng-click="clickNavigationItem(item)"
|
||||
hotkey="{{$index+1}}"
|
||||
ng-class="{'is-active': item.active, '-has-error': item.hasError}">
|
||||
<i class="icon {{ item.icon }}"></i>
|
||||
<span class="umb-sub-views-nav-item-text">{{ item.name }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li ng-repeat="item in overflow">
|
||||
<div ng-show="item.alias === 'more' && showMore === true">
|
||||
<div>
|
||||
<a data-element="sub-view-{{item.alias}}"
|
||||
tabindex="-1"
|
||||
class="umb-sub-views-nav-item"
|
||||
href=""
|
||||
ng-click="clickNavigationItem(item)"
|
||||
hotkey="{{$index+1}}"
|
||||
ng-class="{'is-active': item.active, '-has-error': item.hasError}">
|
||||
<i class="icon {{ item.icon }}"></i>
|
||||
<span class="umb-sub-views-nav-item-text">{{ item.name }}</span>
|
||||
</a>
|
||||
<div ng-if="showTray === true" style="position: fixed; right: 131px;">
|
||||
<div style="right: 5px; margin-left: 50px; width: 0; height: 0; border: solid 10px; border-color: transparent transparent white transparent;"></div>
|
||||
<ul ng-if="item.alias === 'more'" class="shadow-depth-2" style="border-top: none; background-color: white; list-style: none" on-outside-click="trayClick()">
|
||||
<li ng-repeat="item in overflow">
|
||||
<a data-element="sub-view-{{item.alias}}"
|
||||
tabindex="-1"
|
||||
class="umb-sub-views-nav-item"
|
||||
href=""
|
||||
ng-click="clickNavigationItem(item)"
|
||||
hotkey="{{$index+1}}"
|
||||
ng-class="{'is-active': item.active, '-has-error': item.hasError}">
|
||||
<i class="icon {{ item.icon }}"></i>
|
||||
<span class="umb-sub-views-nav-item-text">{{ item.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -27,6 +27,14 @@ namespace Umbraco.Web.Models.Mapping
|
||||
View = "views/content/apps/info/info.html"
|
||||
};
|
||||
|
||||
private readonly ContentApp _moreApp = new ContentApp
|
||||
{
|
||||
Alias = "more",
|
||||
Name = "More",
|
||||
Icon = "icon-thumbnails-small",
|
||||
View = "views/content/apps/info/info.html"
|
||||
};
|
||||
|
||||
private readonly IDataTypeService _dataTypeService;
|
||||
private readonly PropertyEditorCollection _propertyEditorCollection;
|
||||
|
||||
@@ -48,7 +56,8 @@ namespace Umbraco.Web.Models.Mapping
|
||||
|
||||
apps.Add(_contentApp);
|
||||
apps.Add(_infoApp);
|
||||
|
||||
apps.Add(_moreApp);
|
||||
|
||||
return apps;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user