mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-29 08:50:58 +01:00
f75248de6f
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
210 lines
4.1 KiB
CSS
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;
|
|
}
|