From a591b86d910b0f7f869123e4c661c3849bf46ab7 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Sat, 1 Oct 2016 20:37:28 -0700 Subject: [PATCH] Add an icon to aphlict connection status Summary: A bit better styling, this adds an indication icon for if you're connected or not (and later, away, etc). Test Plan: Test in Notifications menu, Conpherence full, Durable Column. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16647 --- resources/celerity/map.php | 28 ++++++------- .../view/ConpherenceDurableColumnView.php | 3 ++ .../PhabricatorNotificationStatusView.php | 42 ++++++++++++++++++- .../application/base/notification-menu.css | 14 +++++-- .../conpherence/durable-column.css | 18 ++++++++ .../aphlict/behavior-aphlict-status.js | 12 +++++- 6 files changed, 95 insertions(+), 22 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 189cb29535..ed4163c4d6 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,9 +7,9 @@ */ return array( 'names' => array( - 'conpherence.pkg.css' => 'c8fbe125', + 'conpherence.pkg.css' => '5f3eb99c', 'conpherence.pkg.js' => '11f3e07e', - 'core.pkg.css' => 'cfc3eabe', + 'core.pkg.css' => '3fa66cb3', 'core.pkg.js' => '26f1f9bf', 'darkconsole.pkg.js' => 'e7393ebb', 'differential.pkg.css' => 'e1d704ce', @@ -35,7 +35,7 @@ return array( 'rsrc/css/application/almanac/almanac.css' => 'dbb9b3af', 'rsrc/css/application/auth/auth.css' => '0877ed6e', 'rsrc/css/application/base/main-menu-view.css' => 'f03e17be', - 'rsrc/css/application/base/notification-menu.css' => 'b3ab500d', + 'rsrc/css/application/base/notification-menu.css' => '1e055865', 'rsrc/css/application/base/phabricator-application-launch-view.css' => '95351601', 'rsrc/css/application/base/phui-theme.css' => '027ba77e', 'rsrc/css/application/base/standard-page-view.css' => '79176f5a', @@ -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' => 'af11a2a7', + 'rsrc/css/application/conpherence/durable-column.css' => '6127de1b', 'rsrc/css/application/conpherence/header-pane.css' => '517de9fe', 'rsrc/css/application/conpherence/menu.css' => '78c7b811', 'rsrc/css/application/conpherence/message-pane.css' => '0d7dff02', @@ -428,7 +428,7 @@ return array( 'rsrc/js/application/aphlict/Aphlict.js' => '5359e785', 'rsrc/js/application/aphlict/behavior-aphlict-dropdown.js' => '49e20786', 'rsrc/js/application/aphlict/behavior-aphlict-listen.js' => 'fb20ac8d', - 'rsrc/js/application/aphlict/behavior-aphlict-status.js' => 'ea681761', + 'rsrc/js/application/aphlict/behavior-aphlict-status.js' => '5e2634b9', 'rsrc/js/application/aphlict/behavior-desktop-notifications-control.js' => 'edd1ba66', 'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18', 'rsrc/js/application/calendar/behavior-day-view.js' => '4b3c4443', @@ -618,7 +618,7 @@ return array( 'conduit-api-css' => '7bc725c4', 'config-options-css' => '0ede4c9b', 'config-page-css' => '8798e14f', - 'conpherence-durable-column-view' => 'af11a2a7', + 'conpherence-durable-column-view' => '6127de1b', 'conpherence-header-pane-css' => '517de9fe', 'conpherence-menu-css' => '78c7b811', 'conpherence-message-pane-css' => '0d7dff02', @@ -653,7 +653,7 @@ return array( 'javelin-behavior' => '61cbc29a', 'javelin-behavior-aphlict-dropdown' => '49e20786', 'javelin-behavior-aphlict-listen' => 'fb20ac8d', - 'javelin-behavior-aphlict-status' => 'ea681761', + 'javelin-behavior-aphlict-status' => '5e2634b9', 'javelin-behavior-aphront-basic-tokenizer' => 'b3a4b884', 'javelin-behavior-aphront-crop' => 'fa0f4fc2', 'javelin-behavior-aphront-drag-and-drop-textarea' => '484a6e22', @@ -860,7 +860,7 @@ return array( 'phabricator-nav-view-css' => 'b29426e9', 'phabricator-notification' => 'ccf1cbf8', 'phabricator-notification-css' => '3f6c89c9', - 'phabricator-notification-menu-css' => 'b3ab500d', + 'phabricator-notification-menu-css' => '1e055865', 'phabricator-object-selector-css' => '85ee8ce6', 'phabricator-phtize' => 'd254d646', 'phabricator-prefab' => 'cfd23f37', @@ -1424,6 +1424,12 @@ return array( 'javelin-stratcom', 'javelin-dom', ), + '5e2634b9' => array( + 'javelin-behavior', + 'javelin-aphlict', + 'phabricator-phtize', + 'javelin-dom', + ), '5e9f347c' => array( 'javelin-behavior', 'multirow-row-manager', @@ -2159,12 +2165,6 @@ return array( 'javelin-dom', 'phabricator-draggable-list', ), - 'ea681761' => array( - 'javelin-behavior', - 'javelin-aphlict', - 'phabricator-phtize', - 'javelin-dom', - ), 'edd1ba66' => array( 'javelin-behavior', 'javelin-stratcom', diff --git a/src/applications/conpherence/view/ConpherenceDurableColumnView.php b/src/applications/conpherence/view/ConpherenceDurableColumnView.php index ed5c072c5d..b4dc244d76 100644 --- a/src/applications/conpherence/view/ConpherenceDurableColumnView.php +++ b/src/applications/conpherence/view/ConpherenceDurableColumnView.php @@ -336,6 +336,8 @@ final class ConpherenceDurableColumnView extends AphrontTagView { )); } + $status = new PhabricatorNotificationStatusView(); + return phutil_tag( 'div', @@ -343,6 +345,7 @@ final class ConpherenceDurableColumnView extends AphrontTagView { 'class' => 'conpherence-durable-column-header-inner', ), array( + $status, javelin_tag( 'div', array( diff --git a/src/applications/notification/view/PhabricatorNotificationStatusView.php b/src/applications/notification/view/PhabricatorNotificationStatusView.php index 988587f65c..e962395bba 100644 --- a/src/applications/notification/view/PhabricatorNotificationStatusView.php +++ b/src/applications/notification/view/PhabricatorNotificationStatusView.php @@ -16,6 +16,20 @@ final class PhabricatorNotificationStatusView extends AphrontTagView { 'open' => pht('Connected'), 'closed' => pht('Disconnected'), ), + 'icon' => array( + 'open' => array( + 'icon' => 'fa-circle', + 'color' => 'green', + ), + 'setup' => array( + 'icon' => 'fa-circle', + 'color' => 'yellow', + ), + 'closed' => array( + 'icon' => 'fa-circle', + 'color' => 'red', + ), + ), )); return array( @@ -26,9 +40,33 @@ final class PhabricatorNotificationStatusView extends AphrontTagView { protected function getTagContent() { $have = PhabricatorEnv::getEnvConfig('notification.servers'); if ($have) { - return pht('Connecting...'); + $icon = id(new PHUIIconView()) + ->setIcon('fa-circle-o yellow'); + $text = pht('Connecting...'); + return phutil_tag( + 'span', + array( + 'class' => 'connection-status-text '. + 'aphlict-connection-status-connecting', + ), + array( + $icon, + $text, + )); } else { - return pht('Notification server not enabled'); + $text = pht('Notification server not enabled'); + $icon = id(new PHUIIconView()) + ->setIcon('fa-circle-o grey'); + return phutil_tag( + 'span', + array( + 'class' => 'connection-status-text '. + 'aphlict-connection-status-notenabled', + ), + array( + $icon, + $text, + )); } } diff --git a/webroot/rsrc/css/application/base/notification-menu.css b/webroot/rsrc/css/application/base/notification-menu.css index 84569c7d6b..82a5aa0220 100644 --- a/webroot/rsrc/css/application/base/notification-menu.css +++ b/webroot/rsrc/css/application/base/notification-menu.css @@ -124,10 +124,16 @@ color: {$lightgreytext}; } -.aphlict-connection-status .aphlict-connection-status-connected { - color: {$green}; +.aphlict-connection-status { + position: relative; } -.aphlict-connection-status .aphlict-connection-status-error { - color: {$red}; +.aphlict-connection-status .phui-icon-view { + font-size: 9px; + position: absolute; + top: 4px; +} + +.aphlict-connection-status .connection-status-text { + margin-left: 12px; } diff --git a/webroot/rsrc/css/application/conpherence/durable-column.css b/webroot/rsrc/css/application/conpherence/durable-column.css index f4320ed1a2..51d71f196d 100644 --- a/webroot/rsrc/css/application/conpherence/durable-column.css +++ b/webroot/rsrc/css/application/conpherence/durable-column.css @@ -45,6 +45,24 @@ display: none; } +.conpherence-durable-column-header .aphlict-connection-status { + width: 6px; + float: left; + height: 18px; + margin-left: 10px; + margin-top: 8px; +} + +.conpherence-durable-column-header .aphlict-connection-status + .connection-status-text { + display: none; +} + +.conpherence-durable-column-header .aphlict-connection-status + .phui-icon-view { + font-size: 10px; +} + .conpherence-durable-column-header .phabricator-application-menu .phui-list-item-view { margin: 0; diff --git a/webroot/rsrc/js/application/aphlict/behavior-aphlict-status.js b/webroot/rsrc/js/application/aphlict/behavior-aphlict-status.js index 9b8a87c6c9..cb35df235f 100644 --- a/webroot/rsrc/js/application/aphlict/behavior-aphlict-status.js +++ b/webroot/rsrc/js/application/aphlict/behavior-aphlict-status.js @@ -24,14 +24,22 @@ JX.behavior('aphlict-status', function(config) { } var status = client.getStatus(); + var icon = config.icon[status]; var status_node = JX.$N( 'span', { - className: 'aphlict-connection-status-' + status + className: 'connection-status-text aphlict-connection-status-' + status }, pht(status)); - JX.DOM.setContent(node, status_node); + var icon_node = new JX.PHUIXIconView() + .setIcon(icon['icon']) + .setColor(icon['color']) + .getNode(); + + var content = [icon_node, ' ', status_node]; + + JX.DOM.setContent(node, content); } JX.Aphlict.listen('didChangeStatus', update);