Improve icon handling on file dialog

eclipse-theia · Sep 27, 2021 · 895c528 · 895c528
1 parent b754b79
commit 895c528
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 26 deletions.
diff --git a/packages/filesystem/src/browser/file-dialog/file-dialog.ts b/packages/filesystem/src/browser/file-dialog/file-dialog.ts
@@ -146,16 +146,16 @@ export abstract class FileDialog<T> extends AbstractDialog<T> {
         navigationPanel.classList.add(NAVIGATION_PANEL_CLASS);
         this.contentNode.appendChild(navigationPanel);
 
-        navigationPanel.appendChild(this.back = createIconButton(...codiconArray('chevron-left')));
+        navigationPanel.appendChild(this.back = createIconButton(...codiconArray('chevron-left', true)));
         this.back.classList.add(NAVIGATION_BACK_CLASS);
         this.back.title = 'Navigate Back';
-        navigationPanel.appendChild(this.forward = createIconButton(...codiconArray('chevron-right')));
+        navigationPanel.appendChild(this.forward = createIconButton(...codiconArray('chevron-right', true)));
         this.forward.classList.add(NAVIGATION_FORWARD_CLASS);
         this.forward.title = 'Navigate Forward';
-        navigationPanel.appendChild(this.home = createIconButton(...codiconArray('home')));
+        navigationPanel.appendChild(this.home = createIconButton(...codiconArray('home', true)));
         this.home.classList.add(NAVIGATION_HOME_CLASS);
         this.home.title = 'Go To Initial Location';
-        navigationPanel.appendChild(this.up = createIconButton(...codiconArray('arrow-up')));
+        navigationPanel.appendChild(this.up = createIconButton(...codiconArray('arrow-up', true)));
         this.up.classList.add(NAVIGATION_UP_CLASS);
         this.up.title = 'Navigate Up One Directory';
 

diff --git a/packages/filesystem/src/browser/style/file-dialog.css b/packages/filesystem/src/browser/style/file-dialog.css
@@ -16,8 +16,8 @@
 
 :root {
     --theia-private-file-dialog-input-height: 21px;
-    --theia-private-location-list-panel-left: 82px;
-    --theia-private-location-list-panel-width: 417px;
+    --theia-private-location-list-panel-left: 92px;
+    --theia-private-location-list-panel-width: 407px;
     --theia-private-navigation-panel-icon-size: 21px;
     --theia-private-navigation-panel-line-height: 23px;
 }
@@ -74,50 +74,42 @@
     text-align: center;
 }
 
-.dialogContent .theia-NavigationPanel span:not(.theia-mod-disabled) i.active 
-{
-    transform: scale(var(--theia-toolbar-active-transform-scale));
-}
-
-.dialogContent .theia-NavigationPanel span:focus 
-{
+.dialogContent .theia-NavigationPanel span:focus {
     outline: none;
     box-shadow: none;
 }
 
-.dialogContent .theia-NavigationPanel span:focus-visible
-{
+.dialogContent .theia-NavigationPanel span:focus-visible {
     outline-width: 1px;
     outline-style: solid;
     outline-offset: -1px;
     opacity: 1 !important;
     outline-color: var(--theia-focusBorder);
 }
 
-.dialogContent .theia-NavigationBack.theia-mod-disabled:focus,
-.dialogContent .theia-NavigationForward.theia-mod-disabled:focus,
-.dialogContent .theia-NavigationHome.theia-mod-disabled:focus,
-.dialogContent .theia-NavigationUp.theia-mod-disabled:focus
-{
-    outline: none;
-    border: none;
-    opacity: var(--theia-mod-disabled-opacity) !important;
+.dialogContent span.theia-mod-disabled {
+    pointer-events: none;
+    cursor: default;
+}
+
+.dialogContent span.theia-mod-disabled .action-item {
+    background: none;
 }
 
 .dialogContent .theia-NavigationBack {
     left: auto;
 }
 
 .dialogContent .theia-NavigationForward {
-    left: 21px;
+    left: 23px;
 }
 
 .dialogContent .theia-NavigationHome {
-    left: 41px;
+    left: 45px;
 }
 
 .dialogContent .theia-NavigationUp {
-    left: 61px;
+    left: 67px;
 }
 
 .dialogContent .theia-LocationListPanel {