mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-13 10:22:42 +01:00
de4e8728b2
Summary: Extends PHUIListItemView to take an icon, link as an "Action Item" that displays on the right side of the menu link. Does not display on Favorites. This allows for adding edit, external, or other links (documentation?) to any menu item. Right now the secondary link is only visible when the item is selected. This feels right, but if we offer it in other ways, users may always want it visible. We could look at making it onhover.
Test Plan:
Add a bunch of random global and personal dashboards to my menu. Add a menu to Favorites, see no link. Test mobile, link works.
{F4136699}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D17505
230 lines
4.9 KiB
CSS
230 lines
4.9 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: #fff;
|
|
}
|
|
|
|
/* - 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-view.phui-list-navbar > li > * {
|
|
display: block;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* - 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-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-item-has-action-icon.phui-list-item-selected .phui-list-item-href {
|
|
padding-right: 32px;
|
|
}
|
|
|
|
.phui-list-item-has-action-icon.phui-list-item-selected
|
|
.phui-list-item-action-href {
|
|
display: block;
|
|
}
|
|
|
|
.phui-list-item-has-action-icon .phui-list-item-action-href:hover {
|
|
background-color: rgba({$alphablack},.05);
|
|
}
|
|
|
|
.phui-list-item-has-action-icon .phui-list-item-action-icon {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.phui-list-item-has-action-icon .phui-list-item-action-href:hover
|
|
.phui-list-item-action-icon {
|
|
opacity: 1;
|
|
}
|