From 86c6fd5873ce2aa20120cd558f0085f2d26c9382 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 10 Dec 2019 14:07:09 +0100 Subject: [PATCH] dropdown menus for preview --- .../src/less/canvas-designer.less | 43 +++++--- .../src/preview/preview.controller.js | 98 +++++++++++++++---- .../Umbraco/Views/Preview/Index.cshtml | 20 ++-- 3 files changed, 122 insertions(+), 39 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less b/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less index ce535d796a..8f4f02089d 100644 --- a/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less +++ b/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less @@ -1,6 +1,7 @@ @import "helveticons.less"; @import "variables.less"; +@import "application/umb-outline.less"; /******* font-face *******/ @@ -43,7 +44,7 @@ body { } -.menu-bar--right-part { +.menu-bar__right-part { float: right; display: flex; flex: row; @@ -53,13 +54,13 @@ body { } } -.menu-bar--title { +.menu-bar__title { display: inline-block; padding: 11px 15px; font-weight: bold; } -.menu-bar--button { +.menu-bar__button { display: inline-block; padding: 11px 15px; border:none; @@ -73,7 +74,7 @@ body { .icon { margin-right: 10px; - font-size: 14px; + font-size: 18px; vertical-align: middle; } @@ -83,8 +84,8 @@ body { > svg { display: inline-block; - width: 12px; - height: 12px; + width: 14px; + height: 14px; fill: #fff; margin-right: 10px; vertical-align: middle; @@ -93,6 +94,8 @@ body { &:hover { background-color: lighten(@blueExtraDark, 4%); + } + &.--active { color: @pinkLight; > svg { fill: @pinkLight; @@ -104,25 +107,34 @@ body { display: inline-block; + > .menu-bar__button { + position: relative; + } + .dropdown-menu { display:none; position: absolute; float: left; - min-width: 320px; + min-width: 200px; + + border-radius: 0 3px 3px 3px; + overflow: hidden; background-color: @blueExtraDark; > button { - display: block; + position: relative; + display: list-item; text-align: left; + width: 100%; &.--active { - &::after { + &::before { content: ''; position: absolute; left:0; - width: 4px; + width: 3px; top: 0; bottom: 0; border-top-right-radius: 3px; @@ -133,9 +145,16 @@ body { } } - &:hover, &:focus, &:focus-within { + &.--open { + z-index:1; + box-shadow: 0 5px 10px 0 rgba(0,0,0,.26); + > .menu-bar__button { + z-index: @zindexDropdown + 1; + } .dropdown-menu { display:block; + z-index: @zindexDropdown; + box-shadow: 0 5px 10px 0 rgba(0,0,0,.26); } } @@ -190,7 +209,7 @@ body { } .shadow { - margin: 75px auto; + margin: 10px auto; background-color: @white; border-radius: 3px; overflow: hidden; diff --git a/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js b/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js index 3bad5ee110..40cfc18ab7 100644 --- a/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js +++ b/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js @@ -7,8 +7,29 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi .controller("previewController", function ($scope, $window, $location) { + $scope.currentCulture = {iso:'', title:'...', icon:'icon-loading'} + var cultures = []; - console.log($scope); + $scope.tabbingActive = false; + // There are a number of ways to detect when a focus state should be shown when using the tab key and this seems to be the simplest solution. + // For more information about this approach, see https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2 + function handleFirstTab(evt) { + if (evt.keyCode === 9) { + $scope.tabbingActive = true; + $scope.$digest(); + window.removeEventListener('keydown', handleFirstTab); + window.addEventListener('mousedown', disableTabbingActive); + } + } + + function disableTabbingActive(evt) { + $scope.tabbingActive = false; + $scope.$digest(); + window.removeEventListener('mousedown', disableTabbingActive); + window.addEventListener("keydown", handleFirstTab); + } + + window.addEventListener("keydown", handleFirstTab); //gets a real query string value @@ -89,6 +110,45 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi ]; $scope.previewDevice = $scope.devices[0]; + $scope.sizeOpen = false; + $scope.cultureOpen = false; + + $scope.toggleSizeOpen = function() { + $scope.sizeOpen = toggleMenu($scope.sizeOpen); + } + $scope.toggleCultureOpen = function() { + $scope.cultureOpen = toggleMenu($scope.cultureOpen); + } + + function toggleMenu(isCurrentlyOpen) { + if (isCurrentlyOpen === false) { + closeOthers(); + return true; + } else { + return false; + } + } + function closeOthers() { + $scope.sizeOpen = false; + $scope.cultureOpen = false; + } + + $scope.windowClickHandler = function() { + closeOthers(); + } + function windowBlurHandler() { + closeOthers(); + $scope.$digest(); + } + + var win = angular.element($window); + + win.on("blur", windowBlurHandler); + + $scope.$on("$destroy", function () { + win.off("blur", handleBlwindowBlurHandlerur ); + }); + function setPageUrl(){ $scope.pageId = $location.search().id || getParameterByName("id"); @@ -128,6 +188,8 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi $scope.onFrameLoaded = function (iframe) { $scope.frameLoaded = true; configureSignalR(iframe); + + $scope.currentCultureIso = $location.search().culture; }; /*****************************************************************************/ @@ -141,17 +203,30 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi /*****************************************************************************/ /* Change culture */ /*****************************************************************************/ - $scope.changeCulture = function (culture) { - if($location.search().culture !== culture){ + $scope.changeCulture = function (iso) { + if($location.search().culture !== iso) { $scope.frameLoaded = false; - $location.search("culture", culture); + $scope.currentCultureIso = iso; + $location.search("culture", iso); setPageUrl(); } }; - + /* $scope.isCurrentCulture = function(culture) { return $location.search().culture === culture; } + */ + $scope.registerCulture = function(iso, title, icon) { + var cultureObject = {iso: iso, title: title, icon: icon}; + cultures.push(cultureObject); + } + + $scope.$watch("currentCultureIso", function(oldIso, newIso) { + $scope.currentCulture = cultures.find(function(culture) { + return culture.iso === $scope.currentCultureIso; + }) + }); + }) @@ -194,15 +269,4 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi .config(function ($locationProvider) { $locationProvider.html5Mode(false); //turn html5 mode off $locationProvider.hashPrefix(''); - }) - - .controller('previewDropdownMenuController', - function ($element, $scope, angularHelper) { - - var vm = this; - - vm.onItemClicked = function (item) { - console.log("clicked", item) - }; - } - ) + }); diff --git a/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml b/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml index fb973e4b21..e14a459d9d 100644 --- a/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml +++ b/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml @@ -23,7 +23,7 @@ new BasicPath("Umbraco", IOHelper.ResolveUrl(SystemDirectories.Umbraco))) - +
@if (string.IsNullOrWhiteSpace(Model.PreviewExtendedHeaderView) == false) @@ -37,29 +37,29 @@
-
Preview Mode
+
Preview Mode
-
+
-
- +
+
-
-
- +
+
@if (Model.Languages != null && Model.Languages.Count() > 1) { foreach (var language in Model.Languages) { - } @@ -67,7 +67,7 @@
-