@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
Rebuild lightbox styles
Summary: Simpler, lighter background and UI for lightbox. Removes images, uses font icons, buttons.
Test Plan:
Lots of lightboxing.
{F1917111}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D16844
authored by
Chad Little
and committed by
chad
ebecbeed
96219ab5
+97
-96
+15
-20
resources/celerity/map.php
+15
-20
resources/celerity/map.php
···
9
9
'names' => array(
10
10
'conpherence.pkg.css' => '0b64e988',
11
11
'conpherence.pkg.js' => '6249a1cf',
12
-
'core.pkg.css' => 'a729d20e',
13
-
'core.pkg.js' => '1a77dddf',
12
+
'core.pkg.css' => 'c30f462d',
13
+
'core.pkg.js' => '9dc857ed',
14
14
'darkconsole.pkg.js' => 'e7393ebb',
15
15
'differential.pkg.css' => 'a4ba74b5',
16
16
'differential.pkg.js' => '634399e9',
···
22
22
'rsrc/css/aphront/aphront-bars.css' => '231ac33c',
23
23
'rsrc/css/aphront/dark-console.css' => 'f54bf286',
24
24
'rsrc/css/aphront/dialog-view.css' => 'ea3745f5',
25
-
'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d',
25
+
'rsrc/css/aphront/lightbox-attachment.css' => '90a84e83',
26
26
'rsrc/css/aphront/list-filter-view.css' => '5d6f0526',
27
27
'rsrc/css/aphront/multi-column.css' => '84cc6640',
28
28
'rsrc/css/aphront/notification.css' => '3f6c89c9',
···
323
323
'rsrc/image/icon/fatcow/source/mobile.png' => 'f1321264',
324
324
'rsrc/image/icon/fatcow/source/tablet.png' => '49396799',
325
325
'rsrc/image/icon/fatcow/source/web.png' => '136ccb5d',
326
-
'rsrc/image/icon/lightbox/close-2.png' => 'cc40e7c8',
327
-
'rsrc/image/icon/lightbox/close-hover-2.png' => 'fb5d6d9e',
328
-
'rsrc/image/icon/lightbox/left-arrow-2.png' => '8426133b',
329
-
'rsrc/image/icon/lightbox/left-arrow-hover-2.png' => '701e5ee3',
330
-
'rsrc/image/icon/lightbox/right-arrow-2.png' => '6d5519a0',
331
-
'rsrc/image/icon/lightbox/right-arrow-hover-2.png' => '3a04aa21',
332
326
'rsrc/image/icon/subscribe.png' => 'd03ed5a5',
333
327
'rsrc/image/icon/tango/attachment.png' => 'ecc8022e',
334
328
'rsrc/image/icon/tango/edit.png' => '929a1363',
···
510
504
'rsrc/js/core/behavior-hovercard.js' => 'bcaccd64',
511
505
'rsrc/js/core/behavior-keyboard-pager.js' => 'a8da01f0',
512
506
'rsrc/js/core/behavior-keyboard-shortcuts.js' => '01fca1f0',
513
-
'rsrc/js/core/behavior-lightbox-attachments.js' => 'f8ba29d7',
507
+
'rsrc/js/core/behavior-lightbox-attachments.js' => '49349f64',
514
508
'rsrc/js/core/behavior-line-linker.js' => '1499a8cb',
515
509
'rsrc/js/core/behavior-more.js' => 'a80d0378',
516
510
'rsrc/js/core/behavior-object-selector.js' => 'e0ec7f2f',
···
656
650
'javelin-behavior-history-install' => '7ee2b591',
657
651
'javelin-behavior-icon-composer' => '8499b6ab',
658
652
'javelin-behavior-launch-icon-composer' => '48086888',
659
-
'javelin-behavior-lightbox-attachments' => 'f8ba29d7',
653
+
'javelin-behavior-lightbox-attachments' => '49349f64',
660
654
'javelin-behavior-line-chart' => 'e4232876',
661
655
'javelin-behavior-load-blame' => '42126667',
662
656
'javelin-behavior-maniphest-batch-editor' => '782ab6e7',
···
772
766
'javelin-workboard-column' => '21df4ff5',
773
767
'javelin-workboard-controller' => '55baf5ed',
774
768
'javelin-workflow' => '1e911d0f',
775
-
'lightbox-attachment-css' => '7acac05d',
769
+
'lightbox-attachment-css' => '90a84e83',
776
770
'maniphest-batch-editor' => 'b0f0b6d5',
777
771
'maniphest-report-css' => '9b9580b7',
778
772
'maniphest-task-edit-css' => 'fda62a9b',
···
1257
1251
'javelin-uri',
1258
1252
'phabricator-notification',
1259
1253
),
1254
+
'49349f64' => array(
1255
+
'javelin-behavior',
1256
+
'javelin-stratcom',
1257
+
'javelin-dom',
1258
+
'javelin-mask',
1259
+
'javelin-util',
1260
+
'phuix-icon-view',
1261
+
'phabricator-busy',
1262
+
),
1260
1263
'49ae8328' => array(
1261
1264
'javelin-behavior',
1262
1265
'javelin-dom',
···
2187
2190
'javelin-view',
2188
2191
'javelin-install',
2189
2192
'javelin-dom',
2190
-
),
2191
-
'f8ba29d7' => array(
2192
-
'javelin-behavior',
2193
-
'javelin-stratcom',
2194
-
'javelin-dom',
2195
-
'javelin-mask',
2196
-
'javelin-util',
2197
-
'phabricator-busy',
2198
2193
),
2199
2194
'fb20ac8d' => array(
2200
2195
'javelin-behavior',
+1
-1
src/view/page/PhabricatorStandardPageView.php
+1
-1
src/view/page/PhabricatorStandardPageView.php
+43
-46
webroot/rsrc/css/aphront/lightbox-attachment.css
+43
-46
webroot/rsrc/css/aphront/lightbox-attachment.css
···
17
17
}
18
18
19
19
.lightbox-attachment img {
20
-
margin: 3% auto 0;
21
-
max-height: 90%;
22
-
max-width: 90%;
20
+
max-width: calc(100% - 44px);
21
+
max-height: calc(100% - 44px);
22
+
position: absolute;
23
+
top: 44px;
24
+
right: 0;
25
+
bottom: 0;
26
+
left: 0;
27
+
margin: auto;
28
+
}
29
+
30
+
.jx-mask + .lightbox-attachment {
31
+
background: {$lightgreybackground};
23
32
}
24
33
25
34
.lightbox-attachment .loading {
···
29
38
30
39
.lightbox-attachment .attachment-name {
31
40
width: 100%;
32
-
color: #F2F2F2;
33
41
line-height: 30px;
34
42
text-align: center;
35
43
}
36
44
37
45
.lightbox-attachment .lightbox-status {
38
-
background: #010101;
39
-
color: #F2F2F2;
40
-
line-height: 30px;
46
+
background: #fff;
41
47
position: fixed;
42
-
bottom: 0px;
43
-
width: 100%;
44
-
}
45
-
46
-
.lightbox-attachment .lightbox-status .lightbox-status-txt {
47
-
padding: 0px 0px 0px 20px;
48
+
top: 0;
49
+
left: 0;
50
+
right: 0;
51
+
height: 44px;
52
+
padding: 0 20px;
53
+
line-height: 44px;
54
+
border-bottom: 1px solid {$thinblueborder};
48
55
}
49
56
50
57
.lightbox-attachment .lightbox-status .lightbox-download {
51
-
padding: 0px 20px 0px 0px;
52
58
float: right;
53
59
}
54
60
55
61
.lightbox-attachment .lightbox-status .lightbox-download
56
-
.lightbox-download-form {
57
-
display: inline;
58
-
}
59
-
.lightbox-attachment .lightbox-status .lightbox-download
60
-
.lightbox-download-form button {
61
-
border: 0;
62
-
background: #010101;
63
-
}
64
-
.lightbox-attachment .lightbox-status .lightbox-download
65
-
.lightbox-download-form button:hover {
66
-
background: #333;
62
+
.lightbox-download-form {
63
+
display: inline;
67
64
}
68
65
69
66
.lightbox-attachment .lightbox-close {
70
-
top: 22px;
71
-
right: 20px;
72
-
position: fixed;
73
-
display: block;
74
-
height: 26px;
75
-
width: 26px;
76
-
background: url('/rsrc/image/icon/lightbox/close-2.png');
77
-
}
78
-
.lightbox-attachment .lightbox-close:hover {
79
-
background: url('/rsrc/image/icon/lightbox/close-hover-2.png');
67
+
float: right;
68
+
margin: 9px 0 0px 8px;
80
69
}
81
70
82
71
.lightbox-attachment .lightbox-left {
83
72
top: 46%;
84
-
left: 20px;
73
+
left: 12px;
85
74
position: fixed;
86
75
display: block;
87
-
height: 38px;
88
-
width: 21px;
89
-
background: url('/rsrc/image/icon/lightbox/left-arrow-2.png');
76
+
height: 40px;
77
+
width: 40px;
90
78
}
91
-
.lightbox-attachment .lightbox-left:hover {
92
-
background: url('/rsrc/image/icon/lightbox/left-arrow-hover-2.png');
79
+
80
+
.lightbox-attachment .lightbox-left .phui-icon-view {
81
+
font-size: 40px;
82
+
}
83
+
84
+
.lightbox-attachment .lightbox-left:hover .phui-icon-view {
85
+
color: {$sky};
93
86
}
94
87
95
-
.lightbox-attachment .lightbox-right {
88
+
.lightbox-attachment .lightbox-right .phui-icon-view {
96
89
top: 46%;
97
-
right: 20px;
90
+
right: 12px;
98
91
position: fixed;
99
92
display: block;
100
93
height: 38px;
101
94
width: 21px;
102
-
background: url('/rsrc/image/icon/lightbox/right-arrow-2.png');
95
+
}
96
+
97
+
.lightbox-attachment .lightbox-right .phui-icon-view {
98
+
font-size: 40px;
103
99
}
104
-
.lightbox-attachment .lightbox-right:hover {
105
-
background: url('/rsrc/image/icon/lightbox/right-arrow-hover-2.png');
100
+
101
+
.lightbox-attachment .lightbox-right:hover .phui-icon-view {
102
+
color: {$sky};
106
103
}
webroot/rsrc/image/icon/lightbox/close-2.png
webroot/rsrc/image/icon/lightbox/close-2.png
This is a binary file and will not be displayed.
webroot/rsrc/image/icon/lightbox/close-hover-2.png
webroot/rsrc/image/icon/lightbox/close-hover-2.png
This is a binary file and will not be displayed.
webroot/rsrc/image/icon/lightbox/left-arrow-2.png
webroot/rsrc/image/icon/lightbox/left-arrow-2.png
This is a binary file and will not be displayed.
webroot/rsrc/image/icon/lightbox/left-arrow-hover-2.png
webroot/rsrc/image/icon/lightbox/left-arrow-hover-2.png
This is a binary file and will not be displayed.
webroot/rsrc/image/icon/lightbox/right-arrow-2.png
webroot/rsrc/image/icon/lightbox/right-arrow-2.png
This is a binary file and will not be displayed.
webroot/rsrc/image/icon/lightbox/right-arrow-hover-2.png
webroot/rsrc/image/icon/lightbox/right-arrow-hover-2.png
This is a binary file and will not be displayed.
+38
-29
webroot/rsrc/js/core/behavior-lightbox-attachments.js
+38
-29
webroot/rsrc/js/core/behavior-lightbox-attachments.js
···
5
5
* javelin-dom
6
6
* javelin-mask
7
7
* javelin-util
8
+
* phuix-icon-view
8
9
* phabricator-busy
9
10
*/
10
11
···
88
89
},
89
90
img
90
91
);
91
-
JX.DOM.appendContent(lightbox, name_element);
92
+
93
+
var statusSpan = JX.$N('span',
94
+
{
95
+
className: 'lightbox-status-txt'
96
+
},
97
+
'Image '+current+' of '+total+'.'+extra_status
98
+
);
92
99
93
-
var closeIcon = JX.$N('a',
100
+
var downloadSpan = JX.$N('span',
101
+
{
102
+
className : 'lightbox-download'
103
+
});
104
+
var closeButton = JX.$N('a',
94
105
{
95
-
className : 'lightbox-close',
106
+
className : 'lightbox-close button grey',
96
107
href : '#'
97
-
}
98
-
);
99
-
JX.DOM.listen(closeIcon, 'click', null, closeLightBox);
100
-
JX.DOM.appendContent(lightbox, closeIcon);
108
+
},
109
+
'Close');
110
+
var statusHTML = JX.$N('div',
111
+
{
112
+
className : 'lightbox-status'
113
+
},
114
+
[statusSpan, closeButton, downloadSpan]
115
+
);
116
+
JX.DOM.appendContent(lightbox, statusHTML);
117
+
JX.DOM.appendContent(lightbox, name_element);
118
+
JX.DOM.listen(closeButton, 'click', null, closeLightBox);
119
+
101
120
var leftIcon = '';
102
121
if (next) {
122
+
var r_icon = new JX.PHUIXIconView()
123
+
.setIcon('fa-angle-right')
124
+
.setColor('lightgreytext')
125
+
.getNode();
103
126
leftIcon = JX.$N('a',
104
127
{
105
128
className : 'lightbox-right',
106
129
href : '#'
107
-
}
108
-
);
130
+
},
131
+
r_icon);
109
132
JX.DOM.listen(leftIcon,
110
133
'click',
111
134
null,
···
115
138
JX.DOM.appendContent(lightbox, leftIcon);
116
139
var rightIcon = '';
117
140
if (prev) {
141
+
var l_icon = new JX.PHUIXIconView()
142
+
.setIcon('fa-angle-left')
143
+
.setColor('lightgreytext')
144
+
.getNode();
118
145
rightIcon = JX.$N('a',
119
146
{
120
147
className : 'lightbox-left',
121
148
href : '#'
122
-
}
123
-
);
149
+
},
150
+
l_icon);
124
151
JX.DOM.listen(rightIcon,
125
152
'click',
126
153
null,
···
129
156
}
130
157
JX.DOM.appendContent(lightbox, rightIcon);
131
158
132
-
var statusSpan = JX.$N('span',
133
-
{
134
-
className: 'lightbox-status-txt'
135
-
},
136
-
'Image '+current+' of '+total+'.'+extra_status
137
-
);
138
-
139
-
var downloadSpan = JX.$N('span',
140
-
{
141
-
className : 'lightbox-download'
142
-
});
143
-
var statusHTML = JX.$N('div',
144
-
{
145
-
className : 'lightbox-status'
146
-
},
147
-
[statusSpan, downloadSpan]
148
-
);
149
-
JX.DOM.appendContent(lightbox, statusHTML);
150
159
JX.DOM.alterClass(document.body, 'lightbox-attached', true);
151
160
JX.Mask.show('jx-dark-mask');
152
161