diff --git a/resources/celerity/map.php b/resources/celerity/map.php
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -80,8 +80,8 @@
'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 @@
'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 @@
'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 @@
'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 @@
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 @@
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',
diff --git a/src/applications/pholio/view/PholioMockImagesView.php b/src/applications/pholio/view/PholioMockImagesView.php
--- a/src/applications/pholio/view/PholioMockImagesView.php
+++ b/src/applications/pholio/view/PholioMockImagesView.php
@@ -120,6 +120,14 @@
),
'');
+ $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 @@
'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 @@
$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;
}
diff --git a/webroot/rsrc/css/application/pholio/pholio-inline-comments.css b/webroot/rsrc/css/application/pholio/pholio-inline-comments.css
--- a/webroot/rsrc/css/application/pholio/pholio-inline-comments.css
+++ b/webroot/rsrc/css/application/pholio/pholio-inline-comments.css
@@ -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;
diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css
--- a/webroot/rsrc/css/application/pholio/pholio.css
+++ b/webroot/rsrc/css/application/pholio/pholio.css
@@ -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};
+}
diff --git a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
--- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
+++ b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
@@ -155,8 +155,9 @@
// 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 @@
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 @@
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 @@
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'},