Aligned widget content in sidepanels to header title.

Fixes #4622 Signed-off-by: Jan Bicker <jan.bicker@typefox.io>
eclipse-theia · Mar 21, 2019 · 85944ce · 85944ce
1 parent e35ba88
commit 85944ce
Show file tree

Hide file tree

Showing 13 changed files with 62 additions and 9 deletions.
diff --git a/packages/callhierarchy/src/browser/style/index.css b/packages/callhierarchy/src/browser/style/index.css
@@ -24,11 +24,12 @@
 }
 
 .theia-CallHierarchyTree .theia-ExpansionToggle {
-    min-width: 16px;
+    min-width: 9px;
+    padding-right: 4px;
 }
 
 .theia-CallHierarchyTree .noCallers {
-    margin: 5px;
+    margin: 5px 19px;
 }
 
 .theia-CallHierarchyTree .definitionNode {

diff --git a/packages/core/src/browser/shell/side-panel-handler.ts b/packages/core/src/browser/shell/side-panel-handler.ts
@@ -152,6 +152,7 @@ export class SidePanelHandler {
             mode: 'single-document'
         });
         sidePanel.id = 'theia-' + this.side + '-side-panel';
+        sidePanel.addClass('theia-side-panel');
 
         sidePanel.widgetActivated.connect((sender, widget) => {
             this.tabBar.currentTitle = widget.title;

diff --git a/packages/core/src/browser/style/alert-messages.css b/packages/core/src/browser/style/alert-messages.css
@@ -20,6 +20,10 @@
     padding: 10px;
 }
 
+.theia-side-panel .theia-alert-message-container {
+    padding-left: 20px;
+}
+
 .theia-alert-message-container i {
     padding-right: 3px;
 }

diff --git a/packages/core/src/browser/style/tree.css b/packages/core/src/browser/style/tree.css
@@ -52,7 +52,9 @@
 
 .theia-ExpansionToggle {
     padding-right: var(--theia-ui-padding);
-    min-width: 8px;
+    min-width: 10px;
+    display: flex;
+    justify-content: center;
 }
 
 .theia-ExpansionToggle:hover {

diff --git a/packages/debug/src/browser/style/index.css b/packages/debug/src/browser/style/index.css
@@ -23,6 +23,11 @@
     color: var(--theia-ui-font-color1);
 }
 
+.theia-side-panel .theia-debug-container .theia-ExpansionToggle {
+    padding-right: 4px;
+    min-width: 10px;
+}
+
 #theia-bottom-content-panel .theia-session-container .theia-view-container {
     flex-direction: row;
 }
@@ -118,6 +123,10 @@
     margin-left: var(--theia-ui-padding);
 }
 
+.theia-side-panel .debug-toolbar {
+    padding-left: 3px;
+}
+
 .theia-session-container > .debug-toolbar {
     padding-top: var(--theia-ui-padding);
     padding-bottom: var(--theia-ui-padding);

diff --git a/packages/extension-manager/src/browser/style/extension-sidebar.css b/packages/extension-manager/src/browser/style/extension-sidebar.css
@@ -27,6 +27,10 @@
     flex-shrink: 0;
 }
 
+.theia-side-panel #extensionSearchContainer {
+    padding-left: 20px;
+}
+
 #extensionSearchFieldContainer {
     flex: 1;
 }
@@ -56,6 +60,10 @@
     background: var(--theia-layout-color0);
 }
 
+.theia-side-panel .theia-extensions .extensionHeaderContainer {
+    padding-left: 20px;
+}
+
 .theia-extensions .extensionHeaderContainer:hover {
     background: var(--theia-layout-color2);
 }

diff --git a/packages/git/src/browser/style/history.css b/packages/git/src/browser/style/history.css
@@ -18,11 +18,7 @@
     margin: 3px 0;
 }
 
-.theia-git .commitListElement {
-    border-top: 1px solid var(--theia-layout-color4);
-}
-
-.theia-git .commitListElement.first {
+.theia-git .commitListElement.first .containerHead{
     border: none;
 }
 
@@ -31,6 +27,7 @@
     height: 50px;
     display: flex;
     align-items: center;
+    border-top: 1px solid var(--theia-layout-color4);
 }
 
 .theia-git .commitListElement .containerHead:hover {

diff --git a/packages/git/src/browser/style/index.css b/packages/git/src/browser/style/index.css
@@ -21,6 +21,10 @@
     background: var(--theia-layout-color0);
 }
 
+.theia-side-panel .theia-git {
+    padding-left: 19px;
+}
+
 .theia-git:focus, .theia-git :focus {
     outline: 0;
     box-shadow: none;

diff --git a/packages/markers/src/browser/style/index.css b/packages/markers/src/browser/style/index.css
@@ -23,6 +23,10 @@
     padding: 5px;
 }
 
+.theia-side-panel .theia-marker-container .noMarkers {
+    padding-left: 19px;
+}
+
 .theia-marker-container .markerNode,
 .theia-marker-container .markerFileNode {
     display: flex;

diff --git a/packages/outline-view/src/browser/styles/index.css b/packages/outline-view/src/browser/styles/index.css
@@ -23,3 +23,7 @@
     padding: 10px;
     text-align: left;
 }
+
+.theia-side-panel .no-outline {
+    margin-left: 9px;
+}
diff --git a/packages/output/src/browser/style/output.css b/packages/output/src/browser/style/output.css
@@ -26,6 +26,10 @@
     box-sizing: border-box;
 }
 
+.theia-side-panel #outputView #outputContents {
+    margin-left: 14px;
+}
+
 #outputView #outputOverlay {
     position: absolute;
     right: 24px;

diff --git a/packages/plugin-ext/src/main/browser/style/plugin-sidebar.css b/packages/plugin-ext/src/main/browser/style/plugin-sidebar.css
@@ -13,7 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
- 
+
 .theia-plugins {
     min-width: 250px !important;
     background-color: var(--theia-layout-color0);
@@ -35,6 +35,10 @@
     border-bottom: 1px solid;
 }
 
+.theia-side-panel .theia-plugins .pluginHeaderContainer {
+    padding-left: 20px;
+}
+
 .theia-plugins .pluginHeaderContainer:hover {
     background: var(--theia-layout-color2);
 }

diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
@@ -28,6 +28,11 @@
     box-sizing: border-box;
 }
 
+.t-siw-search-container .theia-ExpansionToggle {
+    padding-right: 4px;
+    min-width: 6px;
+}
+
 .t-siw-search-container input[type="text"] {
     flex: 1;
     line-height: var(--theia-content-line-height);
@@ -208,6 +213,7 @@
 
 .t-siw-search-container .resultContainer {
     height: 100%;
+    margin-left: 13px;
 }
 
 .t-siw-search-container .result {
@@ -328,6 +334,11 @@
     box-sizing: border-box;
 }
 
+.theia-side-panel .replace-toggle {
+    width: 13px;
+    min-width: 13px;
+}
+
 .replace-toggle:hover {
     background: var(--theia-layout-color2);
 }