1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-10 00:42:41 +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:
Chad Little 2016-11-29 11:58:42 -08:00
parent 23a202866a
commit f844280d36
6 changed files with 83 additions and 42 deletions

View file

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

View file

@ -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(

View file

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

View file

@ -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 {

View file

@ -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 {

View file

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