New UI for fulltext message search

Summary: Basically all here, but still probably needs some polish (links to jump? full dates?). Looks much better, still duplicates messages though sometimes. Needs to debug that more.

Test Plan:
Revisit search UI inside Conpherence, outside Conpherence, and normal room searches in Conpherence.

{F1870748}

{F1870749}

{F1870750}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'conpherence.pkg.css' => '823b1104',
+    'conpherence.pkg.css' => 'f934296b',
     'conpherence.pkg.js' => 'cbe4d9be',
     'core.pkg.css' => 'b99bbf5e',
     'core.pkg.js' => '30185d95',
@@ -49,10 +49,10 @@ return array(
     'rsrc/css/application/conpherence/durable-column.css' => '44bcaa19',
     'rsrc/css/application/conpherence/header-pane.css' => 'e8acbd37',
     'rsrc/css/application/conpherence/menu.css' => '4f51db5a',
-    'rsrc/css/application/conpherence/message-pane.css' => '4db388a6',
+    'rsrc/css/application/conpherence/message-pane.css' => '7a94bf5e',
     'rsrc/css/application/conpherence/notification.css' => '965db05b',
     'rsrc/css/application/conpherence/participant-pane.css' => '7bba0b56',
-    'rsrc/css/application/conpherence/transaction.css' => '46253e19',
+    'rsrc/css/application/conpherence/transaction.css' => '85129c68',
     'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
     'rsrc/css/application/countdown/timer.css' => '16c52f5c',
     'rsrc/css/application/daemon/bulk-job.css' => 'df9c1d4a',
@@ -619,11 +619,11 @@ return array(
     'conpherence-durable-column-view' => '44bcaa19',
     'conpherence-header-pane-css' => 'e8acbd37',
     'conpherence-menu-css' => '4f51db5a',
-    'conpherence-message-pane-css' => '4db388a6',
+    'conpherence-message-pane-css' => '7a94bf5e',
     'conpherence-notification-css' => '965db05b',
     'conpherence-participant-pane-css' => '7bba0b56',
     'conpherence-thread-manager' => '01774ab2',
-    'conpherence-transaction-css' => '46253e19',
+    'conpherence-transaction-css' => '85129c68',
     'd3' => 'a11a5ff2',
     'differential-changeset-view-css' => '9ef7d354',
     'differential-core-view-css' => '5b7b8ff4',

src/applications/conpherence/controller/ConpherenceThreadSearchController.php

@@ -36,6 +36,6 @@ final class ConpherenceThreadSearchController
     $view = $engine->renderResults($results, $saved);
 
     return id(new AphrontAjaxResponse())
-      ->setContent($view->getObjectList());
+      ->setContent($view->getContent());
   }
 }

src/applications/conpherence/query/ConpherenceThreadSearchEngine.php

@@ -13,7 +13,8 @@ final class ConpherenceThreadSearchEngine
 
   public function newQuery() {
     return id(new ConpherenceThreadQuery())
-      ->needParticipantCache(true);
+      ->needParticipantCache(true)
+      ->needProfileImage(true);
   }
 
   protected function buildCustomSearchFields() {
@@ -147,6 +148,7 @@ final class ConpherenceThreadSearchEngine
       $context = array();
     }
 
