diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 8369c50e2c..4db8260ec6 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -1891,7 +1891,7 @@ celerity_register_resource_map(array( ), 'javelin-behavior-pholio-mock-view' => array( - 'uri' => '/res/59c4d3ae/rsrc/js/application/pholio/behavior-pholio-mock-view.js', + 'uri' => '/res/45324e3b/rsrc/js/application/pholio/behavior-pholio-mock-view.js', 'type' => 'js', 'requires' => array( @@ -1904,7 +1904,9 @@ celerity_register_resource_map(array( 6 => 'javelin-request', 7 => 'javelin-history', 8 => 'javelin-workflow', - 9 => 'phabricator-keyboard-shortcut', + 9 => 'javelin-mask', + 10 => 'javelin-behavior-device', + 11 => 'phabricator-keyboard-shortcut', ), 'disk' => '/rsrc/js/application/pholio/behavior-pholio-mock-view.js', ), @@ -3239,7 +3241,7 @@ celerity_register_resource_map(array( ), 'pholio-css' => array( - 'uri' => '/res/8883529b/rsrc/css/application/pholio/pholio.css', + 'uri' => '/res/3d3cc404/rsrc/css/application/pholio/pholio.css', 'type' => 'css', 'requires' => array( @@ -3248,7 +3250,7 @@ celerity_register_resource_map(array( ), 'pholio-inline-comments-css' => array( - 'uri' => '/res/a0f7ddc4/rsrc/css/application/pholio/pholio-inline-comments.css', + 'uri' => '/res/8fe0edc7/rsrc/css/application/pholio/pholio-inline-comments.css', 'type' => 'css', 'requires' => array( diff --git a/webroot/rsrc/css/application/pholio/pholio-inline-comments.css b/webroot/rsrc/css/application/pholio/pholio-inline-comments.css index 0f8b342e26..f4281b26a7 100644 --- a/webroot/rsrc/css/application/pholio/pholio-inline-comments.css +++ b/webroot/rsrc/css/application/pholio/pholio-inline-comments.css @@ -14,18 +14,21 @@ .pholio-mock-inline-comments { color: #cccccc; - width: 320px; - border-left: 1px solid #101010; border-top: 1px solid #333; - position: absolute; - top: 0; - bottom: 0; - right: 0; background: #282828; overflow-x: auto; text-align: left; } +.device-desktop .pholio-mock-inline-comments { + border-left: 1px solid #101010; + position: absolute; + width: 320px; + 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 index 205a001a73..f605508b87 100644 --- a/webroot/rsrc/css/application/pholio/pholio.css +++ b/webroot/rsrc/css/application/pholio/pholio.css @@ -13,6 +13,9 @@ background-color: #282828; text-align: center; border-top: 1px solid #101010; +} + +.device-desktop .pholio-mock-carousel { margin-right: 320px; } @@ -61,9 +64,12 @@ .pholio-mock-image-panel { padding: 20px; - margin-right: 319px; border-top: 1px solid #333; +} + +.device-desktop .pholio-mock-image-panel { border-right: 1px solid #333; + margin-right: 319px; } .pholio-mock-image-viewport { @@ -105,3 +111,18 @@ .pholio-image-title { color: #ffffff; } + +.pholio-device-lightbox { + position: absolute; + overflow: auto; + z-index: 99; +} + +.pholio-device-lightbox img { + display: block; + margin: auto; +} + +.pholio-device-lightbox-loading { + background: url(/rsrc/image/darkload.gif) no-repeat center; +} 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 e4c1564937..78da47283f 100644 --- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js +++ b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js @@ -9,6 +9,8 @@ * javelin-request * javelin-history * javelin-workflow + * javelin-mask + * javelin-behavior-device * phabricator-keyboard-shortcut */ JX.behavior('pholio-mock-view', function(config) { @@ -250,6 +252,10 @@ JX.behavior('pholio-mock-view', function(config) { return; } + if (JX.Device.getDevice() != 'desktop') { + return; + } + if (drag_begin) { return; } @@ -263,6 +269,7 @@ JX.behavior('pholio-mock-view', function(config) { redraw_selection(); }); + JX.enableDispatch(document.body, 'mousemove'); JX.Stratcom.listen('mousemove', null, function(e) { if (!is_dragging) { @@ -632,4 +639,69 @@ JX.behavior('pholio-mock-view', function(config) { {className: 'pholio-mock-select-fill'}); } + +/* -( Device Lightbox )---------------------------------------------------- */ + + // On devices, we show images full-size when the user taps them instead of + // attempting to implement inlines. + + var lightbox = null; + + JX.Stratcom.listen('click', 'mock-viewport', function(e) { + if (!e.isNormalMouseEvent()) { + return; + } + if (JX.Device.getDevice() == 'desktop') { + return; + } + lightbox_attach(); + e.kill(); + }); + + JX.Stratcom.listen('click', 'pholio-device-lightbox', lightbox_detach); + JX.Stratcom.listen('resize', null, lightbox_resize); + + function lightbox_attach() { + JX.DOM.alterClass(document.body, 'lightbox-attached', true); + JX.Mask.show('jx-dark-mask'); + + lightbox = lightbox_render(); + var image = JX.$N('img'); + image.onload = lightbox_loaded; + setTimeout(function() { + image.src = active_image.fullURI; + }, 1000); + JX.DOM.setContent(lightbox, image); + JX.DOM.alterClass(lightbox, 'pholio-device-lightbox-loading', true); + + lightbox_resize(); + + document.body.appendChild(lightbox); + } + + function lightbox_detach() { + JX.DOM.remove(lightbox); + JX.Mask.hide(); + JX.DOM.alterClass(document.body, 'lightbox-attached', false); + lightbox = null; + } + + function lightbox_resize(e) { + if (!lightbox) { + return; + } + JX.Vector.getScroll().setPos(lightbox); + JX.Vector.getViewport().setDim(lightbox); + } + + function lightbox_loaded() { + JX.DOM.alterClass(lightbox, 'pholio-device-lightbox-loading', false); + } + + function lightbox_render() { + var el = JX.$N('div', {className: 'pholio-device-lightbox'}); + JX.Stratcom.addSigil(el, 'pholio-device-lightbox'); + return el; + } + });