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

@@ -47,6 +47,10 @@
margin-right: 5px;
}
.carbon-taskbar .action-item.more {
padding-right: 15px;
}
.carbon-taskbar .action-label {
background-repeat: no-repeat;
background-position: 0% 50%;
@@ -86,3 +90,52 @@
.carbon-taskbar .codicon {
background-size: 11px;
}
.carbon-taskbar .overflow {
position:absolute;
right:0;
display:none;
z-index: 3;
padding-left: 0;
margin-top: 6px;
margin-right: 5px;
}
.vs-dark .carbon-taskbar .overflow {
box-sizing: border-box;
}
.hc-black .carbon-taskbar .overflow {
box-shadow: none;
}
.carbon-taskbar .overflow li {
padding: 5px;
margin-right: 0;
}
.carbon-taskbar .overflow li.focused a.action-label {
outline: none;
}
.carbon-taskbar .overflow a {
padding-left: 20px;
}
.carbon-taskbar .actions-container .action-item .action-label.moreActionsElement {
height: 18px;
margin-top: 3px;
background-position: center;
padding-right: 20px;
}
.carbon-taskbar .overflow .action-item .action-label{
background-size: 16px;
background-position: left;
}
.overflow .taskbarSeparator {
height: 1px;
width: 100%;
margin-left: 0;
}