Merge remote-tracking branch 'origin/temp-v8-UI' into dev-v8
This commit is contained in:
Shannon
+1
-2
@@ -32,11 +32,10 @@ angular.module("umbraco.directives")
|
||||
var wrapper = $("#mainwrapper");
|
||||
var contentPanel = $("#contentwrapper");
|
||||
var umbNotification = $("#umb-notifications-wrapper");
|
||||
var apps = $("#applications");
|
||||
var bottomBar = contentPanel.find(".umb-bottom-bar");
|
||||
var navOffeset = $("#navOffset");
|
||||
|
||||
var leftPanelWidth = ui.element.width() + apps.width();
|
||||
var leftPanelWidth = ui.element.width();
|
||||
|
||||
contentPanel.css({ left: leftPanelWidth });
|
||||
bottomBar.css({ left: leftPanelWidth });
|
||||
|
||||
+99
@@ -0,0 +1,99 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function AppHeaderDirective(eventsService, appState, userService) {
|
||||
|
||||
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.user = 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;
|
||||
scope.user = null;
|
||||
}));
|
||||
|
||||
// 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;
|
||||
scope.user = data.user;
|
||||
|
||||
if (scope.user.avatars) {
|
||||
scope.avatar = [];
|
||||
if (angular.isArray(scope.user.avatars)) {
|
||||
for (var i = 0; i < scope.user.avatars.length; i++) {
|
||||
scope.avatar.push({ value: scope.user.avatars[i] });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}));
|
||||
|
||||
evts.push(eventsService.on("app.userRefresh", function(evt) {
|
||||
userService.refreshCurrentUser().then(function(data) {
|
||||
scope.user = data;
|
||||
|
||||
if (scope.user.avatars) {
|
||||
scope.avatar = [];
|
||||
if (angular.isArray(scope.user.avatars)) {
|
||||
for (var i = 0; i < scope.user.avatars.length; i++) {
|
||||
scope.avatar.push({ value: scope.user.avatars[i] });
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}));
|
||||
|
||||
// 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 () {
|
||||
if(!scope.userDialog) {
|
||||
scope.userDialog = {
|
||||
view: "user",
|
||||
show: true,
|
||||
close: function (oldModel) {
|
||||
scope.userDialog.show = false;
|
||||
scope.userDialog = null;
|
||||
}
|
||||
};
|
||||
} else {
|
||||
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);
|
||||
|
||||
})();
|
||||
+32
-64
@@ -10,51 +10,60 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
|
||||
templateUrl: 'views/components/application/umb-sections.html',
|
||||
link: function (scope, element, attr, ctrl) {
|
||||
|
||||
var sectionItemsWidth = [];
|
||||
var evts = [];
|
||||
var maxSections = 7;
|
||||
|
||||
//setup scope vars
|
||||
scope.maxSections = 7;
|
||||
scope.maxSections = maxSections;
|
||||
scope.overflowingSections = 0;
|
||||
scope.sections = [];
|
||||
scope.currentSection = appState.getSectionState("currentSection");
|
||||
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();
|
||||
// store the width of each section so we can hide/show them based on browser width
|
||||
// we store them because the sections get removed from the dom and then we
|
||||
// can't tell when to show them gain
|
||||
$timeout(function(){
|
||||
$("#applications .sections li").each(function(index) {
|
||||
sectionItemsWidth.push($(this).outerWidth());
|
||||
});
|
||||
});
|
||||
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 windowWidth = $(window).width()-200;
|
||||
var sectionsWidth = 0;
|
||||
scope.totalSections = scope.sections.length;
|
||||
scope.maxSections = Math.floor(height / 70);
|
||||
scope.maxSections = maxSections;
|
||||
scope.overflowingSections = 0;
|
||||
scope.needTray = false;
|
||||
|
||||
// detect how many sections we can show on the screen
|
||||
for (var i = 0; i < sectionItemsWidth.length; i++) {
|
||||
var sectionItemWidth = sectionItemsWidth[i];
|
||||
sectionsWidth += sectionItemWidth;
|
||||
|
||||
if(scope.totalSections > scope.maxSections){
|
||||
scope.needTray = true;
|
||||
scope.overflowingSections = scope.maxSections - scope.totalSections;
|
||||
if(sectionsWidth > windowWidth) {
|
||||
scope.needTray = true;
|
||||
scope.maxSections = i - 1;
|
||||
scope.overflowingSections = scope.maxSections - scope.totalSections;
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var evts = [];
|
||||
|
||||
//Listen for global state changes
|
||||
evts.push(eventsService.on("appState.globalState.changed", function(e, args) {
|
||||
if (args.key === "showTray") {
|
||||
@@ -84,40 +93,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 +130,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
@@ -125,6 +125,12 @@ Use this directive to render an umbraco button. The directive can be used to gen
|
||||
|
||||
});
|
||||
|
||||
scope.clickButton = function(event) {
|
||||
if(scope.action) {
|
||||
scope.action({$event: event});
|
||||
}
|
||||
};
|
||||
|
||||
scope.$on('$destroy', function() {
|
||||
unbindStateWatcher();
|
||||
});
|
||||
|
||||
+184
-2
@@ -18,7 +18,13 @@
|
||||
$scope.page.isNew = $scope.isNew ? true : false;
|
||||
$scope.page.buttonGroupState = "init";
|
||||
$scope.allowOpen = true;
|
||||
|
||||
|
||||
// add all editors to an editors array to support split view
|
||||
$scope.editors = [];
|
||||
$scope.splitView = {
|
||||
"leftIsOpen": true,
|
||||
"rightIsOpen": false
|
||||
};
|
||||
|
||||
function init(content) {
|
||||
|
||||
@@ -45,7 +51,112 @@
|
||||
}));
|
||||
|
||||
// We don't get the info tab from the server from version 7.8 so we need to manually add it
|
||||
contentEditingHelper.addInfoTab($scope.content.tabs);
|
||||
//contentEditingHelper.addInfoTab($scope.content.tabs);
|
||||
|
||||
// prototype variants
|
||||
$scope.content.variants = [
|
||||
{
|
||||
"cultureDisplayName": "English (United States)",
|
||||
"culture": "en-US",
|
||||
"current": true,
|
||||
"segments" : [
|
||||
{
|
||||
"name": "Mobile"
|
||||
},
|
||||
{
|
||||
"name": "Job campign"
|
||||
}
|
||||
],
|
||||
"state": "Published"
|
||||
},
|
||||
{
|
||||
"cultureDisplayName": "Danish",
|
||||
"culture": "da-DK",
|
||||
"current": false,
|
||||
"segments" : [
|
||||
{
|
||||
"name": "Mobile"
|
||||
}
|
||||
],
|
||||
"state": "Published"
|
||||
},
|
||||
{
|
||||
"cultureDisplayName": "Spanish (Spain)",
|
||||
"culture": "es-ES",
|
||||
"current": false,
|
||||
"state": "Published (pending changes)"
|
||||
},
|
||||
{
|
||||
"cultureDisplayName": "French (France)",
|
||||
"culture": "fr-FR",
|
||||
"current": false,
|
||||
"segments" : [
|
||||
{
|
||||
"name": "Mobile"
|
||||
},
|
||||
{
|
||||
"name": "Job campign"
|
||||
}
|
||||
],
|
||||
"state": "Draft"
|
||||
},
|
||||
{
|
||||
"cultureDisplayName": "German (Germany)",
|
||||
"culture": "de-DE",
|
||||
"current": false,
|
||||
"state": "Draft"
|
||||
}
|
||||
];
|
||||
|
||||
// prototype content and info apps
|
||||
var contentApp = {
|
||||
"name": "Content",
|
||||
"alias": "content",
|
||||
"icon": "icon-document",
|
||||
"view": "views/content/apps/content/content.html"
|
||||
};
|
||||
|
||||
var infoApp = {
|
||||
"name": "Info",
|
||||
"alias": "info",
|
||||
"icon": "icon-info",
|
||||
"view": "views/content/apps/info/info.html"
|
||||
};
|
||||
|
||||
var listview = {
|
||||
"name": "Child items",
|
||||
"alias": "childItems",
|
||||
"icon": "icon-list",
|
||||
"view": "views/content/apps/listview/listview.html"
|
||||
};
|
||||
|
||||
$scope.content.apps = [];
|
||||
|
||||
if($scope.content.isContainer) {
|
||||
// add list view app
|
||||
$scope.content.apps.push(listview);
|
||||
|
||||
// remove the list view tab
|
||||
angular.forEach($scope.content.tabs, function(tab, index){
|
||||
if(tab.alias === "umbContainerView") {
|
||||
tab.hide = true;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
$scope.content.apps.push(contentApp);
|
||||
$scope.content.apps.push(infoApp);
|
||||
|
||||
// set first app to active
|
||||
$scope.content.apps[0].active = true;
|
||||
|
||||
// create new editor for split view
|
||||
if($scope.editors.length === 0) {
|
||||
var editor = {};
|
||||
editor.content = $scope.content;
|
||||
$scope.editors.push(editor);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -260,6 +371,10 @@
|
||||
}
|
||||
};
|
||||
|
||||
$scope.backToListView = function() {
|
||||
$location.path($scope.page.listViewPath);
|
||||
};
|
||||
|
||||
$scope.restore = function (content) {
|
||||
|
||||
$scope.page.buttonRestore = "busy";
|
||||
@@ -308,6 +423,73 @@
|
||||
|
||||
};
|
||||
|
||||
$scope.selectVariant = function(variant, variants, form) {
|
||||
// show the discard changes dialog it there are unsaved changes
|
||||
if(form.$dirty) {
|
||||
var notification = {
|
||||
view: "confirmroutechange",
|
||||
args: {
|
||||
onDiscard: function() {
|
||||
setSelectedVariant(variant, variants);
|
||||
notificationsService.remove(notification);
|
||||
form.$setPristine();
|
||||
}
|
||||
}
|
||||
};
|
||||
notificationsService.add(notification);
|
||||
return;
|
||||
}
|
||||
// switch variant if all changes are saved
|
||||
setSelectedVariant(variant, variants);
|
||||
};
|
||||
|
||||
function setSelectedVariant(selectedVariant, variants) {
|
||||
angular.forEach(variants, function(variant) {
|
||||
variant.current = false;
|
||||
});
|
||||
selectedVariant.current = true;
|
||||
}
|
||||
|
||||
$scope.closeSplitView = function(index, editor) {
|
||||
// hacky animation stuff - it will be much better when angular is upgraded
|
||||
editor.loading = true;
|
||||
editor.collapsed = true;
|
||||
$timeout(function(){
|
||||
$scope.editors.splice(index, 1);
|
||||
}, 400);
|
||||
};
|
||||
|
||||
$scope.openInSplitView = function(selectedVariant) {
|
||||
|
||||
console.log(selectedVariant);
|
||||
|
||||
var editor = {};
|
||||
// hacking animation states - these should hopefully be easier to do when we upgrade angular
|
||||
editor.collapsed = true;
|
||||
editor.loading = true;
|
||||
$scope.editors.push(editor);
|
||||
var editorIndex = $scope.editors.length - 1;
|
||||
$timeout(function(){
|
||||
$scope.editors[editorIndex].collapsed = false;
|
||||
}, 100);
|
||||
|
||||
// fake loading of content
|
||||
$timeout(function(){
|
||||
$scope.editors[editorIndex].content = angular.copy($scope.content);
|
||||
$scope.editors[editorIndex].content.name = "What a variant";
|
||||
// set selected variant on split view content
|
||||
console.log($scope.editors[editorIndex].content.variants);
|
||||
angular.forEach($scope.editors[editorIndex].content.variants, function(variant) {
|
||||
if(variant.culture === selectedVariant.culture) {
|
||||
variant.current = true;
|
||||
} else {
|
||||
variant.current = false;
|
||||
}
|
||||
});
|
||||
$scope.editors[editorIndex].loading = false;
|
||||
}, 500);
|
||||
};
|
||||
|
||||
function moveNode(node, target) {
|
||||
|
||||
contentResource.move({ "parentId": target.id, "id": node.id })
|
||||
|
||||
+76
-1
@@ -208,6 +208,51 @@ Use this directive to construct a header inside the main editor window.
|
||||
|
||||
function link(scope, el, attr, ctrl) {
|
||||
|
||||
scope.vm = {};
|
||||
scope.vm.dropdownOpen = false;
|
||||
scope.vm.currentVariant = "";
|
||||
|
||||
function onInit() {
|
||||
setCurrentVariant(scope.variants);
|
||||
setVariantStatusColor(scope.variants);
|
||||
}
|
||||
|
||||
function setCurrentVariant(variants) {
|
||||
angular.forEach(variants, function (variant) {
|
||||
if(variant.current) {
|
||||
scope.vm.currentVariant = variant;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setVariantStatusColor(variants) {
|
||||
angular.forEach(variants, function (variant) {
|
||||
angular.forEach(variant.states, function(state){
|
||||
switch (state.name) {
|
||||
case "Published":
|
||||
case "Published +":
|
||||
state.stateColor = "success";
|
||||
break;
|
||||
default:
|
||||
state.stateColor = "gray";
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
scope.goBack = function() {
|
||||
if(scope.onBack) {
|
||||
scope.onBack();
|
||||
}
|
||||
};
|
||||
|
||||
scope.selectVariant = function(event, variant) {
|
||||
if(scope.onSelectVariant) {
|
||||
scope.onSelectVariant({"variant": variant});
|
||||
scope.vm.dropdownOpen = false;
|
||||
}
|
||||
};
|
||||
|
||||
scope.openIconPicker = function() {
|
||||
scope.dialogModel = {
|
||||
view: "iconpicker",
|
||||
@@ -234,6 +279,29 @@ Use this directive to construct a header inside the main editor window.
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
scope.closeSplitView = function() {
|
||||
if(scope.onCloseSplitView) {
|
||||
scope.onCloseSplitView();
|
||||
}
|
||||
};
|
||||
|
||||
scope.openInSplitView = function(event, variant) {
|
||||
if(scope.onOpenInSplitView) {
|
||||
scope.vm.dropdownOpen = false;
|
||||
scope.onOpenInSplitView({"variant": variant});
|
||||
}
|
||||
};
|
||||
|
||||
scope.$watch('variants', function(newValue, oldValue){
|
||||
if(!newValue) return;
|
||||
if(newValue === oldValue) return;
|
||||
setCurrentVariant(newValue);
|
||||
setVariantStatusColor(newValue);
|
||||
}, true);
|
||||
|
||||
onInit();
|
||||
|
||||
}
|
||||
|
||||
var directive = {
|
||||
@@ -254,8 +322,15 @@ Use this directive to construct a header inside the main editor window.
|
||||
description: "=",
|
||||
hideDescription: "@",
|
||||
descriptionLocked: "@",
|
||||
variants: "=",
|
||||
onSelectVariant: "&",
|
||||
navigation: "=",
|
||||
key: "="
|
||||
key: "=",
|
||||
onBack: "&?",
|
||||
showBackButton: "@?",
|
||||
splitViewOpen: "=?",
|
||||
onOpenInSplitView: "&?",
|
||||
onCloseSplitView: "&?"
|
||||
},
|
||||
link: link
|
||||
};
|
||||
|
||||
@@ -40,7 +40,7 @@ angular.module('umbraco.directives')
|
||||
|
||||
$timeout(function(){
|
||||
// get list of all links in the list
|
||||
listItems = element.find("li a");
|
||||
listItems = element.find("li :tabbable");
|
||||
});
|
||||
|
||||
// Handle keydown events
|
||||
|
||||
@@ -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");
|
||||
|
||||
|
||||
@@ -62,15 +56,6 @@ function MainController($scope, $rootScope, $location, $routeParams, $timeout, $
|
||||
if ($scope.user.locale) {
|
||||
tmhDynamicLocale.set($scope.user.locale);
|
||||
}
|
||||
|
||||
if ($scope.user.avatars) {
|
||||
$scope.avatar = [];
|
||||
if (angular.isArray($scope.user.avatars)) {
|
||||
for (var i = 0; i < $scope.user.avatars.length; i++) {
|
||||
$scope.avatar.push({ value: $scope.user.avatars[i] });
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}));
|
||||
|
||||
@@ -116,16 +101,6 @@ function MainController($scope, $rootScope, $location, $routeParams, $timeout, $
|
||||
tmhDynamicLocale.set($scope.user.locale);
|
||||
}
|
||||
|
||||
if ($scope.user.avatars) {
|
||||
|
||||
$scope.avatar = [];
|
||||
if (angular.isArray($scope.user.avatars)) {
|
||||
for (var i = 0; i < $scope.user.avatars.length; i++) {
|
||||
$scope.avatar.push({ value: $scope.user.avatars[i] });
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}));
|
||||
|
||||
evts.push(eventsService.on("app.ysod", function (name, error) {
|
||||
|
||||
@@ -154,6 +154,10 @@ function NavigationController($scope, $rootScope, $location, $log, $routeParams,
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
|
||||
$scope.toggleTreeLanguageSelector = function() {
|
||||
$scope.treeLanguageSelectorIsOpen = !$scope.treeLanguageSelectorIsOpen;
|
||||
};
|
||||
|
||||
//ensure to unregister from all events!
|
||||
$scope.$on('$destroy', function () {
|
||||
|
||||
@@ -67,15 +67,14 @@
|
||||
}
|
||||
|
||||
.alert-form {
|
||||
background-color: @gray-10;
|
||||
background-color: @white;
|
||||
border: 1px solid @gray-3 !important;
|
||||
color: @gray-3;
|
||||
box-shadow: 0 -1px 6px 0 rgba(0,0,0,0.16);
|
||||
}
|
||||
|
||||
.alert-form.-no-border {
|
||||
border: none !important;
|
||||
margin-left: 1px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.alert-form h4 {
|
||||
|
||||
@@ -41,21 +41,31 @@ body {
|
||||
|
||||
#mainwrapper {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body.umb-drawer-is-visible #mainwrapper{
|
||||
left: @drawerWidth;
|
||||
right: @drawerWidth;
|
||||
}
|
||||
|
||||
#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: @appHeaderHeight;
|
||||
}
|
||||
|
||||
#umb-notifications-wrapper {
|
||||
left: 80px;
|
||||
}
|
||||
@@ -75,67 +85,13 @@ 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;
|
||||
}
|
||||
|
||||
#search-form {
|
||||
display: block;
|
||||
margin: 0;
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.form-search {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
margin-top: 17px;
|
||||
|
||||
.umb-search-field {
|
||||
width: auto;
|
||||
min-width: 160px;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
#search-form .form-search {
|
||||
width: calc(100% - 80px);
|
||||
}
|
||||
top: @appHeaderHeight;
|
||||
}
|
||||
|
||||
#navigation {
|
||||
left: 80px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
@@ -151,8 +107,7 @@ body.umb-drawer-is-visible #mainwrapper{
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
padding-top: 100px;
|
||||
border-right: 1px solid @purple-l3;
|
||||
border-right: 1px solid @gray-9;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@@ -216,12 +171,12 @@ 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;}
|
||||
}
|
||||
|
||||
//empty section modification
|
||||
.emptySection #contentwrapper, .emptySection #umb-notifications-wrapper {left: 80px;}
|
||||
.emptySection #umb-notifications-wrapper {left: 80px;}
|
||||
.emptySection #speechbubble {left: 0;}
|
||||
.emptySection #navigation {display: none}
|
||||
|
||||
@@ -232,59 +187,3 @@ body.umb-drawer-is-visible #mainwrapper{
|
||||
.login-only #speechbubble ul {
|
||||
padding-left:20px
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
// make leftcolumn smaller on tablets
|
||||
#leftcolumn {
|
||||
width: 61px;
|
||||
}
|
||||
#applications ul.sections {
|
||||
width: 61px;
|
||||
}
|
||||
ul.sections.sections-tray {
|
||||
width: 61px;
|
||||
}
|
||||
#applications-tray {
|
||||
left: 60px;
|
||||
}
|
||||
#navigation {
|
||||
left: 60px;
|
||||
}
|
||||
#contentwrapper, #contentcolumn, #umb-notifications-wrapper {
|
||||
left: 30px;
|
||||
}
|
||||
#umbracoMainPageBody .umb-modal-left.fade.in {
|
||||
margin-left: 61px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
|
||||
// make leftcolumn smaller on mobiles
|
||||
#leftcolumn {
|
||||
width: 41px;
|
||||
}
|
||||
#applications ul.sections {
|
||||
width: 41px;
|
||||
}
|
||||
#applications ul.sections-tray {
|
||||
width: 41px;
|
||||
}
|
||||
ul.sections.sections-tray {
|
||||
width: 41px;
|
||||
}
|
||||
#applications-tray {
|
||||
left: 40px;
|
||||
}
|
||||
#navigation {
|
||||
left: 40px;
|
||||
}
|
||||
#contentwrapper, #contentcolumn, #umb-notifications-wrapper {
|
||||
left: 20px;
|
||||
}
|
||||
#umbracoMainPageBody .umb-modal-left.fade.in {
|
||||
margin-left: 41px;
|
||||
width: 85%!important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -81,9 +81,15 @@
|
||||
@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";
|
||||
@import "components/application/umb-language-picker.less";
|
||||
@import "components/application/umb-dashboard.less";
|
||||
|
||||
@import "components/html/umb-expansion-panel.less";
|
||||
@import "components/html/umb-alert.less";
|
||||
|
||||
@import "components/editor.less";
|
||||
@import "components/overlays.less";
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
.umb-app-header {
|
||||
background: @purple;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 100%;
|
||||
height: @appHeaderHeight;
|
||||
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: 22px;
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
.umb-dashboard {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.umb-dashboard__header {
|
||||
padding: 20px 20px 0 20px;
|
||||
border-bottom: 1px solid @gray-9;
|
||||
}
|
||||
|
||||
.umb-dashboard__content {
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
@@ -2,11 +2,12 @@
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
left: auto;
|
||||
right: 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 {
|
||||
@@ -61,6 +62,7 @@
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16);
|
||||
}
|
||||
|
||||
.umb-help-badge:hover,
|
||||
@@ -137,6 +139,7 @@
|
||||
margin-bottom: 0;
|
||||
background: @white;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16);
|
||||
}
|
||||
|
||||
.umb-help-list:last-child {
|
||||
@@ -149,6 +152,10 @@
|
||||
border-bottom: 1px solid @gray-9;
|
||||
}
|
||||
|
||||
.umb-help-list-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.umb-help-list-item > a,
|
||||
.umb-help-list-item__content {
|
||||
display: flex;
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
.umb-language-picker {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.umb-language-picker__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px 20px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid @gray-9;
|
||||
}
|
||||
|
||||
.umb-language-picker__toggle:hover {
|
||||
background: @gray-10;
|
||||
}
|
||||
|
||||
.umb-language-picker__expand {
|
||||
color: @gray-6;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.umb-language-picker__dropdown {
|
||||
width: 100%;
|
||||
background: @white;
|
||||
box-shadow: 0 5px 5px rgba(0,0,0,.2);
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.umb-language-picker__dropdown a {
|
||||
padding: 8px 20px;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.umb-language-picker__dropdown a:hover,
|
||||
.umb-language-picker__dropdown a:focus {
|
||||
background: @gray-10;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -3,41 +3,215 @@
|
||||
*/
|
||||
|
||||
.umb-editor-wrapper {
|
||||
background: @white;
|
||||
background: @gray-10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
> form {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.umb-split-views {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.umb-editor-header {
|
||||
background: @gray-10;
|
||||
border-bottom: 1px solid @purple-l3;
|
||||
flex: 0 0 99px;
|
||||
.umb-split-view {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
position: relative;
|
||||
background: transparent;
|
||||
transition: flex-grow 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.umb-split-view--collapsed {
|
||||
flex-grow: 0.00001;
|
||||
}
|
||||
|
||||
.umb-split-view + .umb-split-view {
|
||||
border-left: 2px solid @gray-9;
|
||||
}
|
||||
|
||||
.umb-split-view__content {
|
||||
animation: fadein 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.umb-split-view--left {
|
||||
left: 0;
|
||||
right: auto;
|
||||
border-right: 1px solid @gray-10;
|
||||
}
|
||||
|
||||
.umb-split-view--right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// header
|
||||
|
||||
.umb-editor-header {
|
||||
background: @white;
|
||||
// flex: 1 1 60px;
|
||||
position: absolute;
|
||||
padding: 0 20px;
|
||||
z-index: 1;
|
||||
// box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.16);
|
||||
border-bottom: 1px solid @gray-9;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: @editorHeaderHeight;
|
||||
}
|
||||
|
||||
.umb-editor-header__back {
|
||||
color: @gray-6;
|
||||
transition: color 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.umb-editor-header__name-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.umb-editor-header__name-wrapper ng-form {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
input.umb-editor-header__name-input {
|
||||
border-color: transparent;
|
||||
background-color: @white;
|
||||
font-size: 15px;
|
||||
color: @black;
|
||||
margin-bottom: 0;
|
||||
font-weight: bold;
|
||||
box-sizing: border-box;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
background: @white;
|
||||
border: 1px solid @gray-8;
|
||||
&:hover {
|
||||
background-color: @gray-10;
|
||||
border: 1px solid @gray-8;
|
||||
}
|
||||
}
|
||||
|
||||
.umb-editor-header__actions-menu {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
a.umb-editor-header__close-split-view {
|
||||
font-size: 20px;
|
||||
color: @gray-6;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
a.umb-editor-header__close-split-view:hover {
|
||||
color: @black;
|
||||
}
|
||||
|
||||
/* variant switcher */
|
||||
.umb-variant-switcher__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
text-decoration: none !important;
|
||||
font-size: 13px;
|
||||
color: @gray-4;
|
||||
background-color: @white;
|
||||
border: 1px solid @gray-8;
|
||||
border-left: none;
|
||||
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
||||
margin-left: -1px;
|
||||
&:hover {
|
||||
background-color: @gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
.umb-variant-switcher__expand {
|
||||
color: @gray-7;
|
||||
margin-top: 3px;
|
||||
margin-left: 5px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
.umb-variant-switcher__item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid @gray-9;
|
||||
}
|
||||
|
||||
.umb-variant-switcher__item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.umb-variant-switcher_item--current .umb-variant-switcher__name-wrapper {
|
||||
background-color: @gray-10;
|
||||
border-left: 2px solid @turquoise;
|
||||
}
|
||||
|
||||
.umb-variant-switcher__item:hover,
|
||||
.umb-variant-switcher__item:focus,
|
||||
.umb-variant-switcher__name-wrapper:hover,
|
||||
.umb-variant-switcher__name-wrapper:focus {
|
||||
background-color: @gray-10;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.umb-variant-switcher__item:hover .umb-variant-switcher__split-view {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.umb-variant-switcher__name-wrapper {
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
border-left: 2px solid transparent;
|
||||
}
|
||||
|
||||
.umb-variant-switcher__name {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.umb-variant-switcher__state {
|
||||
font-size: 13px;
|
||||
color: @gray-4;
|
||||
}
|
||||
|
||||
.umb-variant-switcher__split-view {
|
||||
font-size: 13px;
|
||||
display: none;
|
||||
padding: 8px 20px;
|
||||
}
|
||||
|
||||
// container
|
||||
|
||||
.umb-editor-container {
|
||||
position: relative;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
top: @editorHeaderHeight;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
bottom: @editorFooterHeight;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
flex: 1 1 100%;
|
||||
background: @gray-10;
|
||||
}
|
||||
|
||||
.umb-editor-wrapper.-no-footer .umb-editor-container {
|
||||
@@ -48,15 +222,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.umb-editor-drawer {
|
||||
margin: 0;
|
||||
padding: 10px 20px;
|
||||
background: @gray-10;
|
||||
border-top: 1px solid @purple-l3;
|
||||
flex: 1 0 31px;
|
||||
}
|
||||
|
||||
|
||||
.umb-editor-actions{
|
||||
list-style: none;
|
||||
margin: 0; padding: 0;
|
||||
@@ -65,3 +230,35 @@
|
||||
.umb-editor-actions li{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// editor footer
|
||||
|
||||
.umb-editor-footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
height: @editorFooterHeight;
|
||||
padding: 10px 20px;
|
||||
background: @white;
|
||||
// box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.16);
|
||||
border-top: 1px solid @gray-9;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.umb-editor-footer-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.umb-editor-footer-content__right-side {
|
||||
margin-left: auto;
|
||||
flex: 0 0 auto;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.umb-editor-footer-content__left-side {
|
||||
margin-right: auto;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
+11
-19
@@ -1,20 +1,20 @@
|
||||
.umb-editor-sub-header {
|
||||
padding: 15px 0;
|
||||
margin-bottom: 30px;
|
||||
background: @white;
|
||||
padding: 10px 0;
|
||||
margin-bottom: 10px;
|
||||
background: @gray-10;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: -30px;
|
||||
margin-top: -20px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.umb-editor-sub-header.-umb-sticky-bar {
|
||||
box-shadow: 0 5px 0 rgba(0, 0, 0, 0.08), 0 1px 0 rgba(0, 0, 0, 0.16);
|
||||
transition: box-shadow 1s;
|
||||
top: 100px; /* height of header */
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
box-shadow: 0 6px 3px -3px rgba(0,0,0,.16);
|
||||
transition: box-shadow 1s;
|
||||
top: calc(@appHeaderHeight + @editorHeaderHeight);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.umb-group-builder__property-preview .umb-editor-sub-header {
|
||||
@@ -36,24 +36,16 @@
|
||||
}
|
||||
|
||||
.umb-editor-sub-header__section {
|
||||
border-left: 1px solid @gray-8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.umb-editor-sub-header__content-left .umb-editor-sub-header__section:first-child {
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.umb-editor-sub-header__content-right .umb-editor-sub-header__section {
|
||||
border-left: none;
|
||||
border-right: 1px solid @gray-8;
|
||||
}
|
||||
|
||||
.umb-editor-sub-header__content-right .umb-editor-sub-header__section:last-child {
|
||||
border-right: none;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
.umb-alert {
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
background-color: @turquoise-washed;
|
||||
border: 1px solid @turquoise;
|
||||
}
|
||||
|
||||
.umb-alert--info {
|
||||
background-color: @turquoise-washed;
|
||||
border: 1px solid @turquoise;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
.umb-expansion-panel {
|
||||
//border: 1px solid @gray-8;
|
||||
background: @white;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.umb-expansion-panel__header {
|
||||
padding: 10px 20px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
justify-content: space-between;
|
||||
color: @black;
|
||||
}
|
||||
|
||||
.umb-expansion-panel__expand {
|
||||
color: @gray-8;
|
||||
}
|
||||
|
||||
.umb-expansion-panel__content {
|
||||
padding: 20px;
|
||||
border-top: 1px solid @gray-9;
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
.umb-notifications {
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
bottom: 52px;
|
||||
bottom: @editorFooterHeight;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-bottom: none;
|
||||
|
||||
@@ -108,7 +108,7 @@
|
||||
/* ---------- OVERLAY RIGHT ---------- */
|
||||
.umb-overlay.umb-overlay-right {
|
||||
width: 500px;
|
||||
top: 0;
|
||||
top: @appHeaderHeight;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: none;
|
||||
@@ -128,7 +128,7 @@
|
||||
/* ---------- OVERLAY LEFT ---------- */
|
||||
.umb-overlay.umb-overlay-left {
|
||||
width: 500px;
|
||||
top: 0;
|
||||
top: @appHeaderHeight;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border: none;
|
||||
|
||||
@@ -1,61 +1,63 @@
|
||||
.umb-badge {
|
||||
padding: 6px 8px;
|
||||
margin: 0 5px 0 0;
|
||||
color: @black;
|
||||
background-color: @turquoise-washed;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: @turquoise;
|
||||
color: @gray-4;
|
||||
background-color: @gray-8;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
// Colors
|
||||
.umb-badge--primary {
|
||||
background-color: @turquoise-washed;
|
||||
border-color: @turquoise;
|
||||
background-color: @turquoise;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
.umb-badge--secondary {
|
||||
background-color: @purple-washed;
|
||||
border-color: @purple;
|
||||
background-color: @purple;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
.umb-badge--gray {
|
||||
background-color: @gray-10;
|
||||
border-color: @gray-8;
|
||||
background-color: @gray-8;
|
||||
color: @gray-4;
|
||||
}
|
||||
|
||||
.umb-badge--danger {
|
||||
background-color: @red-washed;
|
||||
border-color: @red;
|
||||
background-color: @red-l1;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
.umb-badge--warning {
|
||||
background-color: @yellow-washed;
|
||||
border-color: @yellow;
|
||||
background-color: @yellow-d1;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
.umb-badge--success {
|
||||
background-color: @green-washed;
|
||||
border-color: @green;
|
||||
background-color: @green;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
// Size
|
||||
.umb-badge--xxs {
|
||||
font-size: 11px;
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
.umb-badge--xs {
|
||||
font-size: 13px;
|
||||
padding: 1px 6px;
|
||||
padding: 1px 10px;
|
||||
}
|
||||
|
||||
.umb-badge--s {
|
||||
font-size: 14px;
|
||||
padding: 3px 6px;
|
||||
padding: 3px 10px;
|
||||
}
|
||||
|
||||
.umb-badge--m {
|
||||
font-size: 16px;
|
||||
padding: 6px 8px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.umb-badge--l {
|
||||
|
||||
@@ -1,16 +1,17 @@
|
||||
.umb-box {
|
||||
border: 1px solid @gray-8;
|
||||
background: @white;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 8px;
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,.16);
|
||||
}
|
||||
|
||||
.umb-box-header {
|
||||
padding: 10px 20px;
|
||||
background-color: @gray-10;
|
||||
border-bottom: 1px solid @gray-9;
|
||||
}
|
||||
|
||||
.umb-box-header-title {
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
color: @black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
.umb-content-grid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: 15px;
|
||||
}
|
||||
|
||||
.umb-content-grid__item {
|
||||
background: @gray-10;
|
||||
background: @white;
|
||||
flex: 0 1 200px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin: 10px;
|
||||
//margin: 10px;
|
||||
user-select: none;
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.umb-content-grid__item.-selected {
|
||||
@@ -19,7 +21,6 @@
|
||||
}
|
||||
|
||||
.umb-content-grid__icon-container {
|
||||
background: @gray-9;
|
||||
height: 75px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -29,8 +30,9 @@
|
||||
.umb-content-grid__icon,
|
||||
.umb-content-grid__icon[class^="icon-"],
|
||||
.umb-content-grid__icon[class*=" icon-"] {
|
||||
font-size: 40px;
|
||||
color: @gray-6;
|
||||
font-size: 20px;
|
||||
color: @gray-8;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.umb-content-grid__icon.-light {
|
||||
@@ -45,12 +47,10 @@
|
||||
|
||||
.umb-content-grid__item-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 15px;
|
||||
color: @black;
|
||||
padding-bottom: 10px;
|
||||
line-height: 1.4em;
|
||||
border-bottom: 1px solid @gray-8;
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.umb-content-grid__item-name:hover {
|
||||
|
||||
@@ -2,14 +2,22 @@
|
||||
list-style: none;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
border-left: 1px solid @gray-9;
|
||||
}
|
||||
|
||||
.umb-sub-views-nav-item {
|
||||
text-align: center;
|
||||
//margin-left: 20px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
padding: 12px 10px 8px 10px;
|
||||
min-width: 70px;
|
||||
border-right: 1px solid @gray-9;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.umb-sub-views-nav-item:focus {
|
||||
@@ -33,8 +41,10 @@
|
||||
font-size: 24px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.umb-sub-views-nav-item-text {
|
||||
font-size: 12px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
}
|
||||
50% {
|
||||
transform: scale(1);
|
||||
background: white;
|
||||
background: transparent;
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.5);
|
||||
|
||||
@@ -328,8 +328,8 @@ a.umb-package-details__back-link {
|
||||
|
||||
.umb-package-details__main-content {
|
||||
flex: 1 1 auto;
|
||||
margin-right: 30px;
|
||||
width: calc(~'100%' - ~'@{sidebarwidth}' - ~'30px'); // Make sure that the main content area doesn't gets affected by inline styling
|
||||
margin-right: 20px;
|
||||
width: calc(~'100%' - ~'@{sidebarwidth}' - ~'20px'); // Make sure that the main content area doesn't gets affected by inline styling
|
||||
}
|
||||
|
||||
.umb-package-details__sidebar {
|
||||
|
||||
@@ -3,10 +3,12 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
border: 1px solid @gray-8;
|
||||
background: @white;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
min-width: auto;
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.umb-table.umb-table-inactive {
|
||||
@@ -44,7 +46,6 @@ input.umb-table__input {
|
||||
|
||||
// Table Head Styles
|
||||
.umb-table-head {
|
||||
background-color: @gray-10;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -119,9 +120,9 @@ input.umb-table__input {
|
||||
.umb-table-body__icon[class^="icon-"],
|
||||
.umb-table-body__icon[class*=" icon-"] {
|
||||
margin: 0 auto;
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
color: @turquoise-d1;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
color: @gray-7;
|
||||
}
|
||||
|
||||
.umb-table-body__checkicon,
|
||||
@@ -129,7 +130,7 @@ input.umb-table__input {
|
||||
.umb-table-body__checkicon[class*=" icon-"] {
|
||||
display: none;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
line-height: 20px;
|
||||
color: @green;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,15 +1,3 @@
|
||||
.umb-nav-tabs {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.umb-nav-tabs.-padding-left {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.umb-tab-content {
|
||||
padding-top: 20px;
|
||||
position: relative;
|
||||
top: 22px;
|
||||
border-top: 1px solid @purple-l3;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,10 @@
|
||||
padding: 7px 0;
|
||||
}
|
||||
|
||||
.umb-permission--disabled {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.umb-permission:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@@ -20,6 +20,7 @@ label.control-label, .control-label {
|
||||
padding: 0 10px 0 0 !important;
|
||||
font-weight: bold;
|
||||
color: @black;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
min-height: 100%;
|
||||
}
|
||||
.shadow {
|
||||
box-shadow: 3px 0px 7px @gray-8;
|
||||
box-shadow: 3px 0px 7px rgba(0,0,0,0.16);
|
||||
}
|
||||
|
||||
.umb-scrollable, .umb-auto-overflow {
|
||||
@@ -128,6 +128,12 @@ h5.-black {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.umb-property:last-of-type .umb-control-group {
|
||||
border: none;
|
||||
margin-bottom: 0 !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* BLOCK MODE */
|
||||
.block-form .umb-control-group {
|
||||
border-bottom: none;
|
||||
@@ -441,15 +447,6 @@ table thead a {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#search-form .form-search div {
|
||||
margin-top:3px;
|
||||
}
|
||||
#search-form .form-search div .btn {
|
||||
position:relative;
|
||||
top:0;
|
||||
left:0;
|
||||
}
|
||||
|
||||
/* DICTIONARY */
|
||||
#dictionaryItems tr {
|
||||
border-top:solid 1px @gray-8;
|
||||
|
||||
@@ -7,10 +7,12 @@
|
||||
}
|
||||
|
||||
.umb-modalcolumn-header {
|
||||
background: @gray-10;
|
||||
border-bottom: 1px solid @purple-l3;
|
||||
height: 94px;
|
||||
padding: 5px 20px 0px 20px;
|
||||
border-bottom: 1px solid @gray-9;
|
||||
height: @editorHeaderHeight;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
@@ -19,13 +21,12 @@
|
||||
white-space: nowrap;
|
||||
font-size: @fontSizeLarge;
|
||||
font-weight: 400;
|
||||
padding-top: 10px !important;
|
||||
}
|
||||
|
||||
.umb-modalcolumn-body {
|
||||
padding: 0px;
|
||||
background: @white;
|
||||
top: 100px;
|
||||
top: @editorHeaderHeight;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
|
||||
@@ -109,11 +109,7 @@
|
||||
}
|
||||
.nav-tabs > li > a,
|
||||
.nav-pills > li > a {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
margin-right: 2px;
|
||||
line-height: 14px; // keeps the overall height an even number
|
||||
border-radius: 3px 3px 0 0;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
// TABS
|
||||
@@ -121,26 +117,24 @@
|
||||
|
||||
// Give the tabs something to sit on
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid @purple-l3;
|
||||
// border-bottom: 1px solid @gray-9;
|
||||
}
|
||||
// Make the list-items overlay the bottom border
|
||||
.nav-tabs > li {
|
||||
margin-bottom: -1px;
|
||||
// margin-bottom: -1px;
|
||||
}
|
||||
// Actual tabs (as links)
|
||||
.nav-tabs > li > a {
|
||||
color: @gray-3;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 4px;
|
||||
line-height: @baseLineHeight;
|
||||
border: 1px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
padding-bottom: 15px;
|
||||
|
||||
&:hover {
|
||||
color: @black;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: transparent transparent @purple-l3;
|
||||
// border-color: transparent transparent @purple-l3;
|
||||
}
|
||||
}
|
||||
// Active state, and it's :hover/:focus to override normal :hover/:focus
|
||||
@@ -148,9 +142,7 @@
|
||||
.nav-tabs > .active > a:hover,
|
||||
.nav-tabs > .active > a:focus {
|
||||
color: @black;
|
||||
background-color: @bodyBackground;
|
||||
border: 1px solid @purple-l3;
|
||||
border-bottom-color: transparent;
|
||||
border-bottom-color: @turquoise;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@@ -175,10 +167,6 @@
|
||||
.show-validation .nav-tabs > li.active.error > a:focus {
|
||||
}
|
||||
|
||||
.umb-nav-tabs {
|
||||
margin: -8px 0 0 0;
|
||||
}
|
||||
|
||||
// PILLS
|
||||
// -----
|
||||
|
||||
@@ -244,9 +232,9 @@
|
||||
|
||||
// DROPDOWNS
|
||||
// ---------
|
||||
|
||||
.dropdown-menu {
|
||||
border-radius: 0;
|
||||
border-radius: @dropdownBorderRadius;
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
// fix dropdown with checkbox + long text in label
|
||||
|
||||
@@ -356,8 +356,6 @@
|
||||
.umb-panel-header-content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 99px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.umb-panel-header-content {
|
||||
@@ -372,15 +370,10 @@
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.umb-panel-header-left-side.-top-position {
|
||||
position: relative;
|
||||
top: -12px;
|
||||
}
|
||||
|
||||
.umb-panel-header-icon {
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
height: 55px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -388,7 +381,7 @@
|
||||
border: 1px solid @gray-8;
|
||||
animation: fadeIn 0.5s;
|
||||
border-radius: 3px;
|
||||
width: 55px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.umb-panel-header-title-wrapper {
|
||||
@@ -425,7 +418,7 @@
|
||||
}
|
||||
|
||||
.umb-panel-header-icon .icon {
|
||||
font-size: 35px;
|
||||
font-size: 30px;
|
||||
color: @gray-7;
|
||||
}
|
||||
|
||||
@@ -435,26 +428,6 @@
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.umb-panel-header .umb-nav-tabs {
|
||||
bottom: -1px;
|
||||
}
|
||||
|
||||
input.umb-panel-header-name-input {
|
||||
border-color: @gray-8;
|
||||
font-size: 15px;
|
||||
color: @black;
|
||||
margin-bottom: 0;
|
||||
font-weight: bold;
|
||||
box-sizing: border-box;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
background: @white;
|
||||
border: 1px solid @gray-7;
|
||||
}
|
||||
}
|
||||
|
||||
input.umb-panel-header-name-input.name-is-empty {
|
||||
border: 1px dashed @gray-8;
|
||||
background: @white;
|
||||
@@ -472,8 +445,8 @@ input.umb-panel-header-description {
|
||||
margin-bottom: 0;
|
||||
font-size: 13px;
|
||||
box-sizing: border-box;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
background: @white;
|
||||
@@ -483,24 +456,7 @@ input.umb-panel-header-description {
|
||||
|
||||
.umb-panel-header-locked-description {
|
||||
font-size: 12px;
|
||||
margin-left: 2px;
|
||||
margin-top: 3px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.umb-editor-drawer-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.umb-editor-drawer-content__right-side {
|
||||
margin-left: auto;
|
||||
flex: 0 0 auto;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.umb-editor-drawer-content__left-side {
|
||||
margin-right: auto;
|
||||
padding-right: 10px;
|
||||
margin-top: 2px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
@@ -3,184 +3,113 @@
|
||||
|
||||
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: @appHeaderHeight;
|
||||
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: @appHeaderHeight;
|
||||
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;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.sections-tray>li>a::after {
|
||||
content: "";
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: @turquoise;
|
||||
position: absolute;
|
||||
border-radius: 0 3px 3px 0;
|
||||
opacity: 0;
|
||||
transition: all .2s linear;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
ul.sections-tray>li.current>a::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
ul.sections-tray>li>a .section__name {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
ul.sections-tray>li>a:hover .section__name {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -13,22 +13,20 @@ table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
table thead {
|
||||
background-color: @gray-10;
|
||||
}
|
||||
|
||||
|
||||
// BASELINE STYLES
|
||||
// ---------------
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-bottom: @baseLineHeight;
|
||||
border: 1px solid @gray-8;
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16);
|
||||
background: @tableBackground;
|
||||
border-radius: @baseBorderRadius;
|
||||
font-size: 14px;
|
||||
// Cells
|
||||
th,
|
||||
td {
|
||||
padding: 10px 8px;
|
||||
padding: 10px 20px;
|
||||
line-height: @baseLineHeight;
|
||||
text-align: left;
|
||||
border-top: 1px solid @tableBorder;
|
||||
@@ -38,6 +36,9 @@ table thead {
|
||||
}
|
||||
// Bottom align for column headings
|
||||
thead th {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
color: @gray-3;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
// Remove top border from thead by default
|
||||
|
||||
@@ -119,8 +119,10 @@
|
||||
|
||||
.umb-tree div > a.umb-options {
|
||||
visibility: hidden;
|
||||
flex: 1 0 auto;
|
||||
flex: 0 0 auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.umb-tree div:hover > a.umb-options {
|
||||
visibility: visible;
|
||||
}
|
||||
@@ -157,8 +159,9 @@
|
||||
|
||||
.umb-tree li > div a:not(.umb-options) {
|
||||
padding: 6px 0;
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.umb-tree li > div:hover a:not(.umb-options) {
|
||||
|
||||
@@ -124,9 +124,13 @@
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
@bodyBackground: @white;
|
||||
@appHeaderHeight: 55px;
|
||||
@bodyBackground: @gray-10;
|
||||
@textColor: @gray-2;
|
||||
|
||||
@editorHeaderHeight: 70px;
|
||||
@editorFooterHeight: 50px;
|
||||
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
@@ -171,10 +175,10 @@
|
||||
|
||||
// Tables
|
||||
// -------------------------
|
||||
@tableBackground: transparent; // overall background-color
|
||||
@tableBackground: @white; // overall background-color
|
||||
@tableBackgroundAccent: @gray-10; // for striping
|
||||
@tableBackgroundHover: @gray-10; // for hover
|
||||
@tableBorder: @gray-8; // table and cell border
|
||||
@tableBorder: @gray-9; // table and cell border
|
||||
|
||||
// Buttons
|
||||
// -------------------------
|
||||
@@ -223,7 +227,8 @@
|
||||
// Dropdowns
|
||||
// -------------------------
|
||||
@dropdownBackground: @white;
|
||||
@dropdownBorder: @gray-8;
|
||||
@dropdownBorder: none;
|
||||
@dropdownBorderRadius: @baseBorderRadius;
|
||||
@dropdownDividerTop: @gray-8;
|
||||
@dropdownDividerBottom: @white;
|
||||
|
||||
|
||||
@@ -1,51 +1,41 @@
|
||||
<div ng-controller="Umbraco.DashboardController">
|
||||
|
||||
<umb-load-indicator ng-if="page.loading"></umb-load-indicator>
|
||||
<form name="dashboardForm" val-form-manager>
|
||||
|
||||
<form
|
||||
ng-show="!page.loading"
|
||||
class="umb-dashboard"
|
||||
val-form-manager>
|
||||
<umb-load-indicator ng-show="page.loading"></umb-load-indicator>
|
||||
|
||||
<umb-editor-view
|
||||
footer="false"
|
||||
umb-tabs>
|
||||
<div class="umb-dashboard" ng-if="!page.loading">
|
||||
|
||||
<umb-editor-header
|
||||
name="dashboard.name"
|
||||
name-locked="page.nameLocked"
|
||||
tabs="dashboard.tabs"
|
||||
hide-icon="true"
|
||||
hide-description="true"
|
||||
hide-alias="true">
|
||||
</umb-editor-header>
|
||||
<div class="umb-dashboard__header" ng-show="dashboard.tabs.length > 1">
|
||||
<umb-tabs-nav ng-if="dashboard.tabs" model="dashboard.tabs" style="margin-bottom: 0;"></umb-tabs-nav>
|
||||
</div>
|
||||
|
||||
<umb-editor-container>
|
||||
<div class="umb-dashboard__content">
|
||||
|
||||
<umb-tabs-content view="true">
|
||||
<umb-tab id="tab{{tab.id}}" ng-repeat="tab in dashboard.tabs" rel="{{tab.id}}">
|
||||
<umb-tabs-content view="true">
|
||||
<umb-tab id="tab{{tab.id}}" ng-repeat="tab in dashboard.tabs" rel="{{tab.id}}">
|
||||
|
||||
<div ng-repeat="property in tab.properties" ng-switch on="property.serverSide">
|
||||
|
||||
<div class="clearfix" ng-switch-when="false">
|
||||
<h3 ng-show="property.caption">{{property.caption}}</h3>
|
||||
<div ng-include="property.path"></div>
|
||||
</div>
|
||||
|
||||
<div class="umb-dashboard-control clearfix" ng-switch-when="true">
|
||||
<h3 ng-show="property.caption">{{property.caption}}</h3>
|
||||
<iframe ng-src="dashboard/usercontrolproxy.aspx?ctrl={{ property.path}}"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</umb-tab>
|
||||
</umb-tabs-content>
|
||||
|
||||
<div ng-repeat="property in tab.properties" ng-switch on="property.serverSide">
|
||||
</div>
|
||||
|
||||
<div class="span12 clearfix" ng-switch-when="false">
|
||||
<h3 ng-show="property.caption">{{property.caption}}</h3>
|
||||
<div ng-include="property.path"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span12 umb-dashboard-control clearfix" ng-switch-when="true">
|
||||
<h3 ng-show="property.caption">{{property.caption}}</h3>
|
||||
|
||||
<iframe ng-src="dashboard/usercontrolproxy.aspx?ctrl={{ property.path}}"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</umb-tab>
|
||||
</umb-tabs-content>
|
||||
|
||||
</umb-editor-container>
|
||||
|
||||
</umb-editor-view>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
+8
@@ -3,6 +3,14 @@ angular.module("umbraco").controller("Umbraco.Notifications.ConfirmRouteChangeCo
|
||||
function ($scope, $location, $log, notificationsService) {
|
||||
|
||||
$scope.discard = function(not){
|
||||
|
||||
// allow for a callback for discard click
|
||||
if(not.args.onDiscard) {
|
||||
not.args.onDiscard()
|
||||
return;
|
||||
}
|
||||
|
||||
// when no callback is added run the normal functionality of the discard button
|
||||
not.args.listener();
|
||||
|
||||
$location.search("");
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
<div>
|
||||
|
||||
<div class="umb-app-header">
|
||||
|
||||
<umb-sections
|
||||
ng-if="authenticated"
|
||||
sections="sections">
|
||||
</umb-sections>
|
||||
|
||||
<div class="flex items-center">
|
||||
<ul class="umb-app-header__actions">
|
||||
<li class="umb-app-header__action">
|
||||
<a href="#" hotkey="ctrl+space" ng-click="searchClick()" prevent-default style="font-size: 20px;">
|
||||
<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>
|
||||
</ul>
|
||||
<a href="#" ng-click="avatarClick()" hotkey="ctrl+shift+u" title="{{user.name}}" prevent-default>
|
||||
<umb-avatar
|
||||
size="xxs"
|
||||
color="secondary"
|
||||
name="{{user.name}}"
|
||||
img-src="{{avatar[0].value}}"
|
||||
img-srcset="{{avatar[1].value}} 2x, {{avatar[2].value}} 3x">
|
||||
</umb-avatar>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<umb-overlay
|
||||
data-element="overlay-user"
|
||||
ng-if="userDialog.show"
|
||||
model="userDialog"
|
||||
view="userDialog.view"
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,88 +1,33 @@
|
||||
<div id="leftcolumn" ng-controller="Umbraco.NavigationController"
|
||||
ng-mouseleave="leaveTree($event)" ng-mouseenter="enterTree($event)">
|
||||
|
||||
<umb-sections sections="sections" ng-if="authenticated">
|
||||
</umb-sections>
|
||||
<div id="leftcolumn" ng-controller="Umbraco.NavigationController" ng-mouseleave="leaveTree($event)" ng-mouseenter="enterTree($event)">
|
||||
|
||||
<!-- navigation container -->
|
||||
<div id="navigation" ng-show="showNavigation" class="fill umb-modalcolumn" ng-animate="'slide'" nav-resize>
|
||||
|
||||
<div ng-swipe-left="nav.hideNavigation()" class="navigation-inner-container span6">
|
||||
<div ng-swipe-left="nav.hideNavigation()" class="navigation-inner-container">
|
||||
|
||||
<!-- the search -->
|
||||
<div ng-controller="Umbraco.SearchController" ng-if="authenticated">
|
||||
|
||||
<!-- Search form -->
|
||||
<div data-element="global-search" id="search-form">
|
||||
<div class="umb-modalcolumn-header">
|
||||
|
||||
<form class="form-search" novalidate>
|
||||
<i class="icon-search"></i>
|
||||
<input data-element="global-search-field"
|
||||
type="text"
|
||||
hotkey="ctrl+space"
|
||||
id="search-field"
|
||||
ng-model="searchTerm"
|
||||
class="umb-search-field search-query search-input"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_search"
|
||||
ng-keydown="navigateResults($event)"
|
||||
no-dirty-check />
|
||||
</form>
|
||||
</div>
|
||||
<!--
|
||||
<div ng-if="currentSection === 'content'" class="umb-language-picker">
|
||||
|
||||
<div class="umb-language-picker__toggle" ng-click="toggleTreeLanguageSelector()">
|
||||
<div>English (United States)</div>
|
||||
<ins class="umb-language-picker__expand" ng-class="{'icon-navigation-down': !treeLanguageSelectorIsOpen, 'icon-navigation-up': treeLanguageSelectorIsOpen}" class="icon-navigation-right"> </ins>
|
||||
</div>
|
||||
|
||||
<!-- Search results -->
|
||||
<div id="search-results" class="umb-modalcolumn-body" ng-show="showSearchResults">
|
||||
|
||||
<umb-load-indicator ng-if="isSearching"></umb-load-indicator>
|
||||
|
||||
<umb-empty-state ng-if="!hasResults && !isSearching"
|
||||
position="center">
|
||||
<localize key="general_searchNoResult"></localize>
|
||||
</umb-empty-state>
|
||||
|
||||
<ul class="umb-tree" ng-if="!isSearching && hasResults">
|
||||
<li class="root">
|
||||
<div>
|
||||
<h5 class="umb-tree-header"><localize key="general_searchResults">Search results</localize></h5>
|
||||
</div>
|
||||
|
||||
<div class="umb-search-group" ng-repeat="(key, group) in groups">
|
||||
<h6 class="umb-tree-header">{{key}}</h6>
|
||||
<ul>
|
||||
<li ng-repeat="result in group.results" ng-class="{'current':selectedItem == result}">
|
||||
<div class="umb-search-group-item">
|
||||
<a class="umb-search-group-item-link" ng-class="{'first':$first}" ng-click="searchHide()" ng-href="#/{{result.editorPath}}">
|
||||
|
||||
<div class="umb-search-group-item-name">
|
||||
<i class="icon umb-tree-icon sprTree {{result.icon}}"></i>
|
||||
{{result.name}}
|
||||
</div>
|
||||
|
||||
<small class="search-subtitle" ng-show="result.subTitle">
|
||||
{{result.subTitle}}
|
||||
</small>
|
||||
</a>
|
||||
|
||||
<a href ng-hide="!result.menuUrl" ng-click="searchShowMenu($event, {node: result})" class="umb-options"><i></i><i></i><i></i></a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<div class="umb-language-picker__dropdown" ng-if="treeLanguageSelectorIsOpen">
|
||||
<a href="">Spanish (Spain)</a>
|
||||
<a href="">French (France)</a>
|
||||
<a href="">Danish</a>
|
||||
<a href="">German (Germany)</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- the tree -->
|
||||
<div id="tree" class="umb-modalcolumn-body" ng-if="authenticated">
|
||||
<umb-tree cachekey="_"
|
||||
eventhandler="treeEventHandler"
|
||||
section="{{currentSection}}">
|
||||
<div id="tree" ng-if="authenticated">
|
||||
<umb-tree
|
||||
cachekey="_"
|
||||
eventhandler="treeEventHandler"
|
||||
section="{{currentSection}}">
|
||||
</umb-tree>
|
||||
</div>
|
||||
</div>
|
||||
@@ -91,18 +36,17 @@
|
||||
|
||||
<!-- The context menu -->
|
||||
<div id='contextMenu' class="umb-modalcolumn fill shadow" ng-swipe-left="nav.hideMenu()" ng-show="showContextMenu" ng-animate="'slide'">
|
||||
<umb-context-menu menu-dialog-title="{{menuDialogTitle}}"
|
||||
current-section="{{currentSection}}"
|
||||
current-node="menuNode"
|
||||
menu-actions="menuActions">
|
||||
<umb-context-menu
|
||||
menu-dialog-title="{{menuDialogTitle}}"
|
||||
current-section="{{currentSection}}"
|
||||
current-node="menuNode"
|
||||
menu-actions="menuActions">
|
||||
</umb-context-menu>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Tree dialogs -->
|
||||
<div id="dialog" class='umb-modalcolumn fill shadow'
|
||||
ng-swipe-left="nav.hideDialog()"
|
||||
ng-show="showContextMenuDialog" ng-animate="'slide'">
|
||||
<div id="dialog" class='umb-modalcolumn fill shadow' ng-swipe-left="nav.hideDialog()" ng-show="showContextMenuDialog" ng-animate="'slide'">
|
||||
<div class='umb-modalcolumn-header'>
|
||||
<h1>{{menuDialogTitle}}</h1>
|
||||
</div>
|
||||
@@ -112,4 +56,4 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -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>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
<div ng-if="state !== 'init'" class="umb-button__overlay"></div>
|
||||
|
||||
<a ng-if="type === 'link'" href="{{href}}" class="btn umb-button__button {{style}} umb-button--{{size}}" ng-click="action(model)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}">
|
||||
<a ng-if="type === 'link'" href="{{href}}" class="btn umb-button__button {{style}} umb-button--{{size}}" ng-click="clickButton($event)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}">
|
||||
<span class="umb-button__content" ng-class="{'-hidden': state !== 'init'}">
|
||||
<i ng-if="icon" class="{{icon}} umb-button__icon"></i>
|
||||
<localize ng-if="labelKey" key="{{labelKey}}">{{label}}</localize>
|
||||
@@ -16,7 +16,7 @@
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<button ng-if="type === 'button'" type="button" class="btn umb-button__button {{style}} umb-button--{{size}}" ng-click="action(model)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}" ng-disabled="disabled">
|
||||
<button ng-if="type === 'button'" type="button" class="btn umb-button__button {{style}} umb-button--{{size}}" ng-click="clickButton($event)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}" ng-disabled="disabled">
|
||||
<span class="umb-button__content" ng-class="{'-hidden': state !== 'init'}">
|
||||
<i ng-if="icon" class="{{icon}} umb-button__icon"></i>
|
||||
<localize ng-if="labelKey" key="{{labelKey}}">{{label}}</localize>
|
||||
|
||||
@@ -1,108 +1,96 @@
|
||||
<div>
|
||||
|
||||
<umb-load-indicator ng-if="page.loading"></umb-load-indicator>
|
||||
<umb-load-indicator ng-if="page.loading"></umb-load-indicator>
|
||||
|
||||
<form name="contentForm"
|
||||
ng-submit="save()"
|
||||
novalidate
|
||||
val-form-manager>
|
||||
<form name="contentForm" ng-submit="save()" novalidate val-form-manager>
|
||||
|
||||
<umb-editor-view ng-if="!page.loading" umb-tabs>
|
||||
|
||||
<umb-editor-header
|
||||
menu="page.menu"
|
||||
name="content.name"
|
||||
tabs="content.tabs"
|
||||
hide-icon="true"
|
||||
hide-description="true"
|
||||
hide-alias="true">
|
||||
</umb-editor-header>
|
||||
|
||||
<umb-editor-container>
|
||||
<umb-tabs-content class="form-horizontal" view="true">
|
||||
|
||||
<umb-tab id="tab{{tab.id}}" ng-repeat="tab in content.tabs" rel="{{tab.id}}">
|
||||
<umb-editor-view ng-if="!page.loading">
|
||||
|
||||
<div class="umb-split-views">
|
||||
<div class="umb-split-view" ng-class="{'umb-split-view--collapsed': editor.collapsed}" ng-repeat="editor in editors">
|
||||
|
||||
<!-- Other tabs than info -->
|
||||
<div ng-if="tab.id !== -1 && tab.alias !== '_umb_infoTab'">
|
||||
<umb-property data-element="property-{{property.alias}}" ng-repeat="property in tab.properties" property="property">
|
||||
<umb-editor model="property"></umb-editor>
|
||||
</umb-property>
|
||||
</div>
|
||||
|
||||
<!-- Info tab -->
|
||||
<div ng-if="tab.id === -1 && tab.alias === '_umb_infoTab'">
|
||||
<umb-content-node-info
|
||||
ng-if="content"
|
||||
node="content">
|
||||
</umb-content-node-info>
|
||||
<umb-load-indicator
|
||||
ng-if="editor.loading">
|
||||
</umb-load-indicator>
|
||||
|
||||
<div class="umb-split-view__content" ng-if="!editor.loading">
|
||||
<umb-editor-header
|
||||
menu="page.menu"
|
||||
name="editor.content.name"
|
||||
hide-icon="true"
|
||||
hide-description="true"
|
||||
hide-alias="true"
|
||||
navigation="editor.content.apps"
|
||||
variants="editor.content.variants"
|
||||
on-select-variant="selectVariant(variant, editor.content.variants, contentForm)"
|
||||
on-back="backToListView()"
|
||||
show-back-button="{{page.listViewPath}}"
|
||||
split-view-open="editors.length > 1"
|
||||
on-open-in-split-view="openInSplitView(variant)"
|
||||
on-close-split-view="closeSplitView($index, editor)">
|
||||
</umb-editor-header>
|
||||
|
||||
<umb-editor-container>
|
||||
<umb-editor-sub-views
|
||||
ng-if="!page.loading"
|
||||
sub-views="editor.content.apps"
|
||||
model="editor.content">
|
||||
</umb-editor-sub-views>
|
||||
</umb-editor-container>
|
||||
</div>
|
||||
|
||||
</umb-tab>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</umb-tabs-content>
|
||||
<umb-editor-footer>
|
||||
|
||||
</umb-editor-container>
|
||||
<umb-editor-footer-content-left>
|
||||
|
||||
<umb-breadcrumbs
|
||||
ng-if="ancestors && ancestors.length > 0"
|
||||
ancestors="ancestors"
|
||||
entity-type="content">
|
||||
</umb-breadcrumbs>
|
||||
|
||||
</umb-editor-footer-content-left>
|
||||
|
||||
|
||||
<umb-editor-footer>
|
||||
<umb-editor-footer-content-right>
|
||||
|
||||
<umb-editor-footer-content-left>
|
||||
<umb-button
|
||||
alias="preview"
|
||||
ng-if="!page.isNew && content.allowPreview"
|
||||
type="button"
|
||||
button-style="info"
|
||||
action="preview(content)"
|
||||
label="Preview page"
|
||||
label-key="buttons_showPage">
|
||||
</umb-button>
|
||||
|
||||
<umb-breadcrumbs
|
||||
ng-if="ancestors && ancestors.length > 0"
|
||||
ancestors="ancestors"
|
||||
entity-type="content">
|
||||
</umb-breadcrumbs>
|
||||
<umb-button-group
|
||||
ng-if="defaultButton && !content.trashed"
|
||||
default-button="defaultButton"
|
||||
sub-buttons="subButtons"
|
||||
state="page.buttonGroupState"
|
||||
direction="up"
|
||||
float="right">
|
||||
</umb-button-group>
|
||||
|
||||
</umb-editor-footer-content-left>
|
||||
|
||||
|
||||
<umb-editor-footer-content-right>
|
||||
|
||||
<umb-button
|
||||
alias="returnToListView"
|
||||
ng-if="page.listViewPath"
|
||||
type="link"
|
||||
href="#{{page.listViewPath}}"
|
||||
label="Return to list"
|
||||
label-key="buttons_returnToList">
|
||||
</umb-button>
|
||||
<umb-button
|
||||
alias="restore"
|
||||
ng-if="content.trashed"
|
||||
type="button"
|
||||
button-style="primary"
|
||||
action="restore(content)"
|
||||
state="page.buttonRestore"
|
||||
label="Restore">
|
||||
</umb-button>
|
||||
|
||||
<umb-button
|
||||
alias="preview"
|
||||
ng-if="!page.isNew && content.allowPreview"
|
||||
type="button"
|
||||
button-style="info"
|
||||
action="preview(content)"
|
||||
label="Preview page"
|
||||
label-key="buttons_showPage">
|
||||
</umb-button>
|
||||
</umb-editor-footer-content-right>
|
||||
|
||||
<umb-button-group
|
||||
ng-if="defaultButton && !content.trashed"
|
||||
default-button="defaultButton"
|
||||
sub-buttons="subButtons"
|
||||
state="page.buttonGroupState"
|
||||
direction="up"
|
||||
float="right">
|
||||
</umb-button-group>
|
||||
</umb-editor-footer>
|
||||
|
||||
<umb-button
|
||||
alias="restore"
|
||||
ng-if="content.trashed"
|
||||
type="button"
|
||||
button-style="primary"
|
||||
action="restore(content)"
|
||||
state="page.buttonRestore"
|
||||
label="Restore">
|
||||
</umb-button>
|
||||
</umb-editor-view>
|
||||
|
||||
</umb-editor-footer-content-right>
|
||||
|
||||
</umb-editor-footer>
|
||||
|
||||
</umb-editor-view>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
+1
-1
@@ -1 +1 @@
|
||||
<div class="umb-editor-drawer-content__left-side" ng-transclude></div>
|
||||
<div class="umb-editor-footer-content__left-side" ng-transclude></div>
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
<div class="umb-editor-drawer-content__right-side" ng-transclude></div>
|
||||
<div class="umb-editor-footer-content__right-side" ng-transclude></div>
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
<div data-element="editor-footer" class="umb-tab-buttons umb-editor-drawer">
|
||||
|
||||
<div class="umb-editor-drawer-content" ng-transclude>
|
||||
|
||||
</div>
|
||||
<div data-element="editor-footer" class="umb-editor-footer">
|
||||
|
||||
<div class="umb-editor-footer-content" ng-transclude></div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,90 +1,109 @@
|
||||
<div data-element="editor-header" class="umb-editor-header umb-panel-header">
|
||||
<div data-element="editor-header" class="umb-editor-header">
|
||||
|
||||
<div class="flex items-center" style="height: 100%;">
|
||||
|
||||
<div class="umb-panel-header-content-wrapper">
|
||||
<div ng-if="showBackButton === 'true' && splitViewOpen !== true" style="margin-right: 15px;">
|
||||
<a class="umb-editor-header__back" href="#" ng-click="goBack()" prevent-default>
|
||||
<i class="fa fa-arrow-left" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="umb-panel-header-content">
|
||||
<div class="flex items-center" style="flex: 1;">
|
||||
|
||||
<div class="umb-panel-header-left-side" ng-class="{'-top-position': tabs || !icon && hideDescription}">
|
||||
|
||||
<ng-form data-element="editor-icon" name="iconForm">
|
||||
<div class="umb-panel-header-icon" ng-if="!hideIcon" ng-click="openIconPicker()" ng-class="{'-placeholder': $parent.icon==='' || $parent.icon===null}" title="{{$parent.icon}}">
|
||||
<i class="icon {{$parent.icon}}" ng-if="$parent.icon!=='' && $parent.icon!==null"></i>
|
||||
<div class="umb-panel-header-icon-text" ng-if="$parent.icon==='' || $parent.icon===null">
|
||||
<localize key="settings_addIcon"></localize>
|
||||
</div>
|
||||
</div>
|
||||
</ng-form>
|
||||
|
||||
<div class="umb-panel-header-title-wrapper">
|
||||
|
||||
<ng-form name="headerNameForm">
|
||||
<input
|
||||
data-element="editor-name-field"
|
||||
title="{{key}}"
|
||||
type="text"
|
||||
class="umb-panel-header-name-input"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_entername"
|
||||
name="headerName"
|
||||
ng-show="!nameLocked"
|
||||
ng-model="name"
|
||||
ng-class="{'name-is-empty': $parent.name===null || $parent.name===''}"
|
||||
umb-auto-focus
|
||||
val-server-field="Name"
|
||||
required />
|
||||
</ng-form>
|
||||
|
||||
<div class="umb-panel-header-name" ng-if="nameLocked" title="{{key}}">{{ name }}</div>
|
||||
|
||||
<umb-generate-alias
|
||||
data-element="editor-alias"
|
||||
class="umb-panel-header-alias"
|
||||
ng-if="!hideAlias"
|
||||
alias="$parent.alias"
|
||||
alias-from="$parent.name"
|
||||
enable-lock="true"
|
||||
server-validation-field="Alias">
|
||||
</umb-generate-alias>
|
||||
|
||||
|
||||
<input
|
||||
data-element="editor-description"
|
||||
type="text"
|
||||
class="umb-panel-header-description"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_enterDescription"
|
||||
ng-if="!hideDescription && !descriptionLocked"
|
||||
ng-model="$parent.description" />
|
||||
|
||||
<div class="umb-panel-header-locked-description" ng-show="descriptionLocked">{{ description }}</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="umb-editor-header__actions-menu">
|
||||
<umb-editor-menu
|
||||
data-element="editor-actions"
|
||||
ng-if="menu.currentNode"
|
||||
current-node="menu.currentNode"
|
||||
current-section="{{menu.currentSection}}">
|
||||
</umb-editor-menu>
|
||||
<ng-form data-element="editor-icon" name="iconForm">
|
||||
<div class="umb-panel-header-icon" ng-if="!hideIcon" ng-click="openIconPicker()" ng-class="{'-placeholder': $parent.icon==='' || $parent.icon===null}"
|
||||
title="{{$parent.icon}}">
|
||||
<i class="icon {{$parent.icon}}" ng-if="$parent.icon!=='' && $parent.icon!==null"></i>
|
||||
<div class="umb-panel-header-icon-text" ng-if="$parent.icon==='' || $parent.icon===null">
|
||||
<localize key="settings_addIcon"></localize>
|
||||
</div>
|
||||
</div>
|
||||
</ng-form>
|
||||
|
||||
<div style="flex: 1 1 auto;">
|
||||
|
||||
<div class="umb-editor-header__name-wrapper">
|
||||
<ng-form name="headerNameForm">
|
||||
<input
|
||||
data-element="editor-name-field"
|
||||
title="{{key}}"
|
||||
type="text"
|
||||
class="umb-editor-header__name-input"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_entername"
|
||||
name="headerName"
|
||||
ng-show="!nameLocked"
|
||||
ng-model="name"
|
||||
ng-class="{'name-is-empty': $parent.name===null || $parent.name===''}"
|
||||
umb-auto-focus
|
||||
val-server-field="Name"
|
||||
required />
|
||||
</ng-form>
|
||||
|
||||
<umb-generate-alias
|
||||
data-element="editor-alias"
|
||||
class="umb-panel-header-alias"
|
||||
ng-if="!hideAlias"
|
||||
alias="$parent.alias"
|
||||
alias-from="$parent.name"
|
||||
enable-lock="true"
|
||||
server-validation-field="Alias">
|
||||
</umb-generate-alias>
|
||||
|
||||
<a ng-if="variants.length > 0" class="umb-variant-switcher__toggle" href="" ng-click="vm.dropdownOpen = !vm.dropdownOpen">
|
||||
<span>{{vm.currentVariant.cultureDisplayName}}</span>
|
||||
<ins class="umb-variant-switcher__expand" ng-class="{'icon-navigation-down': !vm.dropdownOpen, 'icon-navigation-up': vm.dropdownOpen}"> </ins>
|
||||
</a>
|
||||
|
||||
<umb-dropdown ng-if="vm.dropdownOpen" style="width: 100%; max-height: 250px; overflow-y: scroll; margin-top: 5px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
|
||||
<umb-dropdown-item class="umb-variant-switcher__item" ng-class="{'umb-variant-switcher_item--current': variant.current}" ng-repeat="variant in variants">
|
||||
<a href="" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, variant)" prevent-default>
|
||||
<span class="umb-variant-switcher__name">{{variant.cultureDisplayName}}</span>
|
||||
<span class="umb-variant-switcher__state">{{variant.state}}</span>
|
||||
</a>
|
||||
<div ng-if="splitViewOpen !== true" class="umb-variant-switcher__split-view" ng-click="openInSplitView($event, variant)">Open in split view</div>
|
||||
</umb-dropdown-item>
|
||||
</umb-dropdown>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="umb-panel-header-name" ng-if="nameLocked" title="{{key}}">{{ name }}</div>
|
||||
|
||||
<input
|
||||
data-element="editor-description"
|
||||
type="text"
|
||||
class="umb-panel-header-description"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_enterDescription"
|
||||
ng-if="!hideDescription && !descriptionLocked"
|
||||
ng-model="$parent.description" />
|
||||
|
||||
<div class="umb-panel-header-locked-description" ng-show="descriptionLocked">{{ description }}</div>
|
||||
|
||||
</div>
|
||||
|
||||
<umb-editor-navigation
|
||||
data-element="editor-sub-views"
|
||||
ng-if="navigation"
|
||||
navigation="navigation">
|
||||
</umb-editor-navigation>
|
||||
|
||||
</div>
|
||||
|
||||
<umb-tabs-nav
|
||||
data-element="editor-tabs"
|
||||
ng-if="tabs"
|
||||
model="tabs">
|
||||
</umb-tabs-nav>
|
||||
<div ng-if="splitViewOpen" style="margin-left: 20px;">
|
||||
<a class="umb-editor-header__close-split-view" href="" ng-click="closeSplitView()">
|
||||
<i class="icon-delete"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div ng-if="navigation && splitViewOpen !== true" style="margin-left: 20px;">
|
||||
<umb-editor-navigation
|
||||
data-element="editor-sub-views"
|
||||
navigation="navigation">
|
||||
</umb-editor-navigation>
|
||||
</div>
|
||||
|
||||
<div ng-if="menu.currentNode && splitViewOpen !== true" style="margin-left: 20px;">
|
||||
<umb-editor-menu
|
||||
data-element="editor-actions"
|
||||
current-node="menu.currentNode"
|
||||
current-section="{{menu.currentSection}}">
|
||||
</umb-editor-menu>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -96,4 +115,4 @@
|
||||
view="dialogModel.view">
|
||||
</umb-overlay>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,16 +1,14 @@
|
||||
<div>
|
||||
<ul class="umb-sub-views-nav" ng-if="showNavigation">
|
||||
<li ng-repeat="item in navigation">
|
||||
<a data-element="sub-view-{{item.alias}}"
|
||||
tabindex="-1"
|
||||
class="umb-sub-views-nav-item"
|
||||
href=""
|
||||
ng-click="clickNavigationItem(item)"
|
||||
hotkey="{{$index+1}}"
|
||||
ng-class="{'is-active': item.active, '-has-error': item.hasError}">
|
||||
<i class="icon {{ item.icon }}"></i>
|
||||
<span class="umb-sub-views-nav-item-text">{{ item.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="umb-sub-views-nav" ng-if="showNavigation">
|
||||
<li ng-repeat="item in navigation">
|
||||
<a data-element="sub-view-{{item.alias}}"
|
||||
tabindex="-1"
|
||||
class="umb-sub-views-nav-item"
|
||||
href=""
|
||||
ng-click="clickNavigationItem(item)"
|
||||
hotkey="{{$index+1}}"
|
||||
ng-class="{'is-active': item.active, '-has-error': item.hasError}">
|
||||
<i class="icon {{ item.icon }}"></i>
|
||||
<span class="umb-sub-views-nav-item-text">{{ item.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -8,13 +8,12 @@
|
||||
|
||||
<i ng-if="item.selected" class="icon-check umb-content-grid__checkmark"></i>
|
||||
|
||||
<div class="umb-content-grid__icon-container">
|
||||
<i class="umb-content-grid__icon {{ item.icon }}" ng-class="{'-light': !item.published && item.updater != null}"></i>
|
||||
</div>
|
||||
|
||||
<div class="umb-content-grid__content">
|
||||
|
||||
<div class="umb-content-grid__item-name" ng-click="clickItemName(item, $event, $index)" ng-class="{'-light': !item.published && item.updater != null}">{{ item.name }}</div>
|
||||
<div class="umb-content-grid__item-name" ng-click="clickItemName(item, $event, $index)" ng-class="{'-light': !item.published && item.updater != null}">
|
||||
<i class="umb-content-grid__icon {{ item.icon }}"></i>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
|
||||
<ul class="umb-content-grid__details-list" ng-class="{'-light': !item.published&& item.updater != null}">
|
||||
<li class="umb-content-grid__details-item" ng-repeat="property in contentProperties">
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function ContentAppContentController($scope) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
function onInit() {
|
||||
angular.forEach($scope.model.tabs, function(group){
|
||||
group.open = true;
|
||||
});
|
||||
}
|
||||
|
||||
onInit();
|
||||
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.Content.Apps.ContentController", ContentAppContentController);
|
||||
})();
|
||||
@@ -0,0 +1,18 @@
|
||||
<div class="form-horizontal" ng-controller="Umbraco.Editors.Content.Apps.ContentController as vm">
|
||||
|
||||
<div class="umb-expansion-panel" ng-repeat="group in model.tabs | filter: { hide : '!' + true }">
|
||||
|
||||
<div class="umb-expansion-panel__header" ng-click="group.open = !group.open">
|
||||
<div>{{ group.label }}</div>
|
||||
<ins class="umb-expansion-panel__expand" ng-class="{'icon-navigation-down': !group.open, 'icon-navigation-up': group.open}" class="icon-navigation-right"> </ins>
|
||||
</div>
|
||||
|
||||
<div class="umb-expansion-panel__content" ng-show="group.open">
|
||||
<umb-property data-element="property-{{group.alias}}" ng-repeat="property in group.properties" property="property">
|
||||
<umb-editor model="property"></umb-editor>
|
||||
</umb-property>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,4 @@
|
||||
<umb-content-node-info
|
||||
ng-if="model"
|
||||
node="model">
|
||||
</umb-content-node-info>
|
||||
@@ -0,0 +1,23 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function ContentAppListViewController($scope) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
vm.listViewGroup = {};
|
||||
|
||||
function onInit() {
|
||||
angular.forEach($scope.model.tabs, function(group){
|
||||
if(group.alias === "umbContainerView") {
|
||||
vm.listViewGroup = group;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onInit();
|
||||
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.Content.Apps.ListViewController", ContentAppListViewController);
|
||||
})();
|
||||
@@ -0,0 +1,7 @@
|
||||
<div ng-controller="Umbraco.Editors.Content.Apps.ListViewController as vm">
|
||||
|
||||
<umb-property ng-repeat="property in vm.listViewGroup.properties" property="property">
|
||||
<umb-editor model="property"></umb-editor>
|
||||
</umb-property>
|
||||
|
||||
</div>
|
||||
@@ -1,12 +1,15 @@
|
||||
<div class="umb-dialog umb-pane" ng-controller="Umbraco.Editors.Content.DeleteController">
|
||||
<div class="umb-dialog-body" auto-scale="90">
|
||||
|
||||
|
||||
<p class="umb-abstract">
|
||||
<localize key="defaultdialogs_confirmdelete">Are you sure you want to delete</localize> <strong>{{currentNode.name}}</strong> ?
|
||||
</p>
|
||||
|
||||
<umb-confirm on-confirm="performDelete" on-cancel="cancel">
|
||||
</umb-confirm>
|
||||
<div class="umb-alert umb-alert--info">
|
||||
<localize key="defaultdialogs_variantdeletewarning">This will delete the node and all its languages. If you only want to delete one language go and unpublish it instead.</localize>
|
||||
</div>
|
||||
|
||||
<umb-confirm on-confirm="performDelete" on-cancel="cancel"></umb-confirm>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -20,33 +20,38 @@
|
||||
|
||||
|
||||
<umb-editor-container class="form-horizontal">
|
||||
|
||||
<umb-box>
|
||||
|
||||
<umb-property property="properties.selectedEditor">
|
||||
<div>
|
||||
<select name="selectedEditor"
|
||||
ng-model="content.selectedEditor"
|
||||
required
|
||||
ng-options="e.alias as e.name for e in content.availableEditors"></select>
|
||||
<span class="help-inline" val-msg-for="selectedEditor" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
|
||||
</div>
|
||||
<umb-box-content>
|
||||
|
||||
</umb-property>
|
||||
<umb-property property="properties.selectedEditor">
|
||||
<div>
|
||||
<select name="selectedEditor"
|
||||
ng-model="content.selectedEditor"
|
||||
required
|
||||
ng-options="e.alias as e.name for e in content.availableEditors"></select>
|
||||
<span class="help-inline" val-msg-for="selectedEditor" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
|
||||
</div>
|
||||
|
||||
<umb-property property="properties.selectedEditorId">
|
||||
<div>{{content.selectedEditor}}</div>
|
||||
</umb-property>
|
||||
</umb-property>
|
||||
|
||||
<umb-property property="properties.selectedEditorId">
|
||||
<div>{{content.selectedEditor}}</div>
|
||||
</umb-property>
|
||||
|
||||
<umb-property
|
||||
property="preValue"
|
||||
ng-repeat="preValue in preValues">
|
||||
<umb-property
|
||||
property="preValue"
|
||||
ng-repeat="preValue in preValues">
|
||||
<umb-editor model="preValue" is-pre-value="true"></umb-editor>
|
||||
</umb-property>
|
||||
|
||||
</umb-box-content>
|
||||
|
||||
<umb-editor model="preValue" is-pre-value="true"></umb-editor>
|
||||
</umb-property>
|
||||
</umb-box>
|
||||
|
||||
</umb-editor-container>
|
||||
|
||||
|
||||
<umb-editor-footer>
|
||||
|
||||
<umb-editor-footer-content-right>
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function LanguagesEditController($timeout, $location, $routeParams, notificationsService, localizationService) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
vm.page = {};
|
||||
vm.language = {};
|
||||
vm.availableLanguages = [];
|
||||
vm.breadcrumbs = [];
|
||||
vm.labels = {};
|
||||
vm.initIsDefault = false;
|
||||
vm.showDefaultLanguageInfo = false;
|
||||
|
||||
vm.save = save;
|
||||
vm.back = back;
|
||||
vm.goToPage = goToPage;
|
||||
vm.toggleMandatory = toggleMandatory;
|
||||
vm.toggleDefault = toggleDefault;
|
||||
|
||||
function init() {
|
||||
|
||||
// localize labels
|
||||
var labelKeys = [
|
||||
"treeHeaders_languages",
|
||||
"languages_mandatoryLanguage",
|
||||
"languages_mandatoryLanguageHelp",
|
||||
"languages_defaultLanguage",
|
||||
"languages_defaultLanguageHelp",
|
||||
"languages_addLanguage"
|
||||
];
|
||||
|
||||
localizationService.localizeMany(labelKeys).then(function (values) {
|
||||
vm.labels.languages = values[0];
|
||||
vm.labels.mandatoryLanguage = values[1];
|
||||
vm.labels.mandatoryLanguageHelp = values[2];
|
||||
vm.labels.defaultLanguage = values[3];
|
||||
vm.labels.defaultLanguageHelp = values[4];
|
||||
vm.labels.addLanguage = values[5];
|
||||
|
||||
if($routeParams.create) {
|
||||
vm.page.name = vm.labels.addLanguage;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if(!$routeParams.create) {
|
||||
|
||||
vm.loading = true;
|
||||
|
||||
// fake loading the language
|
||||
$timeout(function () {
|
||||
vm.language = {
|
||||
"name": "English (United States)",
|
||||
"culture": "en-US",
|
||||
"isDefault": false,
|
||||
"isMandatory": false
|
||||
};
|
||||
vm.page.name = vm.language.name;
|
||||
|
||||
/* we need to store the initial default state so we can disabel the toggle if it is the default.
|
||||
we need to prevent from not having a default language. */
|
||||
vm.initIsDefault = angular.copy(vm.language.isDefault);
|
||||
|
||||
vm.loading = false;
|
||||
makeBreadcrumbs();
|
||||
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function save() {
|
||||
vm.page.saveButtonState = "busy";
|
||||
// fake saving the language
|
||||
$timeout(function(){
|
||||
vm.page.saveButtonState = "success";
|
||||
notificationsService.success(localizationService.localize("speechBubbles_languageSaved"));
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function back() {
|
||||
$location.path("settings/languages/overview");
|
||||
}
|
||||
|
||||
function goToPage(ancestor) {
|
||||
$location.path(ancestor.path);
|
||||
}
|
||||
|
||||
function toggleMandatory() {
|
||||
if(!vm.language.isDefault) {
|
||||
vm.language.isMandatory = !vm.language.isMandatory;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleDefault() {
|
||||
|
||||
// it shouldn't be possible to uncheck the default language
|
||||
if(vm.initIsDefault) {
|
||||
return;
|
||||
}
|
||||
|
||||
vm.language.isDefault = !vm.language.isDefault;
|
||||
if(vm.language.isDefault) {
|
||||
vm.language.isMandatory = true;
|
||||
vm.showDefaultLanguageInfo = true;
|
||||
} else {
|
||||
vm.showDefaultLanguageInfo = false;
|
||||
}
|
||||
}
|
||||
|
||||
function makeBreadcrumbs() {
|
||||
vm.breadcrumbs = [
|
||||
{
|
||||
"name": vm.labels.languages,
|
||||
"path": "/settings/languages/overview"
|
||||
},
|
||||
{
|
||||
"name": vm.language.name
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.Languages.EditController", LanguagesEditController);
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,96 @@
|
||||
<div data-element="editor-languages" ng-controller="Umbraco.Editors.Languages.EditController as vm" class="clearfix">
|
||||
|
||||
<form name="editLanguageForm" no-validate val-form-manager>
|
||||
|
||||
<umb-editor-view>
|
||||
|
||||
<umb-editor-header
|
||||
name="vm.page.name"
|
||||
name-locked="true"
|
||||
on-back="vm.back()"
|
||||
show-back-button="true"
|
||||
hide-icon="true"
|
||||
hide-description="true"
|
||||
hide-alias="true">
|
||||
</umb-editor-header>
|
||||
|
||||
<umb-editor-container>
|
||||
|
||||
<umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
|
||||
|
||||
<umb-box ng-if="!vm.loading" class="block-form">
|
||||
<umb-box-content>
|
||||
|
||||
<umb-control-group label="@general_language">
|
||||
<select
|
||||
class="input-block-level"
|
||||
ng-model="vm.newLanguage.culture"
|
||||
ng-options="key as value for (key, value) in vm.availableCultures">
|
||||
</select>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="@general_settings">
|
||||
|
||||
<div class="umb-permission" ng-click="vm.toggleDefault()" ng-class="{'umb-permission--disabled': vm.initIsDefault}">
|
||||
<umb-toggle
|
||||
class="umb-permission__toggle"
|
||||
checked="vm.language.isDefault">
|
||||
</umb-toggle>
|
||||
<div class="umb-permission__content" >
|
||||
<div>{{vm.labels.defaultLanguage}}</div>
|
||||
<div class="umb-permission__description">{{vm.labels.defaultLanguageHelp}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-permission" ng-click="vm.toggleMandatory()" ng-class="{'umb-permission--disabled': vm.language.isDefault}">
|
||||
<umb-toggle
|
||||
class="umb-permission__toggle"
|
||||
checked="vm.language.isMandatory">
|
||||
</umb-toggle>
|
||||
<div class="umb-permission__content">
|
||||
<div>{{vm.labels.mandatoryLanguage}}</div>
|
||||
<div class="umb-permission__description">{{vm.labels.mandatoryLanguageHelp}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-alert umb-alert--info" style="margin-top: 20px;" ng-if="vm.showDefaultLanguageInfo">
|
||||
<localize key="languages_changingDefaultLanguageWarning"></localize>
|
||||
</div>
|
||||
|
||||
</umb-control-group>
|
||||
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
|
||||
</umb-editor-container>
|
||||
|
||||
<umb-editor-footer>
|
||||
|
||||
<umb-editor-footer-content-left>
|
||||
<umb-breadcrumbs
|
||||
ancestors="vm.breadcrumbs"
|
||||
allow-on-open="true"
|
||||
on-open="vm.goToPage(ancestor)">
|
||||
</umb-breadcrumbs>
|
||||
</umb-editor-footer-content-left>
|
||||
|
||||
<umb-editor-footer-content-right>
|
||||
<umb-button
|
||||
type="button"
|
||||
action="vm.save()"
|
||||
state="vm.page.saveButtonState"
|
||||
button-style="success"
|
||||
shortcut="ctrl+s"
|
||||
label="Save"
|
||||
label-key="buttons_save"
|
||||
disabled="vm.loading">
|
||||
</umb-button>
|
||||
</umb-editor-footer-content-right>
|
||||
|
||||
</umb-editor-footer>
|
||||
|
||||
</umb-editor-view>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,115 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function LanguagesOverviewController($timeout, $location, notificationsService, localizationService) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
vm.page = {};
|
||||
vm.languages = [];
|
||||
vm.labels = {};
|
||||
|
||||
vm.addLanguage = addLanguage;
|
||||
vm.editLanguage = editLanguage;
|
||||
vm.deleteLanguage = deleteLanguage;
|
||||
|
||||
function init() {
|
||||
|
||||
vm.loading = true;
|
||||
|
||||
// localize labels
|
||||
var labelKeys = [
|
||||
"treeHeaders_languages",
|
||||
"general_mandatory",
|
||||
"general_default",
|
||||
];
|
||||
|
||||
localizationService.localizeMany(labelKeys).then(function (values) {
|
||||
vm.labels.languages = values[0];
|
||||
vm.labels.mandatory = values[1];
|
||||
vm.labels.general = values[2];
|
||||
// set page name
|
||||
vm.page.name = vm.labels.languages;
|
||||
});
|
||||
|
||||
$timeout(function () {
|
||||
|
||||
vm.languages = [
|
||||
{
|
||||
"id": 1,
|
||||
"cultureDisplayName": "English (United States)",
|
||||
"culture": "en-US",
|
||||
"isDefault": true,
|
||||
"isMandatory": true
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"cultureDisplayName": "Danish",
|
||||
"culture": "da-DK",
|
||||
"isDefault": false,
|
||||
"isMandatory": true
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"cultureDisplayName": "Spanish (Spain)",
|
||||
"culture": "es-ES",
|
||||
"isDefault": false,
|
||||
"isMandatory": false
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"cultureDisplayName": "French (France)",
|
||||
"culture": "fr-FR",
|
||||
"isDefault": false,
|
||||
"isMandatory": false
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"cultureDisplayName": "German (Germany)",
|
||||
"culture": "de-DE",
|
||||
"isDefault": false,
|
||||
"isMandatory": true
|
||||
}
|
||||
];
|
||||
|
||||
vm.loading = false;
|
||||
|
||||
}, 1000);
|
||||
|
||||
/*
|
||||
$timeout(function () {
|
||||
navigationService.syncTree({ tree: "languages", path: "-1" });
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
function addLanguage() {
|
||||
$location.search('create', null);
|
||||
$location.path("/settings/languages/edit/-1").search("create", "true");
|
||||
}
|
||||
|
||||
function editLanguage(language) {
|
||||
$location.search('create', null);
|
||||
$location.path("/settings/languages/edit/" + language.id);
|
||||
}
|
||||
|
||||
function deleteLanguage(language, event) {
|
||||
var confirmed = confirm("Are you sure you want to delete " + language.cultureDisplayName + "?");
|
||||
if(confirmed) {
|
||||
language.deleteButtonState = "busy";
|
||||
$timeout(function(){
|
||||
var index = vm.languages.indexOf(language);
|
||||
vm.languages.splice(index, 1);
|
||||
}, 1000);
|
||||
}
|
||||
event.preventDefault()
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.Languages.OverviewController", LanguagesOverviewController);
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,58 @@
|
||||
<div data-element="editor-languages" ng-controller="Umbraco.Editors.Languages.OverviewController as vm" class="clearfix">
|
||||
|
||||
<umb-editor-view footer="false">
|
||||
|
||||
<umb-editor-header
|
||||
name="vm.page.name"
|
||||
name-locked="true"
|
||||
hide-icon="true"
|
||||
hide-description="true"
|
||||
hide-alias="true">
|
||||
</umb-editor-header>
|
||||
|
||||
<umb-editor-container>
|
||||
|
||||
<umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
|
||||
|
||||
<umb-editor-sub-header>
|
||||
|
||||
<umb-editor-sub-header-content-left>
|
||||
<umb-button
|
||||
button-style="success"
|
||||
type="button"
|
||||
action="vm.addLanguage()"
|
||||
label-key="languages_addLanguage">
|
||||
</umb-button>
|
||||
</umb-editor-sub-header-content-left>
|
||||
|
||||
</umb-editor-sub-header>
|
||||
|
||||
<table class="table table-hover" ng-if="!vm.loading">
|
||||
<tbody>
|
||||
<tr ng-repeat="language in vm.languages" ng-click="vm.editLanguage(language)" style="cursor: pointer;">
|
||||
<td>
|
||||
<i class="icon-globe" style="color: #BBBABF; margin-right: 5px;"></i>
|
||||
<span class="bold">{{ language.cultureDisplayName }}</span>
|
||||
<span ng-if="language.isDefault">- {{vm.labels.general}}</span>
|
||||
</td>
|
||||
<td><span ng-if="language.isMandatory">{{vm.labels.mandatory}}</span></td>
|
||||
<td style="text-align: right;">
|
||||
<umb-button
|
||||
ng-if="!language.isDefault"
|
||||
type="button"
|
||||
size="xxs"
|
||||
button-style="danger"
|
||||
state="language.deleteButtonState"
|
||||
action="vm.deleteLanguage(language, $event)"
|
||||
label-key="general_delete">
|
||||
</umb-button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</umb-editor-container>
|
||||
|
||||
</umb-editor-view>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,19 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function MediaAppContentController($scope) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
function onInit() {
|
||||
angular.forEach($scope.model.tabs, function(group){
|
||||
group.open = true;
|
||||
});
|
||||
}
|
||||
|
||||
onInit();
|
||||
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.Media.Apps.ContentController", MediaAppContentController);
|
||||
})();
|
||||
@@ -0,0 +1,17 @@
|
||||
<div class="form-horizontal" ng-controller="Umbraco.Editors.Media.Apps.ContentController as vm">
|
||||
<div class="umb-expansion-panel" ng-repeat="group in model.tabs | filter: { hide : '!' + true }">
|
||||
|
||||
<div class="umb-expansion-panel__header" ng-click="group.open = !group.open">
|
||||
<div>{{ group.label }}</div>
|
||||
<ins class="umb-expansion-panel__expand" ng-class="{'icon-navigation-down': !group.open, 'icon-navigation-up': group.open}" class="icon-navigation-right"> </ins>
|
||||
</div>
|
||||
|
||||
<div class="umb-expansion-panel__content" ng-show="group.open">
|
||||
<umb-property data-element="property-{{group.alias}}" ng-repeat="property in group.properties" property="property">
|
||||
<umb-editor model="property"></umb-editor>
|
||||
</umb-property>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,4 @@
|
||||
<umb-media-node-info
|
||||
ng-if="model"
|
||||
node="model">
|
||||
</umb-media-node-info>
|
||||
@@ -0,0 +1,23 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function MediaAppListViewController($scope) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
vm.listViewGroup = {};
|
||||
|
||||
function onInit() {
|
||||
angular.forEach($scope.model.tabs, function(group){
|
||||
if(group.alias === "Contents") {
|
||||
vm.listViewGroup = group;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onInit();
|
||||
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.Media.Apps.ListViewController", MediaAppListViewController);
|
||||
})();
|
||||
@@ -0,0 +1,8 @@
|
||||
<div ng-controller="Umbraco.Editors.Media.Apps.ListViewController as vm">
|
||||
|
||||
<umb-property ng-repeat="property in vm.listViewGroup.properties" property="property">
|
||||
<umb-editor model="property"></umb-editor>
|
||||
</umb-property>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -10,35 +10,22 @@
|
||||
|
||||
<umb-editor-header
|
||||
name="content.name"
|
||||
tabs="content.tabs"
|
||||
menu="page.menu"
|
||||
hide-icon="true"
|
||||
hide-description="true"
|
||||
hide-alias="true">
|
||||
hide-alias="true"
|
||||
navigation="content.apps"
|
||||
on-back="backToListView()"
|
||||
show-back-button="{{page.listViewPath}}">
|
||||
</umb-editor-header>
|
||||
|
||||
<umb-editor-container>
|
||||
|
||||
<umb-tabs-content view="true" class="form-horizontal">
|
||||
<umb-tab id="tab{{tab.id}}" rel="{{tab.id}}" ng-repeat="tab in content.tabs">
|
||||
|
||||
<!-- Other tabs than info -->
|
||||
<div ng-if="tab.id !== -1 && tab.alias !== '_umb_infoTab'">
|
||||
<umb-property data-element="property-{{property.alias}}" property="property" ng-repeat="property in tab.properties">
|
||||
<umb-editor model="property"></umb-editor>
|
||||
</umb-property>
|
||||
</div>
|
||||
|
||||
<!-- Info tab -->
|
||||
<div ng-if="tab.id === -1 && tab.alias === '_umb_infoTab'">
|
||||
<umb-media-node-info
|
||||
ng-if="content"
|
||||
node="content">
|
||||
</umb-media-node-info>
|
||||
</div>
|
||||
|
||||
</umb-tab>
|
||||
</umb-tabs-content>
|
||||
<umb-editor-sub-views
|
||||
ng-if="!page.loading"
|
||||
sub-views="content.apps"
|
||||
model="content">
|
||||
</umb-editor-sub-views>
|
||||
|
||||
</umb-editor-container>
|
||||
|
||||
|
||||
@@ -54,7 +54,9 @@ function mediaEditController($scope, $routeParams, appState, mediaResource, enti
|
||||
editorState.set($scope.content);
|
||||
|
||||
// We don't get the info tab from the server from version 7.8 so we need to manually add it
|
||||
contentEditingHelper.addInfoTab($scope.content.tabs);
|
||||
//contentEditingHelper.addInfoTab($scope.content.tabs);
|
||||
|
||||
init($scope.content);
|
||||
|
||||
$scope.page.loading = false;
|
||||
|
||||
@@ -94,12 +96,62 @@ function mediaEditController($scope, $routeParams, appState, mediaResource, enti
|
||||
}
|
||||
|
||||
// We don't get the info tab from the server from version 7.8 so we need to manually add it
|
||||
contentEditingHelper.addInfoTab($scope.content.tabs);
|
||||
//contentEditingHelper.addInfoTab($scope.content.tabs);
|
||||
|
||||
init($scope.content);
|
||||
|
||||
$scope.page.loading = false;
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function init(content) {
|
||||
|
||||
// prototype content and info apps
|
||||
var contentApp = {
|
||||
"name": "Content",
|
||||
"alias": "content",
|
||||
"icon": "icon-document",
|
||||
"view": "views/media/apps/content/content.html"
|
||||
};
|
||||
|
||||
var infoApp = {
|
||||
"name": "Info",
|
||||
"alias": "info",
|
||||
"icon": "icon-info",
|
||||
"view": "views/media/apps/info/info.html"
|
||||
};
|
||||
|
||||
var listview = {
|
||||
"name": "Child items",
|
||||
"alias": "childItems",
|
||||
"icon": "icon-list",
|
||||
"view": "views/media/apps/listview/listview.html"
|
||||
};
|
||||
|
||||
$scope.content.apps = [];
|
||||
|
||||
if($scope.content.contentTypeAlias === "Folder") {
|
||||
// add list view app
|
||||
$scope.content.apps.push(listview);
|
||||
|
||||
// remove the list view tab
|
||||
angular.forEach($scope.content.tabs, function(tab, index){
|
||||
if(tab.alias === "Contents") {
|
||||
tab.hide = true;
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
$scope.content.apps.push(contentApp);
|
||||
}
|
||||
|
||||
$scope.content.apps.push(infoApp);
|
||||
|
||||
// set first app to active
|
||||
$scope.content.apps[0].active = true;
|
||||
|
||||
}
|
||||
|
||||
$scope.save = function () {
|
||||
|
||||
@@ -152,6 +204,10 @@ function mediaEditController($scope, $routeParams, appState, mediaResource, enti
|
||||
|
||||
};
|
||||
|
||||
$scope.backToListView = function() {
|
||||
$location.path($scope.page.listViewPath);
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
angular.module("umbraco")
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div ng-controller="Umbraco.PropertyEditors.GridController" class="umb-grid umb-editor clearfix" id="umb-grid">
|
||||
|
||||
<umb-editor-sub-header>
|
||||
<umb-editor-sub-header style="background-color: white;">
|
||||
|
||||
<umb-editor-sub-header-content-right>
|
||||
<umb-button
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<umb-editor-sub-header-content-left>
|
||||
|
||||
<umb-editor-sub-header-section ng-if="(listViewAllowedTypes && listViewAllowedTypes.length > 0 && !isAnythingSelected()) && currentNodePermissions.canCreate">
|
||||
<div class="btn-group" ng-show="listViewAllowedTypes.length > 1">
|
||||
<div class="btn-group btn-success" ng-show="listViewAllowedTypes.length > 1">
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<localize key="actions_create">Create</localize>
|
||||
<span class="caret"></span>
|
||||
@@ -26,7 +26,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group" ng-show="listViewAllowedTypes.length === 1">
|
||||
<a class="btn" href="#/{{entityType}}/{{entityType}}/edit/{{contentId}}?doctype={{listViewAllowedTypes[0].alias}}&create=true">
|
||||
<a class="btn btn-success" href="#/{{entityType}}/{{entityType}}/edit/{{contentId}}?doctype={{listViewAllowedTypes[0].alias}}&create=true">
|
||||
<i class="icon-{{listViewAllowedTypes[0].cssClass}}"></i>
|
||||
<localize key="actions_create">Create</localize> {{ listViewAllowedTypes[0].name }}
|
||||
</a>
|
||||
|
||||
@@ -10,7 +10,9 @@
|
||||
name="vm.userGroup.name"
|
||||
alias="vm.userGroup.alias"
|
||||
icon="vm.userGroup.icon"
|
||||
hide-description="true">
|
||||
hide-description="true"
|
||||
on-back="vm.goToPage(vm.breadcrumbs[0])"
|
||||
show-back-button="true">
|
||||
</umb-editor-header>
|
||||
|
||||
<umb-editor-container>
|
||||
@@ -145,27 +147,28 @@
|
||||
|
||||
<div class="umb-package-details__sidebar">
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
<umb-box>
|
||||
<umb-box-header title-key="sections_users"></umb-box-header>
|
||||
<umb-box-content>
|
||||
|
||||
<umb-user-preview
|
||||
ng-repeat="user in vm.userGroup.users"
|
||||
name="user.name"
|
||||
avatars="user.avatars"
|
||||
allow-remove="true"
|
||||
on-remove="vm.removeSelectedItem($index, vm.userGroup.users)">
|
||||
</umb-user-preview>
|
||||
|
||||
<div class="umb-package-details__section-title"><localize key="sections_users">Users</localize></div>
|
||||
<a href=""
|
||||
style="max-width: 100%;"
|
||||
class="umb-node-preview-add"
|
||||
ng-click="vm.openUserPicker()"
|
||||
prevent-default>
|
||||
<localize key="general_add">Add</localize>
|
||||
</a>
|
||||
|
||||
<umb-user-preview
|
||||
ng-repeat="user in vm.userGroup.users"
|
||||
name="user.name"
|
||||
avatars="user.avatars"
|
||||
allow-remove="true"
|
||||
on-remove="vm.removeSelectedItem($index, vm.userGroup.users)">
|
||||
</umb-user-preview>
|
||||
|
||||
<a href=""
|
||||
style="max-width: 100%;"
|
||||
class="umb-node-preview-add"
|
||||
ng-click="vm.openUserPicker()"
|
||||
prevent-default>
|
||||
<localize key="general_add">Add</localize>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -190,13 +193,6 @@
|
||||
|
||||
<umb-editor-footer-content-right>
|
||||
|
||||
<umb-button
|
||||
type="button"
|
||||
action="vm.goToPage(vm.breadcrumbs[0])"
|
||||
label="Return to list"
|
||||
label-key="buttons_returnToList">
|
||||
</umb-button>
|
||||
|
||||
<umb-button
|
||||
type="button"
|
||||
action="vm.save()"
|
||||
|
||||
@@ -298,103 +298,106 @@
|
||||
</umb-editor-sub-header>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<form name="addUserForm" no-validate val-form-manager style="max-width: 500px;" class="block-form">
|
||||
<div>
|
||||
<div ng-if="vm.usersViewState === 'inviteUser'">
|
||||
<h3 class="bold" style="margin-bottom: 0;">
|
||||
<localize key="user_inviteUser">Invite User</localize>
|
||||
</h3>
|
||||
<p style="line-height: 1.6em; margin-bottom: 15px;">
|
||||
<localize key="user_inviteUserHelp"></localize>
|
||||
</p>
|
||||
</div>
|
||||
<div ng-if="vm.usersViewState === 'createUser'">
|
||||
<h3 class="bold" style="margin-bottom: 0;">
|
||||
<localize key="user_createUser">Create user</localize>
|
||||
</h3>
|
||||
<p style="line-height: 1.6em; margin-bottom: 15px;">
|
||||
<localize key="user_createUserHelp"></localize>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<umb-box style="max-width: 600px;">
|
||||
<umb-box-content>
|
||||
<form name="addUserForm" no-validate val-form-manager class="block-form">
|
||||
<div>
|
||||
<div ng-if="vm.usersViewState === 'inviteUser'">
|
||||
<h3 class="bold" style="margin-bottom: 0;">
|
||||
<localize key="user_inviteUser">Invite User</localize>
|
||||
</h3>
|
||||
<p style="line-height: 1.6em; margin-bottom: 15px;">
|
||||
<localize key="user_inviteUserHelp"></localize>
|
||||
</p>
|
||||
</div>
|
||||
<div ng-if="vm.usersViewState === 'createUser'">
|
||||
<h3 class="bold" style="margin-bottom: 0;">
|
||||
<localize key="user_createUser">Create user</localize>
|
||||
</h3>
|
||||
<p style="line-height: 1.6em; margin-bottom: 15px;">
|
||||
<localize key="user_createUserHelp"></localize>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<umb-control-group label="@general_name" label-for="name" required="true">
|
||||
<input type="text" name="name" localize="placeholder" placeholder="@placeholders_entername" class="input-block-level" ng-model="vm.newUser.name"
|
||||
umb-auto-focus required val-server-field="Name" />
|
||||
<span class="help-inline" val-msg-for="name" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
|
||||
<span class="help-inline" val-msg-for="name" val-toggle-msg="valServerField"></span>
|
||||
</umb-control-group>
|
||||
<umb-control-group label="@general_name" label-for="name" required="true">
|
||||
<input type="text" name="name" localize="placeholder" placeholder="@placeholders_entername" class="input-block-level" ng-model="vm.newUser.name"
|
||||
umb-auto-focus required val-server-field="Name" />
|
||||
<span class="help-inline" val-msg-for="name" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
|
||||
<span class="help-inline" val-msg-for="name" val-toggle-msg="valServerField"></span>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="@general_username" label-for="username" required="true" ng-if="!vm.usernameIsEmail">
|
||||
<input type="text" name="username" localize="placeholder" placeholder="@placeholders_enterusername" class="input-block-level"
|
||||
ng-model="vm.newUser.username" val-server-field="Username" ng-required="vm.usernameIsEmail" />
|
||||
<span class="help-inline" val-msg-for="username" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
|
||||
<span class="help-inline" val-msg-for="username" val-toggle-msg="valServerField"></span>
|
||||
</umb-control-group>
|
||||
<umb-control-group label="@general_username" label-for="username" required="true" ng-if="!vm.usernameIsEmail">
|
||||
<input type="text" name="username" localize="placeholder" placeholder="@placeholders_enterusername" class="input-block-level"
|
||||
ng-model="vm.newUser.username" val-server-field="Username" ng-required="vm.usernameIsEmail" />
|
||||
<span class="help-inline" val-msg-for="username" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
|
||||
<span class="help-inline" val-msg-for="username" val-toggle-msg="valServerField"></span>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="@general_email" label-for="email" required="true">
|
||||
<input type="email" name="email" localize="placeholder" placeholder="@placeholders_enteremail" class="input-block-level"
|
||||
ng-model="vm.newUser.email" required val-email val-server-field="Email" />
|
||||
<span class="help-inline" val-msg-for="email" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
|
||||
<span class="help-inline" val-msg-for="email" val-toggle-msg="valServerField"></span>
|
||||
</umb-control-group>
|
||||
<umb-control-group label="@general_email" label-for="email" required="true">
|
||||
<input type="email" name="email" localize="placeholder" placeholder="@placeholders_enteremail" class="input-block-level"
|
||||
ng-model="vm.newUser.email" required val-email val-server-field="Email" />
|
||||
<span class="help-inline" val-msg-for="email" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
|
||||
<span class="help-inline" val-msg-for="email" val-toggle-msg="valServerField"></span>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="@user_usergroup" description="@user_groupsHelp" required="true">
|
||||
|
||||
<umb-user-group-preview
|
||||
ng-repeat="group in vm.newUser.userGroups"
|
||||
icon="group.icon"
|
||||
name="group.name"
|
||||
sections="group.sections"
|
||||
content-start-node="group.contentStartNode"
|
||||
media-start-node="group.mediaStartNode"
|
||||
allow-remove="true"
|
||||
on-remove="vm.removeSelectedUserGroup($index, vm.newUser.userGroups)">
|
||||
</umb-user-group-preview>
|
||||
<umb-control-group label="@user_usergroup" description="@user_groupsHelp" required="true">
|
||||
|
||||
<umb-user-group-preview
|
||||
ng-repeat="group in vm.newUser.userGroups"
|
||||
icon="group.icon"
|
||||
name="group.name"
|
||||
sections="group.sections"
|
||||
content-start-node="group.contentStartNode"
|
||||
media-start-node="group.mediaStartNode"
|
||||
allow-remove="true"
|
||||
on-remove="vm.removeSelectedUserGroup($index, vm.newUser.userGroups)">
|
||||
</umb-user-group-preview>
|
||||
|
||||
<a href="" style="max-width: 100%;" class="umb-node-preview-add" ng-click="vm.openUserGroupPicker($event)" prevent-default>
|
||||
<localize key="general_add">Add</localize>
|
||||
</a>
|
||||
<a href="" style="max-width: 100%;" class="umb-node-preview-add" ng-click="vm.openUserGroupPicker($event)" prevent-default>
|
||||
<localize key="general_add">Add</localize>
|
||||
</a>
|
||||
|
||||
</umb-control-group>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="@general_message" ng-if="vm.usersViewState === 'inviteUser'" label-for="message" required="true">
|
||||
<textarea
|
||||
name="message"
|
||||
type="text"
|
||||
class="input-block-level"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_enterMessage"
|
||||
ng-model="vm.newUser.message"
|
||||
rows="4"
|
||||
required val-server-field="Message">
|
||||
</textarea>
|
||||
<span class="help-inline" val-msg-for="message" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
|
||||
<span class="help-inline" val-msg-for="message" val-toggle-msg="valServerField"></span>
|
||||
</umb-control-group>
|
||||
<umb-control-group label="@general_message" ng-if="vm.usersViewState === 'inviteUser'" label-for="message" required="true">
|
||||
<textarea
|
||||
name="message"
|
||||
type="text"
|
||||
class="input-block-level"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_enterMessage"
|
||||
ng-model="vm.newUser.message"
|
||||
rows="4"
|
||||
required val-server-field="Message">
|
||||
</textarea>
|
||||
<span class="help-inline" val-msg-for="message" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
|
||||
<span class="help-inline" val-msg-for="message" val-toggle-msg="valServerField"></span>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-button
|
||||
ng-if="vm.usersViewState === 'inviteUser'"
|
||||
button-style="success"
|
||||
state="vm.page.createButtonState"
|
||||
type="button"
|
||||
action="vm.inviteUser(addUserForm)"
|
||||
label-key="user_sendInvite"
|
||||
size="m">
|
||||
</umb-button>
|
||||
<umb-button
|
||||
ng-if="vm.usersViewState === 'inviteUser'"
|
||||
button-style="success"
|
||||
state="vm.page.createButtonState"
|
||||
type="button"
|
||||
action="vm.inviteUser(addUserForm)"
|
||||
label-key="user_sendInvite"
|
||||
size="m">
|
||||
</umb-button>
|
||||
|
||||
<umb-button
|
||||
ng-if="vm.usersViewState === 'createUser'"
|
||||
button-style="success"
|
||||
state="vm.page.createButtonState"
|
||||
type="button"
|
||||
action="vm.createUser(addUserForm)"
|
||||
label-key="user_createUser"
|
||||
size="m">
|
||||
</umb-button>
|
||||
|
||||
</form>
|
||||
<umb-button
|
||||
ng-if="vm.usersViewState === 'createUser'"
|
||||
button-style="success"
|
||||
state="vm.page.createButtonState"
|
||||
type="button"
|
||||
action="vm.createUser(addUserForm)"
|
||||
label-key="user_createUser"
|
||||
size="m">
|
||||
</umb-button>
|
||||
|
||||
</form>
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -47,13 +47,12 @@ describe('edit media controller tests', function () {
|
||||
expect(scope.content.id).toBe(1234);
|
||||
});
|
||||
|
||||
it('it should have a tabs collection', function () {
|
||||
expect(scope.content.tabs.length).toBe(2);
|
||||
it('it should have an apps collection', function () {
|
||||
expect(scope.content.apps.length).toBe(2);
|
||||
});
|
||||
|
||||
it('it should have added an info tab', function () {
|
||||
expect(scope.content.tabs[1].id).toBe(-1);
|
||||
expect(scope.content.tabs[1].alias).toBe("_umb_infoTab");
|
||||
it('it should have added an info app', function () {
|
||||
expect(scope.content.apps[1].alias).toBe("info");
|
||||
});
|
||||
|
||||
it('all other tabs than the info tab should have a properties collection', function () {
|
||||
|
||||
@@ -54,12 +54,11 @@
|
||||
<body ng-class="{'touch':touchDevice, 'emptySection':emptySection, 'umb-drawer-is-visible':drawer.show}" ng-controller="Umbraco.MainController" id="umbracoMainPageBody">
|
||||
|
||||
<div ng-hide="!authenticated" ng-cloak>
|
||||
|
||||
<!-- help dialog controller by the help button - this also forces the backoffice UI to shift 400px -->
|
||||
<umb-drawer data-element="drawer" ng-if="drawer.show" model="drawer.model" view="drawer.view"></umb-drawer>
|
||||
|
||||
<div id="mainwrapper" class="clearfix" ng-click="closeDialogs($event)">
|
||||
|
||||
<umb-app-header></umb-app-header>
|
||||
|
||||
<umb-navigation></umb-navigation>
|
||||
|
||||
<section id="contentwrapper">
|
||||
@@ -74,6 +73,9 @@
|
||||
<umb-notifications></umb-notifications>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- help dialog controller by the help button - this also forces the backoffice UI to shift 400px -->
|
||||
<umb-drawer data-element="drawer" ng-if="drawer.show" model="drawer.model" view="drawer.view"></umb-drawer>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -546,6 +546,7 @@
|
||||
<key alias="scheduledPublishing">Scheduled Publishing</key>
|
||||
<key alias="search">Search</key>
|
||||
<key alias="server">Server</key>
|
||||
<key alias="settings">Settings</key>
|
||||
<key alias="show">Show</key>
|
||||
<key alias="showPageOnSend">Show page on Send</key>
|
||||
<key alias="size">Size</key>
|
||||
|
||||
@@ -403,6 +403,7 @@
|
||||
<key alias="account">account</key>
|
||||
<key alias="selectEditor">Select editor</key>
|
||||
<key alias="selectSnippet">Select snippet</key>
|
||||
<key alias="variantdeletewarning">This will delete the node and all its languages. If you only want to delete one language go and unpublish it instead.</key>
|
||||
</area>
|
||||
<area alias="dictionaryItem">
|
||||
<key alias="description">
|
||||
@@ -621,6 +622,7 @@
|
||||
<key alias="searchNoResult">Sorry, we can not find what you are looking for</key>
|
||||
<key alias="noItemsInList">No items have been added</key>
|
||||
<key alias="server">Server</key>
|
||||
<key alias="settings">Settings</key>
|
||||
<key alias="show">Show</key>
|
||||
<key alias="showPageOnSend">Show page on Send</key>
|
||||
<key alias="size">Size</key>
|
||||
@@ -1646,6 +1648,15 @@ To manage your website, simply open the Umbraco back office and start adding con
|
||||
<key alias="tabHasNoSortOrder">tab has no sort order</key>
|
||||
</area>
|
||||
|
||||
<area alias="languages">
|
||||
<key alias="addLanguage">Add language</key>
|
||||
<key alias="mandatoryLanguage">Mandatory</key>
|
||||
<key alias="mandatoryLanguageHelp">Properties on this language has to be filled out before the node can be published.</key>
|
||||
<key alias="defaultLanguage">Default language</key>
|
||||
<key alias="defaultLanguageHelp">An Umbraco site can only have one default langugae set.</key>
|
||||
<key alias="changingDefaultLanguageWarning">Switching default language may result in default content missing.</key>
|
||||
</area>
|
||||
|
||||
<area alias="modelsBuilder">
|
||||
<key alias="buildingModels">Building models</key>
|
||||
<key alias="waitingMessage">this can take a bit of time, don't worry</key>
|
||||
|
||||
Reference in New Issue
Block a user