From 509d8ce4dd5bc7edb5e6855b3d753df8a78542d6 Mon Sep 17 00:00:00 2001 From: eeakrnm Date: Fri, 8 May 2020 17:05:43 -0500 Subject: [PATCH] Fix prefs shadow and improve tab styling Signed-off-by: Kenneth Marut --- .../preferences/src/browser/style/index.css | 18 ++++++++++++- .../src/browser/util/preference-types.ts | 1 + .../views/preference-editor-widget.tsx | 6 ++++- .../views/preference-scope-tabbar-widget.tsx | 27 ++++++++++++++++--- 4 files changed, 46 insertions(+), 6 deletions(-) diff --git a/packages/preferences/src/browser/style/index.css b/packages/preferences/src/browser/style/index.css index 3bdd5769dfa65..1552ac76b575e 100644 --- a/packages/preferences/src/browser/style/index.css +++ b/packages/preferences/src/browser/style/index.css @@ -58,6 +58,9 @@ .theia-settings-container .preferences-tabbar-widget { grid-area: tabbar; margin: 3px 24px 0px 24px; +} + +.theia-settings-container .preferences-tabbar-widget.with-shadow { box-shadow: 0px 6px 5px -5px var(--theia-widget-shadow); } @@ -67,13 +70,26 @@ #theia-main-content-panel .theia-settings-container #preferences-scope-tab-bar .preferences-scope-tab { background: var(--theia-editor-background); + border-right: unset; + border-bottom: var(--theia-border-width) solid var(--theia-tab-unfocusedInactiveForeground); +} + +#theia-main-content-panel .theia-settings-container .tabbar-underline { + width: 100%; + position:absolute; + top: calc(var(--theia-private-horizontal-tab-height) + var(--theia-private-horizontal-tab-scrollbar-rail-height) / 2 - 1px); + border-top: 1px solid var(--theia-tab-unfocusedInactiveForeground); + z-index: -1; } #theia-main-content-panel .theia-settings-container #preferences-scope-tab-bar .preferences-scope-tab.p-mod-current { color: var(--theia-panelTitle-activeForeground); - border-top: var(--theia-border-width) solid var(--theia-panelTitle-activeBorder); + border-bottom: var(--theia-border-width) solid var(--theia-panelTitle-activeBorder); } +#theia-main-content-panel .theia-settings-container #preferences-scope-tab-bar .preferences-scope-tab.p-mod-current:not(.theia-mod-active) { + border-top: unset; +} #theia-main-content-panel .theia-settings-container #preferences-scope-tab-bar .preferences-scope-tab.preferences-folder-tab .p-TabBar-tabLabel::after { content: 'Folder'; diff --git a/packages/preferences/src/browser/util/preference-types.ts b/packages/preferences/src/browser/util/preference-types.ts index 489ea1bec94fa..fe1985752381c 100644 --- a/packages/preferences/src/browser/util/preference-types.ts +++ b/packages/preferences/src/browser/util/preference-types.ts @@ -98,6 +98,7 @@ export namespace Preference { export interface MouseScrollDetails { firstVisibleChildId: string; + isTop: boolean; }; export interface SelectedTreeNode { diff --git a/packages/preferences/src/browser/views/preference-editor-widget.tsx b/packages/preferences/src/browser/views/preference-editor-widget.tsx index 831828cde95c3..0c400c8588b1d 100644 --- a/packages/preferences/src/browser/views/preference-editor-widget.tsx +++ b/packages/preferences/src/browser/views/preference-editor-widget.tsx @@ -108,10 +108,14 @@ export class PreferencesEditorWidget extends ReactWidget { protected onScroll = (): void => { const scrollContainer = this.node; + const scrollIsTop = scrollContainer.scrollTop === 0; const visibleChildren: string[] = []; this.addFirstVisibleChildId(scrollContainer, visibleChildren); if (visibleChildren.length) { - this.preferencesEventService.onEditorScroll.fire({ firstVisibleChildId: visibleChildren[0] }); + this.preferencesEventService.onEditorScroll.fire({ + firstVisibleChildId: visibleChildren[0], + isTop: scrollIsTop + }); } }; diff --git a/packages/preferences/src/browser/views/preference-scope-tabbar-widget.tsx b/packages/preferences/src/browser/views/preference-scope-tabbar-widget.tsx index 7f2dd6d362e91..8fa54e33c58e0 100644 --- a/packages/preferences/src/browser/views/preference-scope-tabbar-widget.tsx +++ b/packages/preferences/src/browser/views/preference-scope-tabbar-widget.tsx @@ -36,6 +36,8 @@ const GENERAL_FOLDER_TAB_CLASSNAME = 'preference-folder'; const LABELED_FOLDER_TAB_CLASSNAME = 'preferences-folder-tab'; const FOLDER_DROPDOWN_CLASSNAME = 'preferences-folder-dropdown'; const FOLDER_DROPDOWN_ICON_CLASSNAME = 'preferences-folder-dropdown-icon'; +const TABBAR_UNDERLINE_CLASSNAME = 'tabbar-underline'; +const SHADOW_CLASSNAME = 'with-shadow'; const SINGLE_FOLDER_TAB_CLASSNAME = `${PREFERENCE_TAB_CLASSNAME} ${GENERAL_FOLDER_TAB_CLASSNAME} ${LABELED_FOLDER_TAB_CLASSNAME}`; const UNSELECTED_FOLDER_DROPDOWN_CLASSNAME = `${PREFERENCE_TAB_CLASSNAME} ${GENERAL_FOLDER_TAB_CLASSNAME} ${FOLDER_DROPDOWN_CLASSNAME}`; const SELECTED_FOLDER_DROPDOWN_CLASSNAME = `${PREFERENCE_TAB_CLASSNAME} ${GENERAL_FOLDER_TAB_CLASSNAME} ${LABELED_FOLDER_TAB_CLASSNAME} ${FOLDER_DROPDOWN_CLASSNAME}`; @@ -53,6 +55,7 @@ export class PreferencesScopeTabBar extends TabBar { protected folderTitle: Title; protected currentWorkspaceRoots: FileStat[] = []; protected currentSelection: Preference.SelectedScopeDetails = Preference.DEFAULT_SCOPE; + protected editorScrollAtTop = true; protected setNewScopeSelection(newSelection: Preference.SelectedScopeDetails): void { const newIndex = this.titles.findIndex(title => title.dataset.scope === newSelection.scope); @@ -79,6 +82,19 @@ export class PreferencesScopeTabBar extends TabBar { this.doUpdateDisplay(newRoots); }); this.workspaceService.onWorkspaceLocationChanged(() => this.updateWorkspaceTab()); + this.preferencesEventService.onEditorScroll.event((e: Preference.MouseScrollDetails) => { + if (e.isTop !== this.editorScrollAtTop) { + this.editorScrollAtTop = e.isTop; + if (this.editorScrollAtTop) { + this.removeClass(SHADOW_CLASSNAME); + } else { + this.addClass(SHADOW_CLASSNAME); + } + } + }); + const tabUnderline = document.createElement('div'); + tabUnderline.className = TABBAR_UNDERLINE_CLASSNAME; + this.node.append(tabUnderline); } protected setupInitialDisplay(): void { @@ -98,7 +114,7 @@ export class PreferencesScopeTabBar extends TabBar { tab.onkeypress = () => { if (tab.className.includes(GENERAL_FOLDER_TAB_CLASSNAME) && this.currentWorkspaceRoots.length > 1) { const tabRect = tab.getBoundingClientRect(); - this.openContextMenu(tabRect); + this.openContextMenu(tabRect, tab, 'keypress'); } else { this.setNewScopeSelection(this.titles[index].dataset as unknown as Preference.SelectedScopeDetails); } @@ -190,17 +206,20 @@ export class PreferencesScopeTabBar extends TabBar { const folderTab = this.contentNode.querySelector(`.${GENERAL_FOLDER_TAB_CLASSNAME}`); if (folderTab && folderTab.contains(e.target as HTMLElement) && this.currentWorkspaceRoots.length > 1) { const tabRect = folderTab.getBoundingClientRect(); - this.openContextMenu(tabRect); + this.openContextMenu(tabRect, (folderTab as HTMLElement), 'click'); return; } super.handleEvent(e); } - protected openContextMenu(tabRect: DOMRect | ClientRect): void { + protected openContextMenu(tabRect: DOMRect | ClientRect, folderTabNode: HTMLElement, source: 'click' | 'keypress'): void { this.contextMenuRenderer.render({ menuPath: FOLDER_SCOPE_MENU_PATH, anchor: { x: tabRect.left, y: tabRect.bottom }, - args: [this.folderSelectionCallback, 'from-tabbar'] + args: [this.folderSelectionCallback, 'from-tabbar'], + onHide: () => { + if (source === 'click') { folderTabNode.blur(); } + } }); }