Dashboard toolbar overflow (#9796)

* initial changes for actionbar collapsing

* fix more not always all showing after resizing

* collapse toolbar if window size is already small when dashboard is opened

* make wrapping default behavior and collapse opt in

* fix so keyboard navigation works in overflow

* more keyboard fixing so that the actions in overflow get triggered

* change overflow background with theme

* change margin

* udpate more button

* use icon for ...

* addressing comments

* overflow css changes to match portal

* arrow navigation working

* handle tab and shift tab in overflow

* keep arrow navigation within overflow

* move reused code to helper methods

* set roles for overflow

* use actionsList instead of document.getElementById all the time

* move collapsible action bar to its own class

* renamve to overflowActionBar

* fix focus rectangle around more element

* hide overflow after an action is executed

* hide overflow when clicking an action

* hide overflow when focus leaves and loop focus within overflow when using arrow keys

* fix double down arrow to move focus in overflow

* update comment

* fix clicking more not hiding overflow

* add box-shadow for themes

* fix hygiene error

* fix hygiene error

* widen focused outline for overflow actions
This commit is contained in:
Kim Santiago
2020-04-09 16:31:52 -07:00
committed by GitHub
parent 433049d1b2
commit 8ff53281f9
8 changed files with 474 additions and 26 deletions

View File

@@ -6,7 +6,7 @@
import * as nls from 'vs/nls';
import { registerColor, editorBackground, contrastBorder, transparent, editorWidgetBackground, textLinkForeground, lighten, darken, focusBorder, activeContrastBorder, editorWidgetForeground, editorErrorForeground, editorWarningForeground, editorInfoForeground } from 'vs/platform/theme/common/colorRegistry';
import { IColorTheme } from 'vs/platform/theme/common/themeService';
import { Color } from 'vs/base/common/color';
import { Color, RGBA } from 'vs/base/common/color';
// < --- Workbench (not customizable) --- >
@@ -636,3 +636,9 @@ export const DASHBOARD_PROPERTIES_NAME = registerColor('dashboardWidget.properti
dark: '#8A8886',
hc: '#FFFFFF'
}, nls.localize('dashboardWidgetPropertiesName', "Color for dashboard properties widget names"));
export const TOOLBAR_OVERFLOW_SHADOW = registerColor('toolbar.overflowShadow', {
light: new Color(new RGBA(0, 0, 0, .132)),
dark: new Color(new RGBA(0, 0, 0, 0.25)),
hc: null
}, nls.localize('toolbarOverflowShadow', "Toolbar overflow shadow color"));