From ebecbeed42375468938269e25891898cc93e7757 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Sat, 12 Nov 2016 15:37:16 +0000 Subject: [PATCH] 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 | 35 +++---- src/view/page/PhabricatorStandardPageView.php | 2 +- .../rsrc/css/aphront/lightbox-attachment.css | 91 +++++++++--------- webroot/rsrc/image/icon/lightbox/close-2.png | Bin 1477 -> 0 bytes .../image/icon/lightbox/close-hover-2.png | Bin 1262 -> 0 bytes .../rsrc/image/icon/lightbox/left-arrow-2.png | Bin 1120 -> 0 bytes .../icon/lightbox/left-arrow-hover-2.png | Bin 1189 -> 0 bytes .../image/icon/lightbox/right-arrow-2.png | Bin 1138 -> 0 bytes .../icon/lightbox/right-arrow-hover-2.png | Bin 1196 -> 0 bytes .../js/core/behavior-lightbox-attachments.js | 91 ++++++++++-------- 10 files changed, 110 insertions(+), 109 deletions(-) delete mode 100644 webroot/rsrc/image/icon/lightbox/close-2.png delete mode 100644 webroot/rsrc/image/icon/lightbox/close-hover-2.png delete mode 100644 webroot/rsrc/image/icon/lightbox/left-arrow-2.png delete mode 100644 webroot/rsrc/image/icon/lightbox/left-arrow-hover-2.png delete mode 100644 webroot/rsrc/image/icon/lightbox/right-arrow-2.png delete mode 100644 webroot/rsrc/image/icon/lightbox/right-arrow-hover-2.png diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 646f4b6d93..6ce8515cd9 100644 --- a/resources/celerity/map.php +++ b/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.js' => '1a77dddf', + 'core.pkg.css' => 'c30f462d', + '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', diff --git a/src/view/page/PhabricatorStandardPageView.php b/src/view/page/PhabricatorStandardPageView.php index 8fa73ac9f3..242e2e2659 100644 --- a/src/view/page/PhabricatorStandardPageView.php +++ b/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( diff --git a/webroot/rsrc/css/aphront/lightbox-attachment.css b/webroot/rsrc/css/aphront/lightbox-attachment.css index a11512ce4e..8f850e185c 100644 --- a/webroot/rsrc/css/aphront/lightbox-attachment.css +++ b/webroot/rsrc/css/aphront/lightbox-attachment.css @@ -17,9 +17,18 @@ } .lightbox-attachment img { - margin: 3% auto 0; - max-height: 90%; - max-width: 90%; + max-width: calc(100% - 44px); + max-height: calc(100% - 44px); + 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; - color: #F2F2F2; - line-height: 30px; + background: #fff; position: fixed; - bottom: 0px; - width: 100%; -} - -.lightbox-attachment .lightbox-status .lightbox-status-txt { - padding: 0px 0px 0px 20px; + top: 0; + left: 0; + right: 0; + height: 44px; + padding: 0 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 { - 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-download-form { + display: inline; } .lightbox-attachment .lightbox-close { - top: 22px; - right: 20px; - 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'); + float: right; + margin: 9px 0 0px 8px; } .lightbox-attachment .lightbox-left { top: 46%; - left: 20px; + left: 12px; position: fixed; display: block; - height: 38px; - width: 21px; - 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'); + height: 40px; + width: 40px; } -.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}; } diff --git a/webroot/rsrc/image/icon/lightbox/close-2.png b/webroot/rsrc/image/icon/lightbox/close-2.png deleted file mode 100644 index de2a3b8608af518f4a0d0843aaa2a9566aae568a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1477 zcmeAS@N?(olHy`uVBq!ia0vp^QXtI11|(N{`J4k%k|nMYCBgY=CFO}lsSJ)O`AMk? zp1FzXsX?iUDV2pMQ*9U+m@_g%B1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+* zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!uxSU1_g&``n5OwZ87 z)XdCKN5ROz&`93^h|F{iO{`4Ktc=VRpg;*|TTx1yRgjAt)Gi>;Rw<*Tq`*pFzr4I$ zuiRKKzbIYb(9+TpWQLKEE>MMTab;dfVufyAu`kBtHuNWFoz#!AFNG#Ad)HBe}%?0@jth%@)C>7xhtg4GcDhpEegHnt0 zON)|$@sXws(+mtd{1$-}0$pR}Uz7=ql*AmD{N&Qy)VvZ;7h5Huj9yA+ij{$(1uzuN zO$^M949qMHfjkRiS0f`s0}EFZXCqfrm>Jmgx>~pyIGegU8XCAb8ydPAIXYRISsGXx zx;UA;7#o|z^?K$Nmn7yTr^4*b1lkMLYl&B{m2**QVo82cNPd0}ECmE)`ggiP@U4w{(4+w&f?Q$AN08uAn-r|iu+A^zkNRM)Y0ay{vP;6DqvJSxeM-0zTDy2CHUFd2>XJ zBfo}sfd*$o#Hq)$ diff --git a/webroot/rsrc/image/icon/lightbox/close-hover-2.png b/webroot/rsrc/image/icon/lightbox/close-hover-2.png deleted file mode 100644 index f4ce42479c9709fefa4d3163cbb88c726f6c71b4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1262 zcmeAS@N?(olHy`uVBq!ia0vp^QXtI11|(N{`J4k%k|nMYCBgY=CFO}lsSJ)O`AMk? zp1FzXsX?iUDV2pMQ*9U+m@_g%B1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+* zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!uxSU1_g&``n5OwZ87 z)XdCKN5ROz&`93^h|F{iO{`4Ktc=VRpg;*|TTx1yRgjAt)Gi>;Rw<*Tq`*pFzr4I$ zuiRKKzbIYb(9+TpWQLKEE>MMTab;dfVufyAu`kBtHuNWFoz#!AFNG#Ad)HBe}%?0@jth%@)C>7xhtg4GcDhpEegHnt0 zON)|$@sXws(+mtd{1$-}0$pR}Uz7=ql*AmD{N&Qy)VvZ;7h5Huj9yA+ij{$(1uzuN zO$^M949qMHfjkRiS0f`s0}EFZXCqfrm>Jmgx>~pyIGeh<8XCAb8ydPAIXYRISsGXx zx;UA;7#o|z^?K$Nmn7yTr^4*b1lkML>w;IWm2**QVo82cNPd0}ECmE)U??A%Y#$t^QxZLE@J6(rWPli z5?yrDWL{C0yG!+{D+Q6de$1BQr*|ZlO;uCk?s>eu^Z3-YqQAD4x7E~T$*nn&;QDI; zvx~{cn@7$t<*l^dApFdFi{M1n!hjZz%mm#t*E5t8dv-}K%6-3r-RzdA$lD;>KQk?! qKD7R#Y5%pj=tQ}8@7KmZTm}q`iqE=5O25m2N+3^HKbLh*2~7Yxh^XfP diff --git a/webroot/rsrc/image/icon/lightbox/left-arrow-2.png b/webroot/rsrc/image/icon/lightbox/left-arrow-2.png deleted file mode 100644 index 6499c826b0ecb58bb550777a15191c19a4ca9de3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1120 zcmaJ=TSyd97@o*ml6Il8B4`*TR%++6>yGT?YP&nDZ8@8+3oTL9ICIotn>pjmv7I%7 zQj&ZsD2XB}de#u?B_dL!AcBluA}xyOq3EH9vM7A$jJnoC+b}cdoS*Oe{_7cTOSDv! zZ!ISXq9VRmOyYGT{&tj=;Q!8_&qwgG1;x^+19qXTYyl#y!cIWOb-5cPfvo0wpMVB} zSXrZ`(kLyp3JTO|*~QR~Zelh;G&DJ;tYiQpJ3+T*gs3m~A5x^IhNy!9iIvPK=+XA} zTcD#qky83IN>HVm8p#GnzydlzGU@2Y4O?(R)Pk;n_pX_t$OQ<>gs8=!(o!24g%%(K zwBM_+97pmz&D8~Xp4&zGSkA|=_~pG^oeP}rNLb_q$bdC3<(g{U5cOo3st z*({y))6nW>xL`2oYWRF!jPTky1Idopu&eV5BCr)pGm!=j(p8i@VIK-nIMT%wbaPqO zu$Rh&3&uFI$#695rj!Rt(*L2lzKpg}68wqxpTc%3X96Y(Y}jWhxN%+8t}9cBT0ln7 zNP5f5K9J{%Q0dcwf%07S54X7>*Bu7k#GXZ9X(xc%Y(bq|NLtVe z#}X~5x5QNo$08QwGB_BY7W@C`zZ(`{C%^%kjFZR#n(k;(^dXy1j^+x5=vwO3#vAHYdC)>xX zi+9hDPjA@d8UHwVwr=#=MEUknaq8--^z6#a^J8Nl${H&_HJ;DBW!5#Vhbu~mp$8{# Sw5Qq2?wyav65{R1v4P**5_F#c diff --git a/webroot/rsrc/image/icon/lightbox/left-arrow-hover-2.png b/webroot/rsrc/image/icon/lightbox/left-arrow-hover-2.png deleted file mode 100644 index 73bb7927a6941862fd7e0b244db59bd0344b6d2f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1189 zcmeAS@N?(olHy`uVBq!ia0vp^qCl+1!3HF?e_oghq$EpRBT9nv(@M${i&7aJQ}UBi z6+Ckj(^G>|6H_V+Po~;1FfeCihD4M^`1)8S=jZArg4F0$^BXQ!4Z zB&DWj=GiK}-@RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT6rXh3di zNuokUZcbjYRfVk**jy_h8zii+qySb@l5ML5aa4qFfP!;=QL2Kep0RGSfuW&-nVFuU ziK&^Hp^k!)fuWJU0T7w#8k$&{npqi{D?ot~(6*wKG^-#NH>h1eo~=?wNlAf~zJ7Um zxn8-kUVc%!zM-Y1CCCgTBVC{h-Qvo;lEez#ykcdT2`;I{$wiq3C7Jno3Lp~`lk!VT zY?Xj6g?J&iz}FXUa9%MqpnyT9Uy)d#Z>VRWpPLKv7g%+1Nl+@n8CX>phg24%>IbD3 z=a&{G1LGr28KxN+cK9s2O-#}7wKQ?XnxZNU6tvhSC?)q!eRd@1TnzGg} zd;24J_uqqJQzlgxfB0*)_F$3;o7h6{1hZL8X$w~-7|min>_m*vyTb92Y0_yXs}LNIhTkD((uVDe~bjk6mTsU%l(v$_>3uvYIy@ zw%0D(;LzwQud^iaEz7kZ3A$2dJ_nA;-DqHwR!!buwPbmvPVs){KOTEnBpB}h{`Fu^ Sn(k6i!QtuZ=d#Wzp$PzpK#W)b diff --git a/webroot/rsrc/image/icon/lightbox/right-arrow-2.png b/webroot/rsrc/image/icon/lightbox/right-arrow-2.png deleted file mode 100644 index bfe7d2102704ec3c5a925e1123af877fcccb0544..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1138 zcmeAS@N?(olHy`uVBq!ia0vp^qCl+1!3HF?e_oghq$EpRBT9nv(@M${i&7aJQ}UBi z6+Ckj(^G>|6H_V+Po~;1FfglRhD4M^`1)8S=jZArg4F0$^BXQ!4Z zB&DWj=GiK}-@RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT6rXh3di zNuokUZcbjYRfVk**jy_h8zii+qySb@l5ML5aa4qFfP!;=QL2Kep0RGSfuW&-nVFuU ziK&^Hp^k!)fuWJU0T7w#8k$&{npqi{D?ot~(6*wKG^-#NH>h1eo~=?wNlAf~zJ7Um zxn8-kUVc%!zM-Y1CCCgTBVC{h-Qvo;lEez#ykcdT2`;I{$wiq3C7Jno3Lp~`lk!VT zY?Xj6g?J&i0B&qvF*KNf0j6J(SfFpHX8`gNOrftYexnUy@&(kzb(T9Bihb;hUJ8nFkWk z1ncniwerj>E=kNwPW5!LRRWr!mzkMjSYV2a*XlUT#Y-s3e8Iua(|ZvxVb`;N ztpH|th!*=!=IR+-|<6p*=2L%;wL>^aH^wjkxCdy%GFy$!rg^e)loa z8B1oL+Zk-I{6w19%FnaqioY={JGKhU&F`tazH|T2zzIb}1d#1WDmp@(q_n#ww=eLZvmY)bP0 Hl+XkK?hJp8 diff --git a/webroot/rsrc/image/icon/lightbox/right-arrow-hover-2.png b/webroot/rsrc/image/icon/lightbox/right-arrow-hover-2.png deleted file mode 100644 index 1bd868f92ddc81ff2b58787319ce0def5d3dbced..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1196 zcmbVMTWHfz7><_}ne0UobiTwWUeGo==)wNB#R@SYy5r+@bEIC`lnw*%N*>3ot zQ)=t2Z zksfehVW3^n270xK&TQI9H&-P>U_z|YRkLilQZ>p<@=9dyiCKo8RKdMbX3D9~Y>rMK z2hyQ{;MX_+Xi*G+U`Q0f2Abyp&vN7z{U9iXM2Qd6(-%XmIeNF0ms8WW$SKN{Ft#O@ ztyC(3iV#3f4+|oZh{wV6exl)b`z@?i{g%73#vnsia||0B$f7+)wF~v(C__A*3c<9q z*%@NXolX=<8Cz9t76drfG`+YcwOyQtzulNs+g18)$mXGo`W%haqkClyOmg>kL!Kh> zM(S`3QWUi;BdyPb7S6~~hI|R=hAwfSiDWSxnMQ zawUY3TS7LSD2Vjhtg0E7Cs^kdXewSAI>s)jryOL`lNpwbSv>f6C~vk(qJGaQvvNydZ=1G9$;7>dUTRkpFr4!q_AG+w<%Jx92g( z=jQEC%0CXyIa=2;(Xy_4Pounb-|hL=8x9EP46gp*cAvH&cc*x9@Ob0l!r-EP?>7(k za