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

@@ -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',

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(

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,
+        ));
     }
   }
 

webroot/rsrc/css/application/base/notification-menu.css

@@ -124,10 +124,16 @@
   color: {$lightgreytext};
 }
 
-.aphlict-connection-status .aphlict-connection-status-connected {
+.aphlict-connection-status {
-  color: {$green};
+  position: relative;
 }
 
-.aphlict-connection-status .aphlict-connection-status-error {
+.aphlict-connection-status .phui-icon-view {
-  color: {$red};
+  font-size: 9px;
+  position: absolute;
+  top: 4px;
+}
+
+.aphlict-connection-status .connection-status-text {
+  margin-left: 12px;
 }

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;

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);