Visual update to Conpherence Durable Column

Summary: Numerous visual updates to the Durable Column, mostly to emulate current Conpherence look and feel.

Test Plan: Lots of little pixel chasing. Also Chrome, Firefox.

Reviewers: epriestley, btrahan

Reviewed By: btrahan

Subscribers: Korvin, epriestley

Differential Revision: https://secure.phabricator.com/D12041

resources/celerity/map.php

@@ -7,8 +7,8 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '70320e8a',
-    'core.pkg.js' => '28ef0e70',
+    'core.pkg.css' => '856b962f',
+    'core.pkg.js' => '5f50c01b',
     'darkconsole.pkg.js' => '8ab24e01',
     'differential.pkg.css' => '1940be3f',
     'differential.pkg.js' => '53c1ccc2',
@@ -34,7 +34,7 @@ return array(
     'rsrc/css/aphront/typeahead.css' => '0e403212',
     'rsrc/css/application/almanac/almanac.css' => 'dbb9b3af',
     'rsrc/css/application/auth/auth.css' => '1e655982',
-    'rsrc/css/application/base/main-menu-view.css' => 'f9f5cd1b',
+    'rsrc/css/application/base/main-menu-view.css' => '58db7ad2',
     'rsrc/css/application/base/notification-menu.css' => '6aa0a74b',
     'rsrc/css/application/base/phabricator-application-launch-view.css' => '16ca323f',
     'rsrc/css/application/base/standard-page-view.css' => 'df338a4b',
@@ -44,7 +44,7 @@ return array(
     'rsrc/css/application/config/config-welcome.css' => '6abd79be',
     'rsrc/css/application/config/setup-issue.css' => '22270af2',
     'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
-    'rsrc/css/application/conpherence/durable-column.css' => '9207426d',
+    'rsrc/css/application/conpherence/durable-column.css' => '51235e34',
     'rsrc/css/application/conpherence/menu.css' => 'c6ac5299',
     'rsrc/css/application/conpherence/message-pane.css' => '5930260a',
     'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
@@ -110,7 +110,7 @@ return array(
     'rsrc/css/core/z-index.css' => '2db67397',
     'rsrc/css/diviner/diviner-shared.css' => '38813222',
     'rsrc/css/font/font-awesome.css' => 'ae9a7b4d',
-    'rsrc/css/font/font-source-sans-pro.css' => '0d859f60',
+    'rsrc/css/font/font-source-sans-pro.css' => '4a2430d7',
     'rsrc/css/font/phui-font-icon-base.css' => '3dad2ae3',
     'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
     'rsrc/css/layout/phabricator-hovercard-view.css' => '893f4783',
@@ -128,7 +128,7 @@ return array(
     'rsrc/css/phui/phui-crumbs-view.css' => '594d719e',
     'rsrc/css/phui/phui-document.css' => '0f83a7df',
     'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
-    'rsrc/css/phui/phui-fontkit.css' => 'd30f4fa3',
+    'rsrc/css/phui/phui-fontkit.css' => '1fa79503',
     'rsrc/css/phui/phui-form-view.css' => '78d729fe',
     'rsrc/css/phui/phui-form.css' => 'f535f938',
     'rsrc/css/phui/phui-header-view.css' => '083669db',
@@ -353,7 +353,7 @@ return array(
     'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18',
     'rsrc/js/application/config/behavior-reorder-fields.js' => '14a827de',
     'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => 'efef202b',
-    'rsrc/js/application/conpherence/behavior-durable-column.js' => '1eef9f26',
+    'rsrc/js/application/conpherence/behavior-durable-column.js' => 'aa3b6c22',
     'rsrc/js/application/conpherence/behavior-menu.js' => 'e476c952',
     'rsrc/js/application/conpherence/behavior-pontificate.js' => '21ba5861',
     'rsrc/js/application/conpherence/behavior-quicksand-blacklist.js' => '7927a7d3',
@@ -514,7 +514,7 @@ return array(
     'changeset-view-manager' => '88be0133',
     'config-options-css' => '7fedf08b',
     'config-welcome-css' => '6abd79be',
-    'conpherence-durable-column-view' => '9207426d',
+    'conpherence-durable-column-view' => '51235e34',
     'conpherence-menu-css' => 'c6ac5299',
     'conpherence-message-pane-css' => '5930260a',
     'conpherence-notification-css' => '04a6e10a',
@@ -534,7 +534,7 @@ return array(
     'diffusion-source-css' => '66fdf661',
     'diviner-shared-css' => '38813222',
     'font-fontawesome' => 'ae9a7b4d',
-    'font-source-sans-pro' => '0d859f60',
+    'font-source-sans-pro' => '4a2430d7',
     'global-drag-and-drop-css' => '697324ad',
     'harbormaster-css' => '49d64eb4',
     'herald-css' => '826075fa',
@@ -585,7 +585,7 @@ return array(
     'javelin-behavior-diffusion-locate-file' => '6d3e1947',
     'javelin-behavior-diffusion-pull-lastmodified' => '2b228192',
     'javelin-behavior-doorkeeper-tag' => 'e5822781',
-    'javelin-behavior-durable-column' => '1eef9f26',
+    'javelin-behavior-durable-column' => 'aa3b6c22',
     'javelin-behavior-error-log' => '6882e80a',
     'javelin-behavior-fancy-datepicker' => 'c51ae228',
     'javelin-behavior-global-drag-and-drop' => '07f199d8',
@@ -730,7 +730,7 @@ return array(
     'phabricator-hovercard-view-css' => '893f4783',
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => 'c1700f6f',
-    'phabricator-main-menu-view' => 'f9f5cd1b',
+    'phabricator-main-menu-view' => '58db7ad2',
     'phabricator-nav-view-css' => '7aeaf435',
     'phabricator-notification' => '0c6946e7',
     'phabricator-notification-css' => '9c279160',
@@ -783,7 +783,7 @@ return array(
     'phui-document-view-css' => '0f83a7df',
     'phui-feed-story-css' => 'c9f3a0b5',
     'phui-font-icon-base-css' => '3dad2ae3',
-    'phui-fontkit-css' => 'd30f4fa3',
+    'phui-fontkit-css' => '1fa79503',
     'phui-form-css' => 'f535f938',
     'phui-form-view-css' => '78d729fe',
     'phui-header-view-css' => '083669db',
@@ -954,15 +954,6 @@ return array(
       'javelin-dom',
       'javelin-reactor-dom',
     ),
-    '1eef9f26' => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-stratcom',
-      'javelin-scrollbar',
-      'javelin-quicksand',
-      'phabricator-keyboard-shortcut',
-      'conpherence-thread-manager',
-    ),
     '1feea462' => array(
       'javelin-install',
       'javelin-dom',
@@ -1150,6 +1141,9 @@ return array(
       'javelin-request',
       'javelin-util',
     ),
+    '4a2430d7' => array(
+      'phui-fontkit-css',
+    ),
     '4d94d9c3' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1206,10 +1200,6 @@ return array(
       'javelin-vector',
       'javelin-dom',
     ),
-    '5bc2cb21' => array(
-      'javelin-behavior',
-      'javelin-stratcom',
-    ),
     '5c1c758c' => array(
       'javelin-install',
     ),
@@ -1664,6 +1654,15 @@ return array(
       'javelin-util',
       'phabricator-prefab',
     ),
+    'aa3b6c22' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-stratcom',
+      'javelin-scrollbar',
+      'javelin-quicksand',
+      'phabricator-keyboard-shortcut',
+      'conpherence-thread-manager',
+    ),
     'b1f0ccee' => array(
       'javelin-install',
       'javelin-dom',

src/applications/conpherence/view/ConpherenceDurableColumnView.php

@@ -63,6 +63,8 @@ final class ConpherenceDurableColumnView extends AphrontTagView {
 
   protected function getTagContent() {
     $column_key = PhabricatorUserPreferences::PREFERENCE_CONPHERENCE_COLUMN;
+    require_celerity_resource('conpherence-durable-column-view');
+    require_celerity_resource('font-source-sans-pro');
 
     Javelin::initBehavior(
       'durable-column',
@@ -240,6 +242,7 @@ final class ConpherenceDurableColumnView extends AphrontTagView {
         ->addClass('core-menu-item')
         ->addSigil('conpherence-settings-menu')
         ->setID($bubble_id)
+        ->setHref('#')
         ->setAural(pht('Settings'))
         ->setOrder(300);
       $settings_button = id(new PHUIListView())

src/view/layout/PhabricatorTransactionView.php

@@ -63,7 +63,7 @@ final class PhabricatorTransactionView extends AphrontView {
     $transaction_id = $this->anchorName ? 'anchor-'.$this->anchorName : null;
 
     $header = phutil_tag_div(
-      'phabricator-transaction-header',
+      'phabricator-transaction-header grouped',
       array($info, $actions));
 
     return phutil_tag(

src/view/page/PhabricatorStandardPageView.php

@@ -160,7 +160,6 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
     require_celerity_resource('phui-form-css');
     require_celerity_resource('sprite-gradient-css');
     require_celerity_resource('phabricator-standard-page-view');
-    require_celerity_resource('conpherence-durable-column-view');
 
     Javelin::initBehavior('workflow', array());
 

webroot/rsrc/css/application/base/main-menu-view.css

@@ -11,7 +11,6 @@
 */
 
 .phabricator-main-menu {
-  background: #2d3236;
   background-repeat: repeat-x;
   position: relative;
   min-height: 44px;

webroot/rsrc/css/application/conpherence/durable-column.css

@@ -17,10 +17,10 @@
 
 .conpherence-durable-column .loading-mask {
   position: absolute;
-  top: 0;
+  top: 90px;
   bottom: 0;
-  right: 0;
-  width: 300px;
+  right: 1px;
+  width: 298px;
   background: #fff;
   display: none;
   opacity: .6;
@@ -33,7 +33,6 @@
 
 .conpherence-durable-column-header {
   height: 44px;
-  border-left: 1px solid #000;
 }
 
 .conpherence-durable-column-header .conpherence-settings-dropdown {
@@ -48,41 +47,36 @@
   width: 230px;
 }
 
-.conpherence-durable-column-header-text:hover {
-  color: #fff;
-  text-decoration: none;
-}
-
 .conpherence-durable-column-icon-bar {
-  height: 34px;
-  padding: 5px 12px;
-  border-bottom: 1px solid {$thinblueborder};
+  height: 38px;
+  padding: 4px 8px;
+  background-color: {$lightgreybackground};
 }
 
 .conpherence-durable-column-icon-bar .conpherence-durable-column-thread-icon {
   float: left;
   display: block;
-  width: 30px;
-  height: 30px;
-  margin: 0px 8px 0px 0px;
+  width: 34px;
+  height: 34px;
+  margin: 0 4px 0 0;
   border: 2px solid transparent;
   border-radius: 3px;
 }
 
 .conpherence-durable-column-icon-bar
 .conpherence-durable-column-thread-icon.selected {
-  border-color: {$blueborder};
+  border-color: {$sky};
 }
 
 .conpherence-durable-column-icon-bar
 .conpherence-durable-column-thread-icon span {
   position: relative;
   display: block;
-  width: 26px;
-  height: 26px;
+  width: 30px;
+  height: 30px;
   top: 2px;
   left: 2px;
-  background-size: 26px 26px;
+  background-size: 30px 30px;
 }
 
 .conpherence-durable-column-body {
@@ -96,12 +90,13 @@
 
 .conpherence-durable-column-main {
   position: absolute;
-  top: 44px;
-  bottom: 136px;
+  top: 46px;
+  bottom: 134px;
   left: 0;
   right: 0;
   overflow-x: hidden;
   overflow-y: auto;
+  border-top: 1px solid {$thinblueborder};
 }
 
 .conpherence-durable-column-transactions {
@@ -110,7 +105,7 @@
 
 .conpherence-durable-column-transactions .phabricator-transaction-view {
   background: none;
-  margin: 0 10px 0 0;
+  margin: 0;
   padding: 4px 0;
   min-height: 0;
 }
@@ -131,9 +126,26 @@
   background: none;
   padding: 0;
 }
+
+.conpherence-durable-column-transactions .date-marker {
+  border-top: 1px solid {$thinblueborder};
+  margin: 20px 0px 4px;
+}
+
+.conpherence-durable-column-transactions .date-marker .date {
+  position: relative;
+  top: -11px;
+  left: 8px;
+  background-color: #fff;
+  color: {$lightgreytext};
+  font-size: 12px;
+  padding: 0 4px;
+}
+
 .conpherence-durable-column-transactions .phabricator-transaction-detail
 .phabricator-transaction-header .phabricator-transaction-info {
   margin: 3px 0px 0px 0px;
+  color: {$lightgreytext};
 }
 
 .conpherence-durable-column-transactions .phabricator-transaction-detail
@@ -145,7 +157,7 @@
   position: absolute;
   left: 0;
   right: 0;
-  bottom: 36px;
+  bottom: 34px;
   height: 100px;
   margin: 0;
   border-width: 1px 0;
@@ -164,239 +176,6 @@
   box-shadow: none;
 }
 
-/* participants widget */
-
-.conpherence-durable-column-body .person-entry {
-  padding: 8px 0 0 8px;
-}
-
-.conpherence-durable-column-body .person-entry a {
-  float: left;
-  font-weight: bold;
-  line-height: 20px;
-}
-
-.conpherence-durable-column-body .person-entry a img {
-  height: 35px;
-  width: 35px;
-}
-
-.conpherence-durable-column-body .person-entry .pic {
-  float: left;
-  margin: 0 8px 0 0;
-  width: 35px;
-  padding: 0;
-}
-
-.conpherence-durable-column-body .person-entry .remove {
-  float: right;
-  width: 20px;
-  font-size: 18px;
-  padding: 5px 0 8px 0;
-}
-
-.conpherence-durable-column-body .person-entry .remove:hover {
-  text-decoration: none;
-}
-
-.conpherence-durable-column-body .person-entry .remove .close-icon {
-  color: #bfbfbf;
-}
-
-.conpherence-durable-column-body .person-entry .remove:hover .close-icon {
-  color: #000;
-}
-
-/* files widget */
-
-.conpherence-durable-column-body .no-files {
-  width: 100%;
-  padding: 20px 0px;
-  text-align: center;
-  color: #555;
-}
-
-.conpherence-durable-column-body .file-entry {
-  padding: 10px 0;
-  margin: 0 5px 0 10px;
-  border-bottom: 1px solid #e7e7e7;
-}
-.conpherence-durable-column-body .file-icon {
-  width: 32px;
-  height: 32px;
-  float: left;
-  font-size: 30px;
-}
-.conpherence-durable-column-body .file-title {
-  display: block;
-  position: relative;
-  top: -4px;
-  left: 2px;
-  overflow-x: hidden;
-  width: 180px;
-  font-weight: bold;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.conpherence-durable-column-body .file-uploaded-by {
-  color: #a1a5a9;
-  position: relative;
-  top: 0px;
-  left: 2px;
-  width: 170px;
-  font-size: 11px;
-}
-
-/* calendar widget */
-
-.conpherence-durable-column-body .aphront-multi-column-view {
-  width: 100%;
-}
-
-.conpherence-durable-column-body .aphront-multi-column-view
-.aphront-multi-column-column {
-  background: white;
-  border-right: 1px solid #bfbfbf;
-  text-align: center;
-}
-
-.conpherence-durable-column-body .no-events {
-  color: {$lightgreytext};
-}
-
-.conpherence-durable-column-body .aphront-multi-column-view
-.aphront-multi-column-column-last {
-  border-right: 0;
-}
-.conpherence-durable-column-body .aphront-multi-column-view
-.aphront-multi-column-column .day-column,
-.conpherence-durable-column-body .aphront-multi-column-view
-.aphront-multi-column-column .day-column-active {
-  color: #bfbfbf;
-  background-color: white;
-  font-weight: bold;
-  padding: 0px 0px 10px 0px;
-}
-.conpherence-durable-column-body .aphront-multi-column-view
-.aphront-multi-column-column .day-column-active {
-  color: black;
-}
-.conpherence-durable-column-body .aphront-multi-column-view
-.aphront-multi-column-column .present ,
-.conpherence-durable-column-body .aphront-multi-column-view
-.aphront-multi-column-column .sporadic ,
-.conpherence-durable-column-body .aphront-multi-column-view
-.aphront-multi-column-column .away {
-  height: 10px;
-  margin: 5px 0px 5px 0px;
-  width: 100%;
-}
-.conpherence-durable-column-body .aphront-multi-column-view
-.aphront-multi-column-column .present {
-  background-color: white;
-}
-.conpherence-durable-column-body .aphront-multi-column-view
-.aphront-multi-column-column .sporadic {
-  background-color: rgb(222, 226, 232);
-}
-.conpherence-durable-column-body .aphront-multi-column-view
-.aphront-multi-column-column .away {
-  background-color: rgb(102, 204, 255);
-}
-.conpherence-durable-column-body .aphront-multi-column-view
- .day-name {
-  padding: 5px 0px 0px 0px;
-  font-size: 12px;
-}
-.conpherence-durable-column-body .aphront-multi-column-view
- .day-number {
-  font-size: 16px;
-  padding: 0 0 5px 0;
-}
-
-.conpherence-durable-column-body .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-durable-column-body .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-durable-column-body .day-header.today .day-name,
-.conpherence-durable-column-body .day-header.today .day-date {
-  color: #fff;
-}
-
-.conpherence-durable-column-body .day-header .day-name {
-  float: left;
-  color: #555759;
-  font-weight: bold;
-  text-transform: uppercase;
-  font-size: 11px;
-}
-
-.conpherence-durable-column-body .day-header .day-date {
-  float: right;
-  color: #555759;
-  font-size: 11px;
-}
-
-.conpherence-durable-column-body .top-border {
-  border-top: 1px solid #E7E7E7;
-}
-
-.conpherence-durable-column-body .user-status {
-  padding: 10px 0px 10px 0px;
-  margin: 0px 0px 0px 10px;
-}
-
-.conpherence-durable-column-body .user-status .icon {
-  border-radius: 8px;
-  height: 14px;
-  width: 14px;
-  margin-top: 7px;
-  float: left;
-}
-
-.conpherence-durable-column-body .sporadic .icon {
-  background-color: rgb(222, 226, 232);
-}
-
-.conpherence-durable-column-body .away .icon {
-  background-color: rgb(102, 204, 255);
-}
-
-.conpherence-durable-column-body .user-status .description {
-  width: 195px;
-  text-overflow: ellipsis;
-  margin: 0 0 0px 20px;
-}
-
-.conpherence-durable-column-body .user-status .participant {
-  font-size: 11px;
-  color: {$lightgreytext};
-  padding-top: 2px;
-}
-
-/* settings widget */
-
-.conpherence-durable-column-body .notifications-update {
-  margin: 0px 12px;
-}
-
-.conpherence-durable-column-body .aphront-form-input {
-  margin: 8px 12px;
-  width: 100%;
-}
-
 .conpherence-durable-column-footer {
   position: absolute;
   height: 26px;
@@ -404,6 +183,7 @@
   left: 0;
   right: 0;
   bottom: 0;
+  background-color: {$lightgreybackground};
 }
 
 .conpherence-durable-column-footer button {

webroot/rsrc/css/font/font-source-sans-pro.css

@@ -1,5 +1,6 @@
 /**
  * @provides font-source-sans-pro
+ * @requires phui-fontkit-css
  */
 
 @font-face {

webroot/rsrc/css/phui/phui-fontkit.css

@@ -10,7 +10,9 @@
 }
 
 .phui-font-source-sans.conpherence-message-pane,
-.phui-font-source-sans.conpherence-message-pane .remarkup-assist-textarea {
+.phui-font-source-sans.conpherence-message-pane .remarkup-assist-textarea,
+.conpherence-durable-column-body,
+.conpherence-durable-column-body .remarkup-assist-textarea  {
   font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
   font-weight: 400;
   font-size: 14px;