mirror of
https://we.phorge.it/source/phorge.git
synced 2024-10-23 17:18: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
313 lines
6.5 KiB
CSS
313 lines
6.5 KiB
CSS
/**
|
|
* @provides phui-list-view-css
|
|
*/
|
|
|
|
.phui-list-item-view {
|
|
position: relative;
|
|
}
|
|
|
|
.phui-list-item-header,
|
|
.phui-list-item-header a {
|
|
color: {$bluetext};
|
|
font-weight: bold;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* - Sidenav and Actions -------------------------------------------------------
|
|
|
|
Sidebar and Action Menus
|
|
|
|
*/
|
|
|
|
.phui-list-sidenav {
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-type-label .phui-list-item-name {
|
|
font-weight: bold;
|
|
color: {$bluetext};
|
|
padding: 4px 8px 6px 8px;
|
|
display: block;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-type-divider {
|
|
margin: 8px 8px 12px 8px;
|
|
border-bottom: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-icon {
|
|
height: 14px;
|
|
width: 14px;
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 6px;
|
|
text-align: center;
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-icon + .phui-list-item-name {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-has-icon {
|
|
margin: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-view {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-href {
|
|
display: block;
|
|
padding: 4px 16px;
|
|
clear: both;
|
|
color: {$darkgreytext};
|
|
line-height: 18px;
|
|
}
|
|
|
|
.phabricator-side-menu .phui-list-item-disabled .phui-list-item-href,
|
|
.phui-list-sidenav .phui-list-item-disabled .phui-list-item-href {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-has-icon .phui-list-item-href {
|
|
padding: 4px 10px;
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-has-icon .phui-list-item-indented {
|
|
padding-left: 18px;
|
|
}
|
|
|
|
|
|
.device-desktop .phui-list-sidenav .phui-list-item-href:hover {
|
|
background: {$sky};
|
|
color: white;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.device-desktop .phui-list-sidenav .phui-list-item-href:hover .phui-icon-view {
|
|
color: {$page.content};
|
|
}
|
|
|
|
/* - Top, Full Width Navigations -----------------------------------------------
|
|
|
|
Sets a page or box with a top navbar
|
|
|
|
*/
|
|
|
|
.phui-list-view.phui-list-navbar {
|
|
list-style: none;
|
|
overflow: hidden;
|
|
border-bottom: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
.phui-list-view.phui-list-navbar > li {
|
|
list-style: none;
|
|
float: left;
|
|
display: block;
|
|
border-right: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
.phui-list-navbar .phui-list-item-href {
|
|
color: {$bluetext};
|
|
padding: 8px 16px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.phui-list-navbar .phui-list-item-selected .phui-list-item-href {
|
|
background: {$lightbluebackground};
|
|
color: {$darkbluetext};
|
|
font-weight: bold;
|
|
}
|
|
|
|
.phui-list-navbar .phui-list-item-href:hover {
|
|
background: rgba(100,100,100,.1);
|
|
color: {$darkgreytext};
|
|
text-decoration: none;
|
|
}
|
|
|
|
.phui-list-navbar .phui-list-item-icon {
|
|
height: 14px;
|
|
width: 14px;
|
|
display: block;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.device-phone .phui-list-view.phui-list-navbar > li {
|
|
float: none;
|
|
border: none;
|
|
}
|
|
|
|
/* - Two Column View, Responsive Navigations -----------------------------------
|
|
|
|
Sets a two column page with a responsive, top navbar
|
|
|
|
*/
|
|
|
|
.phui-list-view.phui-list-tabbar {
|
|
list-style: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.phui-list-view.phui-list-tabbar > li {
|
|
list-style: none;
|
|
float: left;
|
|
display: block;
|
|
}
|
|
|
|
.phui-list-view.phui-list-tabbar > li > * {
|
|
display: block;
|
|
}
|
|
|
|
.phui-list-tabbar .phui-list-item-href {
|
|
color: {$bluetext};
|
|
padding: 8px 24px;
|
|
line-height: 24px;
|
|
font-weight: bold;
|
|
font-size: {$biggerfontsize};
|
|
border-top: 4px solid transparent;
|
|
}
|
|
|
|
.phui-list-tabbar .phui-list-item-selected .phui-list-item-href {
|
|
color: {$sky};
|
|
border-bottom: 4px solid {$sky};
|
|
}
|
|
|
|
.phui-list-tabbar .phui-list-item-selected .phui-list-item-href
|
|
.phui-icon-view {
|
|
color: {$sky};
|
|
}
|
|
|
|
.device-desktop .phui-list-tabbar .phui-list-item-href:hover {
|
|
color: {$sky};
|
|
text-decoration: none;
|
|
}
|
|
|
|
.phui-list-tabbar .phui-list-item-icon {
|
|
height: 20px;
|
|
width: 20px;
|
|
display: none;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.device-phone .phui-list-tabbar .phui-list-item-icon {
|
|
display: inline-block;
|
|
}
|
|
|
|
.device-phone .phui-list-tabbar .phui-list-item-name {
|
|
display: none;
|
|
}
|
|
|
|
.device-phone .phui-list-tabbar .phui-list-item-href {
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
.device-phone .phui-list-view.phui-list-navbar > li {
|
|
float: none;
|
|
border: none;
|
|
}
|
|
|
|
/* - Status Colors -------------------------------------------------------------
|
|
|
|
Colors for navbars
|
|
|
|
*/
|
|
|
|
.phui-list-item-warn .phui-list-item-href {
|
|
color: #bc7837;
|
|
}
|
|
|
|
.phui-list-item-fail .phui-list-item-href {
|
|
color: {$red};
|
|
}
|
|
|
|
.phui-list-item-warn.phui-list-item-selected .phui-list-item-href,
|
|
.phui-list-item-warn .phui-list-item-href:hover {
|
|
background: {$lightyellow};
|
|
color: #bc7837;
|
|
}
|
|
|
|
.phui-list-item-fail.phui-list-item-selected .phui-list-item-href,
|
|
.phui-list-item-fail .phui-list-item-href:hover {
|
|
background: {$lightred};
|
|
color: {$red};
|
|
}
|
|
|
|
.phui-list-item-warn.phui-list-item-selected .phui-list-item-href:hover {
|
|
background: #fcf0bd;
|
|
}
|
|
|
|
.phui-list-item-fail.phui-list-item-selected .phui-list-item-href:hover {
|
|
background: #f5d3d0;
|
|
}
|
|
|
|
/* - Dashboards ------------------------------------------------------------ */
|
|
|
|
.dashboard-panel .phui-list-view.phui-list-navbar {
|
|
border-left: 1px solid {$lightblueborder};
|
|
border-right: 1px solid {$lightblueborder};
|
|
border-bottom: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
/* - Info Stack ------------------------------------------------------------ */
|
|
|
|
.phui-info-view + .phui-list-view {
|
|
margin-top: 16px;
|
|
border-top: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
/* - Action Icon ----------------------------------------------------------- */
|
|
|
|
.phui-list-sidenav .phui-list-item-has-action-icon .phui-list-item-action-href {
|
|
position: absolute;
|
|
width: 28px;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
text-align: center;
|
|
line-height: 28px;
|
|
background-color: transparent;
|
|
display: none;
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-has-action-icon.phui-list-item-selected
|
|
.phui-list-item-href {
|
|
padding-right: 32px;
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-has-action-icon.phui-list-item-selected
|
|
.phui-list-item-action-href {
|
|
display: block;
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-has-action-icon
|
|
.phui-list-item-action-href:hover {
|
|
background-color: rgba({$alphablack},.05);
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-has-action-icon .phui-list-item-action-icon {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.phui-list-sidenav .phui-list-item-has-action-icon
|
|
.phui-list-item-action-href:hover
|
|
.phui-list-item-action-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* - Item Counts ----------------------------------------------------------- */
|
|
|
|
.phui-list-item-count {
|
|
position: absolute;
|
|
right: 7px;
|
|
top: 7px;
|
|
background: {$blue};
|
|
border-radius: 2px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
padding: 0 5px 1px;
|
|
font-size: {$smallestfontsize};
|
|
}
|