mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-28 00:10:57 +01:00
Completely remove Pholio right gutter
Summary: - Moves the right-hand gutter under the image. - Moves size information to the upper right. - This is transitional, on the way toward something more like the mocks in D9534. Test Plan: See screenshot. Reviewers: chad Reviewed By: chad Subscribers: epriestley Differential Revision: https://secure.phabricator.com/D9538
This commit is contained in:
epriestley
parent
942f504893
commit
0cc0782eaf
5 changed files with 88 additions and 85 deletions
|
|
@ -80,8 +80,8 @@ return array(
|
|||
'rsrc/css/application/people/people-profile.css' => 'ba7b2762',
|
||||
'rsrc/css/application/phame/phame.css' => '19ecc703',
|
||||
'rsrc/css/application/pholio/pholio-edit.css' => 'b9e59b6d',
|
||||
'rsrc/css/application/pholio/pholio-inline-comments.css' => '28a2e394',
|
||||
'rsrc/css/application/pholio/pholio.css' => 'cabb65b3',
|
||||
'rsrc/css/application/pholio/pholio-inline-comments.css' => '3d14984a',
|
||||
'rsrc/css/application/pholio/pholio.css' => '4d4fe3d2',
|
||||
'rsrc/css/application/phortune/phortune-credit-card-form.css' => 'b25b4beb',
|
||||
'rsrc/css/application/phrequent/phrequent.css' => 'ffc185ad',
|
||||
'rsrc/css/application/phriction/phriction-document-css.css' => '7d7f0071',
|
||||
|
|
@ -389,7 +389,7 @@ return array(
|
|||
'rsrc/js/application/passphrase/phame-credential-control.js' => '1e1c8a59',
|
||||
'rsrc/js/application/phame/phame-post-preview.js' => '61d927ec',
|
||||
'rsrc/js/application/pholio/behavior-pholio-mock-edit.js' => '1e1e8bb0',
|
||||
'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '0c8a037a',
|
||||
'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '0938137d',
|
||||
'rsrc/js/application/phortune/behavior-balanced-payment-form.js' => '3b3e1664',
|
||||
'rsrc/js/application/phortune/behavior-stripe-payment-form.js' => '1693a296',
|
||||
'rsrc/js/application/phortune/behavior-test-payment-form.js' => 'b3e5ee60',
|
||||
|
|
@ -613,7 +613,7 @@ return array(
|
|||
'javelin-behavior-phabricator-watch-anchor' => '06e05112',
|
||||
'javelin-behavior-phame-post-preview' => '61d927ec',
|
||||
'javelin-behavior-pholio-mock-edit' => '1e1e8bb0',
|
||||
'javelin-behavior-pholio-mock-view' => '0c8a037a',
|
||||
'javelin-behavior-pholio-mock-view' => '0938137d',
|
||||
'javelin-behavior-phui-object-box-tabs' => 'a3e2244e',
|
||||
'javelin-behavior-phui-timeline-dropdown-menu' => '4d94d9c3',
|
||||
'javelin-behavior-policy-control' => 'f3fef818',
|
||||
|
|
@ -739,9 +739,9 @@ return array(
|
|||
'phabricator-uiexample-reactor-sendproperties' => '551add57',
|
||||
'phabricator-zindex-css' => 'efb673ac',
|
||||
'phame-css' => '19ecc703',
|
||||
'pholio-css' => 'cabb65b3',
|
||||
'pholio-css' => '4d4fe3d2',
|
||||
'pholio-edit-css' => 'b9e59b6d',
|
||||
'pholio-inline-comments-css' => '28a2e394',
|
||||
'pholio-inline-comments-css' => '3d14984a',
|
||||
'phortune-credit-card-form' => '2290aeef',
|
||||
'phortune-credit-card-form-css' => 'b25b4beb',
|
||||
'phrequent-css' => 'ffc185ad',
|
||||
|
|
@ -862,6 +862,21 @@ return array(
|
|||
array(
|
||||
0 => 'javelin-install',
|
||||
),
|
||||
'0938137d' =>
|
||||
array(
|
||||
0 => 'javelin-behavior',
|
||||
1 => 'javelin-util',
|
||||
2 => 'javelin-stratcom',
|
||||
3 => 'javelin-dom',
|
||||
4 => 'javelin-vector',
|
||||
5 => 'javelin-magical-init',
|
||||
6 => 'javelin-request',
|
||||
7 => 'javelin-history',
|
||||
8 => 'javelin-workflow',
|
||||
9 => 'javelin-mask',
|
||||
10 => 'javelin-behavior-device',
|
||||
11 => 'phabricator-keyboard-shortcut',
|
||||
),
|
||||
'09b15cf1' =>
|
||||
array(
|
||||
0 => 'javelin-stratcom',
|
||||
|
|
@ -896,21 +911,6 @@ return array(
|
|||
3 => 'javelin-util',
|
||||
4 => 'phabricator-notification-css',
|
||||
),
|
||||
'0c8a037a' =>
|
||||
array(
|
||||
0 => 'javelin-behavior',
|
||||
1 => 'javelin-util',
|
||||
2 => 'javelin-stratcom',
|
||||
3 => 'javelin-dom',
|
||||
4 => 'javelin-vector',
|
||||
5 => 'javelin-magical-init',
|
||||
6 => 'javelin-request',
|
||||
7 => 'javelin-history',
|
||||
8 => 'javelin-workflow',
|
||||
9 => 'javelin-mask',
|
||||
10 => 'javelin-behavior-device',
|
||||
11 => 'phabricator-keyboard-shortcut',
|
||||
),
|
||||
'0e34ca02' =>
|
||||
array(
|
||||
0 => 'javelin-behavior',
|
||||
|
|
|
|||
|
|
@ -120,6 +120,14 @@ final class PholioMockImagesView extends AphrontView {
|
|||
),
|
||||
'');
|
||||
|
||||
$image_header = javelin_tag(
|
||||
'div',
|
||||
array(
|
||||
'id' => 'mock-image-header',
|
||||
'class' => 'pholio-mock-image-header',
|
||||
),
|
||||
'');
|
||||
|
||||
$mock_wrapper = javelin_tag(
|
||||
'div',
|
||||
array(
|
||||
|
|
@ -127,7 +135,10 @@ final class PholioMockImagesView extends AphrontView {
|
|||
'sigil' => 'mock-panel touchable',
|
||||
'class' => 'pholio-mock-image-panel',
|
||||
),
|
||||
$mock_wrapper);
|
||||
array(
|
||||
$image_header,
|
||||
$mock_wrapper,
|
||||
));
|
||||
|
||||
$inline_comments_holder = javelin_tag(
|
||||
'div',
|
||||
|
|
@ -182,11 +193,11 @@ final class PholioMockImagesView extends AphrontView {
|
|||
|
||||
$mockview[] = phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'pholio-mock-image-container',
|
||||
'id' => 'pholio-mock-image-container'
|
||||
),
|
||||
array($mock_wrapper, $carousel_holder, $inline_comments_holder));
|
||||
array(
|
||||
'class' => 'pholio-mock-image-container',
|
||||
'id' => 'pholio-mock-image-container'
|
||||
),
|
||||
array($mock_wrapper, $inline_comments_holder, $carousel_holder));
|
||||
|
||||
return $mockview;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,15 +21,6 @@
|
|||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.device-desktop .pholio-mock-inline-comments {
|
||||
border-left: 1px solid #101010;
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.pholio-inline-comment-dialog-title {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -7,17 +7,12 @@
|
|||
text-align: center;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
background: url('/rsrc/image/checker_light.png');
|
||||
background: url('/rsrc/image/texture/pholio-background.gif');
|
||||
}
|
||||
|
||||
.pholio-mock-carousel {
|
||||
background-color: #282828;
|
||||
text-align: center;
|
||||
border-top: 1px solid #101010;
|
||||
}
|
||||
|
||||
.device-desktop .pholio-mock-carousel {
|
||||
margin-right: 300px;
|
||||
}
|
||||
|
||||
.pholio-mock-carousel-thumb-item {
|
||||
|
|
@ -69,15 +64,10 @@
|
|||
}
|
||||
|
||||
.pholio-mock-image-panel {
|
||||
padding: 12px;
|
||||
padding: 0;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
.device-desktop .pholio-mock-image-panel {
|
||||
border-right: 1px solid #333;
|
||||
margin-right: 299px;
|
||||
}
|
||||
|
||||
.pholio-mock-image-viewport {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
|
|
@ -99,7 +89,7 @@
|
|||
}
|
||||
|
||||
.pholio-visible-size {
|
||||
color: #ffffff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pholio-image-description {
|
||||
|
|
@ -168,7 +158,14 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.device-desktop .mock-has-cursor .pholio-mock-reticle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pholio-mock-image-header {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 8px;
|
||||
font-size: 14px;
|
||||
color: {$lightgreytext};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -155,8 +155,9 @@ JX.behavior('pholio-mock-view', function(config) {
|
|||
// If the image is too wide or tall for the viewport, scale it down so it
|
||||
// fits.
|
||||
var w = JX.Vector.getDim(panel);
|
||||
w.x -= 24;
|
||||
w.y -= 24;
|
||||
w.x -= 48;
|
||||
w.y -= 48;
|
||||
|
||||
var scale = 1;
|
||||
if (w.x < tag.naturalWidth) {
|
||||
scale = Math.min(scale, w.x / tag.naturalWidth);
|
||||
|
|
@ -387,6 +388,38 @@ JX.behavior('pholio-mock-view', function(config) {
|
|||
redraw_selection();
|
||||
}
|
||||
|
||||
function render_image_header(image) {
|
||||
// Render image dimensions and visible size. If we have this infomation
|
||||
// from the server we can display some of it immediately; otherwise, we need
|
||||
// to wait for the image to load so we can read dimension information from
|
||||
// it.
|
||||
|
||||
var image_x = image.width;
|
||||
var image_y = image.height;
|
||||
var display_x = null;
|
||||
if (image.tag) {
|
||||
image_x = image.tag.naturalWidth;
|
||||
image_y = image.tag.naturalHeight;
|
||||
display_x = image.tag.width;
|
||||
}
|
||||
|
||||
var visible = [];
|
||||
if (image_x) {
|
||||
if (display_x) {
|
||||
var area = Math.round(100 * (display_x / image_x));
|
||||
visible.push(
|
||||
JX.$N(
|
||||
'span',
|
||||
{className: 'pholio-visible-size'},
|
||||
[area, '%']));
|
||||
visible.push(' ');
|
||||
}
|
||||
visible.push(['(', image_x, ' \u00d7 ', image_y, ')']);
|
||||
}
|
||||
|
||||
return visible;
|
||||
}
|
||||
|
||||
function redraw_inlines(id) {
|
||||
if (!active_image) {
|
||||
return;
|
||||
|
|
@ -400,6 +433,9 @@ JX.behavior('pholio-mock-view', function(config) {
|
|||
var comment_holder = JX.$('mock-inline-comments');
|
||||
JX.DOM.setContent(comment_holder, render_image_info(active_image));
|
||||
|
||||
var image_header = JX.$('mock-image-header');
|
||||
JX.DOM.setContent(image_header, render_image_header(active_image));
|
||||
|
||||
var inlines = inline_comments[active_image.id];
|
||||
if (!inlines || !inlines.length) {
|
||||
return;
|
||||
|
|
@ -552,43 +588,11 @@ JX.behavior('pholio-mock-view', function(config) {
|
|||
var embed = JX.$N(
|
||||
'div',
|
||||
{className: 'pholio-image-embedding'},
|
||||
JX.$H('Embed this image:<br />{M' + config.mockID +
|
||||
JX.$H('Embed this image: {M' + config.mockID +
|
||||
', image=' + image.id + '}'));
|
||||
info.push(embed);
|
||||
}
|
||||
|
||||
// Render image dimensions and visible size. If we have this infomation
|
||||
// from the server we can display some of it immediately; otherwise, we need
|
||||
// to wait for the image to load so we can read dimension information from
|
||||
// it.
|
||||
|
||||
var image_x = image.width;
|
||||
var image_y = image.height;
|
||||
var display_x = null;
|
||||
if (image.tag) {
|
||||
image_x = image.tag.naturalWidth;
|
||||
image_y = image.tag.naturalHeight;
|
||||
display_x = image.tag.width;
|
||||
}
|
||||
|
||||
var visible = [];
|
||||
if (image_x) {
|
||||
visible.push([image_x, '\u00d7', image_y, 'px']);
|
||||
if (display_x) {
|
||||
var area = Math.round(100 * (display_x / image_x));
|
||||
visible.push(' ');
|
||||
visible.push(
|
||||
JX.$N(
|
||||
'span',
|
||||
{className: 'pholio-visible-size'},
|
||||
['(', area, '%', ')']));
|
||||
}
|
||||
}
|
||||
|
||||
if (visible.length) {
|
||||
info.push(visible);
|
||||
}
|
||||
|
||||
var full_link = JX.$N(
|
||||
'a',
|
||||
{href: image.fullURI, target: '_blank'},
|
||||
|
|
|
|||
Loading…
Reference in a new issue