@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
Apply AMAZING DESIGN SKILLS to notification menu
Summary:
I am a fancy designer!
{F12665} {F12666}
Test Plan: Opened/closed menu. Viewed with-notification-count and without-notification count states.
Reviewers: allenjohnashton, ddfisher, keebuhm
Reviewed By: ddfisher
CC: aran, chad, joe
Maniphest Tasks: T974
Differential Revision: https://secure.phabricator.com/D2735
+146
-106
+38
-31
src/__celerity_resource_map__.php
+38
-31
src/__celerity_resource_map__.php
···
357
357
'disk' => '/rsrc/image/icon/unsubscribe.png',
358
358
'type' => 'png',
359
359
),
360
+
'/rsrc/image/notification_menu.png' =>
361
+
array(
362
+
'hash' => 'f3834ad08a16fc631cd46ceb5db4fb0e',
363
+
'uri' => '/res/f3834ad0/rsrc/image/notification_menu.png',
364
+
'disk' => '/rsrc/image/notification_menu.png',
365
+
'type' => 'png',
366
+
),
360
367
'/rsrc/image/phabricator_logo.png' =>
361
368
array(
362
369
'hash' => '7e62ff4001914cb3c87893a228f400c4',
···
758
765
),
759
766
'javelin-behavior-aphlict-dropdown' =>
760
767
array(
761
-
'uri' => '/res/c0b06adb/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js',
768
+
'uri' => '/res/425c08fd/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js',
762
769
'type' => 'js',
763
770
'requires' =>
764
771
array(
765
772
0 => 'javelin-behavior',
766
-
1 => 'javelin-aphlict',
767
-
2 => 'javelin-util',
768
-
3 => 'javelin-request',
769
-
4 => 'javelin-stratcom',
773
+
1 => 'javelin-request',
774
+
2 => 'javelin-stratcom',
775
+
3 => 'javelin-vector',
776
+
4 => 'javelin-dom',
770
777
),
771
778
'disk' => '/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js',
772
779
),
···
2304
2311
),
2305
2312
'phabricator-standard-page-view' =>
2306
2313
array(
2307
-
'uri' => '/res/abebf8a7/rsrc/css/application/base/standard-page-view.css',
2314
+
'uri' => '/res/fe757493/rsrc/css/application/base/standard-page-view.css',
2308
2315
'type' => 'css',
2309
2316
'requires' =>
2310
2317
array(
···
2559
2566
), array(
2560
2567
'packages' =>
2561
2568
array(
2562
-
'040e796f' =>
2569
+
'59b02d20' =>
2563
2570
array(
2564
2571
'name' => 'core.pkg.css',
2565
2572
'symbols' =>
···
2588
2595
21 => 'phabricator-flag-css',
2589
2596
22 => 'aphront-error-view-css',
2590
2597
),
2591
-
'uri' => '/res/pkg/040e796f/core.pkg.css',
2598
+
'uri' => '/res/pkg/59b02d20/core.pkg.css',
2592
2599
'type' => 'css',
2593
2600
),
2594
2601
'0c96375e' =>
···
2755
2762
'reverse' =>
2756
2763
array(
2757
2764
'aphront-attached-file-view-css' => '7839ae2d',
2758
-
'aphront-crumbs-view-css' => '040e796f',
2759
-
'aphront-dialog-view-css' => '040e796f',
2760
-
'aphront-error-view-css' => '040e796f',
2761
-
'aphront-form-view-css' => '040e796f',
2765
+
'aphront-crumbs-view-css' => '59b02d20',
2766
+
'aphront-dialog-view-css' => '59b02d20',
2767
+
'aphront-error-view-css' => '59b02d20',
2768
+
'aphront-form-view-css' => '59b02d20',
2762
2769
'aphront-headsup-action-list-view-css' => '32f461a4',
2763
-
'aphront-headsup-view-css' => '040e796f',
2764
-
'aphront-list-filter-view-css' => '040e796f',
2765
-
'aphront-pager-view-css' => '040e796f',
2766
-
'aphront-panel-view-css' => '040e796f',
2767
-
'aphront-side-nav-view-css' => '040e796f',
2768
-
'aphront-table-view-css' => '040e796f',
2769
-
'aphront-tokenizer-control-css' => '040e796f',
2770
-
'aphront-tooltip-css' => '040e796f',
2771
-
'aphront-typeahead-control-css' => '040e796f',
2770
+
'aphront-headsup-view-css' => '59b02d20',
2771
+
'aphront-list-filter-view-css' => '59b02d20',
2772
+
'aphront-pager-view-css' => '59b02d20',
2773
+
'aphront-panel-view-css' => '59b02d20',
2774
+
'aphront-side-nav-view-css' => '59b02d20',
2775
+
'aphront-table-view-css' => '59b02d20',
2776
+
'aphront-tokenizer-control-css' => '59b02d20',
2777
+
'aphront-tooltip-css' => '59b02d20',
2778
+
'aphront-typeahead-control-css' => '59b02d20',
2772
2779
'differential-changeset-view-css' => '32f461a4',
2773
2780
'differential-core-view-css' => '32f461a4',
2774
2781
'differential-inline-comment-editor' => '1662d764',
···
2834
2841
'javelin-workflow' => '0c96375e',
2835
2842
'maniphest-task-summary-css' => '7839ae2d',
2836
2843
'maniphest-transaction-detail-css' => '7839ae2d',
2837
-
'phabricator-app-buttons-css' => '040e796f',
2844
+
'phabricator-app-buttons-css' => '59b02d20',
2838
2845
'phabricator-content-source-view-css' => '32f461a4',
2839
-
'phabricator-core-buttons-css' => '040e796f',
2840
-
'phabricator-core-css' => '040e796f',
2841
-
'phabricator-directory-css' => '040e796f',
2846
+
'phabricator-core-buttons-css' => '59b02d20',
2847
+
'phabricator-core-css' => '59b02d20',
2848
+
'phabricator-directory-css' => '59b02d20',
2842
2849
'phabricator-drag-and-drop-file-upload' => '1662d764',
2843
2850
'phabricator-dropdown-menu' => '0c96375e',
2844
-
'phabricator-flag-css' => '040e796f',
2845
-
'phabricator-jump-nav' => '040e796f',
2851
+
'phabricator-flag-css' => '59b02d20',
2852
+
'phabricator-jump-nav' => '59b02d20',
2846
2853
'phabricator-keyboard-shortcut' => '0c96375e',
2847
2854
'phabricator-keyboard-shortcut-manager' => '0c96375e',
2848
2855
'phabricator-menu-item' => '0c96375e',
···
2850
2857
'phabricator-paste-file-upload' => '0c96375e',
2851
2858
'phabricator-prefab' => '0c96375e',
2852
2859
'phabricator-project-tag-css' => '7839ae2d',
2853
-
'phabricator-remarkup-css' => '040e796f',
2860
+
'phabricator-remarkup-css' => '59b02d20',
2854
2861
'phabricator-shaped-request' => '1662d764',
2855
-
'phabricator-standard-page-view' => '040e796f',
2862
+
'phabricator-standard-page-view' => '59b02d20',
2856
2863
'phabricator-tooltip' => '0c96375e',
2857
-
'phabricator-transaction-view-css' => '040e796f',
2858
-
'syntax-highlighting-css' => '040e796f',
2864
+
'phabricator-transaction-view-css' => '59b02d20',
2865
+
'syntax-highlighting-css' => '59b02d20',
2859
2866
),
2860
2867
));
+1
-5
src/applications/notification/builder/PhabricatorNotificationBuilder.php
+1
-5
src/applications/notification/builder/PhabricatorNotificationBuilder.php
+8
-14
src/applications/notification/view/PhabricatorNotificationStoryView.php
+8
-14
src/applications/notification/view/PhabricatorNotificationStoryView.php
···
40
40
41
41
public function render() {
42
42
43
-
$title = $this->title;
43
+
$classes = array(
44
+
'phabricator-notification',
45
+
);
46
+
44
47
if (!$this->viewed) {
45
-
$title = '<b>'.$title.'</b>';
48
+
$classes[] = 'phabricator-notification-unread';
46
49
}
47
50
48
-
$head = phutil_render_tag(
49
-
'div',
50
-
array(
51
-
'class' => 'phabricator-notification-story-head',
52
-
),
53
-
nonempty($title, 'Untitled Story'));
54
-
55
-
56
51
return phutil_render_tag(
57
52
'div',
58
53
array(
59
-
'class' =>
60
-
'phabricator-notification '.
61
-
'phabricator-notification-story-one-line'),
62
-
$head);
54
+
'class' => implode(' ', $classes),
55
+
),
56
+
$this->title);
63
57
}
64
58
65
59
}
+41
-18
src/view/page/PhabricatorStandardPageView.php
+41
-18
src/view/page/PhabricatorStandardPageView.php
···
381
381
' ');
382
382
}
383
383
384
-
$notification_header = '';
384
+
$notification_indicator = '';
385
385
$notification_dropdown = '';
386
+
$notification_container = '';
386
387
387
388
if (PhabricatorEnv::getEnvConfig('notification.enabled') &&
388
389
$user->isLoggedIn()) {
···
404
405
Javelin::initBehavior('aphlict-dropdown', array());
405
406
406
407
407
-
$notification_indicator =
408
-
javelin_render_tag(
409
-
'td',
410
-
array(
411
-
'sigil' => 'aphlict-indicator',
412
-
'id' => 'phabricator-notification-indicator',
413
-
),
414
-
id(new PhabricatorFeedStoryNotification)
415
-
->countUnread($user));
408
+
$notification_count = id(new PhabricatorFeedStoryNotification())
409
+
->countUnread($user);
410
+
411
+
$indicator_classes = array(
412
+
'phabricator-notification-indicator',
413
+
);
414
+
if ($notification_count) {
415
+
$indicator_classes[] = 'phabricator-notification-indicator-unread';
416
+
}
417
+
418
+
$notification_indicator = javelin_render_tag(
419
+
'div',
420
+
array(
421
+
'id' => 'phabricator-notification-indicator',
422
+
'class' => implode(' ', $indicator_classes),
423
+
),
424
+
$notification_count);
425
+
426
+
$notification_indicator = javelin_render_tag(
427
+
'div',
428
+
array(
429
+
'id' => 'phabricator-notification-menu',
430
+
'class' => 'phabricator-icon-menu icon-menu-notifications',
431
+
'sigil' => 'aphlict-indicator',
432
+
),
433
+
$notification_indicator);
434
+
435
+
$notification_indicator = javelin_render_tag(
436
+
'td',
437
+
array(
438
+
'class' => 'phabricator-icon-menu-cell',
439
+
),
440
+
$notification_indicator);
416
441
417
-
$notification_header =
418
-
$notification_indicator.
419
-
'<td>'.
420
-
'<div id="aphlictswf-container" style="height:1px; width:1px;">'.
421
-
'</div>'.
422
-
'</td>';
442
+
$notification_container =
443
+
'<div id="aphlictswf-container" style="height:0px; width:0px;">'.
444
+
'</div>';
423
445
$notification_dropdown =
424
446
javelin_render_tag(
425
447
'div',
···
441
463
$custom_logo.
442
464
'<a class="logo-standard" href="/"> </a>'.
443
465
'</td>'.
466
+
$notification_indicator.
444
467
'<td>'.
445
468
'<table class="phabricator-primary-navigation">'.
446
469
'<tr>'.
···
460
483
'<td class="phabricator-login-details">'.
461
484
$login_stuff.
462
485
'</td>'.
463
-
$notification_header.
464
486
'</tr>'.
465
487
'</table>'.
466
-
$notification_dropdown;
488
+
$notification_dropdown.
489
+
$notification_container;
467
490
$footer_chrome =
468
491
'<div class="phabricator-page-foot">'.
469
492
$foot_links.
+47
-34
webroot/rsrc/css/application/base/standard-page-view.css
+47
-34
webroot/rsrc/css/application/base/standard-page-view.css
···
239
239
240
240
}
241
241
242
-
#phabricator-notification-indicator {
243
-
background-color: #0069a6;
244
-
text-align: center;
245
-
font-size: 20px;
246
-
vertical-align: middle;
242
+
.phabricator-icon-menu {
247
243
height: 40px;
248
-
width: 40px;
244
+
width: 60px;
245
+
left: -22px;
246
+
position: relative;
247
+
cursor: pointer;
248
+
}
249
+
250
+
.phabricator-icon-menu-cell {
251
+
width: 60px;
252
+
}
249
253
250
-
-moz-user-select: -moz-none;
251
-
-khtml-user-select: none;
252
-
-webkit-user-select: none;
253
-
-o-user-select: none;
254
+
.icon-menu-notifications {
255
+
background: url(/rsrc/image/notification_menu.png);
256
+
}
257
+
258
+
.phabricator-icon-menu:hover {
259
+
background-position: 0 -40px;
254
260
}
255
261
256
-
#phabricator-notification-indicator:hover {
257
-
cursor: pointer;
258
-
background-color: #0089d9;
262
+
.phabricator-notification-indicator {
263
+
display: none;
259
264
}
260
265
261
266
.phabricator-notification-indicator-unread {
262
-
font-weight: bold;
263
-
}
267
+
display: block;
268
+
269
+
position: absolute;
270
+
right: 8px;
271
+
top: 2px;
272
+
padding: 1px 3px;
273
+
274
+
background: #dd3333;
275
+
276
+
border: 1px solid #aa0000;
277
+
font-size: 11px;
264
278
265
-
#phabricator-notification-dropdown {
279
+
box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.75);
280
+
}
266
281
267
-
word-wrap: break-word;
268
282
269
-
overflow-y: auto;
283
+
#phabricator-notification-dropdown {
270
284
position: absolute;
271
-
width: 600px;
272
-
height: 300px;
273
-
right: 0px;
285
+
top: 40px;
274
286
287
+
border: 1px solid #99c4d7;
288
+
border-top-width: 0;
289
+
background: #fdfdff;
275
290
276
-
background-color: #f0f0f0;
277
-
border: 1px solid darkgrey;
278
-
box-shadow: 3px 3px #ccc;
279
-
-webkit-box-shadow: 3px 3px #ccc;
280
-
-moz-box-shadow: 3px 3px #ccc;
291
+
width: 360px;
292
+
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
293
+
294
+
font-size: 11px;
281
295
282
296
z-index: 3;
283
-
}
284
297
285
-
.phabricator-notification-story-head {
286
-
border-bottom: 1px solid darkgray;
287
-
padding-top: 2px;
288
-
padding-bottom: 2px;
298
+
word-wrap: break-word;
299
+
overflow-y: auto;
289
300
}
290
301
302
+
.phabricator-notification {
303
+
padding: 6px 6px;
304
+
}
291
305
292
-
.phabricator-notification-frame {
293
-
padding-left: 5px;
294
-
padding-right: 10px;
306
+
.phabricator-notification-unread {
307
+
background: #aacfef;
295
308
}
+11
-4
webroot/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js
+11
-4
webroot/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js
···
1
1
/**
2
2
* @provides javelin-behavior-aphlict-dropdown
3
3
* @requires javelin-behavior
4
-
* javelin-aphlict
5
-
* javelin-util
6
4
* javelin-request
7
5
* javelin-stratcom
6
+
* javelin-vector
7
+
* javelin-dom
8
8
*/
9
9
10
10
JX.behavior('aphlict-dropdown', function(config) {
11
11
var dropdown = JX.$('phabricator-notification-dropdown');
12
12
var indicator = JX.$('phabricator-notification-indicator');
13
+
var menu = JX.$('phabricator-notification-menu');
13
14
var visible = false;
14
15
var request = null;
15
16
···
52
53
53
54
54
55
JX.DOM.listen(
55
-
indicator,
56
+
menu,
56
57
'click',
57
58
null,
58
59
function(e) {
59
-
if(visible) {
60
+
if (visible) {
60
61
JX.DOM.hide(dropdown);
61
62
} else {
63
+
var p = JX.$V(menu);
64
+
p.y = null;
65
+
p.x -= 6;
66
+
p.setPos(dropdown);
67
+
62
68
JX.DOM.show(dropdown);
63
69
}
64
70
visible = !visible;
71
+
e.kill();
65
72
}
66
73
)
67
74