Redesign durable column to be more a 'mini conpherence'

Summary:
Since I plan to add collapsing, this widens the chat window and moves the switcher to the side, for more visual space for conversation.

TODO: make a magical minimizer so I can always have it open.

Test Plan:
Tested on my large display and little Macbook.

{F1854092}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'conpherence.pkg.css' => '9402e1af',
+    'conpherence.pkg.css' => '4901ed78',
     'conpherence.pkg.js' => '11f3e07e',
     'core.pkg.css' => '55d32e63',
     'core.pkg.js' => '32939240',
@@ -46,7 +46,7 @@ return array(
     'rsrc/css/application/config/config-template.css' => '8f18fa41',
     'rsrc/css/application/config/setup-issue.css' => 'f794cfc3',
     'rsrc/css/application/config/unhandled-exception.css' => '4c96257a',
-    'rsrc/css/application/conpherence/durable-column.css' => '63114a54',
+    'rsrc/css/application/conpherence/durable-column.css' => '61f73db6',
     'rsrc/css/application/conpherence/header-pane.css' => '517de9fe',
     'rsrc/css/application/conpherence/menu.css' => '78c7b811',
     'rsrc/css/application/conpherence/message-pane.css' => '0d7dff02',
@@ -618,7 +618,7 @@ return array(
     'conduit-api-css' => '7bc725c4',
     'config-options-css' => '0ede4c9b',
     'config-page-css' => '8798e14f',
-    'conpherence-durable-column-view' => '63114a54',
+    'conpherence-durable-column-view' => '61f73db6',
     'conpherence-header-pane-css' => '517de9fe',
     'conpherence-menu-css' => '78c7b811',
     'conpherence-message-pane-css' => '0d7dff02',

src/applications/conpherence/view/ConpherenceDurableColumnView.php

@@ -229,7 +229,7 @@ final class ConpherenceDurableColumnView extends AphrontTagView {
               'threadID' => $conpherence->getID(),
               'threadTitle' => hsprintf('%s', $thread_title),
               'tip' => $data['title'],
-              'align' => 'S',
+              'align' => 'W',
             ),
           ),
           phutil_tag(

src/applications/conpherence/view/ConpherenceTransactionView.php

@@ -201,21 +201,19 @@ final class ConpherenceTransactionView extends AphrontView {
 
   private function renderTransactionImage() {
     $image = null;
-    if ($this->getFullDisplay()) {
+    $transaction = $this->getConpherenceTransaction();
-      $transaction = $this->getConpherenceTransaction();
+    switch ($transaction->getTransactionType()) {
-      switch ($transaction->getTransactionType()) {
+      case PhabricatorTransactions::TYPE_COMMENT:
-        case PhabricatorTransactions::TYPE_COMMENT:
+        $handles = $this->getHandles();
-          $handles = $this->getHandles();
+        $author = $handles[$transaction->getAuthorPHID()];
-          $author = $handles[$transaction->getAuthorPHID()];
+        $image_uri = $author->getImageURI();
-          $image_uri = $author->getImageURI();
+        $image = phutil_tag(
-          $image = phutil_tag(
+          'span',
-            'span',
+          array(
-            array(
+            'class' => 'conpherence-transaction-image',
-              'class' => 'conpherence-transaction-image',
+            'style' => 'background-image: url('.$image_uri.');',
-              'style' => 'background-image: url('.$image_uri.');',
+          ));
-            ));
+        break;
-          break;
-      }
     }
     return $image;
   }

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

@@ -9,9 +9,9 @@
 .conpherence-durable-column {
   position: fixed;
   bottom: 0;
-  right: 12px;
+  right: 16px;
-  width: 300px;
+  width: 400px;
-  height: 380px;
+  height: 360px;
   background: #fff;
   box-shadow: 0px 1px 8px rgba(55,55,55, .3);
 }
@@ -20,6 +20,16 @@
   display: none;
 }
 
+.conpherence-durable-column .conpherence-transaction-image {
+  float: left;
+  border-radius: 3px;
+  height: 24px;
+  width: 24px;
+  background-size: 24px;
+  position: absolute;
+  top: 5px;
+}
+
 .device-desktop .conpherence-durable-column.loading .loading-mask {
   display: block;
 }
@@ -81,7 +91,7 @@
   float: left;
   padding: 8px 0 8px 10px;
   color: #fff;
-  width: 230px;
+  width: 260px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -100,35 +110,34 @@
 }
 
 .conpherence-durable-column-icon-bar {
-  height: 32px;
+  width: 36px;
-  padding: 4px;
   background-color: {$lightgreybackground};
+  border-right: 1px solid {$thinblueborder};
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
 }
 
 .conpherence-durable-column-icon-bar .conpherence-durable-column-thread-icon {
-  float: left;
-  display: block;
   height: 28px;
   width: 28px;
-  border: 2px solid transparent;
+  padding: 4px;
-  border-radius: 3px;
+  display: block;
-  margin: 0 2px 0 0;
 }
 
 .conpherence-durable-column-icon-bar
 .conpherence-durable-column-thread-icon.selected {
-  border-color: {$sky};
+  background-color: rgba({$alphablue},.1);
 }
 
 .conpherence-durable-column-icon-bar
 .conpherence-durable-column-thread-icon span {
-  position: relative;
   display: block;
-  width: 24px;
+  width: 28px;
-  height: 24px;
+  height: 28px;
-  top: 2px;
+  border-radius: 3px;
-  left: 2px;
+  background-size: 28px 28px;
-  background-size: 24px 24px;
 }
 
 .conpherence-durable-column-body {
@@ -141,12 +150,11 @@
 
 .conpherence-durable-column-main {
   position: absolute;
-  top: 40px;
+  top: 0;
   bottom: 36px;
-  left: 0;
+  left: 34px;
   right: 0;
   overflow-x: hidden;
-  border-top: 1px solid {$thinblueborder};
 }
 
 .conpherence-durable-column-transactions {
@@ -156,9 +164,9 @@
 .conpherence-durable-column-transactions
   .conpherence-transaction-view.conpherence-edited {
     color: {$lightgreytext};
-    font-size: {$smallerfontsize};
     margin: 0;
     padding: 0;
+    font-style: italic;
 }
 
 .conpherence-durable-column-transactions .conpherence-edited
@@ -180,7 +188,7 @@
 
 .conpherence-durable-column-transactions .conpherence-transaction-detail {
   border: 0;
-  margin: 0;
+  margin: 0 0 0 32px;
 }
 
 .conpherence-durable-column-transactions .conpherence-transaction-detail
@@ -191,13 +199,13 @@
 
 .conpherence-durable-column-transactions
 .conpherence-transaction-view.date-marker {
-  margin: 20px 0px 8px;
+  margin: 12px 0 0;
 }
 
 .conpherence-durable-column-transactions
 .conpherence-transaction-view.date-marker .date {
   left: 0;
-  font-size: {$smallerfontsize};
+  font-size: {$normalfontsize};
   top: -14px;
   padding: 0 6px 0 0;
 }