dropdown menus for preview
This commit is contained in:
Niels Lyngsø
@@ -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;
|
||||
|
||||
@@ -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)
|
||||
};
|
||||
}
|
||||
)
|
||||
});
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
new BasicPath("Umbraco", IOHelper.ResolveUrl(SystemDirectories.Umbraco)))
|
||||
|
||||
</head>
|
||||
<body id="canvasdesignerPanel" ng-mouseover="outlinePositionHide()" ng-controller="previewController">
|
||||
<body id="canvasdesignerPanel" ng-mouseover="outlinePositionHide()" ng-controller="previewController" ng-class="{'tabbing-active': tabbingActive === true}" ng-click="windowClickHandler($event)">
|
||||
<div class="wait" ng-show="!frameLoaded"></div>
|
||||
|
||||
@if (string.IsNullOrWhiteSpace(Model.PreviewExtendedHeaderView) == false)
|
||||
@@ -37,29 +37,29 @@
|
||||
<div class="canvasdesigner" ng-init="showDevicesPreview = true; showDevices = !@(disableDevicePreview);" ng-mouseenter="positionSelectedHide()">
|
||||
<div class="menu-bar selected">
|
||||
|
||||
<div class="menu-bar--title">Preview Mode</div>
|
||||
<div class="menu-bar__title">Preview Mode</div>
|
||||
|
||||
<div class="menu-bar--right-part">
|
||||
<div class="menu-bar__right-part">
|
||||
|
||||
<div controller="previewDropdownMenuController" class="preview-menu-option">
|
||||
<button class="menu-bar--button"><i class="icon {{previewDevice.icon}}"></i><span>{{previewDevice.title}}</span></button>
|
||||
<div class="preview-menu-option" ng-class="{'--open': sizeOpen === true}" ng-click="$event.stopPropagation()">
|
||||
<button class="menu-bar__button umb-outline" ng-click="toggleSizeOpen()"><i class="icon {{previewDevice.icon}}"></i><span>{{previewDevice.title}}</span></button>
|
||||
<div class="dropdown-menu">
|
||||
<button ng-repeat="device in devices" class="menu-bar--button" ng-class="{ --active:previewDevice === device }" ng-click="updatePreviewDevice(device)">
|
||||
<button ng-repeat="device in devices" class="menu-bar__button umb-outline" ng-class="{ '--active':previewDevice === device }" ng-click="updatePreviewDevice(device)">
|
||||
<i class="icon {{device.icon}}"></i><span>{{device.title}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div controller="previewDropdownMenuController" class="preview-menu-option">
|
||||
<button class="menu-bar--button"><i class="icon icon-globe-europe---africa"></i><span>Desktop</span></button>
|
||||
<div class="preview-menu-option" ng-class="{'--open': cultureOpen === true}" ng-click="$event.stopPropagation()">
|
||||
<button class="menu-bar__button umb-outline" ng-click="toggleCultureOpen()"><i class="icon {{currentCulture.icon}}"></i><span>{{currentCulture.title}}</span></button>
|
||||
<div class="dropdown-menu">
|
||||
|
||||
@if (Model.Languages != null && Model.Languages.Count() > 1)
|
||||
{
|
||||
foreach (var language in Model.Languages)
|
||||
{
|
||||
<button class="menu-bar--button" ng-class="{ --active:isCurrentCulture('@language.IsoCode') }" ng-click="onItemClicked(device)">
|
||||
<button class="menu-bar__button umb-outline" ng-class="{ '--active':'@language.IsoCode' === currentCultureIso }" ng-click="changeCulture('@language.IsoCode')" ng-init="registerCulture('@language.IsoCode', '@language.CultureName', 'icon-globe-europe---africa')">
|
||||
<i class="icon icon-globe-europe---africa"></i><span>@language.CultureName</span>
|
||||
</button>
|
||||
}
|
||||
@@ -67,7 +67,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button ng-click="exitPreview()" title="Exit Preview" class="menu-bar--button"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><title>Click to end</title><path d="M5273.1 2400.1v-2c0-2.8-5-4-9.7-4s-9.7 1.3-9.7 4v2a7 7 0 002 4.9l5 4.9c.3.3.4.6.4 1v6.4c0 .4.2.7.6.8l2.9.9c.5.1 1-.2 1-.8v-7.2c0-.4.2-.7.4-1l5.1-5a7 7 0 002-4.9zm-9.7-.1c-4.8 0-7.4-1.3-7.5-1.8.1-.5 2.7-1.8 7.5-1.8s7.3 1.3 7.5 1.8c-.2.5-2.7 1.8-7.5 1.8z"></path><path d="M5268.4 2410.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1h-4.3zM5272.7 2413.7h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1zM5272.7 2417h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1 0-.5-.4-1-1-1z"></path><path d="M78.2 13l-8.7 11.7a32.5 32.5 0 11-51.9 25.8c0-10.3 4.7-19.7 12.9-25.8L21.8 13a47 47 0 1056.4 0z"></path><path d="M42.7 2.5h14.6v49.4H42.7z"></path></svg><span>Exit</span>
|
||||
<button ng-click="exitPreview()" title="Exit Preview" class="menu-bar__button umb-outline"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><title>Click to end</title><path d="M5273.1 2400.1v-2c0-2.8-5-4-9.7-4s-9.7 1.3-9.7 4v2a7 7 0 002 4.9l5 4.9c.3.3.4.6.4 1v6.4c0 .4.2.7.6.8l2.9.9c.5.1 1-.2 1-.8v-7.2c0-.4.2-.7.4-1l5.1-5a7 7 0 002-4.9zm-9.7-.1c-4.8 0-7.4-1.3-7.5-1.8.1-.5 2.7-1.8 7.5-1.8s7.3 1.3 7.5 1.8c-.2.5-2.7 1.8-7.5 1.8z"></path><path d="M5268.4 2410.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1h-4.3zM5272.7 2413.7h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1zM5272.7 2417h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1 0-.5-.4-1-1-1z"></path><path d="M78.2 13l-8.7 11.7a32.5 32.5 0 11-51.9 25.8c0-10.3 4.7-19.7 12.9-25.8L21.8 13a47 47 0 1056.4 0z"></path><path d="M42.7 2.5h14.6v49.4H42.7z"></path></svg><span>Exit</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user