diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditormenu.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditormenu.directive.js index 22939c7f2c..9dff712ef6 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditormenu.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditormenu.directive.js @@ -30,8 +30,9 @@ } //when the options item is selected, we need to set the current menu item in appState (since this is synonymous with a menu) - appState.setMenuState("currentNode", scope.currentNode); - + // Niels: No i think we are wrong, we should not set the currentNode, cause it represents the currentNode of interaction. + //appState.setMenuState("currentNode", scope.currentNode); + if (!scope.actions) { treeService.getMenu({ treeNode: scope.currentNode }) .then(function (data) { diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js index 0f9a14d71a..51eb8ca285 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js @@ -60,10 +60,13 @@ angular.module("umbraco.directives") if (!node) { return ''; } - + // TODO: This is called constantly because as a method in a template it's re-evaluated pretty much all the time // it would be better if we could cache the processing. The problem is that some of these things are dynamic. + //is this the current action node (this is not the same as the current selected node!) + var actionNode = appState.getMenuState("currentNode"); + var css = []; if (node.cssClasses) { _.each(node.cssClasses, function(c) { @@ -73,17 +76,27 @@ angular.module("umbraco.directives") if (node.selected) { css.push("umb-tree-node-checked"); } + if (node == scope.currentNode) { + css.push("current"); + if (actionNode && actionNode.id !== node.id) { + css.push("current-not-active");// when its the current node, but its not the active(current node for the given action) + } + } + if (node.hasChildren) { + css.push("has-children"); + } + if (node.deleteAnimations) { + css.push("umb-tree-item--deleted"); + } - //is this the current action node (this is not the same as the current selected node!) - var actionNode = appState.getMenuState("currentNode"); if (actionNode) { - if (actionNode.id === node.id && String(actionNode.id) !== "-1") { + if (actionNode.id === node.id && String(node.id) !== "-1") { css.push("active"); } - + // special handling of root nodes with id -1 // as there can be many nodes with id -1 in a tree we need to check the treeAlias instead - if (String(actionNode.id) === "-1" && actionNode.metaData.treeAlias === node.metaData.treeAlias) { + if (String(node.id) === "-1" && actionNode.metaData.treeAlias === node.metaData.treeAlias) { css.push("active"); } } diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js index 308ffbf00f..29335f276e 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js @@ -140,11 +140,11 @@ Use this directive to generate a thumbnail grid of media items. } } - + if (scope.items.length > 0) { setFlexValues(scope.items); } - + } function setItemData(item) { @@ -235,7 +235,7 @@ Use this directive to generate a thumbnail grid of media items. } } - + function setFlexValues(mediaItems) { var flexSortArray = mediaItems; @@ -269,12 +269,12 @@ Use this directive to generate a thumbnail grid of media items. "min-height": itemMinHeight + "px" }; - mediaItem.flexStyle = flexStyle; + mediaItem.flexStyle = flexStyle; } } - + scope.clickItem = function(item, $event, $index) { if (scope.onClick) { scope.onClick(item, $event, $index); diff --git a/src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js b/src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js index 96f3115185..071d984c6a 100644 --- a/src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js +++ b/src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js @@ -34,7 +34,7 @@ function NavigationController($scope, $rootScope, $location, $log, $q, $routePar appState.setTreeState("selectedNode", args.node); //when a node is activated, this is the same as clicking it and we need to set the //current menu item to be this node as well. - appState.setMenuState("currentNode", args.node); + //appState.setMenuState("currentNode", args.node);// Niels: No, we are setting it from the dialog. } }); @@ -44,7 +44,7 @@ function NavigationController($scope, $rootScope, $location, $log, $q, $routePar args.event.preventDefault(); //Set the current action node (this is not the same as the current selected node!) - appState.setMenuState("currentNode", args.node); + //appState.setMenuState("currentNode", args.node);// Niels: No, we are setting it from the dialog. if (args.event && args.event.altKey) { args.skipDefault = true; @@ -96,7 +96,7 @@ function NavigationController($scope, $rootScope, $location, $log, $q, $routePar //put this node into the tree state appState.setTreeState("selectedNode", args.node); //when a node is clicked we also need to set the active menu node to this node - appState.setMenuState("currentNode", args.node); + //appState.setMenuState("currentNode", args.node); //not legacy, lets just set the route value and clear the query string if there is one. $location.path(n.routePath); diff --git a/src/Umbraco.Web.UI.Client/src/less/buttons.less b/src/Umbraco.Web.UI.Client/src/less/buttons.less index 51dcce7b92..a246ef585e 100644 --- a/src/Umbraco.Web.UI.Client/src/less/buttons.less +++ b/src/Umbraco.Web.UI.Client/src/less/buttons.less @@ -197,7 +197,11 @@ input[type="button"] { } // Made for Umbraco, 2019 .btn-action { - .buttonBackground(@pinkLight, @blueDark, @blueExtraDark, @u-white); + .buttonBackground(@blueExtraDark, @blueDark, @pinkLight, @u-white); +} +// Made for Umbraco, 2019 +.btn-selection { + .buttonBackground(@pinkLight, ligthen(@pinkLight, 20%), @blueExtraDark, @blueDark); } // Made for Umbraco, 2019, used for buttons that has to stand back. .btn-white { diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less index 097665bdd4..53e724cf54 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less @@ -2,6 +2,7 @@ display: block; min-width: 100%; width: auto; + margin-top:1px; .umb-tree-item__label { user-select: none; @@ -44,6 +45,38 @@ } } +// active is equivilant to selected, its the item that is begin affected by the actions performed in the right-click-dialog. +.umb-tree-item.active { + +} +.umb-tree-item.active > .umb-tree-item__inner { + //background: @ui-selected; + color: @ui-selected-type; + a { + color: @ui-selected-type; + } + + border-color: @ui-selected-border; + box-shadow: 0 0 2px 0 fade(@ui-selected-border, 80%); + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 2px solid fade(white, 80%); + } + &:hover { + //background: @ui-selected-hover; + //border-color: @ui-selected-border-hover;// dont hover border, cause its cant be deselected in current code. + color: @ui-selected-type-hover; + a { + color: @ui-selected-type-hover; + } + } +} + .umb-tree-item.current > .umb-tree-item__inner { background: @ui-active; @@ -75,3 +108,10 @@ //border-color: @ui-active; } } + +.umb-tree-item.current-not-active > .umb-tree-item__inner { + + background: @ui-active-blur; + color:@ui-active-type; + +} diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less index 13e2a55089..698a4211f5 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less @@ -87,23 +87,6 @@ body.touch .umb-tree { } } -// active is equivilant to selected, its the item that is begin affected by the actions performed in the right-click-dialog. -.umb-tree-item > .umb-tree-item__inner.active { - //background: @ui-selected; - border-color: @ui-selected-border; - color: @ui-selected-type; - a { - color: @ui-selected-type; - } - &:hover { - //background: @ui-selected-hover; - border-color: @ui-selected-border-hover; - color: @ui-selected-type-hover; - a { - color: @ui-selected-type-hover; - } - } -} .umb-tree-root, .umb-tree-item__inner { padding: 0; position: relative; @@ -112,7 +95,7 @@ body.touch .umb-tree { flex-wrap: nowrap; align-items: center; - border:2px dashed transparent; + border:2px solid transparent; color: @ui-option-type; a { diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less index 399a367dc5..b55a511f4b 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less @@ -14,10 +14,31 @@ user-select: none; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16); border-radius: 3px; + + color: @ui-option-type; + &:hover { + color:@ui-option-type-hover; + } } .umb-content-grid__item.-selected { - box-shadow: 0 2px 8px 0 rgba(0,0,0,0.35); + //box-shadow: 0 2px 8px 0 rgba(0,0,0,0.35); + + //color:@ui-selected-type; + + &::before { + content: ""; + position: absolute; + z-index:2; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border: 2px solid @ui-selected-border; + border-radius: 5px; + box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20); + } + } .umb-content-grid__icon-container { @@ -31,12 +52,12 @@ .umb-content-grid__icon[class^="icon-"], .umb-content-grid__icon[class*=" icon-"] { font-size: 20px; - color: @gray-8; +//color: @gray-8; margin-right: 5px; } .umb-content-grid__icon.-light { - color: @gray-5; + //color: @gray-5; } @@ -48,7 +69,7 @@ .umb-content-grid__item-name { font-weight: bold; margin-bottom: 15px; - color: @black; + //color: @black; line-height: 1.4em; display: inline-flex; } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less index f5ca1f8438..d2f86affab 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less @@ -14,7 +14,7 @@ padding: 10px 20px; box-sizing: border-box; flex: 1 1 200px; - border: 2px dashed transparent; + //border: 2px solid transparent; transition: border 0.2s; position: relative; justify-content: space-between; @@ -27,15 +27,28 @@ } .umb-folder-grid__folder.-selected { - box-shadow: 0 2px 8px 0 darken(@ui-selected-border, 20); + //box-shadow: 0 2px 8px 0 darken(@ui-selected-border, 20); //background: @ui-selected; color:@ui-selected-type; - border-color:@ui-selected-border; + //border-color:@ui-selected-border; + + &::before { + content: ""; + position: absolute; + z-index:2; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border: 2px solid @ui-selected-border; + border-radius: 5px; + box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20); + } &:hover { color:@ui-selected-type-hover; - border-color:@ui-selected-border-hover; + //border-color:@ui-selected-border-hover; } } @@ -59,12 +72,12 @@ .umb-folder-grid__folder-icon[class*=" icon-"] { font-size: 20px; margin-right: 15px; - color: @black; + //color: @black; } .umb-folder-grid__folder-name { font-size: 13px; - color: @black; + //color: @black; font-weight: bold; } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less index 8185040f23..017313af80 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less @@ -21,11 +21,14 @@ margin: 10px; position: relative; - overflow: hidden; + //overflow: hidden; + + user-select: none; + cursor: pointer; - border: 2px dashed transparent; box-shadow: 0 1px 1px 0 rgba(0,0,0,.2); + //border: 2px solid transparent; transition: box-shadow 150ms ease-in-out; } @@ -35,16 +38,30 @@ } .umb-media-grid__item.-selected { - box-shadow: 0 2px 8px 0 darken(@ui-selected-border, 20); //background: @ui-selected; color:@ui-selected-type; - border-color:@ui-selected-border; + //border-color: @ui-selected-border; + //box-shadow: 0 2px 8px 0 darken(@ui-selected-border, 20); - &:hover { - color:@ui-selected-type-hover; - border-color:@ui-selected-border-hover; + &::before { + content: ""; + position: absolute; + z-index:2; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border: 2px solid @ui-selected-border; + border-radius: 5px; + box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20); } + + .umb-media-grid__item-overlay { + color: @ui-selected-type; + //background: @ui-selected-border; + } + } .umb-media-grid__item-file-icon > span { @@ -64,16 +81,22 @@ } .umb-media-grid__item-image { - max-width: 100% !important; - height: auto; + //max-width: 100% !important; + //height: auto; position: relative; + + object-fit: contain; + height: 100%; } .umb-media-grid__item-image-placeholder { width: 100%; - max-width: 100%; - height: auto; + //max-width: 100%; + //height: auto; position: relative; + + object-fit: contain; + height: 100%; } .umb-media-grid__image-background { @@ -95,17 +118,18 @@ right: 0; bottom: 0; left: 0; - z-index: 100; + z-index: 1; padding: 5px 10px; box-sizing: border-box; font-size: 12px; overflow: hidden; color: @black; white-space: nowrap; - border-top:1px solid @gray-9; - background: @white; + border-top:1px solid fade(black, 4%); + background: fade(@white, 92%); transition: opacity 150ms; } + /* .umb-media-grid__item.-file .umb-media-grid__item-overlay { opacity: 1; @@ -180,6 +204,10 @@ align-items: center; color: @black; transition: opacity 150ms; + + &:hover { + color: @ui-action-disgrete-type-hover; + } } .umb-media-grid__item:hover .umb-media-grid__edit { diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less index e66c3de597..80665e4c64 100644 --- a/src/Umbraco.Web.UI.Client/src/less/variables.less +++ b/src/Umbraco.Web.UI.Client/src/less/variables.less @@ -117,7 +117,7 @@ @pinkRedLight: #ff8a89;// added 2019 @brown: #9d8057;// added 2019 @brownLight: #e4e0dd;// added 2019 -@brownGrayLight: #f3f2f1;// added 2019 +@brownGrayLight: #f6f4f4;// added 2019 @orange: #ff9412;// added 2019 //@u-greyLight: #f2ebe6;// added 2019 @@ -134,6 +134,7 @@ //@ui-active: #346ab3; @ui-active: @pinkLight; +@ui-active-blur: @brownLight; @ui-active-type: @blueExtraDark; @ui-active-type-hover: @blueMid; @@ -142,7 +143,7 @@ @ui-selected-type: @blueExtraDark; @ui-selected-type-hover: @blueMid; @ui-selected-border: @pinkLight; -@ui-selected-border-hover: @pinkLight; +@ui-selected-border-hover: darken(@pinkLight, 10); @ui-light-border: @pinkLight; @ui-light-type: @gray-4; diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html index d3854683c8..9474e98350 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html @@ -1,21 +1,19 @@ -
  • -
    - +
    +   {{node.name}} - +
    - +
    • - - diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html index 490c94a79d..487be4af87 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html @@ -5,8 +5,8 @@ ng-repeat="item in content" ng-class="{'-selected': item.selected}" ng-click="clickItem(item, $event, $index)"> - - + +
    diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html index dba6a41a7c..9a638d91fa 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html @@ -13,13 +13,13 @@
    - + Create {{listViewAllowedTypes[0].name}}
    - + Create {{listViewAllowedTypes[0].name}} @@ -85,6 +85,7 @@ type="button" label="Clear selection" label-key="buttons_clearSelection" + button-style="selection" action="clearSelection()" disabled="actionInProgress"> @@ -139,7 +140,7 @@ ng-if="options.allowBulkPublish && (buttonPermissions == null || buttonPermissions.canPublish)" style="margin-right: 5px;" type="button" - button-style="outline" + button-style="selection" label-key="actions_publish" icon="icon-globe" action="publish()" @@ -152,7 +153,7 @@ ng-if="options.allowBulkUnpublish && (buttonPermissions == null || buttonPermissions.canUnpublish)" style="margin-right: 5px;" type="button" - button-style="outline" + button-style="selection" label-key="actions_unpublish" icon="icon-block" action="unpublish()" @@ -165,7 +166,7 @@ ng-if="options.allowBulkCopy && (buttonPermissions == null || buttonPermissions.canCopy)" style="margin-right: 5px;" type="button" - button-style="outline" + button-style="selection" label-key="actions_copy" icon="icon-documents" action="copy()" @@ -178,7 +179,7 @@ ng-if="options.allowBulkMove && (buttonPermissions == null || buttonPermissions.canMove)" style="margin-right: 5px;" type="button" - button-style="outline" + button-style="selection" label-key="actions_move" icon="icon-enter" action="move()" @@ -190,7 +191,7 @@