From 49165bc6d784ca0b84ba57df8f9c79fd3f35cb08 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Sat, 15 Oct 2016 13:58:46 +0000 Subject: [PATCH] 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 | 10 +- .../ConpherenceThreadSearchController.php | 2 +- .../query/ConpherenceThreadSearchEngine.php | 121 ++++++++++-------- .../view/ConpherenceTransactionView.php | 17 +-- .../application/conpherence/message-pane.css | 86 ++++++------- .../application/conpherence/transaction.css | 27 +++- 6 files changed, 150 insertions(+), 113 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 860f429952..f6ec637a91 100644 --- a/resources/celerity/map.php +++ b/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', diff --git a/src/applications/conpherence/controller/ConpherenceThreadSearchController.php b/src/applications/conpherence/controller/ConpherenceThreadSearchController.php index e426e99128..155a61c234 100644 --- a/src/applications/conpherence/controller/ConpherenceThreadSearchController.php +++ b/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()); } } diff --git a/src/applications/conpherence/query/ConpherenceThreadSearchEngine.php b/src/applications/conpherence/query/ConpherenceThreadSearchEngine.php index f41bf835e7..d9d06f8333 100644 --- a/src/applications/conpherence/query/ConpherenceThreadSearchEngine.php +++ b/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; } diff --git a/src/applications/conpherence/view/ConpherenceTransactionView.php b/src/applications/conpherence/view/ConpherenceTransactionView.php index 12123aafcd..e3991ab979 100644 --- a/src/applications/conpherence/view/ConpherenceTransactionView.php +++ b/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); } } diff --git a/webroot/rsrc/css/application/conpherence/message-pane.css b/webroot/rsrc/css/application/conpherence/message-pane.css index c26686c555..37ee9581fe 100644 --- a/webroot/rsrc/css/application/conpherence/message-pane.css +++ b/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; diff --git a/webroot/rsrc/css/application/conpherence/transaction.css b/webroot/rsrc/css/application/conpherence/transaction.css index 62454c448e..6e52a8c30c 100644 --- a/webroot/rsrc/css/application/conpherence/transaction.css +++ b/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; +}