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

start on moving sections to new top bar

Browse Source
This commit is contained in:
Mads Rasmussen
2017-12-14 11:24:37 +01:00
parent aed476de0a
commit b29f591084
12 changed files with 253 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js Normal file
View File

@@ -0,0 +1,65 @@
(function () {
"use strict";
function AppHeaderDirective(eventsService, appState) {
function link(scope, el, attr, ctrl) {
var evts = [];
// the null is important because we do an explicit bool check on this in the view
// the avatar is by default the umbraco logo
scope.authenticated = null;
scope.avatar = [
{ value: "assets/img/application/logo.png" },
{ value: "assets/img/application/logo@2x.png" },
{ value: "assets/img/application/logo@3x.png" }
];
// when a user logs out or timesout
evts.push(eventsService.on("app.notAuthenticated", function() {
scope.authenticated = false;
}));
// when the application is ready and the user is authorized setup the data
evts.push(eventsService.on("app.ready", function(evt, data) {
scope.authenticated = true;
}));
// toggle the help dialog by raising the global app state to toggle the help drawer
scope.helpClick = function () {
var showDrawer = appState.getDrawerState("showDrawer");
var drawer = { view: "help", show: !showDrawer };
appState.setDrawerState("view", drawer.view);
appState.setDrawerState("showDrawer", drawer.show);
};
scope.avatarClick = function () {
scope.userDialog = {
view: "user",
show: true,
close: function (oldModel) {
scope.userDialog.show = false;
scope.userDialog = null;
}
};
};
}
var directive = {
transclude: true,
restrict: "E",
replace: true,
templateUrl: "views/components/application/umb-app-header.html",
link: link,
scope: {}
};
return directive;
}
angular.module("umbraco.directives").directive("umbAppHeader", AppHeaderDirective);
})();

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

@@ -18,32 +18,21 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
scope.showTray = false; //appState.getGlobalState("showTray");
scope.stickyNavigation = appState.getGlobalState("stickyNavigation");
scope.needTray = false;
scope.trayAnimation = function() {
if (scope.showTray) {
return 'slide';
}
else if (scope.showTray === false) {
return 'slide';
}
else {
return '';
}
};
function loadSections(){
sectionService.getSectionsForUser()
.then(function (result) {
scope.sections = result;
calculateHeight();
calculateWidth();
});
}
function calculateHeight(){
function calculateWidth(){
$timeout(function(){
//total height minus room for avatar and help icon
var height = $(window).height()-200;
//total width minus room for avatar, search, and help icon
var width = $(window).width()-200;
scope.totalSections = scope.sections.length;
scope.maxSections = Math.floor(height / 70);
scope.maxSections = Math.floor(width / 70);
scope.needTray = false;
if(scope.totalSections > scope.maxSections){
@@ -84,40 +73,7 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
});
//on page resize
window.onresize = calculateHeight;
scope.avatarClick = function(){
if(scope.helpDialog) {
closeHelpDialog();
}
if(!scope.userDialog) {
scope.userDialog = {
view: "user",
show: true,
close: function(oldModel) {
closeUserDialog();
}
};
} else {
closeUserDialog();
}
};
function closeUserDialog() {
scope.userDialog.show = false;
scope.userDialog = null;
}
//toggle the help dialog by raising the global app state to toggle the help drawer
scope.helpClick = function () {
var showDrawer = appState.getDrawerState("showDrawer");
var drawer = { view: "help", show: !showDrawer };
appState.setDrawerState("view", drawer.view);
appState.setDrawerState("showDrawer", drawer.show);
};
window.onresize = calculateWidth;
scope.sectionClick = function (event, section) {
@@ -154,14 +110,6 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
};
scope.trayClick = function () {
// close dialogs
if (scope.userDialog) {
closeUserDialog();
}
if (scope.helpDialog) {
closeHelpDialog();
}
if (appState.getGlobalState("showTray") === true) {
navigationService.hideTray();
} else {

6
src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
View File

@@ -11,13 +11,7 @@
function MainController($scope, $rootScope, $location, $routeParams, $timeout, $http, $log, appState, treeService, notificationsService, userService, navigationService, historyService, updateChecker, assetsService, eventsService, umbRequestHelper, tmhDynamicLocale, localStorageService, tourService) {
//the null is important because we do an explicit bool check on this in the view
//the avatar is by default the umbraco logo
$scope.authenticated = null;
$scope.avatar = [
{ value: "assets/img/application/logo.png" },
{ value: "assets/img/application/logo@2x.png" },
{ value: "assets/img/application/logo@3x.png" }
];
$scope.touchDevice = appState.getGlobalState("touchDevice");

41
src/Umbraco.Web.UI.Client/src/less/application/grid.less
View File

@@ -41,7 +41,10 @@ body {
#mainwrapper {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
}
@@ -51,11 +54,18 @@ body.umb-drawer-is-visible #mainwrapper{
#contentwrapper, #contentcolumn {
position: absolute;
top: 0px; bottom: 0px; right: 0px; left: 80px;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
z-index: 10;
margin: 0
}
#contentwrapper {
top: 60px;
}
#umb-notifications-wrapper {
left: 80px;
}
@@ -75,30 +85,9 @@ body.umb-drawer-is-visible #mainwrapper{
#leftcolumn {
height: 100%;
z-index: 1100;
width: 80px;
float: left;
position: absolute;
}
#applications {
z-index: 1000;
height: 100%;
left: 0px;
top: 0;
bottom: 0;
position: absolute;
text-align: center;
box-shadow: -10px 0px 25px rgba(0, 0, 0, 0.3)
}
#applications-tray {
z-index: 900;
left: 80px;
top: 0;
bottom: 0;
position: absolute;
height: 100%;
text-align: center;
top: 60px;
}
#search-form {
@@ -135,7 +124,7 @@ body.umb-drawer-is-visible #mainwrapper{
}
#navigation {
left: 80px;
left: 0;
top: 0;
bottom: 0;
position: absolute;
@@ -216,7 +205,7 @@ body.umb-drawer-is-visible #mainwrapper{
}
@media (min-width: 1101px) {
#contentwrapper, #umb-notifications-wrapper {left: 440px;}
#contentwrapper, #umb-notifications-wrapper {left: 360px;}
#speechbubble {left: 360px;}
}

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

