From 410380be3f7a4371876af357b7776a70e3026a63 Mon Sep 17 00:00:00 2001
From: Chad Little <chad@chadsdomain.com>
Date: Wed, 1 Apr 2015 13:12:51 -0700
Subject: [PATCH] Update Conpherence full message column UI

Summary:
Minor things

 - Use radiused avatars like timeline
 - Fix edge case with conpherence edited and date markers

Test Plan: Review a number of odd states in Conpherence full.

Reviewers: epriestley, btrahan

Subscribers: Korvin, epriestley

Differential Revision: https://secure.phabricator.com/D12251
---
 resources/celerity/map.php                    | 10 +++++-----
 .../layout/PhabricatorTransactionView.php     | 19 ++++++++++++-------
 webroot/rsrc/css/aphront/transaction.css      | 11 +++++++++++
 .../application/conpherence/message-pane.css  |  4 ++++
 4 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index 43366591b1..1a57d44e33 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'ad650d52',
+    'core.pkg.css' => '0e73b9f2',
     'core.pkg.js' => '0c88e7f6',
     'darkconsole.pkg.js' => '8ab24e01',
     'differential.pkg.css' => '3500921f',
@@ -29,7 +29,7 @@ return array(
     'rsrc/css/aphront/table-view.css' => '3e77fefe',
     'rsrc/css/aphront/tokenizer.css' => '82ce2142',
     'rsrc/css/aphront/tooltip.css' => '7672b60f',
-    'rsrc/css/aphront/transaction.css' => '042fc4bb',
+    'rsrc/css/aphront/transaction.css' => 'bd9f9f6e',
     'rsrc/css/aphront/two-column.css' => '16ab3ad2',
     'rsrc/css/aphront/typeahead.css' => '0e403212',
     'rsrc/css/application/almanac/almanac.css' => 'dbb9b3af',
@@ -46,7 +46,7 @@ return array(
     'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
     'rsrc/css/application/conpherence/durable-column.css' => 'caa12d4a',
     'rsrc/css/application/conpherence/menu.css' => '7c900089',
-    'rsrc/css/application/conpherence/message-pane.css' => '44154798',
+    'rsrc/css/application/conpherence/message-pane.css' => 'e44b667b',
     'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
     'rsrc/css/application/conpherence/update.css' => '1099a660',
     'rsrc/css/application/conpherence/widget-pane.css' => '1979ee8c',
@@ -516,7 +516,7 @@ return array(
     'config-welcome-css' => '6abd79be',
     'conpherence-durable-column-view' => 'caa12d4a',
     'conpherence-menu-css' => '7c900089',
-    'conpherence-message-pane-css' => '44154798',
+    'conpherence-message-pane-css' => 'e44b667b',
     'conpherence-notification-css' => '04a6e10a',
     'conpherence-thread-manager' => 'bb928342',
     'conpherence-update-css' => '1099a660',
@@ -748,7 +748,7 @@ return array(
     'phabricator-textareautils' => '5c93c52c',
     'phabricator-title' => '5c1c758c',
     'phabricator-tooltip' => '1d298e3a',
-    'phabricator-transaction-view-css' => '042fc4bb',
+    'phabricator-transaction-view-css' => 'bd9f9f6e',
     'phabricator-ui-example-css' => '528b19de',
     'phabricator-uiexample-javelin-view' => 'd4a14807',
     'phabricator-uiexample-reactor-button' => 'd19198c8',
diff --git a/src/view/layout/PhabricatorTransactionView.php b/src/view/layout/PhabricatorTransactionView.php
index 5831d3d9e3..0b10463600 100644
--- a/src/view/layout/PhabricatorTransactionView.php
+++ b/src/view/layout/PhabricatorTransactionView.php
@@ -62,7 +62,7 @@ final class PhabricatorTransactionView extends AphrontView {
 
     $info = $this->renderTransactionInfo();
     $actions = $this->renderTransactionActions();
-    $style = $this->renderTransactionStyle();
+    $image = $this->renderTransactionImage();
     $content = $this->renderTransactionContent();
     $classes = implode(' ', $this->classes);
 
@@ -77,11 +77,11 @@ final class PhabricatorTransactionView extends AphrontView {
       array(
         'class' => 'phabricator-transaction-view '.$classes,
         'id'    => $transaction_id,
-        'style' => $style,
       ),
-      phutil_tag_div(
-        'phabricator-transaction-detail grouped',
-        array($header, $content)));
+      array(
+        $image,
+        phutil_tag_div('phabricator-transaction-detail grouped',
+          array($header, $content)),));
 
   }
 
@@ -137,9 +137,14 @@ final class PhabricatorTransactionView extends AphrontView {
     return $this->actions;
   }
 
-  private function renderTransactionStyle() {
+  private function renderTransactionImage() {
     if ($this->imageURI) {
-      return 'background-image: url('.$this->imageURI.');';
+      return phutil_tag(
+        'span',
+        array(
+          'class' => 'phabricator-transaction-image',
+          'style' => 'background-image: url('.$this->imageURI.');',
+        ));
     } else {
       return null;
     }
diff --git a/webroot/rsrc/css/aphront/transaction.css b/webroot/rsrc/css/aphront/transaction.css
index 39fb9d9104..e9ccbdb2c3 100644
--- a/webroot/rsrc/css/aphront/transaction.css
+++ b/webroot/rsrc/css/aphront/transaction.css
@@ -7,6 +7,7 @@
   margin: 1em 0 1.25em;
   min-height: 50px;
   padding: 2px 0px;
+  position: relative;
 }
 
 .device-phone .phabricator-transaction-view {
@@ -59,3 +60,13 @@
 div.phabricator-remarkup + .phabricator-transaction-subheader {
   margin-top: 12px;
 }
+
+.phabricator-transaction-image {
+  float: left;
+  border-radius: 3px;
+  height: 35px;
+  width: 35px;
+  background-size: 35px;
+  position: absolute;
+  top: 5px;
+}
diff --git a/webroot/rsrc/css/application/conpherence/message-pane.css b/webroot/rsrc/css/application/conpherence/message-pane.css
index bf29d993e6..0a04bac204 100644
--- a/webroot/rsrc/css/application/conpherence/message-pane.css
+++ b/webroot/rsrc/css/application/conpherence/message-pane.css
@@ -68,6 +68,10 @@
   padding-bottom: 20px;
 }
 
+.conpherence-message-pane .conpherence-edited + .date-marker  {
+  margin-top: 24px;
+}
+
 .device .conpherence-message-pane .conpherence-messages {
   left: 0;
   right: 0;