1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-14 10:52:41 +01:00
phorge-phorge/webroot/rsrc/css/application/conpherence/menu.css
Bob Trahan f75248de6f Conpherence - refine menu interactions with respect to "Show More"
Summary:
Ref T7566. Prior to this diff, we had a broken mess in the "Messages" section. Now, "Messages" behave like rooms in that whatever is loaded at page load time is at the top of the list.

Additionally, refine "show more" behavior such that it simply shows the next X, but if there exists X + 1 then we have another "show more" that kicks you to application search. Theoretically, there are still corner cases where users are in a ton of rooms or a ton of messages respectively, but this feels pretty good.

Consolidates title rendering code so we always render the list of participants and no more "No Title".

Also remove the policy icons for messages consistently, helping to differentiate them from rooms at a glance.

Test Plan: clicked around in conpherence main - looked good. tried "show more" and it worked! played around in durable column and things seemed reasonable there too.

Reviewers: chad, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T7566

Differential Revision: https://secure.phabricator.com/D12222
2015-03-31 12:45:32 -07:00

210 lines
4.1 KiB
CSS

/**
* @provides conpherence-menu-css
*/
.conpherence-layout {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 44px;
background: #fff;
}
.conpherence-layout .conpherence-no-threads {
text-align: center;
position: fixed;
left: 240px;
right: 241px;
top: 76px;
bottom: 0px;
min-width: 300px;
width: auto;
}
.device .conpherence-layout .conpherence-no-threads {
left: 0;
right: 0;
width: 100%;
}
.conpherence-layout .conpherence-no-threads .text {
margin: 0px 0px 16px 0px;
}
.conpherence-menu-pane {
width: 100%;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
top: 0;
bottom: 0;
background: #dbdde0;
border-right: 1px solid {$hovergrey}
}
.conpherence-menu-pane .phui-list-item-view.hidden {
display: none;
}
.conpherence-menu-pane.phabricator-side-menu .phui-list-item-type-label {
padding: 10px 0 9px 8px;
}
.conpherence-menu-pane .conpherence-room-list-header
.phui-icon-view {
font-weight: bold;
float: right;
text-transform: none;
margin: 0px 8px 0px 0px;
}
.conpherence-menu-pane .conpherence-room-list-header
.phui-icon-view:hover {
color: {$sky};
}
.conpherence-menu-pane .conpherence-message-list-header {
margin-top: 12px;
}
.device-desktop .conpherence-layout .conpherence-menu-pane {
width: 240px;
}
.device .conpherence-menu-pane {
top: 41px;
}
.device .conpherence-role-list .conpherence-menu-pane {
top: 0px;
}
.device-phone .conpherence-menu-pane {
-webkit-overflow-scrolling: touch;
}
.conpherence-layout .phabricator-nav-column-background {
display: block;
}
.device .phabricator-nav-column-background {
top: 44px;
}
.device .conpherence-role-thread .conpherence-menu-pane,
.device .conpherence-role-thread .phabricator-nav-column-background {
display: none;
}
.device-desktop .conpherence-content-pane {
margin-left: 241px;
}
.conpherence-content-pane {
display: none;
margin-left: 0px;
position: relative;
}
.device-desktop .conpherence-content-pane,
.device .conpherence-role-thread .conpherence-content-pane {
display: block;
}
.conpherence-menu .conpherence-menu-item-view {
display: block;
height: 36px;
overflow: hidden;
position: relative;
text-decoration: none;
border-left: 3px solid transparent;
}
.conpherence-menu .conpherence-selected {
background: {$hovergrey};
border-left: 3px solid {$sky};
}
.conpherence-menu .phui-list-item-type-link .phui-list-item-href {
padding: 8px 0 8px 8px;
}
.device-desktop .conpherence-menu
.conpherence-selected.conpherence-menu-item-view:hover {
background-color: {$hoverselectedgrey};
}
.conpherence-menu .loading {
font-style: italic;
}
.device-desktop .conpherence-menu .conpherence-menu-item-view:hover {
background-color: {$hovergrey};
}
.conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-image {
top: 4px;
left: 6px;
display: block;
position: absolute;
width: 24px;
height: 24px;
background-size: 24px;
border: 2px solid #fff;
}
.conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-title {
display: block;
margin-top: 9px;
margin-left: 40px;
text-align: left;
font-weight: bold;
font-size: 13px;
color: {$darkbluetext};
text-shadow: 0px 1px 1px #fff;
overflow: hidden;
width: 175px;
text-overflow: ellipsis;
}
.conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-subtitle {
display: none;
}
.conpherence-menu .conpherence-menu-item-view
.conpherence-menu-item-unread-count {
position: absolute;
right: 4px;
top: 10px;
background: {$blue};
border-radius: 2px;
color: #fff;
font-weight: bold;
padding: 0 5px 1px;
font-size: 11px;
}
.conpherence-menu .hide-unread-count .conpherence-menu-item-unread-count,
.conpherence-menu .conpherence-selected .conpherence-menu-item-unread-count {
display: none;
}
.conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-date {
position: absolute;
top: 15px;
right: 16px;
color: {$bluetext};
font-size: 11px;
}
.conpherence-menu-item-header {
font-weight: bold;
text-transform: uppercase;
color: {$bluetext};
}
.no-conpherences-menu-item {
color: {$bluetext};
padding: 4px 12px;
}