@@ -81,6 +81,7 @@
@import "forms/umb-validation-label.less";
// Umbraco Components
@import "components/application/umb-app-header.less";
@import "components/application/umb-tour.less";
@import "components/application/umb-backdrop.less";
@import "components/application/umb-drawer.less";

35
src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less Normal file
View File

@@ -0,0 +1,35 @@
.umb-app-header {
background: @purple;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 100%;
height: 60px;
padding: 0 20px;
}
.umb-app-header__actions {
display: flex;
list-style: none;
align-items: center;
margin: 0;
margin-right: 10px;
}
.umb-app-header__action a {
color: @white;
opacity: 0.6;
font-size: 24px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
display: flex;
align-items: center;
}
.umb-app-header__action a:hover,
.umb-app-header__action a:focus {
opacity: 1;
outline: none;
}

2
src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
View File

@@ -5,8 +5,8 @@
left: 0;
z-index: 10;
width: @drawerWidth;
box-shadow: 0 0 20px rgba(0,0,0,0.19), 0 0 6px rgba(0,0,0,0.23);
background: @gray-9;
box-shadow: inset -5px 0 20px rgba(0,0,0,.3);
}
.umb-drawer-view {

225
src/Umbraco.Web.UI.Client/src/less/sections.less
View File

@@ -3,184 +3,91 @@
ul.sections {
margin: 0;
display: block;
background: @purple;
height: 100%;
width: 80px;
border-right: 1px solid @purple-d1;
display: flex;
margin-left: -20px;
}
ul.sections li {
display: block;
border-left: 4px @purple solid;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
transition: all .3s linear;
ul.sections>li {
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
position: relative;
}
ul.sections li [class^="icon-"],
ul.sections li [class*=" icon-"],
ul.sections li img.icon-section {
font-size: 30px;
display: inline-block;
margin: 1px 0 0 0;
color: @purple-l2;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
transition: all .3s linear;
&, &:before {
line-height: 20px !important; /* set line-height to ensure all icons use same line-height */
}
}
ul.sections:hover li [class^="icon-"],
ul.sections:hover li [class*=" icon-"],
ul.sections:hover li img.icon-section {
ul.sections>li>a {
color: @white;
}
ul.sections li a {
display: block;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
text-decoration: none;
text-align: center;
color: @white;
padding: 20px 4px 4px 0;
border-bottom: 1px solid @purple-d1;
outline: none;
cursor: pointer;
}
ul.sections>li>a .section__name {
opacity: 0.6;
transition: opacity .1s linear;
}
ul.sections>li>a::after {
content: "";
height: 4px;
width: 100%;
height: 100%;
margin: 0 0 0 -4px;
cursor: pointer; // make sure IE10 displays pointer cursor for expand and help sections.
}
ul.sections a span {
font-size: 11px;
line-height: 1.4em;
background-color: @turquoise;
position: absolute;
bottom: -4px;
border-radius: 3px 3px 0 0;
opacity: 0;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
transition: all .3s linear;
display: block;
padding: 0 2px;
transition: all .2s linear;
}
ul.sections:hover a span {
opacity: 1
ul.sections>li.current>a::after {
opacity: 1;
bottom: 0;
}
// Avatar, Section & Help icons
// -------------------------
ul.sections li.avatar {
height: 75px;
padding: 22px 0 2px 0;
text-align: center;
border-bottom: 1px solid @purple-d1;
}
ul.sections li.avatar a {
padding: 0;
border: none
}
ul.sections li.avatar a div {
border-radius: 50%;
width: 30px;
margin:0 auto;
}
ul.sections li.avatar a span {
ul.sections>li.current>a .section__name,
ul.sections>li>a:hover .section__name,
ul.sections>li>a:focus .section__name {
opacity: 1;
}
.faded ul.sections li {
opacity: 0.4
}
ul.sections li.current {
background-color: @purple-d1;
}
ul.sections li.current,
ul.sections li:hover {
border-left: 4px @turquoise-d1 solid;
}
/* Sections tray */
ul.sections li.avatar.current,
ul.sections li.avatar:hover {
border-left: 4px @purple solid;
}
ul.sections li.current a{
padding-left: 0px;
}
ul.sections li.current [class^="icon-"],
ul.sections li.current [class*=" icon-"],
ul.sections li.current img.icon-section {
color: @white;
}
ul.sections li.help {
margin: 0;
position: absolute;
bottom: 0;
left: 0;
display: block;
width: calc(100% - 5px); //subtract 4px orange border + 1px border-right for sections
}
ul.sections li.help a {
border-bottom: none;
}
@media (max-width: 500px) {
ul.sections li [class^="icon-"],
ul.sections li [class*=" icon-"] {
font-size: 25px;
}
ul.sections li:not(.avatar) a {
padding-top: 12px;
padding-bottom: 6px;
.icon, .icon-section {
display: inline-block;
padding-left: 2px;
}
}
ul.sections a span {
display:none;
}
}
// Section slide-out tray for additional apps
// -------------------------
li.expand a, li.expand{border: none !important;}
li.expand {
> a > i.icon {
transition: all .3s linear;
}
&.open > a > i.icon {
transform: rotate(180deg);
}
ul.sections>li.expand i {
height: 5px;
width: 5px;
border-radius: 50%;
background: #fff;
display: inline-block;
margin: 0 5px 0 0;
opacity: 0.6;
}
ul.sections-tray {
padding-top: 99px;
width: 80px;
& > li:first-child > a {
border-top: 1px solid @purple-d1;
}
& > li {
// 5px (instead of 4px) because of vertical border
border-left-width: 5px;
&.current, &:hover {
border-left-width: 5px;
}
}
position: absolute;
top: 60px;
left: 0;
margin: 0;
list-style: none;
background: @purple;
z-index: 10000;
border-radius: 0 0 3px 3px;
}
ul.sections-tray>li>a {
padding: 8px 24px;
color: @white;
text-decoration: none;
display: block;
}
ul.sections-tray>li>a:hover {
background: @purple-l1;
}

47
src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html Normal file
View File

@@ -0,0 +1,47 @@
<div>
<div class="umb-app-header">
<umb-sections
ng-if="authenticated"
sections="sections">
</umb-sections>
<div>
<ul class="umb-app-header__actions">
<li class="umb-app-header__action">
<a href="#" hotkey="ctrl+space" ng-click="searchClick()" prevent-default>
<i class="icon-search"></i>
</a>
</li>
<li data-element="section-help" class="umb-app-header__action">
<a href="#" hotkey="ctrl+shift+h" ng-click="helpClick()" prevent-default>
<i class="icon-help-alt"></i>
</a>
</li>
<li class="umb-app-header__action">
<a href="#" ng-click="avatarClick()" hotkey="ctrl+shift+u" title="{{user.name}}" prevent-default>
<umb-avatar
size="xs"
color="secondary"
name="{{user.name}}"
img-src="{{avatar[0].value}}"
img-srcset="{{avatar[1].value}} 2x, {{avatar[2].value}} 3x">
</umb-avatar>
</a>
</li>
</ul>
</div>
</div>
<umb-overlay
data-element="overlay-user"
ng-if="userDialog.show"
model="userDialog"
view="userDialog.view"
position="right">
</umb-overlay>
</div>

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

@@ -1,9 +1,6 @@
<div id="leftcolumn" ng-controller="Umbraco.NavigationController"
ng-mouseleave="leaveTree($event)" ng-mouseenter="enterTree($event)">
<umb-sections sections="sections" ng-if="authenticated">
</umb-sections>
<!-- navigation container -->
<div id="navigation" ng-show="showNavigation" class="fill umb-modalcolumn" ng-animate="'slide'" nav-resize>

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

@@ -1,70 +1,33 @@
<div>
<div id="applications" ng-class="{faded:stickyNavigation}">
<ul class="sections">
<li data-element="section-user" id="section-avatar" class="avatar">
<a href="#" ng-click="avatarClick()" hotkey="ctrl+shift+u" title="{{user.name}}" prevent-default>
<umb-avatar
size="xs"
color="secondary"
name="{{user.name}}"
img-src="{{avatar[0].value}}"
img-srcset="{{avatar[1].value}} 2x, {{avatar[2].value}} 3x">
</umb-avatar>
</a>
</li>
<li data-element="section-{{section.alias}}" ng-repeat="section in sections | limitTo: maxSections" ng-class="{current: section.alias == currentSection}">
<a href="#/{{section.alias}}"
ng-dblclick="sectionDblClick(section)"
ng-click="sectionClick($event, section)"
prevent-default>
<section-icon icon="{{section.cssclass}}"></section-icon>
<span>{{section.name}}</span>
<span class="section__name">{{section.name}}</span>
</a>
</li>
<li data-element="section-expand" class="expand" ng-class="{ 'open': showTray === true }" ng-show="needTray">
<a href ng-click="trayClick()">
<i class="icon icon-arrow-right"></i>
</a>
<a href ng-click="trayClick()"><i></i><i></i><i></i></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}">
<a href="#/{{section.alias}}"
ng-dblclick="sectionDblClick(section)"
ng-click="sectionClick($event, section)"
prevent-default>
<span class="section__name">{{section.name}}</span>
</a>
</li>
</ul>
</li>
<li data-element="section-help" class="help">
<a href class="help" hotkey="ctrl+shift+h" ng-click="helpClick()" prevent-default>
<i class="icon-help-alt"></i>
<span><localize key="sections_help">Help</localize></span>
</a>
</li>
</ul>
</div>
<div id="applications-tray" ng-show="showTray" ng-animate="trayAnimation()" style="display: none;">
<ul class="sections sections-tray">
<li ng-repeat="section in sections | limitTo: overflowingSections" ng-class="{current: section.alias == currentSection}">
<a href="#/{{section.alias}}"
ng-dblclick="sectionDblClick(section)"
ng-click="sectionClick($event, section)"
prevent-default>
<section-icon icon="{{section.cssclass}}"></section-icon>
<span>{{section.name}}</span>
</a>
</li>
</ul>
</div>
<umb-overlay
data-element="overlay-help"
ng-if="helpDialog.show"
model="helpDialog"
view="helpDialog.view"
position="left">
</umb-overlay>
<umb-overlay
data-element="overlay-user"
ng-if="userDialog.show"
model="userDialog"
view="userDialog.view"
position="left">
</umb-overlay>
</div>

2
src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
View File

@@ -60,6 +60,8 @@
<div id="mainwrapper" class="clearfix" ng-click="closeDialogs($event)">
<umb-app-header></umb-app-header>
<umb-navigation></umb-navigation>
<section id="contentwrapper">