@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
Allow the Pholio stage to scroll vertically
Summary:
Currently, we limit the image size to make sure that the stage has a constant height and the entire image always fits on screen.
In practice, these don't actually seem like desirable qualities. Instead, focus on giving as many pixels as possible to the image.
Test Plan: See screenshots.
Reviewers: chad
Reviewed By: chad
Subscribers: epriestley
Differential Revision: https://secure.phabricator.com/D9539
+37
-34
+22
-22
resources/celerity/map.php
+22
-22
resources/celerity/map.php
···
389
389
'rsrc/js/application/passphrase/phame-credential-control.js' => '1e1c8a59',
390
390
'rsrc/js/application/phame/phame-post-preview.js' => '61d927ec',
391
391
'rsrc/js/application/pholio/behavior-pholio-mock-edit.js' => '1e1e8bb0',
392
-
'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '0938137d',
392
+
'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => 'efe81529',
393
393
'rsrc/js/application/phortune/behavior-balanced-payment-form.js' => '3b3e1664',
394
394
'rsrc/js/application/phortune/behavior-stripe-payment-form.js' => '1693a296',
395
395
'rsrc/js/application/phortune/behavior-test-payment-form.js' => 'b3e5ee60',
···
613
613
'javelin-behavior-phabricator-watch-anchor' => '06e05112',
614
614
'javelin-behavior-phame-post-preview' => '61d927ec',
615
615
'javelin-behavior-pholio-mock-edit' => '1e1e8bb0',
616
-
'javelin-behavior-pholio-mock-view' => '0938137d',
616
+
'javelin-behavior-pholio-mock-view' => 'efe81529',
617
617
'javelin-behavior-phui-object-box-tabs' => 'a3e2244e',
618
618
'javelin-behavior-phui-timeline-dropdown-menu' => '4d94d9c3',
619
619
'javelin-behavior-policy-control' => 'f3fef818',
···
862
862
array(
863
863
0 => 'javelin-install',
864
864
),
865
-
'0938137d' =>
866
-
array(
867
-
0 => 'javelin-behavior',
868
-
1 => 'javelin-util',
869
-
2 => 'javelin-stratcom',
870
-
3 => 'javelin-dom',
871
-
4 => 'javelin-vector',
872
-
5 => 'javelin-magical-init',
873
-
6 => 'javelin-request',
874
-
7 => 'javelin-history',
875
-
8 => 'javelin-workflow',
876
-
9 => 'javelin-mask',
877
-
10 => 'javelin-behavior-device',
878
-
11 => 'phabricator-keyboard-shortcut',
879
-
),
880
865
'09b15cf1' =>
881
866
array(
882
867
0 => 'javelin-stratcom',
···
1269
1254
2 => 'javelin-util',
1270
1255
3 => 'phabricator-shaped-request',
1271
1256
),
1257
+
'7319e029' =>
1258
+
array(
1259
+
0 => 'javelin-behavior',
1260
+
1 => 'javelin-dom',
1261
+
),
1272
1262
'62e18640' =>
1273
1263
array(
1274
1264
0 => 'javelin-install',
···
1340
1330
0 => 'javelin-behavior',
1341
1331
1 => 'javelin-stratcom',
1342
1332
2 => 'javelin-dom',
1343
-
),
1344
-
'7319e029' =>
1345
-
array(
1346
-
0 => 'javelin-behavior',
1347
-
1 => 'javelin-dom',
1348
1333
),
1349
1334
'76f4ebed' =>
1350
1335
array(
···
1977
1962
array(
1978
1963
0 => 'javelin-install',
1979
1964
1 => 'javelin-util',
1965
+
),
1966
+
'efe81529' =>
1967
+
array(
1968
+
0 => 'javelin-behavior',
1969
+
1 => 'javelin-util',
1970
+
2 => 'javelin-stratcom',
1971
+
3 => 'javelin-dom',
1972
+
4 => 'javelin-vector',
1973
+
5 => 'javelin-magical-init',
1974
+
6 => 'javelin-request',
1975
+
7 => 'javelin-history',
1976
+
8 => 'javelin-workflow',
1977
+
9 => 'javelin-mask',
1978
+
10 => 'javelin-behavior-device',
1979
+
11 => 'phabricator-keyboard-shortcut',
1980
1980
),
1981
1981
'f2441746' =>
1982
1982
array(
+15
-12
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
+15
-12
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
···
139
139
}
140
140
141
141
function redraw_image() {
142
-
143
-
// Force the stage to scale as a function of the viewport size. Broadly,
144
-
// we take the full viewport and subtract 12px top and bottom.
145
-
var new_y = (JX.Vector.getViewport().y - 24) ;
146
-
new_y = Math.max(320, new_y);
147
-
panel.style.height = new_y + 'px';
142
+
var new_y;
148
143
144
+
// If we don't have an image yet, just scale the stage relative to the
145
+
// entire viewport height so the jump isn't too jumpy when the image loads.
149
146
if (!active_image || !active_image.tag) {
147
+
new_y = (JX.Vector.getViewport().y * 0.80);
148
+
new_y = Math.max(320, new_y);
149
+
panel.style.height = new_y + 'px';
150
+
150
151
return;
151
152
}
152
153
153
154
var tag = active_image.tag;
154
155
155
-
// If the image is too wide or tall for the viewport, scale it down so it
156
-
// fits.
156
+
// If the image is too wide for the viewport, scale it down so it fits.
157
+
// If it is too tall, just let the viewport scroll.
157
158
var w = JX.Vector.getDim(panel);
159
+
160
+
// Leave 24px margins on either side of the image.
158
161
w.x -= 48;
159
-
w.y -= 48;
160
162
161
163
var scale = 1;
162
164
if (w.x < tag.naturalWidth) {
163
165
scale = Math.min(scale, w.x / tag.naturalWidth);
164
166
}
165
-
if (w.y < tag.naturalHeight) {
166
-
scale = Math.min(scale, w.y / tag.naturalHeight);
167
-
}
168
167
169
168
if (scale < 1) {
170
169
tag.width = Math.floor(scale * tag.naturalWidth);
···
173
172
tag.width = tag.naturalWidth;
174
173
tag.height = tag.naturalHeight;
175
174
}
175
+
176
+
// Scale the viewport's vertical size to the image's adjusted size.
177
+
new_y = Math.max(320, tag.height + 48);
178
+
panel.style.height = new_y + 'px';
176
179
177
180
viewport.style.top = Math.floor((new_y - tag.height) / 2) + 'px';
178
181