From 6fc867d38225f5212de9131bdc6f8bab9e903d73 Mon Sep 17 00:00:00 2001
From: Chad Little <chad@chadsdomain.com>
Date: Tue, 17 Mar 2015 14:01:45 -0700
Subject: [PATCH] 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
---
 resources/celerity/map.php                    | 12 ++--
 .../ConpherenceWidgetController.php           |  1 -
 .../rsrc/css/application/conpherence/menu.css | 38 +++++-----
 .../application/conpherence/message-pane.css  |  6 +-
 .../application/conpherence/widget-pane.css   | 72 +++++++++----------
 5 files changed, 62 insertions(+), 67 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index 81084bf957..3e6da40bcd 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -45,11 +45,11 @@ return array(
     'rsrc/css/application/config/setup-issue.css' => '22270af2',
     'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
     'rsrc/css/application/conpherence/durable-column.css' => 'a27580c5',
-    'rsrc/css/application/conpherence/menu.css' => 'c6ac5299',
-    'rsrc/css/application/conpherence/message-pane.css' => '2526107d',
+    'rsrc/css/application/conpherence/menu.css' => '9b37a261',
+    'rsrc/css/application/conpherence/message-pane.css' => 'e78e9d3c',
     'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
     '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/countdown/timer.css' => '86b7b0a0',
     'rsrc/css/application/dashboard/dashboard.css' => '17937d22',
@@ -514,12 +514,12 @@ return array(
     'config-options-css' => '7fedf08b',
     'config-welcome-css' => '6abd79be',
     'conpherence-durable-column-view' => 'a27580c5',
-    'conpherence-menu-css' => 'c6ac5299',
-    'conpherence-message-pane-css' => '2526107d',
+    'conpherence-menu-css' => '9b37a261',
+    'conpherence-message-pane-css' => 'e78e9d3c',
     'conpherence-notification-css' => '04a6e10a',
     'conpherence-thread-manager' => '6a9169bb',
     'conpherence-update-css' => '1099a660',
-    'conpherence-widget-pane-css' => '3d575438',
+    'conpherence-widget-pane-css' => '9efbfed0',
     'differential-changeset-view-css' => '6a8b172a',
     'differential-core-view-css' => '7ac3cabc',
     'differential-inline-comment-editor' => '0286a1db',
diff --git a/src/applications/conpherence/controller/ConpherenceWidgetController.php b/src/applications/conpherence/controller/ConpherenceWidgetController.php
index eae007ea5f..fa4d428a8e 100644
--- a/src/applications/conpherence/controller/ConpherenceWidgetController.php
+++ b/src/applications/conpherence/controller/ConpherenceWidgetController.php
@@ -67,7 +67,6 @@ final class ConpherenceWidgetController extends ConpherenceController {
         'class' => 'widgets-header',
       ),
       id(new PHUIActionHeaderView())
-      ->setHeaderColor(PHUIActionHeaderView::HEADER_GREY)
       ->setHeaderTitle(pht('Participants'))
       ->setHeaderHref('#')
       ->setDropdown(true)
diff --git a/webroot/rsrc/css/application/conpherence/menu.css b/webroot/rsrc/css/application/conpherence/menu.css
index 3ced038b70..46a2c8a14a 100644
--- a/webroot/rsrc/css/application/conpherence/menu.css
+++ b/webroot/rsrc/css/application/conpherence/menu.css
@@ -44,11 +44,11 @@
 }
 
 .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 {
-  width: 204px;
+  width: 240px;
 }
 
 .device .conpherence-menu-pane {
@@ -77,7 +77,7 @@
 }
 
 .device-desktop .conpherence-content-pane {
-  margin-left: 205px;
+  margin-left: 241px;
 }
 
 .conpherence-content-pane {
@@ -93,15 +93,16 @@
 
 .conpherence-menu .conpherence-menu-item-view {
   display: block;
-  height: 46px;
-  width: 100%;
+  height: 38px;
   overflow: hidden;
   position: relative;
   text-decoration: none;
+  border-left: 3px solid transparent;
 }
 
 .conpherence-menu .conpherence-selected {
   background: {$hovergrey};
+  border-left: 3px solid {$sky};
 }
 
 .device-desktop .conpherence-menu
@@ -118,44 +119,39 @@
 }
 
 .conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-image {
-  top: 6px;
-  left: 8px;
+  top: 5px;
+  left: 6px;
   display: block;
   position: absolute;
-  width: 30px;
-  height: 30px;
-  background-size: 30px;
+  width: 24px;
+  height: 24px;
+  background-size: 24px;
   border: 2px solid #fff;
-  border-radius: 2px;
 }
 
 .conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-title {
   display: block;
-  margin-top: 8px;
-  margin-left: 50px;
+  margin-top: 10px;
+  margin-left: 40px;
   text-align: left;
   font-weight: bold;
   font-size: 13px;
   color: {$darkbluetext};
   text-shadow: 0px 1px 1px #fff;
   overflow: hidden;
-  width: 150px;
+  width: 175px;
   text-overflow: ellipsis;
 }
 
 .conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-subtitle {
-  display: block;
-  color: {$bluetext};
-  font-size: 11px;
-  margin-top: 2px;
-  margin-left: 50px;
+  display: none;
 }
 
 .conpherence-menu .conpherence-menu-item-view
 .conpherence-menu-item-unread-count {
   position: absolute;
-  right: 8px;
-  top: 15px;
+  right: 4px;
+  top: 11px;
   background: {$blue};
   border-radius: 2px;
   color: #fff;
diff --git a/webroot/rsrc/css/application/conpherence/message-pane.css b/webroot/rsrc/css/application/conpherence/message-pane.css
index 1c2a3af0a1..7c9d53760a 100644
--- a/webroot/rsrc/css/application/conpherence/message-pane.css
+++ b/webroot/rsrc/css/application/conpherence/message-pane.css
@@ -7,7 +7,7 @@
 .loading .messages-loading-icon,
 .conpherence-layout .conpherence-no-threads {
   position: fixed;
-  left: 205px;
+  left: 241px;
   right: 241px;
   top: 76px;
   bottom: 0px;
@@ -52,7 +52,7 @@
 
 .conpherence-message-pane .conpherence-messages {
   position: fixed;
-  left: 205px;
+  left: 241px;
   right: 241px;
   top: 76px;
   bottom: 172px;
@@ -86,7 +86,7 @@
   position: fixed;
   bottom: 0;
   border-top: 1px solid {$thinblueborder};
-  left: 205px;
+  left: 241px;
   right: 241px;
 }
 
diff --git a/webroot/rsrc/css/application/conpherence/widget-pane.css b/webroot/rsrc/css/application/conpherence/widget-pane.css
index 248d3e1d02..88b2bf6267 100644
--- a/webroot/rsrc/css/application/conpherence/widget-pane.css
+++ b/webroot/rsrc/css/application/conpherence/widget-pane.css
@@ -42,8 +42,7 @@
 }
 
 .conpherence-widget-pane .widgets-header {
-  background: #F5F5F5;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid {$thinblueborder};
 }
 
 .device .conpherence-widget-pane .widgets-header {
@@ -85,28 +84,39 @@
   width: 200px;
   padding: 20px;
   text-align: center;
-  color: #555;
+  color: {$greytext};
 }
+
 .device .conpherence-widget-pane #widgets-files .no-files {
   width: 60px;
-  margin: 0px auto 0px auto;
+  margin: 0 auto 0 auto;
 }
+
 .conpherence-widget-pane #widgets-files .file-entry {
-  padding: 10px 0;
-  margin: 0 5px 0 10px;
-  border-bottom: 1px solid #e7e7e7;
+  padding: 8px 0;
+  margin: 0 4px 0 8px;
+  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 {
   width: 32px;
   height: 32px;
   float: left;
-  font-size: 30px;
+  font-size: 24px;
+  color: {$blue};
+  margin: 2px 0 2px 4px;
 }
+
 .conpherence-widget-pane #widgets-files .file-title {
   display: block;
   position: relative;
   top: -4px;
-  left: 2px;
+  left: 0;
   overflow-x: hidden;
   width: 180px;
   font-weight: bold;
@@ -114,11 +124,11 @@
   white-space: nowrap;
 }
 .conpherence-widget-pane #widgets-files .file-uploaded-by {
