revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-18 04:42:40 +01:00
Code Issues Releases Wiki Activity

Rebuild lightbox styles

Browse source 
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
This commit is contained in:
Chad Little 2016-11-12 15:37:16 +00:00 committed by chad
parent 96219ab568
commit ebecbeed42
10 changed files with 110 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
resources/celerity/map.php
View file

@ -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',

2
src/view/page/PhabricatorStandardPageView.php
View file

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

91
webroot/rsrc/css/aphront/lightbox-attachment.css
View file

@ -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};
}

BIN
webroot/rsrc/image/icon/lightbox/close-2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.4 KiB

BIN
webroot/rsrc/image/icon/lightbox/close-hover-2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
webroot/rsrc/image/icon/lightbox/left-arrow-2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
webroot/rsrc/image/icon/lightbox/left-arrow-hover-2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
webroot/rsrc/image/icon/lightbox/right-arrow-2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
webroot/rsrc/image/icon/lightbox/right-arrow-hover-2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.2 KiB

91
webroot/rsrc/js/core/behavior-lightbox-attachments.js
View file

@ -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');