@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
Conpherence - support device in durable column
Summary:
Ref T7014. This makes it so
- you can't invoke the column from a device
- if you are in desktop size and resize to tablet or phone, the column closes.
- if you resize desktop -> device -> desktop, the column closes at device size and reopens at desktop size
- if you load, then resize device -> desktop the column opens if the user has that preference
- there is a brief flicker when you load on 'device' with the column open preference. it lasts as long as the js stack takes to calculate the device css rule.
Test Plan: see summary but i did stuff to do all that
Reviewers: chad, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T7014
Differential Revision: https://secure.phabricator.com/D12052
+64
-16
+14
-13
resources/celerity/map.php
+14
-13
resources/celerity/map.php
···
44
44
'rsrc/css/application/config/config-welcome.css' => '6abd79be',
45
45
'rsrc/css/application/config/setup-issue.css' => '22270af2',
46
46
'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
47
-
'rsrc/css/application/conpherence/durable-column.css' => 'e3433ca7',
47
+
'rsrc/css/application/conpherence/durable-column.css' => '7c5f3bf5',
48
48
'rsrc/css/application/conpherence/menu.css' => 'c6ac5299',
49
49
'rsrc/css/application/conpherence/message-pane.css' => '5930260a',
50
50
'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
···
353
353
'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18',
354
354
'rsrc/js/application/config/behavior-reorder-fields.js' => '14a827de',
355
355
'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => '0324970d',
356
-
'rsrc/js/application/conpherence/behavior-durable-column.js' => '44100dc7',
356
+
'rsrc/js/application/conpherence/behavior-durable-column.js' => 'ad539b06',
357
357
'rsrc/js/application/conpherence/behavior-menu.js' => 'c4151295',
358
358
'rsrc/js/application/conpherence/behavior-pontificate.js' => '21ba5861',
359
359
'rsrc/js/application/conpherence/behavior-quicksand-blacklist.js' => '7927a7d3',
···
514
514
'changeset-view-manager' => '88be0133',
515
515
'config-options-css' => '7fedf08b',
516
516
'config-welcome-css' => '6abd79be',
517
-
'conpherence-durable-column-view' => 'e3433ca7',
517
+
'conpherence-durable-column-view' => '7c5f3bf5',
518
518
'conpherence-menu-css' => 'c6ac5299',
519
519
'conpherence-message-pane-css' => '5930260a',
520
520
'conpherence-notification-css' => '04a6e10a',
···
585
585
'javelin-behavior-diffusion-locate-file' => '6d3e1947',
586
586
'javelin-behavior-diffusion-pull-lastmodified' => '2b228192',
587
587
'javelin-behavior-doorkeeper-tag' => 'e5822781',
588
-
'javelin-behavior-durable-column' => '44100dc7',
588
+
'javelin-behavior-durable-column' => 'ad539b06',
589
589
'javelin-behavior-error-log' => '6882e80a',
590
590
'javelin-behavior-fancy-datepicker' => 'c51ae228',
591
591
'javelin-behavior-global-drag-and-drop' => '07f199d8',
···
1110
1110
'javelin-dom',
1111
1111
'javelin-request',
1112
1112
),
1113
-
'44100dc7' => array(
1114
-
'javelin-behavior',
1115
-
'javelin-dom',
1116
-
'javelin-stratcom',
1117
-
'javelin-scrollbar',
1118
-
'javelin-quicksand',
1119
-
'phabricator-keyboard-shortcut',
1120
-
'conpherence-thread-manager',
1121
-
),
1122
1113
'44168bad' => array(
1123
1114
'javelin-behavior',
1124
1115
'javelin-dom',
···
1672
1663
'javelin-dom',
1673
1664
'javelin-util',
1674
1665
'phabricator-prefab',
1666
+
),
1667
+
'ad539b06' => array(
1668
+
'javelin-behavior',
1669
+
'javelin-dom',
1670
+
'javelin-stratcom',
1671
+
'javelin-behavior-device',
1672
+
'javelin-scrollbar',
1673
+
'javelin-quicksand',
1674
+
'phabricator-keyboard-shortcut',
1675
+
'conpherence-thread-manager',
1675
1676
),
1676
1677
'b1f0ccee' => array(
1677
1678
'javelin-install',
+5
-1
webroot/rsrc/css/application/conpherence/durable-column.css
+5
-1
webroot/rsrc/css/application/conpherence/durable-column.css
···
15
15
background: #fff;
16
16
}
17
17
18
+
.device .conpherence-durable-column {
19
+
display: none;
20
+
}
21
+
18
22
.conpherence-durable-column .loading-mask {
19
23
position: absolute;
20
24
top: 90px;
···
27
31
z-index: 2;
28
32
}
29
33
30
-
.conpherence-durable-column.loading .loading-mask {
34
+
.device-desktop .conpherence-durable-column.loading .loading-mask {
31
35
display: block;
32
36
}
33
37
+45
-2
webroot/rsrc/js/application/conpherence/behavior-durable-column.js
+45
-2
webroot/rsrc/js/application/conpherence/behavior-durable-column.js
···
3
3
* @requires javelin-behavior
4
4
* javelin-dom
5
5
* javelin-stratcom
6
+
* javelin-behavior-device
6
7
* javelin-scrollbar
7
8
* javelin-quicksand
8
9
* phabricator-keyboard-shortcut
···
40
41
}
41
42
42
43
function _toggleColumn(explicit) {
44
+
if (explicit) {
45
+
var device = JX.Device.getDevice();
46
+
// don't allow users to invoke the column from devices
47
+
if (device != 'desktop') {
48
+
return;
49
+
}
50
+
}
43
51
show = !show;
44
52
JX.DOM.alterClass(frame, 'with-durable-column', show);
45
-
var column = JX.$('conpherence-durable-column');
53
+
var column = _getColumnNode();
46
54
if (show) {
47
55
JX.DOM.show(column);
48
56
threadManager.loadThreadByID(loadThreadID);
···
181
189
threadManager.loadThreadByID(data.threadID);
182
190
});
183
191
192
+
var resizeClose = false;
193
+
JX.Stratcom.listen(
194
+
'phabricator-device-change',
195
+
null,
196
+
function() {
197
+
var device = JX.Device.getDevice();
198
+
switch (device) {
199
+
case 'phone':
200
+
case 'tablet':
201
+
if (show === true) {
202
+
_toggleColumn(false);
203
+
resizeClose = true;
204
+
}
205
+
break;
206
+
case 'desktop':
207
+
if (resizeClose) {
208
+
resizeClose = false;
209
+
if (show === false) {
210
+
_toggleColumn(false);
211
+
}
212
+
}
213
+
break;
214
+
default:
215
+
break;
216
+
}
217
+
});
218
+
184
219
function _getColumnBodyNode() {
185
220
var column = JX.$('conpherence-durable-column');
186
221
return JX.DOM.find(
···
255
290
});
256
291
257
292
if (config.visible) {
258
-
_toggleColumn(false);
293
+
var device = JX.Device.getDevice();
294
+
if (device == 'desktop') {
295
+
_toggleColumn(false);
296
+
} else {
297
+
// pretend we closed due to resize so if we do resize later things work
298
+
// correctly
299
+
resizeClose = true;
300
+
JX.DOM.hide(_getColumnNode());
301
+
}
259
302
}
260
303
261
304
});