ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-18 09:35:39 -05:00
Code Issues Packages Projects Releases Wiki Activity

Dashboard toolbar overflow (#9796)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

33
src/sql/base/browser/ui/taskbar/taskbar.ts
View File

@@ -11,6 +11,7 @@ import { ActionBar } from './actionbar';
import { IActionRunner, IAction } from 'vs/base/common/actions';
import { ActionsOrientation, IActionViewItem } from 'vs/base/browser/ui/actionbar/actionbar';
import { IToolBarOptions } from 'vs/base/browser/ui/toolbar/toolbar';
import { OverflowActionBar } from 'sql/base/browser/ui/taskbar/overflowActionbar';
/**
* A wrapper for the different types of content a QueryTaskbar can display
@@ -33,20 +34,36 @@ export class Taskbar {
private options: IToolBarOptions;
private actionBar: ActionBar;
constructor(container: HTMLElement, options: IToolBarOptions = { orientation: ActionsOrientation.HORIZONTAL }) {
constructor(container: HTMLElement, options: IToolBarOptions = { orientation: ActionsOrientation.HORIZONTAL }, collapseOverflow: boolean = false) {
this.options = options;
let element = document.createElement('div');
element.className = 'monaco-toolbar carbon-taskbar';
container.appendChild(element);
this.actionBar = new ActionBar(element, {
orientation: options.orientation,
ariaLabel: options.ariaLabel,
actionViewItemProvider: (action: IAction): IActionViewItem | undefined => {
return options.actionViewItemProvider ? options.actionViewItemProvider(action) : undefined;
}
});
if (collapseOverflow) {
this.actionBar = new OverflowActionBar(
element,
{
orientation: options.orientation,
ariaLabel: options.ariaLabel,
actionViewItemProvider: (action: IAction): IActionViewItem | undefined => {
return options.actionViewItemProvider ? options.actionViewItemProvider(action) : undefined;
}
}
);
} else {
this.actionBar = new ActionBar(
element,
{
orientation: options.orientation,
ariaLabel: options.ariaLabel,
actionViewItemProvider: (action: IAction): IActionViewItem | undefined => {
return options.actionViewItemProvider ? options.actionViewItemProvider(action) : undefined;
}
}
);
}
}
/**