Align view container styling with VSCode

eclipse-theia · Mar 8, 2022 · a51a32f · a51a32f
1 parent b8df294
commit a51a32f
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 12 deletions.
diff --git a/packages/core/src/browser/style/index.css b/packages/core/src/browser/style/index.css
@@ -143,7 +143,7 @@ blockquote {
 .theia-header {
   text-transform: uppercase;
   font-size: var(--theia-ui-font-size0);
-  font-weight: 450;
+  font-weight: 700;
 }
 
 .p-Widget {

diff --git a/packages/core/src/browser/style/view-container.css b/packages/core/src/browser/style/view-container.css
@@ -41,10 +41,6 @@
     min-width: 2px;
 }
 
-.theia-view-container > .p-SplitPanel > .p-SplitPanel-handle {
-    background-color: var(--theia-sideBarSectionHeader-border);
-}
-
 .p-SplitPanel > .p-SplitPanel-handle:hover::after {
     background-color: var(--theia-sash-hoverBorder);
     transition-delay: var(--theia-sash-hoverDelay);
@@ -78,6 +74,14 @@
     font-weight: 700;
 }
 
+.p-Widget > .theia-view-container-part-header {
+    border-top: 1px solid var(--theia-sideBarSectionHeader-border);
+}
+
+.p-Widget.p-first-visible > .theia-view-container-part-header {
+    border-top: none;
+}
+
 .theia-view-container-part-header .theia-ExpansionToggle {
     padding-left: 4px;
 }

diff --git a/packages/core/src/browser/view-container.ts b/packages/core/src/browser/view-container.ts
@@ -197,6 +197,19 @@ export class ViewContainer extends BaseWidget implements StatefulWidget, Applica
         this.currentPart = expandedParts[0] || visibleParts[0];
     }
 
+    protected updateSplitterVisibility(): void {
+        const className = 'p-first-visible';
+        let firstFound = false;
+        for (const part of this.getParts()) {
+            if (!part.isHidden && !firstFound) {
+                part.addClass(className);
+                firstFound = true;
+            } else {
+                part.removeClass(className);
+            }
+        }
+    }
+
     protected titleOptions: ViewContainerTitleOptions | undefined;
 
     setTitleOptions(titleOptions: ViewContainerTitleOptions | undefined): void {
@@ -372,6 +385,7 @@ export class ViewContainer extends BaseWidget implements StatefulWidget, Applica
         this.refreshMenu(newPart);
         this.updateTitle();
         this.updateCurrentPart();
+        this.updateSplitterVisibility();
         this.update();
         this.fireDidChangeTrackableWidgets();
         toRemoveWidget.pushAll([
@@ -387,13 +401,15 @@ export class ViewContainer extends BaseWidget implements StatefulWidget, Applica
                     this.update();
                     this.updateTitle();
                     this.updateCurrentPart();
+                    this.updateSplitterVisibility();
                     this.fireDidChangeTrackableWidgets();
                 }
             }),
             this.registerDND(newPart),
             newPart.onDidChangeVisibility(() => {
                 this.updateTitle();
                 this.updateCurrentPart();
+                this.updateSplitterVisibility();
             }),
             newPart.onCollapsed(() => {
                 this.containerLayout.updateCollapsed(newPart, this.enableAnimation);

diff --git a/packages/debug/src/browser/style/index.css b/packages/debug/src/browser/style/index.css
@@ -114,14 +114,9 @@
     display: flex;
     align-items: center;
     padding-top: calc(var(--theia-ui-padding)*2);
-    padding-right: calc(var(--theia-ui-padding)*2);
+    padding-right: calc(var(--theia-ui-padding)*3);
     padding-bottom: var(--theia-ui-padding);
-    margin-right: var(--theia-ui-padding);
-    margin-left: var(--theia-ui-padding);
-}
-
-.theia-side-panel .debug-toolbar {
-    padding-left: 3px;
+    padding-left: calc(var(--theia-ui-padding)*2);
 }
 
 .theia-session-container > .debug-toolbar {