U4-4507 - Make expand arrow in sections as a toggle
I have made some suggestions, so the right arrow act as a toggle button, so you easily can collapse the extra overflow-sections. Furthermore I have made some changes, so when you click userDialog or helpDialog other open dialogs close and also sections. When you click a section or expand it also close dialogs, so you don't have to close those dialogs first.
This commit is contained in:
bjarnef
@@ -22,6 +22,9 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
|
||||
if (scope.showTray) {
|
||||
return 'slide';
|
||||
}
|
||||
else if (scope.showTray === false) {
|
||||
return 'slide';
|
||||
}
|
||||
else {
|
||||
return '';
|
||||
}
|
||||
@@ -83,6 +86,13 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
|
||||
};
|
||||
|
||||
scope.sectionClick = function (section) {
|
||||
if (navigationService.userDialog) {
|
||||
navigationService.userDialog.close();
|
||||
}
|
||||
if (navigationService.helpDialog) {
|
||||
navigationService.helpDialog.close();
|
||||
}
|
||||
|
||||
navigationService.hideSearch();
|
||||
navigationService.showTree(section.alias);
|
||||
$location.path("/" + section.alias);
|
||||
@@ -92,8 +102,20 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
|
||||
navigationService.reloadSection(section.alias);
|
||||
};
|
||||
|
||||
scope.trayClick = function(){
|
||||
navigationService.showTray();
|
||||
scope.trayClick = function () {
|
||||
// close dialogs
|
||||
if (navigationService.userDialog) {
|
||||
navigationService.userDialog.close();
|
||||
}
|
||||
if (navigationService.helpDialog) {
|
||||
navigationService.helpDialog.close();
|
||||
}
|
||||
|
||||
if (appState.getGlobalState("showTray") === true) {
|
||||
navigationService.hideTray();
|
||||
} else {
|
||||
navigationService.showTray();
|
||||
}
|
||||
};
|
||||
|
||||
loadSections();
|
||||
|
||||
@@ -513,23 +513,26 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
|
||||
* Opens the user dialog, next to the sections navigation
|
||||
* template is located in views/common/dialogs/user.html
|
||||
*/
|
||||
showUserDialog: function() {
|
||||
showUserDialog: function () {
|
||||
// hide tray and close help dialog
|
||||
if (service.helpDialog) {
|
||||
service.helpDialog.close();
|
||||
}
|
||||
service.hideTray();
|
||||
|
||||
if(userDialog){
|
||||
userDialog.close();
|
||||
userDialog = null;
|
||||
if (service.userDialog) {
|
||||
service.userDialog.close();
|
||||
service.userDialog = undefined;
|
||||
}
|
||||
|
||||
userDialog = dialogService.open(
|
||||
{
|
||||
template: "views/common/dialogs/user.html",
|
||||
modalClass: "umb-modal-left",
|
||||
show: true
|
||||
});
|
||||
|
||||
|
||||
service.userDialog = dialogService.open(
|
||||
{
|
||||
template: "views/common/dialogs/user.html",
|
||||
modalClass: "umb-modal-left",
|
||||
show: true
|
||||
});
|
||||
|
||||
return userDialog;
|
||||
return service.userDialog;
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -541,7 +544,13 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
|
||||
* Opens the user dialog, next to the sections navigation
|
||||
* template is located in views/common/dialogs/user.html
|
||||
*/
|
||||
showHelpDialog: function() {
|
||||
showHelpDialog: function () {
|
||||
// hide tray and close user dialog
|
||||
service.hideTray();
|
||||
if (service.userDialog) {
|
||||
service.userDialog.close();
|
||||
}
|
||||
|
||||
if(service.helpDialog){
|
||||
service.helpDialog.close();
|
||||
service.helpDialog = undefined;
|
||||
|
||||
@@ -7,6 +7,7 @@ ul.sections {
|
||||
background: @blackLight;
|
||||
height: 100%;
|
||||
width: 80px;
|
||||
border-right: 1px solid @grayDark;
|
||||
}
|
||||
|
||||
ul.sections li {
|
||||
@@ -63,7 +64,7 @@ ul.sections:hover a span {
|
||||
// -------------------------
|
||||
|
||||
ul.sections li.avatar {
|
||||
height: 69px;
|
||||
height: 67px;
|
||||
padding: 30px 0 2px 0;
|
||||
text-align: center;
|
||||
margin: 0 0 0 -4px;
|
||||
@@ -116,7 +117,38 @@ ul.sections li.help a {
|
||||
// -------------------------
|
||||
li.expand a, li.expand{border: none !Important;}
|
||||
|
||||
ul.sections-tray {
|
||||
padding-top: 102px;
|
||||
width: 80px;
|
||||
li.expand {
|
||||
|
||||
&.open > a > i.icon {
|
||||
-webkit-transition: all 1s !important;
|
||||
-o-transition: all 1s !important;
|
||||
-moz-transition: all 1s !important;
|
||||
transition: all 1s !important;
|
||||
|
||||
&:before {
|
||||
-ms-transform: rotate(180deg) !important; /* IE 9 */
|
||||
-webkit-transform: rotate(180deg) !important; /* Chrome, Safari, Opera */
|
||||
-o-transform: rotate(180deg) !important;
|
||||
-moz-transform: rotate(180deg) !important;
|
||||
transform: rotate(180deg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.sections-tray {
|
||||
padding-top: 99px;
|
||||
width: 80px;
|
||||
|
||||
& > li:first-child > a {
|
||||
border-top: 1px solid #343434;
|
||||
}
|
||||
|
||||
& > li {
|
||||
// 5px (instead of 4px) because of vertical border
|
||||
border-left-width: 5px;
|
||||
|
||||
&.current, &:hover {
|
||||
border-left-width: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -35,7 +35,11 @@ angular.module("umbraco")
|
||||
});
|
||||
|
||||
helpService.findVideos(rq).then(function(videos){
|
||||
$scope.videos = videos;
|
||||
$scope.videos = videos;
|
||||
|
||||
angular.forEach($scope.videos, function (obj) {
|
||||
obj.thumbnail = obj.thumbnail.replace(/(\.[\w\d_-]+)$/i, '_thumb$1');
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
<li class="span2" ng-repeat="video in videos">
|
||||
<div class="thumbnail" style="margin-right: 20px">
|
||||
<a target="_blank" href="{{video.link}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv" title="{{video.title}}">
|
||||
<img ng-src="{{video.thumbnail}}" alt="{{video.title}}">
|
||||
<img ng-src="{{video.thumbnail}}" alt="{{video.title}}">
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="expand" ng-show="needTray">
|
||||
<li class="expand" ng-class="{ 'open': showTray === true }" ng-show="needTray">
|
||||
<a href ng-click="trayClick()">
|
||||
<i class="icon icon-arrow-right"></i>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user