1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-24 06:20:56 +01:00
phorge-phorge/webroot/rsrc/css/phui/phui-action-list.css
epriestley 9ad9ac9be6 On Dashboard tab panels in edit mode, make the "Tab Name" and the "Dropdown Edit Caret" into different links
Summary:
Ref T13272. In edit mode, tab panels now have a dropdown menu. However, this sort of overrlaps with the actual action of clicking the tab to select it.

Separate these into different click targets so that "select tab X" and "open dropdown menu for X" are different operations.

This is more work than it appears because:

  - We have an "action icon" already, used when you put a dashboard on a portal/home to create an "Edit" link. It makes sense to attach dropdowns to this, but it has some hard-coded stuff.
  - In applications with a "Create <thing>" in the crumbs (like Maniphest), we may use a dropdown menu if there are multiple create forms available. However, this menu renders in a weird way by reading all the properties out of an actual "View" object and building something else.
  - The "list of tabs" stuff shares code with different "list of tabs" navigation used by Diffusion and Instances.

..but I think I fixed everything and didn't break anything.

Test Plan:
  - Clicked "select tab" and "open dropdown menu" as separate actions.
  - Viewed Diffusion, Maniphest with multiple create forms, Instances.

Reviewers: amckinley

Reviewed By: amckinley

Maniphest Tasks: T13272

Differential Revision: https://secure.phabricator.com/D20396
2019-04-12 06:08:32 -07:00

239 lines
5.6 KiB
CSS

/**
* @provides phabricator-action-list-view-css
*/
.device .phabricator-action-list-view {
padding: 4px 0;
display: none;
}
!print .phabricator-action-list-view {
padding: 4px 0;
display: none;
}
.device .phuix-dropdown-menu .phabricator-action-list-view {
/* When an action list view appears inside a dropdown menu, don't hide it
by default. */
display: block;
padding: 0;
}
.device .phabricator-action-list-view.phabricator-action-list-toggle,
.device-desktop .phui-document-content
.phabricator-action-list-view.phabricator-action-list-toggle {
display: block;
width: 200px;
border: 1px solid {$lightgreyborder};
border-radius: 3px;
position: absolute;
right: 16px;
top: 42px;
background: #fff;
box-shadow: {$dropshadow};
padding: 4px 0;
}
.device-phone .phabricator-action-list-view.phabricator-action-list-toggle {
right: 8px;
top: 38px;
}
.phabricator-action-view {
position: relative;
}
.phabricator-action-view button.phabricator-action-view-item {
border: none;
background: transparent;
box-shadow: none;
outline: 0;
padding: 0;
margin: 0;
font-weight: normal;
width: 100%;
text-align: left;
text-shadow: none;
border-radius: 0;
color: {$anchor};
font: inherit;
display: inline;
min-width: 0;
}
.phabricator-action-view button.phabricator-action-view-item .phui-icon-view {
color: {$darkbluetext};
}
.phabricator-action-view button.phabricator-action-view-item,
.phabricator-action-view-item {
padding: 4px 8px 6px 8px;
display: block;
text-decoration: none;
color: {$darkbluetext};
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.action-has-icon button.phabricator-action-view-item,
.action-has-icon .phabricator-action-view-item {
padding: 4px 4px 4px 28px;
}
.device-desktop .phabricator-action-view-href:hover
.phabricator-action-view-item {
text-decoration: none;
background: rgba({$alphablue}, .08);
color: {$sky};
border-radius: 3px;
}
.device-desktop .phabricator-action-view-href:hover
.phabricator-action-view-icon {
color: {$sky};
}
.phabricator-action-view.action-item-red {
background-color: {$sh-redbackground};
}
.phabricator-action-view.action-item-green {
background-color: {$sh-greenbackground};
}
.phabricator-action-view.action-item-red .phabricator-action-view-item,
.phabricator-action-view.action-item-red .phabricator-action-view-icon {
color: {$sh-redtext};
}
.phabricator-action-view.action-item-green .phabricator-action-view-item,
.phabricator-action-view.action-item-green .phabricator-action-view-icon {
color: {$sh-greentext};
}
.device-desktop .phabricator-action-view.action-item-red:hover
.phabricator-action-view-item,
.device-desktop .phabricator-action-view.action-item-red:hover
.phabricator-action-view-icon {
color: {$red};
}
.device-desktop .phabricator-action-view.action-item-green:hover
.phabricator-action-view-item,
.device-desktop .phabricator-action-view.action-item-green:hover
.phabricator-action-view-icon {
color: {$green};
}
.phabricator-action-view-label .phabricator-action-view-item,
.phabricator-action-view-type-label .phabricator-action-view-item {
font-size: {$smallerfontsize};
font-weight: bold;
color: {$bluetext};
padding: 4px 8px 6px 8px;
display: block;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}
.phabricator-action-view + .phabricator-action-view-label {
padding-top: 8px;
}
.phabricator-action-view-icon {
width: 14px;
height: 14px;
position: absolute;
top: 7px;
left: 8px;
text-align: center;
}
.phabricator-action-view-disabled .phabricator-action-view-item,
.phabricator-action-view-disabled button.phabricator-action-view-item {
color: {$lightgreytext};
}
.phabricator-action-view-selected {
background: {$sh-violetbackground};
border-radius: 3px;
}
.phabricator-action-view-selected:hover a {
text-decoration: none;
}
.phabricator-action-view button[disabled] {
opacity: 1.0;
}
.device-desktop .phabricator-action-view-disabled:hover
.phabricator-action-view-item,
.device-desktop .phabricator-action-view-disabled:hover
button.phabricator-action-view-item,
.device-desktop .phabricator-action-view-disabled:hover
.phabricator-action-view-icon,
.device-desktop .phabricator-action-view-disabled:hover
button.phabricator-action-view-icon {
color: {$lightgreytext};
}
.phabricator-action-view-type-divider {
margin-top: 8px;
border-top: 1px solid {$thinblueborder};
}
/******* Sub Menu *************************************************************/
.phabricator-action-view-submenu .caret-right {
position: absolute;
top: 8px;
right: 8px;
border-left-color: {$alphablue};
}
.phabricator-action-view-submenu .caret {
position: absolute;
top: 10px;
right: 8px;
border-top: 7px solid {$lightgreytext};
}
.phabricator-action-list-view .phabricator-action-view-submenu.phui-submenu-open
.phabricator-action-view-item {
background-color: rgba({$alphablue}, 0.07);
color: {$sky};
border-radius: 3px;
}
.phabricator-action-list-view .phabricator-action-view-submenu.phui-submenu-open
.phabricator-action-view-item .phui-icon-view {
color: {$sky};
}
.phui-list-navbar .phui-list-item-href {
display: inline-block;
}
.phui-list-navbar .phui-list-item-disabled .phui-list-item-href {
color: {$lightgreytext};
}
.phui-list-navbar .phui-list-item-action-href {
display: inline-block;
padding: 8px 16px;
line-height: 16px;
}
.phui-list-navbar .phui-list-item-action-href .phui-icon-view {
color: {$darkgreytext};
}
.device-desktop
.phui-list-navbar .phui-list-item-action-href:hover {
background-color: rgba({$alphablue}, 0.07);
color: {$sky};
}