mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-18 12:52:42 +01:00
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
This commit is contained in:
parent
45af6d7c0e
commit
a591b86d91
6 changed files with 95 additions and 22 deletions
|
@ -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',
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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,
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue