Make lightbox buttons more roundy

Summary: Ref T3612. Mobilizes the new lightbox, changes large buttons to circle icons like Conpherence.

Test Plan: Click each new button on desktop, mobile.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Maniphest Tasks: T3612

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

resources/celerity/map.php

@@ -9,8 +9,8 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => '0b64e988',
     'conpherence.pkg.js' => '6249a1cf',
-    'core.pkg.css' => 'e5fbe031',
+    'core.pkg.css' => '417800a6',
-    'core.pkg.js' => '426f2dac',
+    'core.pkg.js' => '9d208f10',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'a4ba74b5',
     'differential.pkg.js' => '634399e9',
@@ -132,7 +132,7 @@ return array(
     'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
     'rsrc/css/phui/phui-cms.css' => 'be43c8a8',
     'rsrc/css/phui/phui-comment-form.css' => '4ecc56ef',
-    'rsrc/css/phui/phui-comment-panel.css' => '5659325f',
+    'rsrc/css/phui/phui-comment-panel.css' => 'c40ce0ea',
     'rsrc/css/phui/phui-crumbs-view.css' => '195ac419',
     'rsrc/css/phui/phui-curtain-view.css' => '947bf1a4',
     'rsrc/css/phui/phui-document-pro.css' => 'c354e312',
@@ -146,12 +146,12 @@ return array(
     'rsrc/css/phui/phui-header-view.css' => '6ec8f155',
     'rsrc/css/phui/phui-hovercard.css' => 'de1a2119',
     'rsrc/css/phui/phui-icon-set-selector.css' => '1ab67aad',
-    'rsrc/css/phui/phui-icon.css' => '417f80fb',
+    'rsrc/css/phui/phui-icon.css' => '09f46dd9',
     'rsrc/css/phui/phui-image-mask.css' => 'a8498f9c',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-info-view.css' => 'ec92802a',
     'rsrc/css/phui/phui-invisible-character-view.css' => '6993d9f0',
-    'rsrc/css/phui/phui-lightbox.css' => '67a017b2',
+    'rsrc/css/phui/phui-lightbox.css' => '9d65cfb5',
     'rsrc/css/phui/phui-list.css' => '9da2aa00',
     'rsrc/css/phui/phui-object-box.css' => '6b487c57',
     'rsrc/css/phui/phui-object-item-list-view.css' => '87278fa0',
@@ -505,7 +505,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' => '24afe1a8',
+    'rsrc/js/core/behavior-lightbox-attachments.js' => 'c0a04fd9',
     'rsrc/js/core/behavior-line-linker.js' => '1499a8cb',
     'rsrc/js/core/behavior-more.js' => 'a80d0378',
     'rsrc/js/core/behavior-object-selector.js' => 'e0ec7f2f',
@@ -651,7 +651,7 @@ return array(
     'javelin-behavior-history-install' => '7ee2b591',
     'javelin-behavior-icon-composer' => '8499b6ab',
     'javelin-behavior-launch-icon-composer' => '48086888',
-    'javelin-behavior-lightbox-attachments' => '24afe1a8',
+    'javelin-behavior-lightbox-attachments' => 'c0a04fd9',
     'javelin-behavior-line-chart' => 'e4232876',
     'javelin-behavior-load-blame' => '42126667',
     'javelin-behavior-maniphest-batch-editor' => '782ab6e7',
@@ -847,7 +847,7 @@ return array(
     'phui-chart-css' => '6bf6f78e',
     'phui-cms-css' => 'be43c8a8',
     'phui-comment-form-css' => '4ecc56ef',
-    'phui-comment-panel-css' => '5659325f',
+    'phui-comment-panel-css' => 'c40ce0ea',
     'phui-crumbs-view-css' => '195ac419',
     'phui-curtain-view-css' => '947bf1a4',
     'phui-document-summary-view-css' => '9ca48bdf',
@@ -863,13 +863,13 @@ return array(
     'phui-hovercard' => '1bd28176',
     'phui-hovercard-view-css' => 'de1a2119',
     'phui-icon-set-selector-css' => '1ab67aad',
-    'phui-icon-view-css' => '417f80fb',
+    'phui-icon-view-css' => '09f46dd9',
     'phui-image-mask-css' => 'a8498f9c',
     'phui-info-panel-css' => '27ea50a1',
     'phui-info-view-css' => 'ec92802a',
     'phui-inline-comment-view-css' => '5953c28e',
     'phui-invisible-character-view-css' => '6993d9f0',
-    'phui-lightbox-css' => '67a017b2',
+    'phui-lightbox-css' => '9d65cfb5',
     'phui-list-view-css' => '9da2aa00',
     'phui-object-box-css' => '6b487c57',
     'phui-object-item-list-view-css' => '87278fa0',
@@ -1106,15 +1106,6 @@ return array(
       'javelin-workflow',
       'javelin-util',
     ),
-    '24afe1a8' => array(
-      'javelin-behavior',
-      'javelin-stratcom',
-      'javelin-dom',
-      'javelin-mask',
-      'javelin-util',
-      'phuix-icon-view',
-      'phabricator-busy',
-    ),
     '2926fff2' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1361,9 +1352,6 @@ return array(
       'phabricator-drag-and-drop-file-upload',
       'javelin-workboard-board',
     ),
-    '5659325f' => array(
-      'phui-timeline-view-css',
-    ),
     '58dea2fa' => array(
       'javelin-install',
       'javelin-util',
@@ -1969,6 +1957,18 @@ return array(
       'javelin-install',
       'javelin-dom',
     ),
+    'c0a04fd9' => array(
+      'javelin-behavior',
+      'javelin-stratcom',
+      'javelin-dom',
+      'javelin-mask',
+      'javelin-util',
+      'phuix-icon-view',
+      'phabricator-busy',
+    ),
+    'c40ce0ea' => array(
+      'phui-timeline-view-css',
+    ),
     'c587b80f' => array(
       'javelin-install',
     ),

src/view/page/PhabricatorStandardPageView.php

@@ -277,16 +277,16 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView
           'action' => '#',
           'method' => 'POST',
           'class'  => 'lightbox-download-form',
-          'sigil'  => 'download',
+          'sigil'  => 'download lightbox-download-submit',
         ),
         phutil_tag(
-          'button',
+          'a',
           array(
-            'class' => 'button grey has-icon',
+            'class' => 'lightbox-download phui-icon-circle hover-green',
+            'href' => '#',
           ),
           array(
             $icon,
-            pht('Download'),
           )));
 
       Javelin::initBehavior(

webroot/rsrc/css/phui/phui-comment-panel.css

@@ -26,6 +26,11 @@
   margin-left: 40px;
 }
 
+.device-phone .phui-comment-panel .phui-timeline-view
+  .phui-timeline-event-view {
+    margin-left: 16px;
+}
+
 .device-desktop .phui-comment-panel .phui-timeline-view .phui-timeline-image {
   width: 30px;
   height: 30px;

webroot/rsrc/css/phui/phui-icon.css

@@ -49,6 +49,8 @@ a.phui-icon-view:hover {
   text-align: center;
   display: inline-block;
   cursor: pointer;
+  background: transparent;
+  padding: 0;
 }
 
 .phui-icon-circle.circle-medium {
@@ -111,6 +113,16 @@ a.phui-icon-circle.hover-green:hover .phui-icon-view {
   color: {$green};
 }
 
+a.phui-icon-circle.hover-red:hover {
+  text-decoration: none;
+  border-color: {$red};
+  cursor: pointer;
+}
+
+a.phui-icon-circle.hover-red:hover .phui-icon-view {
+  color: {$red};
+}
+
 /* - Icon in a Square ------------------------------------------------------- */
 
 .phui-icon-view.phui-icon-square {

webroot/rsrc/css/phui/phui-lightbox.css

@@ -77,6 +77,11 @@
   opacity: 1;
 }
 
+.device-phone .comment-panel-open .lightbox-comment-frame {
+  width: auto;
+  left: 0;
+}
+
 .jx-mask + .lightbox-attachment {
   background: {$lightgreybackground};
 }
@@ -100,18 +105,26 @@
   color: {$greytext};
 }
 
+.device-phone .lightbox-attachment .lightbox-status {
+  padding: 0 12px;
+}
+
 .lightbox-attachment .lightbox-status .lightbox-download {
   float: right;
 }
 
-.lightbox-attachment .lightbox-status a {
+.lightbox-attachment .lightbox-status-txt a {
   color: #000;
   margin-right: 12px;
   font-size: {$biggerfontsize};
 }
 
-.lightbox-download button.has-icon {
+.lightbox-attachment .lightbox-status .phui-icon-view {
-  padding-left: 28px;
+  height: 18px;
+  width: 24px;
+  font-size: 14px;
+  line-height: 23px;
+  display: block;
 }
 
 .lightbox-attachment .lightbox-status .lightbox-download
@@ -119,20 +132,17 @@
     display: inline;
 }
 
-.lightbox-attachment .lightbox-comment {
+.lightbox-attachment a.lightbox-download,
+.lightbox-attachment a.lightbox-comment,
+.lightbox-attachment a.lightbox-close {
   float: right;
   margin: 9px 0 0 8px;
-  padding-left: 28px;
 }
 
-.lightbox-attachment.comment-panel-open .lightbox-comment,
+.lightbox-attachment.comment-panel-open .lightbox-comment.phui-icon-circle,
 .lightbox-attachment.comment-panel-open .lightbox-comment .phui-icon-view {
   color: {$sky};
-}
+  border-color: {$sky};
-
-.lightbox-attachment .lightbox-close {
-  float: right;
-  margin: 9px 0 0 8px;
 }
 
 .lightbox-attachment .lightbox-left {

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

@@ -166,24 +166,27 @@ JX.behavior('lightbox-attachments', function (config) {
       );
 
     var commentIcon = new JX.PHUIXIconView()
-      .setIcon('fa-comment-o')
+      .setIcon('fa-comments')
       .getNode();
     var commentButton =
       JX.$N('a',
         {
-          className : 'lightbox-comment button grey has-icon',
+          className : 'lightbox-comment phui-icon-circle hover-sky',
           href : '#',
           sigil : 'lightbox-comment'
         },
-        [commentIcon, 'Comment']
+        commentIcon
       );
+    var closeIcon = new JX.PHUIXIconView()
+      .setIcon('fa-times')
+      .getNode();
     var closeButton =
       JX.$N('a',
         {
-          className : 'lightbox-close button grey',
+          className : 'lightbox-close phui-icon-circle hover-red',
           href : '#'
         },
-        'Close');
+        closeIcon);
     var statusHTML =
       JX.$N('div',
         {
@@ -357,4 +360,15 @@ JX.behavior('lightbox-attachments', function (config) {
     'lightbox-comment-form',
     _sendMessage);
 
+  var _startDownload = function(e) {
+    e.kill();
+    var form = e.getNode('tag:form');
+    form.submit();
+  };
+
+  JX.Stratcom.listen(
+    'click',
+    'lightbox-download-submit',
+    _startDownload);
+
 });