-  color: #a1a5a9;
+  color: {$lightgreytext};
   position: relative;
-  top: 0px;
-  left: 2px;
-  width: 170px;
+  top: 0;
+  left: 0;
+  width: 180px;
   font-size: 11px;
 }
 
@@ -147,7 +157,7 @@
 .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
 .aphront-multi-column-column {
   background: white;
-  border-right: 1px solid #bfbfbf;
+  border-right: 1px solid {$thinblueborder};
   text-align: center;
 }
 .device-phone .conpherence-widget-pane #widgets-calendar
@@ -220,28 +230,18 @@
 
 .conpherence-widget-pane #widgets-calendar .day-header {
   overflow: hidden;
-  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
-  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
-  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;
+  border-top: 1px solid {$thinblueborder};
+  padding: 8px 8px 0px 8px;
 }
 
 .conpherence-widget-pane #widgets-calendar .day-header.today .day-name,
 .conpherence-widget-pane #widgets-calendar .day-header.today .day-date {
-  color: #fff;
+  color: {$sky};
 }
 
 .conpherence-widget-pane #widgets-calendar .day-header .day-name {
   float: left;
-  color: #555759;
+  color: {$bluetext};
   font-weight: bold;
   text-transform: uppercase;
   font-size: 11px;
@@ -249,12 +249,12 @@
 
 .conpherence-widget-pane #widgets-calendar .day-header .day-date {
   float: right;
-  color: #555759;
+  color: {$lightbluetext};
   font-size: 11px;
 }
 
 .conpherence-widget-pane #widgets-calendar .top-border {
-  border-top: 1px solid #E7E7E7;
+  border-top: 1px solid {$thinblueborder};
 }
 
 .conpherence-widget-pane #widgets-calendar .user-status {
@@ -264,24 +264,24 @@
 
 .conpherence-widget-pane #widgets-calendar .user-status .icon {
   border-radius: 8px;
-  height: 14px;
-  width: 14px;
-  margin-top: 7px;
+  height: 8px;
+  width: 8px;
+  margin-top: 4px;
   float: left;
 }
 
 .conpherence-widget-pane #widgets-calendar .sporadic .icon {
-  background-color: rgb(222, 226, 232);
+  background-color: {$orange};
 }
 
 .conpherence-widget-pane #widgets-calendar .away .icon {
-  background-color: rgb(102, 204, 255);
+  background-color: {$red};
 }
 
 .conpherence-widget-pane #widgets-calendar .user-status .description {
   width: 195px;
   text-overflow: ellipsis;
-  margin: 0 0 0px 20px;
+  margin: 0 0 0 16px;
 }
 
 .conpherence-widget-pane #widgets-calendar .user-status .participant {