@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
Improve Pholio on mobile
Summary:
Ref T2644. This isn't perfect, but makes Pholio more-or-less usable on mobile. In particular:
- Inline comments drop below the image.
- Clicking the image lightboxes a full size version so you can scroll around it and inspect details.
- Clicking it again dismisses it.
Things that aren't good:
- Can't add inline comments. This seems complicated and not critical.
- Can't easily figure out which inline comments go where since there's no hover. Maybe let you tap them? Not sure if we really need this.
- Thumbs are between image and image data. I'm planning to get rid of the thumbs and do swipe left/right instead.
- It would be nice to scroll the lightbox to center on the part of the image you tapped. I just thought of this, though.
Test Plan:
{F34640}
{F34641}
{F34642}
Reviewers: chad
Reviewed By: chad
CC: aran
Maniphest Tasks: T2644
Differential Revision: https://secure.phabricator.com/D5232
+108
-10
+6
-4
src/__celerity_resource_map__.php
+6
-4
src/__celerity_resource_map__.php
···
1891
1891
),
1892
1892
'javelin-behavior-pholio-mock-view' =>
1893
1893
array(
1894
-
'uri' => '/res/59c4d3ae/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
1894
+
'uri' => '/res/45324e3b/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
1895
1895
'type' => 'js',
1896
1896
'requires' =>
1897
1897
array(
···
1904
1904
6 => 'javelin-request',
1905
1905
7 => 'javelin-history',
1906
1906
8 => 'javelin-workflow',
1907
-
9 => 'phabricator-keyboard-shortcut',
1907
+
9 => 'javelin-mask',
1908
+
10 => 'javelin-behavior-device',
1909
+
11 => 'phabricator-keyboard-shortcut',
1908
1910
),
1909
1911
'disk' => '/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
1910
1912
),
···
3239
3241
),
3240
3242
'pholio-css' =>
3241
3243
array(
3242
-
'uri' => '/res/8883529b/rsrc/css/application/pholio/pholio.css',
3244
+
'uri' => '/res/3d3cc404/rsrc/css/application/pholio/pholio.css',
3243
3245
'type' => 'css',
3244
3246
'requires' =>
3245
3247
array(
···
3248
3250
),
3249
3251
'pholio-inline-comments-css' =>
3250
3252
array(
3251
-
'uri' => '/res/a0f7ddc4/rsrc/css/application/pholio/pholio-inline-comments.css',
3253
+
'uri' => '/res/8fe0edc7/rsrc/css/application/pholio/pholio-inline-comments.css',
3252
3254
'type' => 'css',
3253
3255
'requires' =>
3254
3256
array(
+8
-5
webroot/rsrc/css/application/pholio/pholio-inline-comments.css
+8
-5
webroot/rsrc/css/application/pholio/pholio-inline-comments.css
···
14
14
15
15
.pholio-mock-inline-comments {
16
16
color: #cccccc;
17
-
width: 320px;
17
+
border-top: 1px solid #333;
18
+
background: #282828;
19
+
overflow-x: auto;
20
+
text-align: left;
21
+
}
22
+
23
+
.device-desktop .pholio-mock-inline-comments {
18
24
border-left: 1px solid #101010;
19
-
border-top: 1px solid #333;
20
25
position: absolute;
26
+
width: 320px;
21
27
top: 0;
22
28
bottom: 0;
23
29
right: 0;
24
-
background: #282828;
25
-
overflow-x: auto;
26
-
text-align: left;
27
30
}
28
31
29
32
.pholio-inline-comment-dialog-title {
+22
-1
webroot/rsrc/css/application/pholio/pholio.css
+22
-1
webroot/rsrc/css/application/pholio/pholio.css
···
13
13
background-color: #282828;
14
14
text-align: center;
15
15
border-top: 1px solid #101010;
16
+
}
17
+
18
+
.device-desktop .pholio-mock-carousel {
16
19
margin-right: 320px;
17
20
}
18
21
···
61
64
62
65
.pholio-mock-image-panel {
63
66
padding: 20px;
64
-
margin-right: 319px;
65
67
border-top: 1px solid #333;
68
+
}
69
+
70
+
.device-desktop .pholio-mock-image-panel {
66
71
border-right: 1px solid #333;
72
+
margin-right: 319px;
67
73
}
68
74
69
75
.pholio-mock-image-viewport {
···
105
111
.pholio-image-title {
106
112
color: #ffffff;
107
113
}
114
+
115
+
.pholio-device-lightbox {
116
+
position: absolute;
117
+
overflow: auto;
118
+
z-index: 99;
119
+
}
120
+
121
+
.pholio-device-lightbox img {
122
+
display: block;
123
+
margin: auto;
124
+
}
125
+
126
+
.pholio-device-lightbox-loading {
127
+
background: url(/rsrc/image/darkload.gif) no-repeat center;
128
+
}
+72
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
+72
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
···
9
9
* javelin-request
10
10
* javelin-history
11
11
* javelin-workflow
12
+
* javelin-mask
13
+
* javelin-behavior-device
12
14
* phabricator-keyboard-shortcut
13
15
*/
14
16
JX.behavior('pholio-mock-view', function(config) {
···
250
252
return;
251
253
}
252
254
255
+
if (JX.Device.getDevice() != 'desktop') {
256
+
return;
257
+
}
258
+
253
259
if (drag_begin) {
254
260
return;
255
261
}
···
262
268
263
269
redraw_selection();
264
270
});
271
+
265
272
266
273
JX.enableDispatch(document.body, 'mousemove');
267
274
JX.Stratcom.listen('mousemove', null, function(e) {
···
630
637
return JX.$N(
631
638
'div',
632
639
{className: 'pholio-mock-select-fill'});
640
+
}
641
+
642
+
643
+
/* -( Device Lightbox )---------------------------------------------------- */
644
+
645
+
// On devices, we show images full-size when the user taps them instead of
646
+
// attempting to implement inlines.
647
+
648
+
var lightbox = null;
649
+
650
+
JX.Stratcom.listen('click', 'mock-viewport', function(e) {
651
+
if (!e.isNormalMouseEvent()) {
652
+
return;
653
+
}
654
+
if (JX.Device.getDevice() == 'desktop') {
655
+
return;
656
+
}
657
+
lightbox_attach();
658
+
e.kill();
659
+
});
660
+
661
+
JX.Stratcom.listen('click', 'pholio-device-lightbox', lightbox_detach);
662
+
JX.Stratcom.listen('resize', null, lightbox_resize);
663
+
664
+
function lightbox_attach() {
665
+
JX.DOM.alterClass(document.body, 'lightbox-attached', true);
666
+
JX.Mask.show('jx-dark-mask');
667
+
668
+
lightbox = lightbox_render();
669
+
var image = JX.$N('img');
670
+
image.onload = lightbox_loaded;
671
+
setTimeout(function() {
672
+
image.src = active_image.fullURI;
673
+
}, 1000);
674
+
JX.DOM.setContent(lightbox, image);
675
+
JX.DOM.alterClass(lightbox, 'pholio-device-lightbox-loading', true);
676
+
677
+
lightbox_resize();
678
+
679
+
document.body.appendChild(lightbox);
680
+
}
681
+
682
+
function lightbox_detach() {
683
+
JX.DOM.remove(lightbox);
684
+
JX.Mask.hide();
685
+
JX.DOM.alterClass(document.body, 'lightbox-attached', false);
686
+
lightbox = null;
687
+
}
688
+
689
+
function lightbox_resize(e) {
690
+
if (!lightbox) {
691
+
return;
692
+
}
693
+
JX.Vector.getScroll().setPos(lightbox);
694
+
JX.Vector.getViewport().setDim(lightbox);
695
+
}
696
+
697
+
function lightbox_loaded() {
698
+
JX.DOM.alterClass(lightbox, 'pholio-device-lightbox-loading', false);
699
+
}
700
+
701
+
function lightbox_render() {
702
+
var el = JX.$N('div', {className: 'pholio-device-lightbox'});
703
+
JX.Stratcom.addSigil(el, 'pholio-device-lightbox');
704
+
return el;
633
705
}
634
706
635
707
});