Fix invisible svg icons

eclipse-theia · Oct 6, 2021 · 3e3a92a · 3e3a92a
1 parent 9e5b1ca
commit 3e3a92a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 4 deletions.
diff --git a/examples/api-samples/src/browser/style/branding.css b/examples/api-samples/src/browser/style/branding.css
@@ -27,3 +27,8 @@
     background-repeat: no-repeat;
     background-size: 15%;
 }
+
+.unclosable-window-icon {
+    -webkit-mask: url('window-icon.svg');
+    mask: url('window-icon.svg');
+}
diff --git a/examples/api-samples/src/browser/style/window-icon.svg b/examples/api-samples/src/browser/style/window-icon.svg
diff --git a/examples/api-samples/src/browser/view/sample-unclosable-view.tsx b/examples/api-samples/src/browser/view/sample-unclosable-view.tsx
@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { codicon, ReactWidget } from '@theia/core/lib/browser';
+import { ReactWidget } from '@theia/core/lib/browser';
 import { injectable, postConstruct } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 
@@ -30,7 +30,7 @@ export class SampleViewUnclosableView extends ReactWidget {
     this.id = SampleViewUnclosableView.ID;
     this.title.caption = 'Sample Unclosable View';
     this.title.label = 'Sample Unclosable View';
-    this.title.iconClass = codicon('window');
+    this.title.iconClass = 'unclosable-window-icon';
     this.title.closable = false;
     this.update();
   }

diff --git a/packages/core/src/browser/style/sidepanel.css b/packages/core/src/browser/style/sidepanel.css
@@ -128,6 +128,11 @@
   -webkit-mask-position: 50% 50%;
 }
 
+/* inactive legacy/plugin icons */
+.p-TabBar.theia-app-sides .p-TabBar-tabIcon:not(.codicon) {
+  background: var(--theia-activityBar-inactiveForeground);
+}
+
 /* inactive file icons */
 .p-TabBar.theia-app-sides .file-icon.p-TabBar-tabIcon {
   background: inherit !important;
@@ -144,8 +149,9 @@
   color: var(--theia-activityBar-foreground);
 }
 
-.p-TabBar.theia-app-sides .p-TabBar-tabIcon.theia-plugin-view-container:hover,
-.p-TabBar.theia-app-sides .p-mod-current .p-TabBar-tabIcon.theia-plugin-view-container {
+/* active legacy/plugin icons */
+.p-TabBar.theia-app-sides .p-TabBar-tabIcon:not(.codicon):hover,
+.p-TabBar.theia-app-sides .p-mod-current .p-TabBar-tabIcon:not(.codicon) {
   background-color: var(--theia-activityBar-foreground);
 }
 

diff --git a/packages/core/src/browser/style/tabs.css b/packages/core/src/browser/style/tabs.css
@@ -185,18 +185,34 @@ body.theia-editor-highlightModifiedTabs
     background-repeat: no-repeat;
 }
 
+/* common icons */
 .p-TabBar.theia-app-centers .p-TabBar-tabIcon,
 .p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon {
     min-height: 14px;
     background-size: 13px;
     background-position-y: 3px;
+    background: var(--theia-icon-foreground);
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: auto 13px;
     mask-repeat: no-repeat;
     mask-size: auto 13px;
     padding-right: 8px;
 }
 
+/* codicons */
+.p-TabBar.theia-app-centers .p-TabBar-tabIcon.codicon,
+.p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon.codicon {
+    background: none;
+}
+
+/* file icons */
+.p-TabBar[data-orientation='horizontal'] .p-TabBar-tabIcon.file-icon,
+.p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon.file-icon {
+    background: none;
+    padding-bottom: 0px;
+    min-height: 20px;
+}
+
 .p-TabBar[data-orientation='horizontal'] .p-TabBar-tabIcon.fa,
 .p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon.fa {
     background: none;