Rebuild lightbox styles

Summary: Simpler, lighter background and UI for lightbox. Removes images, uses font icons, buttons.

Test Plan:
Lots of lightboxing.

{F1917111}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D16844

resources/celerity/map.php

@@ -9,8 +9,8 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => '0b64e988',
     'conpherence.pkg.js' => '6249a1cf',
-    'core.pkg.css' => 'a729d20e',
+    'core.pkg.css' => 'c30f462d',
-    'core.pkg.js' => '1a77dddf',
+    'core.pkg.js' => '9dc857ed',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'a4ba74b5',
     'differential.pkg.js' => '634399e9',
@@ -22,7 +22,7 @@ return array(
     'rsrc/css/aphront/aphront-bars.css' => '231ac33c',
     'rsrc/css/aphront/dark-console.css' => 'f54bf286',
     'rsrc/css/aphront/dialog-view.css' => 'ea3745f5',
-    'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d',
+    'rsrc/css/aphront/lightbox-attachment.css' => '90a84e83',
     'rsrc/css/aphront/list-filter-view.css' => '5d6f0526',
     'rsrc/css/aphront/multi-column.css' => '84cc6640',
     'rsrc/css/aphront/notification.css' => '3f6c89c9',
@@ -323,12 +323,6 @@ return array(
     'rsrc/image/icon/fatcow/source/mobile.png' => 'f1321264',
     'rsrc/image/icon/fatcow/source/tablet.png' => '49396799',
     'rsrc/image/icon/fatcow/source/web.png' => '136ccb5d',
-    'rsrc/image/icon/lightbox/close-2.png' => 'cc40e7c8',
-    'rsrc/image/icon/lightbox/close-hover-2.png' => 'fb5d6d9e',
-    'rsrc/image/icon/lightbox/left-arrow-2.png' => '8426133b',
-    'rsrc/image/icon/lightbox/left-arrow-hover-2.png' => '701e5ee3',
-    'rsrc/image/icon/lightbox/right-arrow-2.png' => '6d5519a0',
-    'rsrc/image/icon/lightbox/right-arrow-hover-2.png' => '3a04aa21',
     'rsrc/image/icon/subscribe.png' => 'd03ed5a5',
     'rsrc/image/icon/tango/attachment.png' => 'ecc8022e',
     'rsrc/image/icon/tango/edit.png' => '929a1363',
@@ -510,7 +504,7 @@ return array(
     'rsrc/js/core/behavior-hovercard.js' => 'bcaccd64',
     'rsrc/js/core/behavior-keyboard-pager.js' => 'a8da01f0',
     'rsrc/js/core/behavior-keyboard-shortcuts.js' => '01fca1f0',
-    'rsrc/js/core/behavior-lightbox-attachments.js' => 'f8ba29d7',
+    'rsrc/js/core/behavior-lightbox-attachments.js' => '49349f64',
     'rsrc/js/core/behavior-line-linker.js' => '1499a8cb',
     'rsrc/js/core/behavior-more.js' => 'a80d0378',
     'rsrc/js/core/behavior-object-selector.js' => 'e0ec7f2f',
@@ -656,7 +650,7 @@ return array(
     'javelin-behavior-history-install' => '7ee2b591',
     'javelin-behavior-icon-composer' => '8499b6ab',
     'javelin-behavior-launch-icon-composer' => '48086888',
-    'javelin-behavior-lightbox-attachments' => 'f8ba29d7',
+    'javelin-behavior-lightbox-attachments' => '49349f64',
     'javelin-behavior-line-chart' => 'e4232876',
     'javelin-behavior-load-blame' => '42126667',
     'javelin-behavior-maniphest-batch-editor' => '782ab6e7',
@@ -772,7 +766,7 @@ return array(
     'javelin-workboard-column' => '21df4ff5',
     'javelin-workboard-controller' => '55baf5ed',
     'javelin-workflow' => '1e911d0f',
-    'lightbox-attachment-css' => '7acac05d',
+    'lightbox-attachment-css' => '90a84e83',
     'maniphest-batch-editor' => 'b0f0b6d5',
     'maniphest-report-css' => '9b9580b7',
     'maniphest-task-edit-css' => 'fda62a9b',
@@ -1257,6 +1251,15 @@ return array(
       'javelin-uri',
       'phabricator-notification',
     ),
+    '49349f64' => array(
+      'javelin-behavior',
+      'javelin-stratcom',
+      'javelin-dom',
+      'javelin-mask',
+      'javelin-util',
+      'phuix-icon-view',
+      'phabricator-busy',
+    ),
     '49ae8328' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -2188,14 +2191,6 @@ return array(
       'javelin-install',
       'javelin-dom',
     ),
-    'f8ba29d7' => array(
-      'javelin-behavior',
-      'javelin-stratcom',
-      'javelin-dom',
-      'javelin-mask',
-      'javelin-util',
-      'phabricator-busy',
-    ),
     'fb20ac8d' => array(
       'javelin-behavior',
       'javelin-aphlict',

src/view/page/PhabricatorStandardPageView.php

@@ -281,7 +281,7 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView
         ),
         phutil_tag(
           'button',
-          array(),
+          array('class' => 'button grey'),
           pht('Download')));
 
       Javelin::initBehavior(

webroot/rsrc/css/aphront/lightbox-attachment.css

@@ -17,9 +17,18 @@
 }
 
 .lightbox-attachment img {
-  margin: 3% auto 0;
+  max-width: calc(100% - 44px);
-  max-height: 90%;
+  max-height: calc(100% - 44px);
-  max-width: 90%;
+  position: absolute;
+  top: 44px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+}
+
+.jx-mask + .lightbox-attachment {
+  background: {$lightgreybackground};
 }
 
 .lightbox-attachment .loading {
@@ -29,78 +38,66 @@
 
 .lightbox-attachment .attachment-name {
   width: 100%;
-  color: #F2F2F2;
   line-height: 30px;
   text-align: center;
 }
 
 .lightbox-attachment .lightbox-status {
-  background: #010101;
+  background: #fff;
-  color: #F2F2F2;
-  line-height: 30px;
   position: fixed;
-  bottom: 0px;
+  top: 0;
-  width: 100%;
+  left: 0;
-}
+  right: 0;
-
+  height: 44px;
-.lightbox-attachment .lightbox-status .lightbox-status-txt {
+  padding: 0 20px;
-  padding: 0px 0px 0px 20px;
+  line-height: 44px;
+  border-bottom: 1px solid {$thinblueborder};
 }
 
 .lightbox-attachment .lightbox-status .lightbox-download {
-  padding: 0px 20px 0px 0px;
   float: right;
 }
 
 .lightbox-attachment .lightbox-status .lightbox-download
-.lightbox-download-form {
+  .lightbox-download-form {
     display: inline;
 }
-.lightbox-attachment .lightbox-status .lightbox-download
-.lightbox-download-form button {
-  border: 0;
-  background: #010101;
-}
-.lightbox-attachment .lightbox-status .lightbox-download
-.lightbox-download-form button:hover {
-  background: #333;
-}
 
 .lightbox-attachment .lightbox-close {
-  top: 22px;
+  float: right;
-  right: 20px;
+  margin: 9px 0 0px 8px;
-  position: fixed;
-  display: block;
-  height: 26px;
-  width: 26px;
-  background: url('/rsrc/image/icon/lightbox/close-2.png');
-}
-.lightbox-attachment .lightbox-close:hover {
-  background: url('/rsrc/image/icon/lightbox/close-hover-2.png');
 }
 
 .lightbox-attachment .lightbox-left {
   top: 46%;
-  left: 20px;
+  left: 12px;
   position: fixed;
   display: block;
-  height: 38px;
+  height: 40px;
-  width: 21px;
+  width: 40px;
-  background: url('/rsrc/image/icon/lightbox/left-arrow-2.png');
-}
-.lightbox-attachment .lightbox-left:hover {
-  background: url('/rsrc/image/icon/lightbox/left-arrow-hover-2.png');
 }
 
-.lightbox-attachment .lightbox-right {
+.lightbox-attachment .lightbox-left .phui-icon-view {
+  font-size: 40px;
+}
+
+.lightbox-attachment .lightbox-left:hover .phui-icon-view {
+  color: {$sky};
+}
+
+.lightbox-attachment .lightbox-right .phui-icon-view {
   top: 46%;
-  right: 20px;
+  right: 12px;
   position: fixed;
   display: block;
   height: 38px;
   width: 21px;
-  background: url('/rsrc/image/icon/lightbox/right-arrow-2.png');
 }
-.lightbox-attachment .lightbox-right:hover {
+
-  background: url('/rsrc/image/icon/lightbox/right-arrow-hover-2.png');
+.lightbox-attachment .lightbox-right .phui-icon-view {
+  font-size: 40px;
+}
+
+.lightbox-attachment .lightbox-right:hover .phui-icon-view {
+  color: {$sky};
 }

webroot/rsrc/js/core/behavior-lightbox-attachments.js

@@ -5,6 +5,7 @@
  *           javelin-dom
  *           javelin-mask
  *           javelin-util
+ *           phuix-icon-view
  *           phabricator-busy
  */
 
@@ -88,46 +89,6 @@ JX.behavior('lightbox-attachments', function (config) {
                      },
                      img
                     );
-    JX.DOM.appendContent(lightbox, name_element);
-
-    var closeIcon = JX.$N('a',
-                         {
-                           className : 'lightbox-close',
-                           href : '#'
-                         }
-                        );
-    JX.DOM.listen(closeIcon, 'click', null, closeLightBox);
-    JX.DOM.appendContent(lightbox, closeIcon);
-    var leftIcon = '';
-    if (next) {
-      leftIcon = JX.$N('a',
-                       {
-                         className : 'lightbox-right',
-                         href : '#'
-                       }
-                      );
-      JX.DOM.listen(leftIcon,
-                    'click',
-                    null,
-                    JX.bind(null, loadAnotherLightBox, next)
-                   );
-    }
-    JX.DOM.appendContent(lightbox, leftIcon);
-    var rightIcon = '';
-    if (prev) {
-      rightIcon = JX.$N('a',
-                        {
-                          className : 'lightbox-left',
-                          href : '#'
-                        }
-                       );
-      JX.DOM.listen(rightIcon,
-                    'click',
-                    null,
-                    JX.bind(null, loadAnotherLightBox, prev)
-                   );
-    }
-    JX.DOM.appendContent(lightbox, rightIcon);
 
     var statusSpan = JX.$N('span',
                            {
@@ -140,13 +101,61 @@ JX.behavior('lightbox-attachments', function (config) {
                             {
                               className : 'lightbox-download'
                             });
+    var closeButton = JX.$N('a',
+                         {
+                           className : 'lightbox-close button grey',
+                           href : '#'
+                         },
+                        'Close');
     var statusHTML = JX.$N('div',
                            {
                              className : 'lightbox-status'
                            },
-                           [statusSpan, downloadSpan]
+                           [statusSpan, closeButton, downloadSpan]
                           );
     JX.DOM.appendContent(lightbox, statusHTML);
+    JX.DOM.appendContent(lightbox, name_element);
+    JX.DOM.listen(closeButton, 'click', null, closeLightBox);
+
+    var leftIcon = '';
+    if (next) {
+      var r_icon = new JX.PHUIXIconView()
+        .setIcon('fa-angle-right')
+        .setColor('lightgreytext')
+        .getNode();
+      leftIcon = JX.$N('a',
+                       {
+                         className : 'lightbox-right',
+                         href : '#'
+                       },
+                       r_icon);
+      JX.DOM.listen(leftIcon,
+                    'click',
+                    null,
+                    JX.bind(null, loadAnotherLightBox, next)
+                   );
+    }
+    JX.DOM.appendContent(lightbox, leftIcon);
+    var rightIcon = '';
+    if (prev) {
+      var l_icon = new JX.PHUIXIconView()
+        .setIcon('fa-angle-left')
+        .setColor('lightgreytext')
+        .getNode();
+      rightIcon = JX.$N('a',
+                        {
+                          className : 'lightbox-left',
+                          href : '#'
+                        },
+                        l_icon);
+      JX.DOM.listen(rightIcon,
+                    'click',
+                    null,
+                    JX.bind(null, loadAnotherLightBox, prev)
+                   );
+    }
+    JX.DOM.appendContent(lightbox, rightIcon);
+
     JX.DOM.alterClass(document.body, 'lightbox-attached', true);
     JX.Mask.show('jx-dark-mask');