Shrink side-nav on home when durable column is open

Summary: This still needs some fine tuning, but wanted to get opinions. Using it on a laptop feels pretty good. This also moves `durable-column.css` into its own file since it'll likely continue to grow. Minor CSS tweaks to the near perfect rendition of durable column from pixel based mockups.

Test Plan:
Press \ on my laptop. Having issues with Chrome however, but FF and Safari work as expected.

{F322506}

Reviewers: epriestley, btrahan

Reviewed By: btrahan

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'fa9788b4',
+    'core.pkg.css' => '44623ac2',
     'core.pkg.js' => '23d653bb',
     'darkconsole.pkg.js' => '8ab24e01',
     'differential.pkg.css' => '14f0fa92',
@@ -38,13 +38,14 @@ return array(
     'rsrc/css/application/base/main-menu-view.css' => 'f9f5cd1b',
     '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' => '926b7e2d',
+    'rsrc/css/application/base/standard-page-view.css' => 'df338a4b',
     'rsrc/css/application/chatlog/chatlog.css' => '852140ff',
     'rsrc/css/application/config/config-options.css' => '7fedf08b',
     'rsrc/css/application/config/config-template.css' => '8e6c6fcd',
     'rsrc/css/application/config/config-welcome.css' => 'b0d16200',
     'rsrc/css/application/config/setup-issue.css' => '22270af2',
     'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
+    'rsrc/css/application/conpherence/durable-column.css' => '12846d25',
     'rsrc/css/application/conpherence/menu.css' => '73774137',
     'rsrc/css/application/conpherence/message-pane.css' => '17a9517f',
     'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
@@ -515,6 +516,7 @@ return array(
     'changeset-view-manager' => '5eb5b98c',
     'config-options-css' => '7fedf08b',
     'config-welcome-css' => 'b0d16200',
+    'conpherence-durable-column-view' => '12846d25',
     'conpherence-menu-css' => '73774137',
     'conpherence-message-pane-css' => '17a9517f',
     'conpherence-notification-css' => '04a6e10a',
@@ -744,7 +746,7 @@ return array(
     'phabricator-side-menu-view-css' => '7e8c6341',
     'phabricator-slowvote-css' => '266df6a1',
     'phabricator-source-code-view-css' => '2ceee894',
-    'phabricator-standard-page-view' => '926b7e2d',
+    'phabricator-standard-page-view' => 'df338a4b',
     'phabricator-textareautils' => '5c93c52c',
     'phabricator-title' => '5c1c758c',
     'phabricator-tooltip' => '1d298e3a',

src/__phutil_library_map__.php

@@ -229,6 +229,7 @@ phutil_register_library_map(array(
     'ConpherenceCreateThreadConduitAPIMethod' => 'applications/conpherence/conduit/ConpherenceCreateThreadConduitAPIMethod.php',
     'ConpherenceCreateThreadMailReceiver' => 'applications/conpherence/mail/ConpherenceCreateThreadMailReceiver.php',
     'ConpherenceDAO' => 'applications/conpherence/storage/ConpherenceDAO.php',
+    'ConpherenceDurableColumnView' => 'applications/conpherence/view/ConpherenceDurableColumnView.php',
     'ConpherenceEditor' => 'applications/conpherence/editor/ConpherenceEditor.php',
     'ConpherenceFileWidgetView' => 'applications/conpherence/view/ConpherenceFileWidgetView.php',
     'ConpherenceFulltextQuery' => 'applications/conpherence/query/ConpherenceFulltextQuery.php',
@@ -1138,7 +1139,6 @@ phutil_register_library_map(array(
     'PHUICrumbsView' => 'view/phui/PHUICrumbsView.php',
     'PHUIDocumentExample' => 'applications/uiexample/examples/PHUIDocumentExample.php',
     'PHUIDocumentView' => 'view/phui/PHUIDocumentView.php',
-    'PHUIDurableColumn' => 'view/phui/PHUIDurableColumn.php',
     'PHUIErrorExample' => 'applications/uiexample/examples/PHUIErrorExample.php',
     'PHUIErrorView' => 'view/form/PHUIErrorView.php',
     'PHUIFeedStoryExample' => 'applications/uiexample/examples/PHUIFeedStoryExample.php',
@@ -3368,6 +3368,7 @@ phutil_register_library_map(array(
     'ConpherenceCreateThreadConduitAPIMethod' => 'ConpherenceConduitAPIMethod',
     'ConpherenceCreateThreadMailReceiver' => 'PhabricatorMailReceiver',
     'ConpherenceDAO' => 'PhabricatorLiskDAO',
+    'ConpherenceDurableColumnView' => 'AphrontTagView',
     'ConpherenceEditor' => 'PhabricatorApplicationTransactionEditor',
     'ConpherenceFileWidgetView' => 'ConpherenceWidgetView',
     'ConpherenceFulltextQuery' => 'PhabricatorOffsetPagedQuery',
@@ -4364,7 +4365,6 @@ phutil_register_library_map(array(
     'PHUICrumbsView' => 'AphrontView',
     'PHUIDocumentExample' => 'PhabricatorUIExample',
     'PHUIDocumentView' => 'AphrontTagView',
-    'PHUIDurableColumn' => 'AphrontTagView',
     'PHUIErrorExample' => 'PhabricatorUIExample',
     'PHUIErrorView' => 'AphrontView',
     'PHUIFeedStoryExample' => 'PhabricatorUIExample',

src/applications/conpherence/view/ConpherenceDurableColumnView.php

@@ -1,11 +1,11 @@
 <?php
 
-final class PHUIDurableColumn extends AphrontTagView {
+final class ConpherenceDurableColumnView extends AphrontTagView {
 
   protected function getTagAttributes() {
     return array(
       'id' => 'durable-column',
-      'class' => 'phui-durable-column',
+      'class' => 'conpherence-durable-column',
     );
   }
 
@@ -13,7 +13,7 @@ final class PHUIDurableColumn extends AphrontTagView {
     Javelin::initBehavior('durable-column');
 
     $classes = array();
-    $classes[] = 'phui-durable-column-header';
+    $classes[] = 'conpherence-durable-column-header';
     $classes[] = 'sprite-main-header';
     $classes[] = 'main-header-'.PhabricatorEnv::getEnvConfig('ui.header-color');
 
@@ -25,14 +25,14 @@ final class PHUIDurableColumn extends AphrontTagView {
       phutil_tag(
         'div',
         array(
-          'class' => 'phui-durable-column-header-text',
+          'class' => 'conpherence-durable-column-header-text',
         ),
         pht('Column Prototype')));
 
     $icon_bar = phutil_tag(
       'div',
       array(
-        'class' => 'phui-durable-column-icon-bar',
+        'class' => 'conpherence-durable-column-icon-bar',
       ),
       null); // <-- TODO: Icon buttons go here.
 
@@ -45,32 +45,32 @@ final class PHUIDurableColumn extends AphrontTagView {
     $content = phutil_tag(
       'div',
       array(
-        'class' => 'phui-durable-column-main',
+        'class' => 'conpherence-durable-column-main',
       ),
       phutil_tag(
         'div',
         array(
-          'id' => 'phui-durable-column-content',
+          'id' => 'conpherence-durable-column-content',
-          'class' => 'phui-durable-column-frame',
+          'class' => 'conpherence-durable-column-frame',
         ),
         phutil_tag(
           'div',
           array(
-            'class' => 'phui-durable-column-content',
+            'class' => 'conpherence-durable-column-content',
           ),
           $copy)));
 
     $input = phutil_tag(
       'textarea',
       array(
-        'class' => 'phui-durable-column-textarea',
+        'class' => 'conpherence-durable-column-textarea',
         'placeholder' => pht('Box for text...'),
       ));
 
     $footer = phutil_tag(
       'div',
       array(
-        'class' => 'phui-durable-column-footer',
+        'class' => 'conpherence-durable-column-footer',
       ),
       array(
         phutil_tag(
@@ -82,7 +82,7 @@ final class PHUIDurableColumn extends AphrontTagView {
         phutil_tag(
           'div',
           array(
-            'class' => 'phui-durable-column-status',
+            'class' => 'conpherence-durable-column-status',
           ),
           pht('Status Text')),
       ));
@@ -92,7 +92,7 @@ final class PHUIDurableColumn extends AphrontTagView {
       phutil_tag(
         'div',
         array(
-          'class' => 'phui-durable-column-body',
+          'class' => 'conpherence-durable-column-body',
         ),
         array(
           $icon_bar,

src/view/page/PhabricatorStandardPageView.php

@@ -133,6 +133,7 @@ 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());
 
@@ -377,7 +378,7 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
 
     $durable_column = null;
     if ($this->getShowDurableColumn()) {
-      $durable_column = new PHUIDurableColumn();
+      $durable_column = new ConpherenceDurableColumnView();
     }
 
     return phutil_tag(

webroot/rsrc/css/application/base/standard-page-view.css

@@ -215,97 +215,3 @@ a.handle-disabled {
   position: absolute;
   left: -50px;
 }
-
-.with-durable-column {
-  margin-right: 300px;
-}
-
-.phui-durable-column {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: 300px;
-  background: #ffffff;
-  display: none;
-}
-
-.phui-durable-column-header {
-  height: 44px;
-  border-left: 1px solid #000000;
-}
-
-.phui-durable-column-header-text {
-  padding: 12px 16px;
-  font-size: 15px;
-  color: {$lightgreytext};
-}
-
-.phui-durable-column-icon-bar {
-  height: 34px;
-  padding: 5px 16px;
-  border-bottom: 1px solid {$lightblueborder};
-}
-
-.phui-durable-column-body {
-  position: absolute;
-  top: 44px;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  border-left: 1px solid {$lightgreyborder};
-}
-
-.phui-durable-column-main {
-  position: absolute;
-  top: 44px;
-  bottom: 144px;
-  left: 0;
-  right: 0;
-  overflow: hidden;
-}
-
-.phui-durable-column-content {
-  padding: 8px 16px;
-}
-
-.phui-durable-column-textarea {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 44px;
-  height: 100px;
-  margin: 0;
-  border-width: 1px 0;
-  border-style: solid;
-  border-top-color: {$lightblueborder};
-  border-bottom-color: {$lightblueborder};
-  padding: 8px 16px;
-  resize: none;
-}
-
-.phui-durable-column-textarea:focus {
-  outline: 0;
-  border-top-color: {$sky};
-  border-bottom-color: {$sky};
-  box-shadow: none;
-}
-
-.phui-durable-column-footer {
-  position: absolute;
-  height: 28px;
-  padding: 8px 16px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.phui-durable-column-footer button {
-  float: right;
-}
-
-.phui-durable-column-status {
-  vertical-align: middle;
-  line-height: 28px;
-  color: {$lightgreytext};
-}

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

@@ -0,0 +1,103 @@
+/**
+ * @provides conpherence-durable-column-view
+ */
+
+.with-durable-column {
+  margin-right: 300px;
+}
+
+.conpherence-durable-column {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 300px;
+  background: #fff;
+  display: none;
+}
+
+.conpherence-durable-column-header {
+  height: 44px;
+  border-left: 1px solid #000;
+}
+
+.conpherence-durable-column-header-text {
+  padding: 12px 16px;
+  font-size: 15px;
+  color: rgba(255,255,255,.8);
+}
+
+.conpherence-durable-column-header-text:hover {
+  color: #fff;
+}
+
+.conpherence-durable-column-icon-bar {
+  height: 34px;
+  padding: 5px 16px;
+  border-bottom: 1px solid {$thinblueborder};
+}
+
+.conpherence-durable-column-body {
+  position: absolute;
+  top: 44px;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  border-left: 1px solid {$lightblueborder};
+}
+
+.conpherence-durable-column-main {
+  position: absolute;
+  top: 44px;
+  bottom: 144px;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+}
+
+.conpherence-durable-column-content {
+  padding: 8px 12px;
+}
+
+.conpherence-durable-column-textarea {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 36px;
+  height: 100px;
+  margin: 0;
+  border-width: 1px 0;
+  border-style: solid;
+  border-top-color: {$thinblueborder};
+  border-bottom-color: {$thinblueborder};
+  padding: 8px 12px;
+  width: 100%;
+  resize: none;
+}
+
+.conpherence-durable-column-textarea:focus {
+  outline: 0;
+  border-top-color: {$sky};
+  border-bottom-color: {$sky};
+  box-shadow: none;
+}
+
+.conpherence-durable-column-footer {
+  position: absolute;
+  height: 26px;
+  padding: 4px 8px 4px 12px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.conpherence-durable-column-footer button {
+  float: right;
+}
+
+.conpherence-durable-column-status {
+  vertical-align: middle;
+  line-height: 24px;
+  font-size: 12px;
+  color: {$lightbluetext};
+}