in progress styling adjustments

eclipse-theia · Feb 16, 2022 · ea0e4b3 · ea0e4b3
1 parent 4e354f2
commit ea0e4b3
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 12 deletions.
diff --git a/packages/core/src/browser/common-frontend-contribution.ts b/packages/core/src/browser/common-frontend-contribution.ts
@@ -1740,6 +1740,12 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
                     dark: 'input.border', light: 'input.border', hc: 'input.border'
                 }, description: 'Settings editor number input box border.'
             },
+            // Toolbar Action colors should be aligned with https://code.visualstudio.com/api/references/theme-color#action-colors
+            {
+                id: 'toolbar.hoverBackground', defaults: {
+                    dark: '#5a5d5e50', light: '#b8b8b850', hc: undefined
+                }, description: 'Toolbar background when hovering over actions using the mouse.'
+            },
 
             // Theia Variable colors
             {

diff --git a/packages/core/src/browser/style/index.css b/packages/core/src/browser/style/index.css
@@ -170,7 +170,7 @@ blockquote {
 }
 
 .action-item:hover {
-    background-color: rgba(50%, 50%, 50%, 0.2);
+    background-color: var(--theia-toolbar-hoverBackground);
 }
 
 button.theia-button, .theia-button {

diff --git a/packages/toolbar/src/browser/main-toolbar.tsx b/packages/toolbar/src/browser/main-toolbar.tsx
@@ -243,7 +243,7 @@ export class MainToolbarImpl extends TabBarToolbar {
                 id={item.id}
                 data-position={stringifiedPosition}
                 key={`${item.id}-${stringifiedPosition}`}
-                className={`${toolbarItemClassNames} main-toolbar-item`}
+                className={`${toolbarItemClassNames} main-toolbar-item action-item`}
                 onMouseDown={this.onMouseDownEvent}
                 onMouseUp={this.onMouseUpEvent}
                 onMouseOut={this.onMouseUpEvent}

diff --git a/packages/toolbar/src/browser/style/toolbar-shell-style.css b/packages/toolbar/src/browser/style/toolbar-shell-style.css
@@ -14,28 +14,35 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-
-
 #main-toolbar {
-    --toolbarHeight: calc(var(--theia-private-menubar-height) - 3px);
+    --toolbar-height: calc(var(--theia-private-menubar-height) - 2px);
     --toolbar-item-padding: 5px;
     --dropzone-background: rgb(0, 0, 0, 0.3);
+    --toolbar-icon-size: 20px;
 
-    min-height: var(--toolbarHeight);
+    min-height: var(--toolbar-height);
     color: var(--theia-activityBar-foreground);
     background: var(--theia-activityBar-background);
-    box-shadow: 0px 4px 2px -2px var(--theia-widget-shadow);
-    padding: 2px 4px;
+    /* box-shadow: 0px 4px 2px -2px var(--theia-widget-shadow); */
+    border-bottom: solid 2px var(--theia-activityBar-foreground);
+    opacity: var(--theia-mod-disabled-opacity);
+    /* padding: 2px 4px; */
     display: flex;
     flex-direction: column;
+    justify-content: center;
+    position: relative;
+}
+
+#main-toolbar .theia-progress-bar-container {
+    position: absolute;
+    bottom: 0;
 }
 
 .main-toolbar-wrapper {
     display: flex;
     flex-direction: row;
     width: 100%;
     overflow: hidden;
-    margin-top: 1px;
 }
 
 .main-toolbar-wrapper .toolbar-column {
@@ -77,11 +84,14 @@
 }
 
 #main-toolbar .main-toolbar-item .codicon {
-    font-size: 20px;
+    font-size: var(--toolbar-icon-size);
+    width: var(--toolbar-icon-size);
+    height: var(--toolbar-icon-size);
+    line-height: var(--toolbar-icon-size);
 }
 
-#main-toolbar .main-toolbar-item.enabled:hover:not(.dragging):not(.active) {
-    transform: scale(1.1);
+#main-toolbar .main-toolbar-item.action-item.enabled:hover:not(.dragging):not(.active) {
+    background-color: var(--theia-toolbar-hoverBackground);
 }
 
 #main-toolbar .main-toolbar-item .hover-overlay {