BrushUp: improve outline with icons style
diff --git a/eclipse-scout-core/src/desktop/outline/Outline.less b/eclipse-scout-core/src/desktop/outline/Outline.less
index 00955f4..a267384 100644
--- a/eclipse-scout-core/src/desktop/outline/Outline.less
+++ b/eclipse-scout-core/src/desktop/outline/Outline.less
@@ -49,6 +49,8 @@
& > .font-icon {
line-height: @outline-node-font-icon-line-height;
+ font-size: @outline-node-font-icon-size;
+ color: @outline-node-font-icon-color;
}
& > .menubar {
@@ -60,14 +62,13 @@
padding-top: @outline-node-control-padding-y;
padding-left: @outline-node-control-padding-left;
line-height: @outline-node-control-line-height;
+ color: @outline-node-control-color;
&::before {
font-size: @outline-node-control-size;
- /* always use same color as the tree-node label */
- color: inherit;
}
- &:hover::before {
+ &:hover {
color: @highlight-color;
}
}
@@ -76,6 +77,11 @@
color: @outline-selection-color;
background-color: @outline-selection-background-color;
border: 0;
+
+ & > .font-icon,
+ & > .tree-node-control {
+ color: fade(@outline-selection-color, 70%);
+ }
}
}
}
diff --git a/eclipse-scout-core/src/style/colors.less b/eclipse-scout-core/src/style/colors.less
index fb2ab6d..189fb48 100644
--- a/eclipse-scout-core/src/style/colors.less
+++ b/eclipse-scout-core/src/style/colors.less
@@ -282,7 +282,7 @@
@navigate-up-button-color: @button-color;
@desktop-navigation-background-color: @desktop-header-background-color;
@desktop-navigation-body-background-color: @palette-white;
-@desktop-navigation-color: @palette-gray-10;
+@desktop-navigation-color: @palette-gray-9;
@notification-ok-background-color: @palette-green-0;
@notification-ok-border-color: @palette-green-3;
@notification-info-background-color: @palette-blue-0;
@@ -303,6 +303,8 @@
@outline-selection-color: @palette-white;
@outline-title-color: @palette-blue-6;
@outline-title-border-color: @border-color;
+@outline-node-control-color: @outline-node-font-icon-color;
+@outline-node-font-icon-color: @icon-light-color;
@planner-large-scale-item-line-color: fade(@palette-black, 20%);
@planner-small-scale-item-line-color: fade(@palette-black, 7%);
@planner-mode-selected-color: @calendar-mode-selected-color;
diff --git a/eclipse-scout-core/src/style/sizes.less b/eclipse-scout-core/src/style/sizes.less
index dada42f..453e490 100644
--- a/eclipse-scout-core/src/style/sizes.less
+++ b/eclipse-scout-core/src/style/sizes.less
@@ -187,8 +187,8 @@
@menubar-item-margin-x: 2px;
@menubar-item-margin-y: 2px;
@menu-item-height: 39px;
-@menu-item-min-image-icon-width: 18px;
-@menu-item-max-image-icon-height: 18px;
+@menu-item-min-image-icon-width: 16px;
+@menu-item-max-image-icon-height: 16px;
@menu-item-padding-x: 10px;
@menu-item-padding-y: 6px;
@messagebox-label-padding: 20px;
@@ -206,6 +206,7 @@
@outline-node-control-padding-y: @outline-node-padding-y;
@outline-node-control-line-height: @tree-node-control-line-height;
@outline-node-font-icon-line-height: 14px;
+@outline-node-font-icon-size: 16px;
@outline-node-padding-left: 37px;
@outline-node-padding-right: 8px;
@outline-node-padding-y: 9px;
@@ -291,7 +292,8 @@
@tooltip-menu-padding-y: 5px;
@tooltip-padding-x: 12px;
@tooltip-padding-y: 8px;
-@tree-node-bitmap-icon-size: 16px;
+@tree-node-icon-width: 16px;
+@tree-node-bitmap-icon-size: @tree-node-icon-width;
@tree-node-bitmap-icon-margin-top: -2px;
@tree-node-checkbox-size: 20px;
@tree-node-checkbox-margin-top: -2px;
diff --git a/eclipse-scout-core/src/tree/Tree.less b/eclipse-scout-core/src/tree/Tree.less
index 09e82e5..1b11b5d 100644
--- a/eclipse-scout-core/src/tree/Tree.less
+++ b/eclipse-scout-core/src/tree/Tree.less
@@ -112,8 +112,10 @@
& > .icon {
vertical-align: top;
- padding-right: 7px;
+ padding-right: 10px;
display: inline-block;
+ text-align: center;
+ min-width: @tree-node-icon-width;
/* Use content-box for images because it leads to wrong behavior when someone sets a min-width/height
* on an IMG element that has padding and the available space for the image is 'min-width' - 'padding'
* See ticket 208111 */
@@ -127,7 +129,6 @@
}
&.font-icon {
- padding-right: 10px;
/* Necessary to align with the text, depends on the used font size */
line-height: @tree-node-font-icon-line-height;
}
@@ -199,6 +200,7 @@
padding: @tree-node-padding-y 8px @tree-node-padding-y @tree-node-control-padding-left;
height: 100%;
line-height: @tree-node-control-line-height; /* Necessary to align with the text, depends on the used font size */
+ color: @tree-node-control-color;
&::before {
display: block;
@@ -206,7 +208,6 @@
#scout.font-icon();
font-size: @tree-node-control-size;
content: @icon-angle-right;
- color: @tree-node-control-color;
.tree-node.lazy > & {
font-family: @font-default-family;
@@ -224,7 +225,7 @@
}
- &:hover::before {
+ &:hover {
color: @highlight-color;
}
}
