yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V8: UI select colors

Browse Source
This commit is contained in:
Niels Lyngsø
2019-01-31 09:37:04 +01:00
parent 0b0371af7e
commit 2ab391eb69
14 changed files with 181 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditormenu.directive.js
View File

@@ -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) {

25
src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js
View File

@@ -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");
}
}

10
src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
View File

@@ -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);

6
src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js
View File

@@ -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);

6
src/Umbraco.Web.UI.Client/src/less/buttons.less
View File

@@ -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 {

40
src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less
View File

@@ -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;
}

19
src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
View File

@@ -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 {

29
src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less
View File

@@ -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;
}

25
src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less
View File

@@ -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;
}

56
src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
View File

@@ -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 {

5
src/Umbraco.Web.UI.Client/src/less/variables.less
View File

@@ -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;

14
src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html
View File

@@ -1,21 +1,19 @@
<li class="umb-tree-item" data-element="tree-item-{{::node.dataElement}}" ng-class="{'current': (node == currentNode), 'has-children': node.hasChildren, 'umb-tree-item--deleted': node.deleteAnimations}" on-right-click="altSelect(node, $event)">
<div class="umb-tree-item__inner" ng-class="getNodeCssClass(node)" ng-swipe-right="options(node, $event)" ng-dblclick="load(node)" >
<ins data-element="tree-item-expand"
ng-class="{'icon-navigation-right': !node.expanded || node.metaData.isContainer, 'icon-navigation-down': node.expanded && !node.metaData.isContainer}"
<li class="umb-tree-item" data-element="tree-item-{{::node.dataElement}}" ng-class="getNodeCssClass(node)" on-right-click="altSelect(node, $event)">
<div class="umb-tree-item__inner" ng-swipe-right="options(node, $event)" ng-dblclick="load(node)" >
<ins data-element="tree-item-expand"
ng-class="{'icon-navigation-right': !node.expanded || node.metaData.isContainer, 'icon-navigation-down': node.expanded && !node.metaData.isContainer}"
ng-style="{'visibility': (scope.enablelistviewexpand === 'true' || node.hasChildren && (!node.metaData.isContainer || isDialog)) ? 'visible' : 'hidden'}"
ng-click="load(node)">&nbsp;</ins>
<i class="icon umb-tree-icon sprTree" ng-class="::node.cssClass" title="{{::node.routePath}}" ng-click="select(node, $event)" ng-style="::node.style"></i>
<a class="umb-tree-item__label" ng-href="#/{{::node.routePath}}" ng-click="select(node, $event)">{{node.name}}</a>
<!-- NOTE: These are the 'option' elipses -->
<a data-element="tree-item-options" class="umb-options" ng-click="options(node, $event)" ng-if="::node.menuUrl"><i></i><i></i><i></i></a>
<div ng-show="node.loading" class="l"><div></div></div>
</div>
<ul ng-class="{collapsed: !node.expanded}">
<umb-tree-item class="umb-animated" ng-repeat="child in node.children track by child.id" enablelistviewexpand="{{enablelistviewexpand}}" tree="tree" current-node="currentNode" node="child" is-dialog="isDialog" section="{{section}}"></umb-tree-item>
</ul>
</li>

4
src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html
View File

@@ -5,8 +5,8 @@
ng-repeat="item in content"
ng-class="{'-selected': item.selected}"
ng-click="clickItem(item, $event, $index)">
<i ng-if="item.selected" class="icon-check umb-content-grid__checkmark"></i>
<!--<i ng-if="item.selected" class="icon-check umb-content-grid__checkmark"></i>-->
<div class="umb-content-grid__content">

15
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
View File

@@ -13,13 +13,13 @@
<umb-editor-sub-header-section ng-if="(listViewAllowedTypes && listViewAllowedTypes.length > 0 && (selection.length == 0)) && (currentNodePermissions == null || currentNodePermissions.canCreate)">
<div class="btn-group" ng-show="createAllowedButtonSingle">
<a class="btn btn-success" ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)">
<a class="btn btn-white" ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)">
<localize key="actions_create">Create</localize> {{listViewAllowedTypes[0].name}}
</a>
</div>
<div class="btn-group" ng-show="createAllowedButtonSingleWithBlueprints">
<a class="btn btn-success dropdown-toggle" data-toggle="dropdown" ng-href="">
<a class="btn btn-white dropdown-toggle" data-toggle="dropdown" ng-href="">
<span ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)">
<localize key="actions_create">Create</localize> {{listViewAllowedTypes[0].name}}
</span>
@@ -85,6 +85,7 @@
type="button"
label="Clear selection"
label-key="buttons_clearSelection"
button-style="selection"
action="clearSelection()"
disabled="actionInProgress">
</umb-button>
@@ -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 @@
<umb-button
ng-if="options.allowBulkDelete && (buttonPermissions == null || buttonPermissions.canDelete)"
type="button"
button-style="outline"
button-style="selection"
label-key="actions_delete"
icon="icon-trash"
action="delete()"