Add preferences wraptabs

Add `wraptabs` preferences at setting menu, and modify the coresponding css styles to make whole display fit the wrapped tabs.
smart-bo · Dec 7, 2021 · df53c4c · df53c4c
1 parent c4c6cab
commit df53c4c
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 0 deletions.
diff --git a/packages/core/src/browser/common-frontend-contribution.ts b/packages/core/src/browser/common-frontend-contribution.ts
@@ -370,6 +370,7 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
         this.registerCtrlWHandling();
 
         this.updateStyles();
+        this.wrapTabs();
         this.updateThemeFromPreference('workbench.colorTheme');
         this.updateThemeFromPreference('workbench.iconTheme');
         this.preferences.onPreferenceChanged(e => this.handlePreferenceChange(e, app));
@@ -407,6 +408,13 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
         }
     }
 
+    protected wrapTabs(): void {
+        document.body.classList.remove('theia-editor-wrapTabs');
+        if (this.preferences['workbench.editor.wraptabs']) {
+            document.body.classList.add('theia-editor-wrapTabs');
+        }
+    }
+
     protected updateThemePreference(preferenceName: 'workbench.colorTheme' | 'workbench.iconTheme'): void {
         const inspect = this.preferenceService.inspect<string | null>(preferenceName);
         const workspaceValue = inspect && inspect.workspaceValue;
@@ -460,6 +468,10 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
                 }
                 break;
             }
+            case 'workbench.editor.wraptabs': {
+                this.wrapTabs();
+                break;
+            }
         }
     }
 

diff --git a/packages/core/src/browser/core-preferences.ts b/packages/core/src/browser/core-preferences.ts
@@ -92,6 +92,12 @@ export const corePreferenceSchema: PreferenceSchema = {
             'description': nls.localizeByDefault('Controls whether a top border is drawn on modified (dirty) editor tabs or not. This value is ignored when `#workbench.editor.showTabs#` is disabled.'),
             'default': false
         },
+        'workbench.editor.wraptabs': {
+            'type': 'boolean',
+            // eslint-disable-next-line max-len
+            'description': nls.localizeByDefault('Controls whether tabs should be wrapped over multiple lines when exceeding available space or whether a scrollbar should appear instead.'),
+            'default': false
+        },
         'workbench.editor.closeOnFileDelete': {
             'type': 'boolean',
             // eslint-disable-next-line max-len
@@ -148,6 +154,7 @@ export interface CoreConfiguration {
     'workbench.list.openMode': 'singleClick' | 'doubleClick';
     'workbench.commandPalette.history': number;
     'workbench.editor.highlightModifiedTabs': boolean;
+    'workbench.editor.wraptabs': boolean;
     'workbench.editor.closeOnFileDelete': boolean;
     'workbench.colorTheme': string;
     'workbench.iconTheme': string | null;

diff --git a/packages/core/src/browser/style/tabs.css b/packages/core/src/browser/style/tabs.css
@@ -442,3 +442,34 @@ body.theia-editor-highlightModifiedTabs
   flex-flow: row nowrap;
   min-width: 100%;
 }
+
+/* When wraptabs is selected*/
+body.theia-editor-wrapTabs
+.p-TabBar .p-TabBar-content {
+  cursor: pointer;
+  display: flex;
+  flex-flow: row wrap;
+}
+
+body.theia-editor-wrapTabs
+#theia-main-content-panel .p-Widget.p-DockPanel-widget {
+    background: var(--theia-editor-background);  
+    position: relative !important;  
+    top:0px !important;
+}
+
+body.theia-editor-wrapTabs
+.p-TabBar.theia-tabBar-multirow[data-orientation='horizontal'] {
+  min-height: calc(var(--theia-breadcrumbs-height) + var(--theia-horizontal-toolbar-height));
+  flex-direction: column;
+  position: static !important;
+  height: fit-content !important;
+}
+
+body.theia-editor-wrapTabs
+.p-TabBar.theia-app-centers {
+  background: var(--theia-editorGroupHeader-tabsBackground);
+  position: static !important;
+  height: fit-content !important;
+}
+