Only apply close box styling in "dynamic" case.

Signed-off-by: Thomas Mäder <t.s.maeder@gmail.com>
eclipse-theia · Apr 20, 2023 · c816556 · c816556
1 parent 53b52b2
commit c816556
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/packages/core/src/browser/shell/tab-bars.ts b/packages/core/src/browser/shell/tab-bars.ts
@@ -710,8 +710,10 @@ export class ScrollableTabBar extends TabBar<Widget> {
                     }
                 }
             }
+            this.node.classList.add('dynamic-tabs');
         } else {
             this.openTabsContainer.classList.add('p-mod-hidden');
+            this.node.classList.remove('dynamic-tabs');
         }
         for (let i = 0, n = this.titles.length; i < n; ++i) {
             const title = this.titles[i];

diff --git a/packages/core/src/browser/style/tabs.css b/packages/core/src/browser/style/tabs.css
@@ -195,6 +195,7 @@
     height: inherit;
 }
 
+
 .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon,
 .p-TabBar.theia-app-centers .p-TabBar-tab.theia-mod-pinned > .p-TabBar-tabCloseIcon {
   padding: 2px;
@@ -203,7 +204,7 @@
   height: var(--theia-icon-size);
   width: var(--theia-icon-size);
   font: normal normal normal 16px/1 codicon;
-  display: none;
+  display: inline-block;
   text-decoration: none;
   text-rendering: auto;
   text-align: center;
@@ -214,6 +215,12 @@
   -ms-user-select: none;
 }
 
+.p-TabBar.theia-app-centers.dynamic-tabs .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon,
+.p-TabBar.theia-app-centers.dynamic-tabs .p-TabBar-tab.theia-mod-pinned > .p-TabBar-tabCloseIcon {
+  /* hide close icon for dynamic tabs strategy*/
+  display: none;
+}
+
 .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-current > .p-TabBar-tabCloseIcon,
 .p-TabBar.theia-app-centers .p-TabBar-tab:hover.p-mod-closable > .p-TabBar-tabCloseIcon,
 .p-TabBar.theia-app-centers .p-TabBar-tab:hover.theia-mod-pinned > .p-TabBar-tabCloseIcon {
@@ -440,7 +447,8 @@
   flex-direction: column;
 }
 
-.p-TabBar.theia-app-centers[data-orientation='horizontal'] .p-TabBar-tabLabel {
+.p-TabBar.theia-app-centers[data-orientation='horizontal'].dynamic-tabs .p-TabBar-tabLabel {
+  /* fade out text with dynamic tabs strategy*/
   mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1) 15px);
   -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1) 15px);
   flex: 1;