mirror of
https://we.phorge.it/source/phorge.git
synced 2024-09-20 17:28:51 +02:00
9ad9ac9be6
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
239 lines
5.6 KiB
CSS
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};
|
|
}
|