+    $content = array();
     $list = new PHUIObjectItemListView();
     $list->setUser($viewer);
     foreach ($conpherences as $conpherence_phid => $conpherence) {
@@ -157,63 +159,82 @@ final class ConpherenceThreadSearchEngine
       $icon_name = $conpherence->getPolicyIconName($policy_objects);
       $icon = id(new PHUIIconView())
         ->setIcon($icon_name);
-      $item = id(new PHUIObjectItemView())
-        ->setObjectName($conpherence->getMonogram())
-        ->setHeader($title)
-        ->setHref('/'.$conpherence->getMonogram())
-        ->setObject($conpherence)
-        ->addIcon('none', $created)
-        ->addIcon(
-          'none',
-          pht('Messages: %d', $conpherence->getMessageCount()))
-        ->addAttribute(
-          array(
-            $icon,
-            ' ',
-            pht(
-              'Last updated %s',
-              phabricator_datetime($conpherence->getDateModified(), $viewer)),
-          ));
 
-      $messages = idx($context, $conpherence_phid);
-      if ($messages) {
-        foreach ($messages as $group) {
-          $rows = array();
-          foreach ($group as $message) {
-            $xaction = $message['xaction'];
-            if (!$xaction) {
-              continue;
+      if (!strlen($fulltext)) {
+        $item = id(new PHUIObjectItemView())
+          ->setObjectName($conpherence->getMonogram())
+          ->setHeader($title)
+          ->setHref('/'.$conpherence->getMonogram())
+          ->setObject($conpherence)
+          ->setImageURI($conpherence->getProfileImageURI())
+          ->addIcon('none', $created)
+          ->addIcon(
+            'none',
+            pht('Messages: %d', $conpherence->getMessageCount()))
+          ->addAttribute(
+            array(
+              $icon,
+              ' ',
+              pht(
+                'Last updated %s',
+                phabricator_datetime($conpherence->getDateModified(), $viewer)),
+            ));
+          $list->addItem($item);
+      } else {
+        $messages = idx($context, $conpherence_phid);
+        $box = array();
+        $list = null;
+        if ($messages) {
+          foreach ($messages as $group) {
+            $rows = array();
+            foreach ($group as $message) {
+              $xaction = $message['xaction'];
+              if (!$xaction) {
+                continue;
+              }
+
+              $view = id(new ConpherenceTransactionView())
+                ->setUser($viewer)
+                ->setHandles($handles)
+                ->setMarkupEngine($engines[$conpherence_phid])
+                ->setConpherenceThread($conpherence)
+                ->setConpherenceTransaction($xaction)
+                ->setFullDisplay(true)
+                ->addClass('conpherence-fulltext-result');
+
+              if ($message['match']) {
+                $view->addClass('conpherence-fulltext-match');
+              }
+
+              $rows[] = $view;
             }
-
-            $view = id(new ConpherenceTransactionView())
-              ->setUser($viewer)
-              ->setHandles($handles)
-              ->setMarkupEngine($engines[$conpherence_phid])
-              ->setConpherenceThread($conpherence)
-              ->setConpherenceTransaction($xaction)
-              ->setFullDisplay(false)
-              ->addClass('conpherence-fulltext-result');
-
-            if ($message['match']) {
-              $view->addClass('conpherence-fulltext-match');
-            }
-
-            $rows[] = $view;
+            $box[] = id(new PHUIBoxView())
+              ->appendChild($rows)
+              ->addClass('conpherence-fulltext-results');
           }
-
-          $box = id(new PHUIBoxView())
-            ->appendChild($rows)
-            ->addClass('conpherence-fulltext-results');
-          $item->appendChild($box);
         }
-      }
+        $header = id(new PHUIHeaderView())
+          ->setHeader($title)
+          ->setHeaderIcon($icon_name)
+          ->setHref('/'.$monogram);
 
-      $list->addItem($item);
+        $content[] = id(new PHUIObjectBoxView())
+          ->setHeader($header)
+          ->appendChild($box);
+      }
+    }
+
+    if ($list) {
+      $content = $list;
+    } else {
+      $content = id(new PHUIBoxView())
+        ->addClass('conpherence-search-room-results')
+        ->appendChild($content);
     }
 
     $result = new PhabricatorApplicationSearchResultView();
-    $result->setObjectList($list);
-    $result->setNoDataString(pht('No threads found.'));
+    $result->setContent($content);
+    $result->setNoDataString(pht('No results found.'));
 
     return $result;
   }

src/applications/conpherence/view/ConpherenceTransactionView.php

@@ -247,17 +247,14 @@ final class ConpherenceTransactionView extends AphrontView {
         break;
     }
 
-    $this->appendChild(
-      phutil_tag(
-        'div',
-        array(
-          'class' => $content_class,
-        ),
-        $content));
+    $view = phutil_tag(
+      'div',
+      array(
+        'class' => $content_class,
+      ),
+      $content);
 
-    return phutil_tag_div(
-      'conpherence-transaction-content',
-      $this->renderChildren());
+    return phutil_tag_div('conpherence-transaction-content', $view);
   }
 
 }

