mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-18 12:52:42 +01:00
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
This commit is contained in:
parent
23a202866a
commit
f844280d36
6 changed files with 83 additions and 42 deletions
|
@ -9,8 +9,8 @@ return array(
|
|||
'names' => array(
|
||||
'conpherence.pkg.css' => '0b64e988',
|
||||
'conpherence.pkg.js' => '6249a1cf',
|
||||
'core.pkg.css' => 'e5fbe031',
|
||||
'core.pkg.js' => '426f2dac',
|
||||
'core.pkg.css' => '417800a6',
|
||||
'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',
|
||||
),
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
padding-left: 28px;
|
||||
.lightbox-attachment .lightbox-status .phui-icon-view {
|
||||
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};
|
||||
}
|
||||
|
||||
.lightbox-attachment .lightbox-close {
|
||||
float: right;
|
||||
margin: 9px 0 0 8px;
|
||||
border-color: {$sky};
|
||||
}
|
||||
|
||||
.lightbox-attachment .lightbox-left {
|
||||
|
|
|
@ -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);
|
||||
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue