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)
|
||||
};
|
||||
}
|
||||
)
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user