webroot/rsrc/css/application/conpherence/message-pane.css

@@ -198,18 +198,18 @@
   width: 100%;
 }
 
-.conpherence-message-pane .conpherence-transaction-view {
+.conpherence-transaction-view {
   padding: 2px 0px;
   margin: 4px 20px;
   background-size: 100%;
   min-height: auto;
 }
 
-.device-phone .conpherence-message-pane .conpherence-transaction-view {
+.device-phone .conpherence-transaction-view {
   margin: 0 8px;
 }
 
-.conpherence-message-pane .conpherence-transaction-image {
+.conpherence-transaction-image {
   float: left;
   border-radius: 3px;
   height: 35px;
@@ -219,88 +219,85 @@
   top: 5px;
 }
 
-.device-phone .conpherence-message-pane .conpherence-transaction-image {
+.device-phone .conpherence-transaction-image {
   height: 25px;
   width: 25px;
   background-size: 25px;
 }
 
-.conpherence-message-pane .conpherence-comment.anchor-target,
-.conpherence-message-pane .conpherence-edited.anchor-target {
+.conpherence-transaction-view.conpherence-comment.anchor-target,
+.conpherence-transaction-view.conpherence-edited.anchor-target {
   background: {$lightyellow};
 }
 
-.conpherence-message-pane .conpherence-comment.anchor-target {
+.cconpherence-transaction-view.conpherence-comment.anchor-target {
   margin: 4px 8px 4px 8px;
   padding: 2px 4px 2px 4px;
 }
 
-.conpherence-message-pane .conpherence-edited.anchor-target {
+.conpherence-transaction-view.conpherence-edited.anchor-target {
   margin: 0px 8px 0px 8px;
   padding: 0px 4px 0px 4px;
 }
 
-.conpherence-message-pane .conpherence-transaction-detail {
+.conpherence-transaction-view .conpherence-transaction-detail {
   border-width: 0;
   margin-left: 45px;
 }
 
-.device-phone .conpherence-message-pane .conpherence-transaction-detail {
+.device-phone .conpherence-transaction-view .conpherence-transaction-detail {
   margin-left: 32px;
 }
 
-.conpherence-message-pane .conpherence-transaction-view.date-marker {
+.conpherence-transaction-view.date-marker {
   padding: 0;
   margin: 20px 20px 4px;
   min-height: auto;
 }
 
-.device-phone .conpherence-message-pane
-.conpherence-transaction-view.date-marker {
+.device-phone .conpherence-transaction-view.date-marker {
   margin: 12px 0 4px;
 }
 
-.device-tablet .conpherence-message-pane
-  .conpherence-transaction-view.date-marker {
-    padding-left: 37px;
+.device-tablet .conpherence-transaction-view.date-marker {
+  padding-left: 37px;
 }
 
-.conpherence-message-pane .conpherence-transaction-view.date-marker
-  .date {
-    left: 40px;
-    font-size: {$normalfontsize};
-    padding: 0px 4px;
+.conpherence-transaction-view.date-marker .date {
+  left: 40px;
+  font-size: {$normalfontsize};
+  padding: 0px 4px;
 }
 
-.device .conpherence-message-pane .conpherence-transaction-view.date-marker
-  .date {
-    left: 4px;
+.device .conpherence-transaction-view.date-marker .date {
+  left: 4px;
 }
 
-.device-phone .conpherence-message-pane .conpherence-edited {
+.device-phone .conpherence-transaction-view.conpherence-edited {
   min-height: none;
   color: {$lightgreytext};
   margin: 0 8px;
 }
 
-.conpherence-message-pane .conpherence-edited .conpherence-transaction-content {
-  color: {$lightgreytext};
-  font-size: {$biggerfontsize};
-  font-style: italic;
-  margin: 0;
-  padding: 0;
-  float: left;
-  line-height: 20px;
+.conpherence-transaction-view.conpherence-edited
+  .conpherence-transaction-content {
+    color: {$lightgreytext};
+    font-size: {$biggerfontsize};
+    font-style: italic;
+    margin: 0;
+    padding: 0;
+    float: left;
+    line-height: 20px;
 }
 
-.conpherence-message-pane .conpherence-edited {
+.conpherence-transaction-view.conpherence-edited {
   padding: 0;
   margin-top: 0;
   margin-bottom: 0;
   min-height: inherit;
 }
 
-.conpherence-message-pane .conpherence-edited + .conpherence-comment {
+.conpherence-transaction-view.conpherence-edited + .conpherence-comment {
   margin-top: 16px;
 }
 
@@ -309,28 +306,29 @@
     margin-top: 24px;
 }
 
-.conpherence-message-pane .conpherence-edited .conpherence-transaction-header {
-  float: right;
+.conpherence-transaction-view.conpherence-edited
+  .conpherence-transaction-header {
+    float: right;
 }
 
-.conpherence-message-pane .conpherence-edited
+.conpherence-transaction-view.conpherence-edited
   .conpherence-transaction-content a {
   color: {$darkbluetext};
 }
 
-.conpherence-message-pane .conpherence-transaction-info {
+.conpherence-transaction-view .conpherence-transaction-info {
   margin: 0 8px;
 }
 
-.conpherence-message-pane .conpherence-transaction-info,
-.conpherence-message-pane .anchor-link,
-.conpherence-message-pane .phabricator-content-source-view {
+.conpherence-transaction-view .conpherence-transaction-info,
+.conpherence-transaction-view .anchor-link,
+.conpherence-transaction-view .phabricator-content-source-view {
   color: {$lightgreytext};
   line-height: 16px;
   font-size: {$smallerfontsize};
 }
 
-.conpherence-message-pane .conpherence-transaction-content {
+.conpherence-transaction-view .conpherence-transaction-content {
   padding: 2px 0 8px 0;
 }
 
@@ -453,7 +451,7 @@
   right: 0;
 }
 
-input.conpherence-search-input {
+.conpherence-search-form-view input.conpherence-search-input {
   padding-left: 8px;
   width: calc(100% - 24px);
   border-radius: 20px;

webroot/rsrc/css/application/conpherence/transaction.css

@@ -28,10 +28,15 @@
   font-weight: bold;
 }
 
+/***** Thread Search **********************************************************/
+
 .conpherence-fulltext-results {
-  margin: 0 8px 8px;
-  background: {$lightgreybackground};
-  border: 1px solid {$lightgreyborder};
+  padding: 8px 0;
+}
+
+.conpherence-fulltext-results + .conpherence-fulltext-results {
+  border-top: 2px solid {$thinblueborder};
+  margin-top: -8px;
 }
 
 .conpherence-fulltext-result {
@@ -46,3 +51,19 @@
 .conpherence-fulltext-results .epoch-link {
   float: right;
 }
+
+.conpherence-message-pane .conpherence-fulltext-results
+  .conpherence-transaction-view.conpherence-fulltext-result {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.conpherence-message-pane .conpherence-search-room-results .phui-object-box {
+  border: none;
+  margin: 0;
+}
+
+.conpherence-message-pane .conpherence-search-room-results
+  .phui-object-box .phui-header-shell {
+    display: none;
+}