1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-24 14:30:56 +01:00

Update Conpherence full for common colors / styles

Summary: Conpherence Full modernize pass, setting standard space and colors on all widget panels. Moved menu back to 240px as the narrow column wasn't really usefull. Removed 'subtitle' on menu, seems simpler but almost under-designed. Subtitle isn't particularly useful and I plan on adding audience icons next (single, group, project, public) so I think this is the right direction.

Test Plan:
Tested with and without number columns on the menu, test with files, calendar dates, removing participants.

{F337941}

{F337942}

{F337943}

Reviewers: epriestley, btrahan

Reviewed By: btrahan

Subscribers: Korvin, epriestley

Differential Revision: https://secure.phabricator.com/D12078
This commit is contained in:
Chad Little 2015-03-17 14:01:45 -07:00
parent 8fe78c9029
commit 6fc867d382
5 changed files with 62 additions and 67 deletions

View file

@ -45,11 +45,11 @@ return array(
'rsrc/css/application/config/setup-issue.css' => '22270af2', 'rsrc/css/application/config/setup-issue.css' => '22270af2',
'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2', 'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
'rsrc/css/application/conpherence/durable-column.css' => 'a27580c5', 'rsrc/css/application/conpherence/durable-column.css' => 'a27580c5',
'rsrc/css/application/conpherence/menu.css' => 'c6ac5299', 'rsrc/css/application/conpherence/menu.css' => '9b37a261',
'rsrc/css/application/conpherence/message-pane.css' => '2526107d', 'rsrc/css/application/conpherence/message-pane.css' => 'e78e9d3c',
'rsrc/css/application/conpherence/notification.css' => '04a6e10a', 'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
'rsrc/css/application/conpherence/update.css' => '1099a660', 'rsrc/css/application/conpherence/update.css' => '1099a660',
'rsrc/css/application/conpherence/widget-pane.css' => '3d575438', 'rsrc/css/application/conpherence/widget-pane.css' => '9efbfed0',
'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4', 'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
'rsrc/css/application/countdown/timer.css' => '86b7b0a0', 'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
'rsrc/css/application/dashboard/dashboard.css' => '17937d22', 'rsrc/css/application/dashboard/dashboard.css' => '17937d22',
@ -514,12 +514,12 @@ return array(
'config-options-css' => '7fedf08b', 'config-options-css' => '7fedf08b',
'config-welcome-css' => '6abd79be', 'config-welcome-css' => '6abd79be',
'conpherence-durable-column-view' => 'a27580c5', 'conpherence-durable-column-view' => 'a27580c5',
'conpherence-menu-css' => 'c6ac5299', 'conpherence-menu-css' => '9b37a261',
'conpherence-message-pane-css' => '2526107d', 'conpherence-message-pane-css' => 'e78e9d3c',
'conpherence-notification-css' => '04a6e10a', 'conpherence-notification-css' => '04a6e10a',
'conpherence-thread-manager' => '6a9169bb', 'conpherence-thread-manager' => '6a9169bb',
'conpherence-update-css' => '1099a660', 'conpherence-update-css' => '1099a660',
'conpherence-widget-pane-css' => '3d575438', 'conpherence-widget-pane-css' => '9efbfed0',
'differential-changeset-view-css' => '6a8b172a', 'differential-changeset-view-css' => '6a8b172a',
'differential-core-view-css' => '7ac3cabc', 'differential-core-view-css' => '7ac3cabc',
'differential-inline-comment-editor' => '0286a1db', 'differential-inline-comment-editor' => '0286a1db',

View file

@ -67,7 +67,6 @@ final class ConpherenceWidgetController extends ConpherenceController {
'class' => 'widgets-header', 'class' => 'widgets-header',
), ),
id(new PHUIActionHeaderView()) id(new PHUIActionHeaderView())
->setHeaderColor(PHUIActionHeaderView::HEADER_GREY)
->setHeaderTitle(pht('Participants')) ->setHeaderTitle(pht('Participants'))
->setHeaderHref('#') ->setHeaderHref('#')
->setDropdown(true) ->setDropdown(true)

View file

@ -44,11 +44,11 @@
} }
.conpherence-menu-pane.phabricator-side-menu .phui-list-item-type-label { .conpherence-menu-pane.phabricator-side-menu .phui-list-item-type-label {
padding: 12px 0 8px 6px; padding: 8px 0 6px 8px;
} }
.device-desktop .conpherence-layout .conpherence-menu-pane { .device-desktop .conpherence-layout .conpherence-menu-pane {
width: 204px; width: 240px;
} }
.device .conpherence-menu-pane { .device .conpherence-menu-pane {
@ -77,7 +77,7 @@
} }
.device-desktop .conpherence-content-pane { .device-desktop .conpherence-content-pane {
margin-left: 205px; margin-left: 241px;
} }
.conpherence-content-pane { .conpherence-content-pane {
@ -93,15 +93,16 @@
.conpherence-menu .conpherence-menu-item-view { .conpherence-menu .conpherence-menu-item-view {
display: block; display: block;
height: 46px; height: 38px;
width: 100%;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
text-decoration: none; text-decoration: none;
border-left: 3px solid transparent;
} }
.conpherence-menu .conpherence-selected { .conpherence-menu .conpherence-selected {
background: {$hovergrey}; background: {$hovergrey};
border-left: 3px solid {$sky};
} }
.device-desktop .conpherence-menu .device-desktop .conpherence-menu
@ -118,44 +119,39 @@
} }
.conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-image { .conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-image {
top: 6px; top: 5px;
left: 8px; left: 6px;
display: block; display: block;
position: absolute; position: absolute;
width: 30px; width: 24px;
height: 30px; height: 24px;
background-size: 30px; background-size: 24px;
border: 2px solid #fff; border: 2px solid #fff;
border-radius: 2px;
} }
.conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-title { .conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-title {
display: block; display: block;
margin-top: 8px; margin-top: 10px;
margin-left: 50px; margin-left: 40px;
text-align: left; text-align: left;
font-weight: bold; font-weight: bold;
font-size: 13px; font-size: 13px;
color: {$darkbluetext}; color: {$darkbluetext};
text-shadow: 0px 1px 1px #fff; text-shadow: 0px 1px 1px #fff;
overflow: hidden; overflow: hidden;
width: 150px; width: 175px;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-subtitle { .conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-subtitle {
display: block; display: none;
color: {$bluetext};
font-size: 11px;
margin-top: 2px;
margin-left: 50px;
} }
.conpherence-menu .conpherence-menu-item-view .conpherence-menu .conpherence-menu-item-view
.conpherence-menu-item-unread-count { .conpherence-menu-item-unread-count {
position: absolute; position: absolute;
right: 8px; right: 4px;
top: 15px; top: 11px;
background: {$blue}; background: {$blue};
border-radius: 2px; border-radius: 2px;
color: #fff; color: #fff;

View file

@ -7,7 +7,7 @@
.loading .messages-loading-icon, .loading .messages-loading-icon,
.conpherence-layout .conpherence-no-threads { .conpherence-layout .conpherence-no-threads {
position: fixed; position: fixed;
left: 205px; left: 241px;
right: 241px; right: 241px;
top: 76px; top: 76px;
bottom: 0px; bottom: 0px;
@ -52,7 +52,7 @@
.conpherence-message-pane .conpherence-messages { .conpherence-message-pane .conpherence-messages {
position: fixed; position: fixed;
left: 205px; left: 241px;
right: 241px; right: 241px;
top: 76px; top: 76px;
bottom: 172px; bottom: 172px;
@ -86,7 +86,7 @@
position: fixed; position: fixed;
bottom: 0; bottom: 0;
border-top: 1px solid {$thinblueborder}; border-top: 1px solid {$thinblueborder};
left: 205px; left: 241px;
right: 241px; right: 241px;
} }

View file

@ -42,8 +42,7 @@
} }
.conpherence-widget-pane .widgets-header { .conpherence-widget-pane .widgets-header {
background: #F5F5F5; border-bottom: 1px solid {$thinblueborder};
border-bottom: 1px solid #ccc;
} }
.device .conpherence-widget-pane .widgets-header { .device .conpherence-widget-pane .widgets-header {
@ -85,28 +84,39 @@
width: 200px; width: 200px;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
color: #555; color: {$greytext};
} }
.device .conpherence-widget-pane #widgets-files .no-files { .device .conpherence-widget-pane #widgets-files .no-files {
width: 60px; width: 60px;
margin: 0px auto 0px auto; margin: 0 auto 0 auto;
} }
.conpherence-widget-pane #widgets-files .file-entry { .conpherence-widget-pane #widgets-files .file-entry {
padding: 10px 0; padding: 8px 0;
margin: 0 5px 0 10px; margin: 0 4px 0 8px;
border-bottom: 1px solid #e7e7e7; border-bottom: 1px solid {$thinblueborder};
} }
.conpherence-widget-pane #widgets-files .file-entry a {
color: {$darkbluetext};
font-weight: bold;
}
.conpherence-widget-pane #widgets-files .file-icon { .conpherence-widget-pane #widgets-files .file-icon {
width: 32px; width: 32px;
height: 32px; height: 32px;
float: left; float: left;
font-size: 30px; font-size: 24px;
color: {$blue};
margin: 2px 0 2px 4px;
} }
.conpherence-widget-pane #widgets-files .file-title { .conpherence-widget-pane #widgets-files .file-title {
display: block; display: block;
position: relative; position: relative;
top: -4px; top: -4px;
left: 2px; left: 0;
overflow-x: hidden; overflow-x: hidden;
width: 180px; width: 180px;
font-weight: bold; font-weight: bold;
@ -114,11 +124,11 @@
white-space: nowrap; white-space: nowrap;
} }
.conpherence-widget-pane #widgets-files .file-uploaded-by { .conpherence-widget-pane #widgets-files .file-uploaded-by {
color: #a1a5a9; color: {$lightgreytext};
position: relative; position: relative;
top: 0px; top: 0;
left: 2px; left: 0;
width: 170px; width: 180px;
font-size: 11px; font-size: 11px;
} }
@ -147,7 +157,7 @@
.conpherence-widget-pane #widgets-calendar .aphront-multi-column-view .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
.aphront-multi-column-column { .aphront-multi-column-column {
background: white; background: white;
border-right: 1px solid #bfbfbf; border-right: 1px solid {$thinblueborder};
text-align: center; text-align: center;
} }
.device-phone .conpherence-widget-pane #widgets-calendar .device-phone .conpherence-widget-pane #widgets-calendar
@ -220,28 +230,18 @@
.conpherence-widget-pane #widgets-calendar .day-header { .conpherence-widget-pane #widgets-calendar .day-header {
overflow: hidden; overflow: hidden;
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); border-top: 1px solid {$thinblueborder};
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); padding: 8px 8px 0px 8px;
border-top: 1px solid #e7e7e7;
border-bottom: 1px solid #d7d7d7;
padding: 5px 10px 5px 10px;
}
.conpherence-widget-pane #widgets-calendar .day-header.today {
background-image: linear-gradient(to bottom, #3b86c4, #2b628f);
background-image: -webkit-linear-gradient(top, #3b86c4, #2b628f);
border-top: none;
border-bottom: none;
} }
.conpherence-widget-pane #widgets-calendar .day-header.today .day-name, .conpherence-widget-pane #widgets-calendar .day-header.today .day-name,
.conpherence-widget-pane #widgets-calendar .day-header.today .day-date { .conpherence-widget-pane #widgets-calendar .day-header.today .day-date {
color: #fff; color: {$sky};
} }
.conpherence-widget-pane #widgets-calendar .day-header .day-name { .conpherence-widget-pane #widgets-calendar .day-header .day-name {
float: left; float: left;
color: #555759; color: {$bluetext};
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
font-size: 11px; font-size: 11px;
@ -249,12 +249,12 @@
.conpherence-widget-pane #widgets-calendar .day-header .day-date { .conpherence-widget-pane #widgets-calendar .day-header .day-date {
float: right; float: right;
color: #555759; color: {$lightbluetext};
font-size: 11px; font-size: 11px;
} }
.conpherence-widget-pane #widgets-calendar .top-border { .conpherence-widget-pane #widgets-calendar .top-border {
border-top: 1px solid #E7E7E7; border-top: 1px solid {$thinblueborder};
} }
.conpherence-widget-pane #widgets-calendar .user-status { .conpherence-widget-pane #widgets-calendar .user-status {
@ -264,24 +264,24 @@
.conpherence-widget-pane #widgets-calendar .user-status .icon { .conpherence-widget-pane #widgets-calendar .user-status .icon {
border-radius: 8px; border-radius: 8px;
height: 14px; height: 8px;
width: 14px; width: 8px;
margin-top: 7px; margin-top: 4px;
float: left; float: left;
} }
.conpherence-widget-pane #widgets-calendar .sporadic .icon { .conpherence-widget-pane #widgets-calendar .sporadic .icon {
background-color: rgb(222, 226, 232); background-color: {$orange};
} }
.conpherence-widget-pane #widgets-calendar .away .icon { .conpherence-widget-pane #widgets-calendar .away .icon {
background-color: rgb(102, 204, 255); background-color: {$red};
} }
.conpherence-widget-pane #widgets-calendar .user-status .description { .conpherence-widget-pane #widgets-calendar .user-status .description {
width: 195px; width: 195px;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 0 0 0px 20px; margin: 0 0 0 16px;
} }
.conpherence-widget-pane #widgets-calendar .user-status .participant { .conpherence-widget-pane #widgets-calendar .user-status .participant {