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

Use ActionList-based dropdowns in Policy

Browse source 
Summary: See previous diffs. These mostly look reasonable with shared CSS.

Test Plan: {F150431}

Reviewers: chad, btrahan

Reviewed By: btrahan

Subscribers: epriestley

Differential Revision: https://secure.phabricator.com/D8975
This commit is contained in:
epriestley 2014-05-05 10:56:57 -07:00
parent 7584d10b49
commit cb44531751
8 changed files with 67 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
resources/sprite/manifest/status.json
View file

@ -263,7 +263,7 @@
},
"status-policy-admin-white" : {
"name" : "status-policy-admin-white",
"rule" : ".status-policy-admin-white, .dropdown-menu-item:hover .status-policy-admin",
"rule" : ".status-policy-admin-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-admin",
"hash" : "4b16ec5170bc30fb688f7e086e61a7f1"
},
"status-policy-all" : {
@ -273,7 +273,7 @@
},
"status-policy-all-white" : {
"name" : "status-policy-all-white",
"rule" : ".status-policy-all-white, .dropdown-menu-item:hover .status-policy-all",
"rule" : ".status-policy-all-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-all",
"hash" : "24ed12bf6f58c21a82be125ace2ff0d0"
},
"status-policy-custom" : {
@ -283,7 +283,7 @@
},
"status-policy-custom-white" : {
"name" : "status-policy-custom-white",
"rule" : ".status-policy-custom-white, .dropdown-menu-item:hover .status-policy-custom",
"rule" : ".status-policy-custom-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-custom",
"hash" : "ff8b4cbe21f3b4254f343fffc170ef4b"
},
"status-policy-elist" : {
@ -303,7 +303,7 @@
},
"status-policy-noone-white" : {
"name" : "status-policy-noone-white",
"rule" : ".status-policy-noone-white, .dropdown-menu-item:hover .status-policy-noone",
"rule" : ".status-policy-noone-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-noone",
"hash" : "80fb9b153fec4d8136242c5ddc2d8e77"
},
"status-policy-project" : {
@ -313,7 +313,7 @@
},
"status-policy-project-white" : {
"name" : "status-policy-project-white",
"rule" : ".status-policy-project-white, .dropdown-menu-item:hover .status-policy-project",
"rule" : ".status-policy-project-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-project",
"hash" : "ac2b6f19edb8d6c40f0bcb3fd477a067"
},
"status-policy-public" : {
@ -323,7 +323,7 @@
},
"status-policy-public-white" : {
"name" : "status-policy-public-white",
"rule" : ".status-policy-public-white, .dropdown-menu-item:hover .status-policy-public",
"rule" : ".status-policy-public-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-public",
"hash" : "cf809ca49eefed5375c2ea081e721971"
},
"status-policy-unknown" : {
@ -333,7 +333,7 @@
},
"status-policy-unknown-white" : {
"name" : "status-policy-unknown-white",
"rule" : ".status-policy-unknown-white, .dropdown-menu-item:hover .status-policy-unknown",
"rule" : ".status-policy-unknown-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-unknown",
"hash" : "98985bfa005672c4b88feaf88cfa72bc"
},
"status-policy-user" : {

23
src/infrastructure/celerity/CeleritySpriteGenerator.php
View file

@ -558,21 +558,16 @@ final class CeleritySpriteGenerator {
$sprites = array();
$prefix = 'status_';
$pre_rule = ', .phuix-dropdown-menu .phabricator-action-view:hover ';
$extra_css = array(
'policy-custom-white' =>
', .dropdown-menu-item:hover .status-policy-custom',
'policy-all-white' =>
', .dropdown-menu-item:hover .status-policy-all',
'policy-unknown-white' =>
', .dropdown-menu-item:hover .status-policy-unknown',
'policy-admin-white' =>
', .dropdown-menu-item:hover .status-policy-admin',
'policy-public-white' =>
', .dropdown-menu-item:hover .status-policy-public',
'policy-project-white' =>
', .dropdown-menu-item:hover .status-policy-project',
'policy-noone-white' =>
', .dropdown-menu-item:hover .status-policy-noone',
'policy-custom-white' => $pre_rule.'.status-policy-custom',
'policy-all-white' => $pre_rule.'.status-policy-all',
'policy-unknown-white' => $pre_rule.'.status-policy-unknown',
'policy-admin-white' => $pre_rule.'.status-policy-admin',
'policy-public-white' => $pre_rule.'.status-policy-public',
'policy-project-white' => $pre_rule.'.status-policy-project',
'policy-noone-white' => $pre_rule.'.status-policy-noone',
);
foreach ($icons as $icon) {

4
webroot/rsrc/css/layout/phabricator-action-list-view.css
View file

@ -81,6 +81,10 @@
color: {$lightgreytext};
}
.phabricator-action-view-selected {
background: {$lightblue};
}
.phabricator-action-view button[disabled] {
opacity: 1.0;
}

14
webroot/rsrc/css/sprite-status.css
View file

@ -222,7 +222,7 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
background-position: 0px -75px;
}
.status-policy-admin-white, .dropdown-menu-item:hover .status-policy-admin {
.status-policy-admin-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-admin {
background-position: -15px -75px;
}
@ -230,7 +230,7 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
background-position: -30px -75px;
}
.status-policy-all-white, .dropdown-menu-item:hover .status-policy-all {
.status-policy-all-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-all {
background-position: -45px -75px;
}
@ -238,7 +238,7 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
background-position: -60px -75px;
}
.status-policy-custom-white, .dropdown-menu-item:hover .status-policy-custom {
.status-policy-custom-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-custom {
background-position: -75px -75px;
}
@ -254,7 +254,7 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
background-position: -120px -75px;
}
.status-policy-noone-white, .dropdown-menu-item:hover .status-policy-noone {
.status-policy-noone-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-noone {
background-position: -135px -75px;
}
@ -262,7 +262,7 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
background-position: 0px -90px;
}
.status-policy-project-white, .dropdown-menu-item:hover .status-policy-project {
.status-policy-project-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-project {
background-position: -15px -90px;
}
@ -270,7 +270,7 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
background-position: -30px -90px;
}
.status-policy-public-white, .dropdown-menu-item:hover .status-policy-public {
.status-policy-public-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-public {
background-position: -45px -90px;
}
@ -278,7 +278,7 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
background-position: -60px -90px;
}
.status-policy-unknown-white, .dropdown-menu-item:hover .status-policy-unknown {
.status-policy-unknown-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-unknown {
background-position: -75px -90px;
}

BIN
webroot/rsrc/image/sprite-status-X2.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

BIN
webroot/rsrc/image/sprite-status.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

36
webroot/rsrc/js/application/policy/behavior-policy-control.js
View file

@ -3,8 +3,9 @@
* @requires javelin-behavior
* javelin-dom
* javelin-util
* phabricator-dropdown-menu
* phabricator-menu-item
* phuix-dropdown-menu
* phuix-action-list-view
* phuix-action-view
* javelin-workflow
* @javelin
*/
@ -13,20 +14,20 @@ JX.behavior('policy-control', function(config) {
var input = JX.$(config.inputID);
var value = config.value;
var menu = new JX.PhabricatorDropdownMenu(control)
.setWidth(260);
menu.toggleAlignDropdownRight(false);
var menu = new JX.PHUIXDropdownMenu(control)
.setWidth(260)
.setAlign('left');
menu.listen('open', function() {
menu.clear();
var list = new JX.PHUIXActionListView();
for (var ii = 0; ii < config.groups.length; ii++) {
var group = config.groups[ii];
var header = new JX.PhabricatorMenuItem(config.labels[group], JX.bag);
header.setDisabled(true);
menu.addItem(header);
list.addItem(
new JX.PHUIXActionView()
.setName(config.labels[group])
.setDisabled(true));
for (var jj = 0; jj < config.order[group].length; jj++) {
var phid = config.order[group][jj];
@ -52,18 +53,25 @@ JX.behavior('policy-control', function(config) {
onselect = JX.bind(null, select_policy, phid);
}
var item = new JX.PhabricatorMenuItem(
render_option(phid, true),
onselect);
var option = config.options[phid];
var item = new JX.PHUIXActionView()
.setName(option.name)
.setIcon(option.icon, 'status')
.setHandler(JX.bind(null, function(fn, e) {
e.prevent();
menu.close();
fn();
}, onselect));
if (phid == value) {
item.setSelected(true);
}
menu.addItem(item);
list.addItem(item);
}
}
menu.setContent(list.getNode());
});

23
webroot/rsrc/js/phuix/PHUIXActionView.js
View file

@ -12,8 +12,10 @@ JX.install('PHUIXActionView', {
_node: null,
_name: null,
_icon: 'none',
_iconSheet: 'icons',
_disabled: false,
_handler: null,
_selected: false,
_iconNode: null,
_nameNode: null,
@ -30,8 +32,14 @@ JX.install('PHUIXActionView', {
return this;
},
getDisabled: function() {
return this._disabled;
setSelected: function(selected) {
this._selected = selected;
JX.DOM.alterClass(
this.getNode(),
'phabricator-action-view-selected',
selected);
return this;
},
setName: function(name) {
@ -46,8 +54,9 @@ JX.install('PHUIXActionView', {
return this;
},
setIcon: function(icon) {
setIcon: function(icon, sheet) {
this._icon = icon;
this._iconSheet = sheet || this._iconSheet;
this._buildIconNode(true);
return this;
},
@ -78,11 +87,15 @@ JX.install('PHUIXActionView', {
_buildIconNode: function(dirty) {
if (!this._iconNode || dirty) {
var attr = {
className: 'phui-icon-view sprite-icons phabricator-action-view-icon'
className: [
'phui-icon-view',
'phabricator-action-view-icon',
'sprite-' + this._iconSheet
].join(' ')
};
var node = JX.$N('span', attr);
var icon_class = 'icons-' + this._icon;
var icon_class = this._iconSheet + '-' + this._icon;
if (this._disabled) {
icon_class = icon_class + '-grey';
}