From c1f792ed4ce7106c438e8dd1b19c11a7d5ed0f33 Mon Sep 17 00:00:00 2001 From: Joao Moreno Date: Tue, 19 Sep 2017 17:12:40 +0200 Subject: [PATCH] scm: show actions, display focus --- .../base/browser/ui/splitview/panelview.css | 61 ++++++++++++------- src/vs/base/browser/ui/splitview/panelview.ts | 7 ++- 2 files changed, 46 insertions(+), 22 deletions(-) diff --git a/src/vs/base/browser/ui/splitview/panelview.css b/src/vs/base/browser/ui/splitview/panelview.css index b22f256de7e..6dfe2379b16 100644 --- a/src/vs/base/browser/ui/splitview/panelview.css +++ b/src/vs/base/browser/ui/splitview/panelview.css @@ -22,28 +22,8 @@ text-transform: uppercase; padding-left: 20px; overflow: hidden; -} - -/* Bold font style does not go well with CJK fonts */ -.monaco-panel-view:lang(zh-Hans) .panel > .panel-header, -.monaco-panel-view:lang(zh-Hant) .panel > .panel-header, -.monaco-panel-view:lang(ja) .panel > .panel-header, -.monaco-panel-view:lang(ko) .panel > .panel-header { - font-weight: normal; -} - -.monaco-panel-view .panel > .panel-header.hidden { - display: none; -} - -.monaco-panel-view .panel > .panel-body { - overflow: hidden; - flex: 1; -} - -.monaco-panel-view .panel > .panel-header { + display: flex; cursor: pointer; - /* background: rgba(128, 128, 128, 0.2); */ } .monaco-panel-view .panel > .panel-header { @@ -64,4 +44,43 @@ .vs-dark .monaco-panel-view .panel > .panel-header.expanded { background-image: url('arrow-expand-dark.svg'); +} + +/* TODO: actions should be part of the panel, but they aren't yet */ +.monaco-panel-view .panel > .panel-header > .actions { + display: none; + flex: 1; +} + +/* TODO: actions should be part of the panel, but they aren't yet */ +.monaco-panel-view .panel:hover > .panel-header > .actions, +.monaco-panel-view .panel > .panel-header.focused > .actions { + display: initial; +} + +/* TODO: actions should be part of the panel, but they aren't yet */ +.monaco-panel-view .panel > .panel-header > .actions .action-label { + width: 28px; + height: 22px; + background-size: 16px; + background-position: center center; + background-repeat: no-repeat; + margin-right: 0; +} + +/* Bold font style does not go well with CJK fonts */ +.monaco-panel-view:lang(zh-Hans) .panel > .panel-header, +.monaco-panel-view:lang(zh-Hant) .panel > .panel-header, +.monaco-panel-view:lang(ja) .panel > .panel-header, +.monaco-panel-view:lang(ko) .panel > .panel-header { + font-weight: normal; +} + +.monaco-panel-view .panel > .panel-header.hidden { + display: none; +} + +.monaco-panel-view .panel > .panel-body { + overflow: hidden; + flex: 1; } \ No newline at end of file diff --git a/src/vs/base/browser/ui/splitview/panelview.ts b/src/vs/base/browser/ui/splitview/panelview.ts index c2184f868c4..8b02b510168 100644 --- a/src/vs/base/browser/ui/splitview/panelview.ts +++ b/src/vs/base/browser/ui/splitview/panelview.ts @@ -11,7 +11,7 @@ import Event, { Emitter, chain } from 'vs/base/common/event'; import { domEvent } from 'vs/base/browser/event'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { KeyCode } from 'vs/base/common/keyCodes'; -import { $, append, addClass, removeClass, toggleClass } from 'vs/base/browser/dom'; +import { $, append, addClass, removeClass, toggleClass, trackFocus } from 'vs/base/browser/dom'; import { firstIndex } from 'vs/base/common/arrays'; import { Color, RGBA } from 'vs/base/common/color'; import { SplitView, IView } from './splitview2'; @@ -137,6 +137,11 @@ export abstract class Panel implements IView { this.header.setAttribute('role', 'toolbar'); this.header.setAttribute('aria-label', this.ariaHeaderLabel); this.renderHeader(this.header); + + const focusTracker = trackFocus(this.header); + focusTracker.addFocusListener(() => addClass(this.header, 'focused')); + focusTracker.addBlurListener(() => removeClass(this.header, 'focused')); + this.updateHeader(); const onHeaderKeyDown = chain(domEvent(this.header, 'keydown')) -- GitLab