@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
Add a basic notification UI element
Summary: This is //extremely// basic but dead simple and should cover us for v1, I think. Let me know what features you need.
Test Plan: Used UI example page.
Reviewers: allenjohnashton, ddfisher, keebuhm
Reviewed By: ddfisher
CC: aran, ender
Maniphest Tasks: T944
Differential Revision: https://secure.phabricator.com/D2732
+243
+33
src/__celerity_resource_map__.php
+33
src/__celerity_resource_map__.php
···
1332
1332
),
1333
1333
'disk' => '/rsrc/js/application/core/behavior-keyboard-shortcuts.js',
1334
1334
),
1335
+
'javelin-behavior-phabricator-notification-example' =>
1336
+
array(
1337
+
'uri' => '/res/0b8fadf5/rsrc/js/application/uiexample/notification-example.js',
1338
+
'type' => 'js',
1339
+
'requires' =>
1340
+
array(
1341
+
0 => 'phabricator-notification',
1342
+
1 => 'javelin-stratcom',
1343
+
2 => 'javelin-behavior',
1344
+
),
1345
+
'disk' => '/rsrc/js/application/uiexample/notification-example.js',
1346
+
),
1335
1347
'javelin-behavior-phabricator-object-selector' =>
1336
1348
array(
1337
1349
'uri' => '/res/0c4b0d82/rsrc/js/application/core/behavior-object-selector.js',
···
2145
2157
1 => 'javelin-dom',
2146
2158
),
2147
2159
'disk' => '/rsrc/js/application/core/DropdownMenuItem.js',
2160
+
),
2161
+
'phabricator-notification' =>
2162
+
array(
2163
+
'uri' => '/res/8497d4b2/rsrc/js/application/core/Notification.js',
2164
+
'type' => 'js',
2165
+
'requires' =>
2166
+
array(
2167
+
0 => 'javelin-install',
2168
+
1 => 'javelin-dom',
2169
+
2 => 'javelin-stratcom',
2170
+
),
2171
+
'disk' => '/rsrc/js/application/core/Notification.js',
2172
+
),
2173
+
'phabricator-notification-css' =>
2174
+
array(
2175
+
'uri' => '/res/423a14d1/rsrc/css/aphront/notification.css',
2176
+
'type' => 'css',
2177
+
'requires' =>
2178
+
array(
2179
+
),
2180
+
'disk' => '/rsrc/css/aphront/notification.css',
2148
2181
),
2149
2182
'phabricator-object-selector-css' =>
2150
2183
array(
+2
src/__phutil_library_map__.php
+2
src/__phutil_library_map__.php
···
966
966
'PhabricatorUIExampleController' => 'applications/uiexample/controller/PhabricatorUIExampleController.php',
967
967
'PhabricatorUIExampleRenderController' => 'applications/uiexample/controller/PhabricatorUIExampleRenderController.php',
968
968
'PhabricatorUIListFilterExample' => 'applications/uiexample/examples/PhabricatorUIListFilterExample.php',
969
+
'PhabricatorUINotificationExample' => 'applications/uiexample/examples/PhabricatorUINotificationExample.php',
969
970
'PhabricatorUIPagerExample' => 'applications/uiexample/examples/PhabricatorUIPagerExample.php',
970
971
'PhabricatorUITooltipExample' => 'applications/uiexample/examples/PhabricatorUITooltipExample.php',
971
972
'PhabricatorUnitsTestCase' => 'view/__tests__/PhabricatorUnitsTestCase.php',
···
1900
1901
'PhabricatorUIExampleController' => 'PhabricatorController',
1901
1902
'PhabricatorUIExampleRenderController' => 'PhabricatorUIExampleController',
1902
1903
'PhabricatorUIListFilterExample' => 'PhabricatorUIExample',
1904
+
'PhabricatorUINotificationExample' => 'PhabricatorUIExample',
1903
1905
'PhabricatorUIPagerExample' => 'PhabricatorUIExample',
1904
1906
'PhabricatorUITooltipExample' => 'PhabricatorUIExample',
1905
1907
'PhabricatorUnitsTestCase' => 'PhabricatorTestCase',
+46
src/applications/uiexample/examples/PhabricatorUINotificationExample.php
+46
src/applications/uiexample/examples/PhabricatorUINotificationExample.php
···
1
+
<?php
2
+
3
+
/*
4
+
* Copyright 2012 Facebook, Inc.
5
+
*
6
+
* Licensed under the Apache License, Version 2.0 (the "License");
7
+
* you may not use this file except in compliance with the License.
8
+
* You may obtain a copy of the License at
9
+
*
10
+
* http://www.apache.org/licenses/LICENSE-2.0
11
+
*
12
+
* Unless required by applicable law or agreed to in writing, software
13
+
* distributed under the License is distributed on an "AS IS" BASIS,
14
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
+
* See the License for the specific language governing permissions and
16
+
* limitations under the License.
17
+
*/
18
+
19
+
final class PhabricatorUINotificationExample extends PhabricatorUIExample {
20
+
21
+
public function getName() {
22
+
return 'Notifications';
23
+
}
24
+
25
+
public function getDescription() {
26
+
return 'Use <tt>JX.Notification</tt> to create notifications.';
27
+
}
28
+
29
+
public function renderExample() {
30
+
31
+
require_celerity_resource('phabricator-notification-css');
32
+
Javelin::initBehavior('phabricator-notification-example');
33
+
34
+
$content = javelin_render_tag(
35
+
'a',
36
+
array(
37
+
'sigil' => 'notification-example',
38
+
'class' => 'button green',
39
+
),
40
+
'Show Notification');
41
+
42
+
$content = '<div style="padding: 1em 3em;">'.$content.'</content>';
43
+
44
+
return $content;
45
+
}
46
+
}
+3
src/infrastructure/lint/linter/PhabricatorJavelinLinter.php
+3
src/infrastructure/lint/linter/PhabricatorJavelinLinter.php
···
31
31
32
32
public function willLintPaths(array $paths) {
33
33
34
+
$root = dirname(phutil_get_library_root('phabricator'));
35
+
require_once $root.'/scripts/__init_script__.php';
36
+
34
37
if ($this->haveSymbolsBinary === null) {
35
38
$binary = $this->getSymbolsBinaryPath();
36
39
$this->haveSymbolsBinary = Filesystem::pathExists($binary);
+24
webroot/rsrc/css/aphront/notification.css
+24
webroot/rsrc/css/aphront/notification.css
···
1
+
/**
2
+
* @provides phabricator-notification-css
3
+
*/
4
+
5
+
.jx-notification-container {
6
+
position: fixed;
7
+
8
+
bottom: 24px;
9
+
left: 24px;
10
+
width: 240px;
11
+
padding: 8px 16px;
12
+
13
+
font-size: 11px;
14
+
overflow: hidden;
15
+
16
+
background: #f3f6ff;
17
+
color: #444444;
18
+
border: 1px solid #afbfcf;
19
+
20
+
cursor: pointer;
21
+
22
+
border-radius: 3px;
23
+
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
24
+
}
+106
webroot/rsrc/js/application/core/Notification.js
+106
webroot/rsrc/js/application/core/Notification.js
···
1
+
/**
2
+
* @requires javelin-install
3
+
* javelin-dom
4
+
* javelin-stratcom
5
+
* @provides phabricator-notification
6
+
* @javelin
7
+
*/
8
+
9
+
/**
10
+
* Show a notification. Usage:
11
+
*
12
+
* var n = new JX.Notification()
13
+
* .setContent('click me!');
14
+
* n.listen('activate', function(e) { alert('you clicked!'); });
15
+
* n.show();
16
+
*
17
+
*/
18
+
JX.install('Notification', {
19
+
20
+
events : ['activate', 'close'],
21
+
22
+
members : {
23
+
show : function() {
24
+
var self = JX.Notification;
25
+
26
+
self.close();
27
+
self._installListener();
28
+
self._active = this;
29
+
30
+
var container = JX.$N(
31
+
'div',
32
+
{
33
+
className: 'jx-notification-container',
34
+
sigil: 'jx-notification'
35
+
},
36
+
this.getContent());
37
+
document.body.appendChild(container);
38
+
39
+
self._container = container;
40
+
41
+
if (this.getDuration()) {
42
+
self._timeout = setTimeout(self.close, this.getDuration());
43
+
}
44
+
}
45
+
},
46
+
47
+
properties : {
48
+
content : null,
49
+
50
+
/**
51
+
* Duration before the notification fades away, in milliseconds. If set to
52
+
* 0, the notification persists until dismissed.
53
+
*
54
+
* @param int Notification duration, in milliseconds.
55
+
*/
56
+
duration : 12000
57
+
},
58
+
59
+
statics : {
60
+
_container : null,
61
+
_listening : false,
62
+
_active : null,
63
+
_installListener : function() {
64
+
var self = JX.Notification;
65
+
66
+
if (self._listening) {
67
+
return;
68
+
} else {
69
+
self._listening = true;
70
+
}
71
+
72
+
JX.Stratcom.listen(
73
+
'click',
74
+
'jx-notification',
75
+
function(e) {
76
+
// NOTE: Don't kill the event since the user might have clicked a
77
+
// link, and we want to follow the link if they did. Istead, invoke
78
+
// the activate event for the active notification and dismiss it if it
79
+
// isn't handled.
80
+
81
+
var activation = self._active.invoke('activate');
82
+
if (activation.getPrevented()) {
83
+
return;
84
+
}
85
+
86
+
self.close();
87
+
});
88
+
},
89
+
close : function() {
90
+
var self = JX.Notification;
91
+
92
+
if (self._container) {
93
+
JX.DOM.remove(self._container);
94
+
self._container = null;
95
+
96
+
self._active.invoke('close');
97
+
self._active = null;
98
+
}
99
+
100
+
self._timeout && clearTimeout(self._timeout);
101
+
self._timeout = null;
102
+
}
103
+
}
104
+
105
+
});
106
+
+29
webroot/rsrc/js/application/uiexample/notification-example.js
+29
webroot/rsrc/js/application/uiexample/notification-example.js
···
1
+
/**
2
+
* @requires phabricator-notification
3
+
* javelin-stratcom
4
+
* javelin-behavior
5
+
* @provides javelin-behavior-phabricator-notification-example
6
+
*/
7
+
8
+
JX.behavior('phabricator-notification-example', function(config) {
9
+
JX.Stratcom.listen(
10
+
'click',
11
+
'notification-example',
12
+
function(e) {
13
+
e.kill();
14
+
15
+
var notification = new JX.Notification()
16
+
.setContent('It is ' + new Date().toString());
17
+
18
+
notification.listen(
19
+
'activate',
20
+
function(e) {
21
+
if (!confirm("Close notification?")) {
22
+
e.kill();
23
+
}
24
+
});
25
+
26
+
notification.show()
27
+
});
28
+
29
+
});