revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-09-20 09:18:48 +02:00
Code Issues Releases Wiki Activity

Handle resizing nicely

Browse source 
Summary:
  - For images that aren't too large to fit, keep the stage at about 85% of the viewport height. This prevents it from bouncing around as you switch between images, and generally makes it feel big and important like it should. When the stage is larger than images, we center them vertically.
  - As the viewport is resized, shrink the stage and, if necessary, the images on it.

Test Plan:
{F33617}

{F33618}

Reviewers: chad, ljalonen

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D5089
This commit is contained in:
epriestley 2013-02-23 06:28:56 -08:00
parent 26f8e76ee2
commit b4b81d0f9a
2 changed files with 55 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/__celerity_resource_map__.php
View file

@ -1873,7 +1873,7 @@ celerity_register_resource_map(array(
),
'javelin-behavior-pholio-mock-view' =>
array(
'uri' => '/res/b7c2b169/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
'uri' => '/res/296e0325/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
'type' => 'js',
'requires' =>
array(
@ -2066,7 +2066,7 @@ celerity_register_resource_map(array(
),
'javelin-event' =>
array(
'uri' => '/res/e6582051/rsrc/js/javelin/core/Event.js',
'uri' => '/res/69d99d9f/rsrc/js/javelin/core/Event.js',
'type' => 'js',
'requires' =>
array(
@ -3607,7 +3607,7 @@ celerity_register_resource_map(array(
'uri' => '/res/pkg/f96657b8/diffusion.pkg.js',
'type' => 'js',
),
'a69b9f1f' =>
'cd1d650a' =>
array(
'name' => 'javelin.pkg.js',
'symbols' =>
@ -3632,7 +3632,7 @@ celerity_register_resource_map(array(
17 => 'javelin-typeahead-ondemand-source',
18 => 'javelin-tokenizer',
),
'uri' => '/res/pkg/a69b9f1f/javelin.pkg.js',
'uri' => '/res/pkg/cd1d650a/javelin.pkg.js',
'type' => 'js',
),
'e30a3fa8' =>
@ -3693,7 +3693,7 @@ celerity_register_resource_map(array(
'global-drag-and-drop-css' => 'acc46105',
'inline-comment-summary-css' => '8aaacd1b',
'javelin-aphlict' => 'd29c1557',
'javelin-behavior' => 'a69b9f1f',
'javelin-behavior' => 'cd1d650a',
'javelin-behavior-aphlict-dropdown' => 'd29c1557',
'javelin-behavior-aphlict-listen' => 'd29c1557',
'javelin-behavior-aphront-basic-tokenizer' => 'd29c1557',
@ -3741,24 +3741,24 @@ celerity_register_resource_map(array(
'javelin-behavior-repository-crossreference' => 'fafc8cdb',
'javelin-behavior-toggle-class' => 'd29c1557',
'javelin-behavior-workflow' => 'd29c1557',
'javelin-dom' => 'a69b9f1f',
'javelin-event' => 'a69b9f1f',
'javelin-install' => 'a69b9f1f',
'javelin-json' => 'a69b9f1f',
'javelin-mask' => 'a69b9f1f',
'javelin-request' => 'a69b9f1f',
'javelin-resource' => 'a69b9f1f',
'javelin-stratcom' => 'a69b9f1f',
'javelin-tokenizer' => 'a69b9f1f',
'javelin-typeahead' => 'a69b9f1f',
'javelin-typeahead-normalizer' => 'a69b9f1f',
'javelin-typeahead-ondemand-source' => 'a69b9f1f',
'javelin-typeahead-preloaded-source' => 'a69b9f1f',
'javelin-typeahead-source' => 'a69b9f1f',
'javelin-uri' => 'a69b9f1f',
'javelin-util' => 'a69b9f1f',
'javelin-vector' => 'a69b9f1f',
'javelin-workflow' => 'a69b9f1f',
'javelin-dom' => 'cd1d650a',
'javelin-event' => 'cd1d650a',
'javelin-install' => 'cd1d650a',
'javelin-json' => 'cd1d650a',
'javelin-mask' => 'cd1d650a',
'javelin-request' => 'cd1d650a',
'javelin-resource' => 'cd1d650a',
'javelin-stratcom' => 'cd1d650a',
'javelin-tokenizer' => 'cd1d650a',
'javelin-typeahead' => 'cd1d650a',
'javelin-typeahead-normalizer' => 'cd1d650a',
'javelin-typeahead-ondemand-source' => 'cd1d650a',
'javelin-typeahead-preloaded-source' => 'cd1d650a',
'javelin-typeahead-source' => 'cd1d650a',
'javelin-uri' => 'cd1d650a',
'javelin-util' => 'cd1d650a',
'javelin-vector' => 'cd1d650a',
'javelin-workflow' => 'cd1d650a',
'lightbox-attachment-css' => 'acc46105',
'maniphest-task-summary-css' => 'e30a3fa8',
'maniphest-transaction-detail-css' => 'e30a3fa8',

38
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
View file

@ -38,20 +38,43 @@ JX.behavior('pholio-mock-view', function(config) {
return;
}
active_image.tag = this;
redraw_image();
}
function redraw_image() {
if (!active_image || !active_image.tag) {
return;
}
var tag = active_image.tag;
// If the image is too wide for the viewport, scale it down so it fits.
// (If it is too tall, we just let the user scroll.)
var w = JX.Vector.getDim(panel);
w.x -= 40;
if (w.x < this.naturalWidth) {
var scale = w.x / this.naturalWidth;
this.width = Math.floor(scale * this.naturalWidth);
this.height = Math.floor(scale * this.naturalHeight);
if (w.x < tag.naturalWidth) {
var scale = w.x / tag.naturalWidth;
tag.width = Math.floor(scale * tag.naturalWidth);
tag.height = Math.floor(scale * tag.naturalHeight);
} else {
tag.width = tag.naturalWidth;
tag.height = tag.naturalHeight;
}
active_image.tag = this;
var new_y = (JX.Vector.getViewport().y * 0.85) - 150;
new_y = Math.max(320, new_y);
if (tag.height + 40 < new_y) {
panel.style.height = new_y + 'px';
viewport.style.top = Math.floor(((new_y + 40) - tag.height) / 2) + 'px';
} else {
panel.style.height = '';
viewport.style.top = '';
}
// NOTE: This also clears inline comment reticles.
JX.DOM.setContent(viewport, this);
JX.DOM.setContent(viewport, tag);
redraw_inlines(active_image.id);
}
@ -440,4 +463,7 @@ JX.behavior('pholio-mock-view', function(config) {
load_inline_comments();
JX.Stratcom.listen('resize', null, redraw_image);
redraw_image();
});