diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 3227eabc06..36d62aa8f1 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -604,15 +604,6 @@ celerity_register_resource_map(array( ), 'disk' => '/rsrc/css/aphront/attached-file-view.css', ), - 'aphront-bars' => - array( - 'uri' => '/res/d7bd9032/rsrc/css/core/aphront-bars.css', - 'type' => 'css', - 'requires' => - array( - ), - 'disk' => '/rsrc/css/core/aphront-bars.css', - ), 'aphront-calendar-view-css' => array( 'uri' => '/res/73061a31/rsrc/css/aphront/calendar-view.css', @@ -1900,7 +1891,7 @@ celerity_register_resource_map(array( ), 'javelin-behavior-pholio-mock-view' => array( - 'uri' => '/res/e9e31577/rsrc/js/application/pholio/behavior-pholio-mock-view.js', + 'uri' => '/res/a1c0c8ae/rsrc/js/application/pholio/behavior-pholio-mock-view.js', 'type' => 'js', 'requires' => array( @@ -2856,7 +2847,7 @@ celerity_register_resource_map(array( ), 'phabricator-object-item-list-view-css' => array( - 'uri' => '/res/034774f8/rsrc/css/layout/phabricator-object-item-list-view.css', + 'uri' => '/res/2fb97c5c/rsrc/css/layout/phabricator-object-item-list-view.css', 'type' => 'css', 'requires' => array( @@ -2898,7 +2889,7 @@ celerity_register_resource_map(array( ), 'phabricator-pinboard-view-css' => array( - 'uri' => '/res/61ecd7cf/rsrc/css/layout/phabricator-pinboard-view.css', + 'uri' => '/res/c6af8d76/rsrc/css/layout/phabricator-pinboard-view.css', 'type' => 'css', 'requires' => array( @@ -3247,7 +3238,7 @@ celerity_register_resource_map(array( ), 'pholio-css' => array( - 'uri' => '/res/99777600/rsrc/css/application/pholio/pholio.css', + 'uri' => '/res/217df4c4/rsrc/css/application/pholio/pholio.css', 'type' => 'css', 'requires' => array( @@ -3256,7 +3247,7 @@ celerity_register_resource_map(array( ), 'pholio-inline-comments-css' => array( - 'uri' => '/res/af95f0a6/rsrc/css/application/pholio/pholio-inline-comments.css', + 'uri' => '/res/918836a4/rsrc/css/application/pholio/pholio-inline-comments.css', 'type' => 'css', 'requires' => array( @@ -3464,7 +3455,7 @@ celerity_register_resource_map(array( ), array( 'packages' => array( - '09aa1f68' => + 'e5fe863e' => array( 'name' => 'core.pkg.css', 'symbols' => @@ -3507,7 +3498,7 @@ celerity_register_resource_map(array( 35 => 'phabricator-object-item-list-view-css', 36 => 'global-drag-and-drop-css', ), - 'uri' => '/res/pkg/09aa1f68/core.pkg.css', + 'uri' => '/res/pkg/e5fe863e/core.pkg.css', 'type' => 'css', ), 'f24c209c' => @@ -3696,17 +3687,17 @@ celerity_register_resource_map(array( 'reverse' => array( 'aphront-attached-file-view-css' => 'e30a3fa8', - 'aphront-crumbs-view-css' => '09aa1f68', - 'aphront-dialog-view-css' => '09aa1f68', - 'aphront-error-view-css' => '09aa1f68', - 'aphront-form-view-css' => '09aa1f68', - 'aphront-list-filter-view-css' => '09aa1f68', - 'aphront-pager-view-css' => '09aa1f68', - 'aphront-panel-view-css' => '09aa1f68', - 'aphront-table-view-css' => '09aa1f68', - 'aphront-tokenizer-control-css' => '09aa1f68', - 'aphront-tooltip-css' => '09aa1f68', - 'aphront-typeahead-control-css' => '09aa1f68', + 'aphront-crumbs-view-css' => 'e5fe863e', + 'aphront-dialog-view-css' => 'e5fe863e', + 'aphront-error-view-css' => 'e5fe863e', + 'aphront-form-view-css' => 'e5fe863e', + 'aphront-list-filter-view-css' => 'e5fe863e', + 'aphront-pager-view-css' => 'e5fe863e', + 'aphront-panel-view-css' => 'e5fe863e', + 'aphront-table-view-css' => 'e5fe863e', + 'aphront-tokenizer-control-css' => 'e5fe863e', + 'aphront-tooltip-css' => 'e5fe863e', + 'aphront-typeahead-control-css' => 'e5fe863e', 'differential-changeset-view-css' => '8aaacd1b', 'differential-core-view-css' => '8aaacd1b', 'differential-inline-comment-editor' => 'd2447f72', @@ -3720,7 +3711,7 @@ celerity_register_resource_map(array( 'differential-table-of-contents-css' => '8aaacd1b', 'diffusion-commit-view-css' => 'c8ce2d88', 'diffusion-icons-css' => 'c8ce2d88', - 'global-drag-and-drop-css' => '09aa1f68', + 'global-drag-and-drop-css' => 'e5fe863e', 'inline-comment-summary-css' => '8aaacd1b', 'javelin-aphlict' => 'f24c209c', 'javelin-behavior' => 'cd1d650a', @@ -3790,48 +3781,48 @@ celerity_register_resource_map(array( 'javelin-util' => 'cd1d650a', 'javelin-vector' => 'cd1d650a', 'javelin-workflow' => 'cd1d650a', - 'lightbox-attachment-css' => '09aa1f68', + 'lightbox-attachment-css' => 'e5fe863e', 'maniphest-task-summary-css' => 'e30a3fa8', 'maniphest-transaction-detail-css' => 'e30a3fa8', 'phabricator-busy' => 'f24c209c', 'phabricator-content-source-view-css' => '8aaacd1b', - 'phabricator-core-buttons-css' => '09aa1f68', - 'phabricator-core-css' => '09aa1f68', - 'phabricator-crumbs-view-css' => '09aa1f68', - 'phabricator-directory-css' => '09aa1f68', + 'phabricator-core-buttons-css' => 'e5fe863e', + 'phabricator-core-css' => 'e5fe863e', + 'phabricator-crumbs-view-css' => 'e5fe863e', + 'phabricator-directory-css' => 'e5fe863e', 'phabricator-drag-and-drop-file-upload' => 'd2447f72', 'phabricator-dropdown-menu' => 'f24c209c', 'phabricator-file-upload' => 'f24c209c', - 'phabricator-filetree-view-css' => '09aa1f68', - 'phabricator-flag-css' => '09aa1f68', - 'phabricator-form-view-css' => '09aa1f68', - 'phabricator-header-view-css' => '09aa1f68', - 'phabricator-jump-nav' => '09aa1f68', + 'phabricator-filetree-view-css' => 'e5fe863e', + 'phabricator-flag-css' => 'e5fe863e', + 'phabricator-form-view-css' => 'e5fe863e', + 'phabricator-header-view-css' => 'e5fe863e', + 'phabricator-jump-nav' => 'e5fe863e', 'phabricator-keyboard-shortcut' => 'f24c209c', 'phabricator-keyboard-shortcut-manager' => 'f24c209c', - 'phabricator-main-menu-view' => '09aa1f68', + 'phabricator-main-menu-view' => 'e5fe863e', 'phabricator-menu-item' => 'f24c209c', - 'phabricator-nav-view-css' => '09aa1f68', + 'phabricator-nav-view-css' => 'e5fe863e', 'phabricator-notification' => 'f24c209c', - 'phabricator-notification-css' => '09aa1f68', - 'phabricator-notification-menu-css' => '09aa1f68', - 'phabricator-object-item-list-view-css' => '09aa1f68', + 'phabricator-notification-css' => 'e5fe863e', + 'phabricator-notification-menu-css' => 'e5fe863e', + 'phabricator-object-item-list-view-css' => 'e5fe863e', 'phabricator-object-selector-css' => '8aaacd1b', 'phabricator-paste-file-upload' => 'f24c209c', 'phabricator-prefab' => 'f24c209c', 'phabricator-project-tag-css' => 'e30a3fa8', - 'phabricator-remarkup-css' => '09aa1f68', + 'phabricator-remarkup-css' => 'e5fe863e', 'phabricator-shaped-request' => 'd2447f72', - 'phabricator-side-menu-view-css' => '09aa1f68', - 'phabricator-standard-page-view' => '09aa1f68', + 'phabricator-side-menu-view-css' => 'e5fe863e', + 'phabricator-standard-page-view' => 'e5fe863e', 'phabricator-textareautils' => 'f24c209c', 'phabricator-tooltip' => 'f24c209c', - 'phabricator-transaction-view-css' => '09aa1f68', - 'phabricator-zindex-css' => '09aa1f68', - 'sprite-apps-large-css' => '09aa1f68', - 'sprite-gradient-css' => '09aa1f68', - 'sprite-icon-css' => '09aa1f68', - 'sprite-menu-css' => '09aa1f68', - 'syntax-highlighting-css' => '09aa1f68', + 'phabricator-transaction-view-css' => 'e5fe863e', + 'phabricator-zindex-css' => 'e5fe863e', + 'sprite-apps-large-css' => 'e5fe863e', + 'sprite-gradient-css' => 'e5fe863e', + 'sprite-icon-css' => 'e5fe863e', + 'sprite-menu-css' => 'e5fe863e', + 'syntax-highlighting-css' => 'e5fe863e', ), )); diff --git a/src/applications/pholio/view/PholioMockImagesView.php b/src/applications/pholio/view/PholioMockImagesView.php index 087b58cb4e..74009c02cf 100644 --- a/src/applications/pholio/view/PholioMockImagesView.php +++ b/src/applications/pholio/view/PholioMockImagesView.php @@ -40,10 +40,20 @@ final class PholioMockImagesView extends AphrontView { } foreach ($mock->getImages() as $image) { + $file = $image->getFile(); + $metadata = $file->getMetadata(); + $x = idx($metadata, PhabricatorFile::METADATA_IMAGE_WIDTH); + $y = idx($metadata, PhabricatorFile::METADATA_IMAGE_HEIGHT); + $images[] = array( 'id' => $image->getID(), 'fullURI' => $image->getFile()->getBestURI(), 'pageURI' => '/M'.$mock->getID().'/'.$image->getID().'/', + 'width' => $x, + 'height' => $y, + 'title' => $file->getName(), + 'desc' => 'Lorem ipsum dolor sit amet: there is no way to set any '. + 'descriptive text yet; were there, it would appear here.', ); } diff --git a/webroot/rsrc/css/application/pholio/pholio-inline-comments.css b/webroot/rsrc/css/application/pholio/pholio-inline-comments.css index bf5e024d38..c80260b30a 100644 --- a/webroot/rsrc/css/application/pholio/pholio-inline-comments.css +++ b/webroot/rsrc/css/application/pholio/pholio-inline-comments.css @@ -5,23 +5,22 @@ .pholio-inline-comment { border: 1px solid #555555; background: #353535; - margin: 0 0 5px 0; + margin: 0 10px 5px 10px; padding: 8px 10px; - color: #ccc; font-family: Verdana; font-size: 11px; } .pholio-mock-inline-comments { - width: 300px; + color: #cccccc; + width: 320px; border-left: 1px solid #101010; border-top: 1px solid #333; position: absolute; top: 0; bottom: 0; right: 0; - padding: 10px; background: #282828; overflow-x: auto; text-align: left; @@ -76,7 +75,7 @@ color: #777777; } -.pholio-inline-head-links a { +.pholio-mock-inline-comments a { font-weight: normal; color: #2178db; } diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css index c90550f7d6..967cd5cadb 100644 --- a/webroot/rsrc/css/application/pholio/pholio.css +++ b/webroot/rsrc/css/application/pholio/pholio.css @@ -88,3 +88,25 @@ .pholio-image-loading img { opacity: 0.50; } + +.pholio-image-info { + border-bottom: 1px solid #101010; + margin-bottom: 5px; +} + +.pholio-image-info-item { + padding: 0 10px; + margin: 8px 0; +} + +.pholio-visible-size { + color: #ffffff; +} + +.pholio-image-description { + color: #777777; +} + +.pholio-image-title { + color: #ffffff; +} diff --git a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js index f007bd7b71..d708c96fd7 100644 --- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js +++ b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js @@ -108,7 +108,6 @@ JX.behavior('pholio-mock-view', function(config) { return; } var idx = get_image_index(active_image.id) - JX.log(idx); idx = (idx + delta + config.images.length) % config.images.length; select_image(config.images[idx].id); } @@ -291,9 +290,10 @@ JX.behavior('pholio-mock-view', function(config) { } var comment_holder = JX.$('mock-inline-comments'); - JX.DOM.setContent(comment_holder, ''); + JX.DOM.setContent(comment_holder, render_image_info(active_image)); stage.clearReticles(); + var inlines = inline_comments[active_image.id]; if (!inlines || !inlines.length) { return; @@ -414,9 +414,6 @@ JX.behavior('pholio-mock-view', function(config) { } function load_inline_comments() { - var comment_holder = JX.$('mock-inline-comments'); - JX.DOM.setContent(comment_holder, ''); - var id = active_image.id; var inline_comments_uri = "/pholio/inline/" + id + "/"; @@ -577,7 +574,7 @@ JX.behavior('pholio-mock-view', function(config) { redraw_image(); -/* -( Keyboard Shortcuts )------------------------------------------------ */ +/* -( Keyboard Shortcuts )------------------------------------------------- */ new JX.KeyboardShortcut('j', 'Show next image.') @@ -591,4 +588,46 @@ JX.behavior('pholio-mock-view', function(config) { switch_image(-1); }) .register(); + + +/* -( Render )------------------------------------------------------------- */ + + + function render_image_info(image) { + var info = []; + + var title = JX.$N( + 'div', + {className: 'pholio-image-title'}, + image.title); + info.push(title); + + var desc = JX.$N( + 'div', + {className: 'pholio-image-description'}, + image.desc); + info.push(desc); + + var visible = null; + if (image.tag) { + var area = Math.round(100 * (image.tag.width / image.width)); + area = ['(' + area + '%' + ')']; + visible = [' ', JX.$N('span', {className: 'pholio-visible-size'}, area)]; + } + info.push([image.width, '\u00d7', image.height, 'px', visible]); + + var full_link = JX.$N( + 'a', + {href: image.fullURI, target: '_blank'}, + 'View Full Image'); + info.push(full_link); + + for (var ii = 0; ii < info.length; ii++) { + info[ii] = JX.$N('div', {className: 'pholio-image-info-item'}, info[ii]); + } + info = JX.$N('div', {className: 'pholio-image-info'}, info); + + return info; + } + });