From 5ae10c4ee36ecb1f2ee54b42bb1d184a63858b0e Mon Sep 17 00:00:00 2001 From: Rob Lourens Date: Tue, 2 Oct 2018 18:22:25 -0700 Subject: [PATCH] Fix #59696 - fix settings container sizing, and shadow positioning when the editor gets narrow --- .../media/settingsEditor2.css | 21 ++++++++++++------- .../electron-browser/settingsEditor2.ts | 3 ++- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/vs/workbench/parts/preferences/electron-browser/media/settingsEditor2.css b/src/vs/workbench/parts/preferences/electron-browser/media/settingsEditor2.css index df0e100edb7..f67db603a12 100644 --- a/src/vs/workbench/parts/preferences/electron-browser/media/settingsEditor2.css +++ b/src/vs/workbench/parts/preferences/electron-browser/media/settingsEditor2.css @@ -122,7 +122,7 @@ } .settings-editor.no-toc-search > .settings-body .settings-tree-container .monaco-tree-wrapper, -.settings-editor.narrow > .settings-body .settings-tree-container .monaco-tree-wrapper { +.settings-editor.narrow-width > .settings-body .settings-tree-container .monaco-tree-wrapper { margin-left: 0px; } @@ -132,15 +132,16 @@ } .settings-editor > .settings-body .settings-tree-container .monaco-tree-wrapper .monaco-tree-rows { - margin-left: 208px; - width: calc(100% - 208px); + padding-left: 208px; + padding-right: 24px; + box-sizing: border-box; } .settings-editor.no-toc-search > .settings-body .settings-tree-container .monaco-tree-wrapper .monaco-tree-rows, -.settings-editor.narrow > .settings-body .settings-tree-container .monaco-tree-wrapper .monaco-tree-rows { +.settings-editor.narrow-width > .settings-body .settings-tree-container .monaco-tree-wrapper .monaco-tree-rows { /* 3 margin + 20 padding + 2 border */ width: calc(100% - 25px); - margin-left: 25px; + padding-left: 25px; } .settings-editor > .settings-body .settings-tree-container .monaco-tree-row > .content::before { @@ -148,6 +149,12 @@ display: none !important; } +.settings-editor.mid-width > .settings-body > .settings-tree-container .shadow.top { + left: 0; + width: calc(100% - 48px); + margin-left: 24px; +} + .settings-editor > .settings-body > .settings-tree-container .shadow.top { left: 50%; max-width: 952px; /* 1000 - 24*2 padding */ @@ -200,7 +207,7 @@ } .settings-editor.no-toc-search > .settings-body .settings-toc-container, -.settings-editor.narrow > .settings-body .settings-toc-container { +.settings-editor.narrow-width > .settings-body .settings-toc-container { display: none; } @@ -269,7 +276,7 @@ } .settings-editor.no-toc-search > .settings-body .settings-tree-container, -.settings-editor.narrow > .settings-body .settings-tree-container { +.settings-editor.narrow-width > .settings-body .settings-tree-container { margin-left: 0px; } diff --git a/src/vs/workbench/parts/preferences/electron-browser/settingsEditor2.ts b/src/vs/workbench/parts/preferences/electron-browser/settingsEditor2.ts index e725ea9966e..1620c9c9383 100644 --- a/src/vs/workbench/parts/preferences/electron-browser/settingsEditor2.ts +++ b/src/vs/workbench/parts/preferences/electron-browser/settingsEditor2.ts @@ -240,7 +240,8 @@ export class SettingsEditor2 extends BaseEditor { const monacoWidth = (innerWidth > 1000 ? 1000 : innerWidth) - 10; this.searchWidget.layout({ height: 20, width: monacoWidth }); - DOM.toggleClass(this.rootElement, 'narrow', dimension.width < 600); + DOM.toggleClass(this.rootElement, 'mid-width', dimension.width < 1000 && dimension.width >= 600); + DOM.toggleClass(this.rootElement, 'narrow-width', dimension.width < 600); // #56185 if (dimension.width !== this.lastLayedoutWidth) { -- GitLab