mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-18 12:52:42 +01:00
Delete all old dropdown menu code
Summary: Everything is on PHUIX now, so get rid of the old stuff which had standalone CSS. Test Plan: `grep` Reviewers: chad, btrahan Reviewed By: btrahan Subscribers: epriestley Differential Revision: https://secure.phabricator.com/D8977
This commit is contained in:
parent
cb44531751
commit
5a5a1ca444
5 changed files with 3 additions and 282 deletions
|
@ -33,8 +33,9 @@ return array(
|
||||||
'javelin-behavior-refresh-csrf',
|
'javelin-behavior-refresh-csrf',
|
||||||
'javelin-behavior-phabricator-watch-anchor',
|
'javelin-behavior-phabricator-watch-anchor',
|
||||||
'javelin-behavior-phabricator-autofocus',
|
'javelin-behavior-phabricator-autofocus',
|
||||||
'phabricator-menu-item',
|
'phuix-dropdown-menu',
|
||||||
'phabricator-dropdown-menu',
|
'phuix-action-list-view',
|
||||||
|
'phuix-action-view',
|
||||||
'phabricator-phtize',
|
'phabricator-phtize',
|
||||||
'javelin-behavior-phabricator-oncopy',
|
'javelin-behavior-phabricator-oncopy',
|
||||||
'phabricator-tooltip',
|
'phabricator-tooltip',
|
||||||
|
|
|
@ -133,7 +133,6 @@ div.jx-typeahead-results {
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu-frame,
|
|
||||||
.phuix-dropdown-menu {
|
.phuix-dropdown-menu {
|
||||||
z-index: 32;
|
z-index: 32;
|
||||||
}
|
}
|
||||||
|
|
|
@ -166,7 +166,6 @@ button.link:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu-frame,
|
|
||||||
.phuix-dropdown-menu {
|
.phuix-dropdown-menu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 240px;
|
width: 240px;
|
||||||
|
@ -178,25 +177,6 @@ button.link:hover {
|
||||||
border-bottom-color: {$greyborder};
|
border-bottom-color: {$greyborder};
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu-frame .dropdown-menu-item {
|
|
||||||
display: block;
|
|
||||||
padding: 2px 10px;
|
|
||||||
clear: both;
|
|
||||||
line-height: 20px;
|
|
||||||
color: {$darkgreytext};
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu-frame .dropdown-menu-item-disabled {
|
|
||||||
color: {$lightgreytext};
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu-frame .phui-icon-view {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0;
|
|
||||||
margin: 2px 6px -2px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.policy-control {
|
a.policy-control {
|
||||||
width: 240px;
|
width: 240px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
@ -213,17 +193,6 @@ a.policy-control span.phui-icon-view {
|
||||||
left: 7px;
|
left: 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu-frame .dropdown-menu-item-selected {
|
|
||||||
background: {$lightblue};
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu-frame a:hover {
|
|
||||||
background: {$blue};
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.toggle {
|
a.toggle {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
|
|
|
@ -1,192 +0,0 @@
|
||||||
/**
|
|
||||||
* @requires javelin-install
|
|
||||||
* javelin-util
|
|
||||||
* javelin-dom
|
|
||||||
* javelin-vector
|
|
||||||
* javelin-stratcom
|
|
||||||
* phabricator-menu-item
|
|
||||||
* @provides phabricator-dropdown-menu
|
|
||||||
* @javelin
|
|
||||||
*/
|
|
||||||
|
|
||||||
JX.install('PhabricatorDropdownMenu', {
|
|
||||||
|
|
||||||
construct : function(node) {
|
|
||||||
this._node = node;
|
|
||||||
this._items = [];
|
|
||||||
this._menu = JX.$N('div', { className : 'dropdown-menu-frame' });
|
|
||||||
|
|
||||||
JX.DOM.listen(
|
|
||||||
this._node,
|
|
||||||
'click',
|
|
||||||
null,
|
|
||||||
JX.bind(this, this._onclick));
|
|
||||||
|
|
||||||
JX.DOM.listen(
|
|
||||||
this._menu,
|
|
||||||
'click',
|
|
||||||
null,
|
|
||||||
JX.bind(this, this._onclickitem));
|
|
||||||
|
|
||||||
JX.Stratcom.listen(
|
|
||||||
'mousedown',
|
|
||||||
null,
|
|
||||||
JX.bind(this, this._onclickglobal));
|
|
||||||
|
|
||||||
JX.Stratcom.listen(
|
|
||||||
'resize',
|
|
||||||
null,
|
|
||||||
JX.bind(this, this._onresize));
|
|
||||||
|
|
||||||
JX.PhabricatorDropdownMenu.listen(
|
|
||||||
'open',
|
|
||||||
JX.bind(this, this.close));
|
|
||||||
},
|
|
||||||
|
|
||||||
events : ['open'],
|
|
||||||
|
|
||||||
properties : {
|
|
||||||
width : null
|
|
||||||
},
|
|
||||||
|
|
||||||
members : {
|
|
||||||
_node : null,
|
|
||||||
_menu : null,
|
|
||||||
_open : false,
|
|
||||||
_items : null,
|
|
||||||
_alignRight : true,
|
|
||||||
|
|
||||||
// By default, the dropdown will have its right edge aligned with the
|
|
||||||
// right edge of _node. Making this false does left edge alignment
|
|
||||||
toggleAlignDropdownRight : function (bool) {
|
|
||||||
this._alignRight = bool;
|
|
||||||
},
|
|
||||||
|
|
||||||
open : function() {
|
|
||||||
if (this._open) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.invoke('open');
|
|
||||||
|
|
||||||
var menu_items = [];
|
|
||||||
for (var ii = 0; ii < this._items.length; ii++) {
|
|
||||||
menu_items.push(this._items[ii].render());
|
|
||||||
}
|
|
||||||
JX.DOM.setContent(this._menu, menu_items);
|
|
||||||
|
|
||||||
this._open = true;
|
|
||||||
this._show();
|
|
||||||
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
|
|
||||||
close : function() {
|
|
||||||
if (!this._open) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this._open = false;
|
|
||||||
this._hide();
|
|
||||||
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
|
|
||||||
clear : function() {
|
|
||||||
this._items = [];
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
|
|
||||||
addItem : function(item) {
|
|
||||||
if (__DEV__) {
|
|
||||||
if (!(item instanceof JX.PhabricatorMenuItem)) {
|
|
||||||
JX.$E(
|
|
||||||
'JX.DropdownMenu.addItem(<junk>): ' +
|
|
||||||
'item must be a JX.PhabricatorMenuItem.');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this._items.push(item);
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
|
|
||||||
_onclick : function(e) {
|
|
||||||
if (this._open) {
|
|
||||||
this.close();
|
|
||||||
} else {
|
|
||||||
this.open();
|
|
||||||
}
|
|
||||||
e.prevent();
|
|
||||||
},
|
|
||||||
|
|
||||||
_onclickitem : function(e) {
|
|
||||||
var item = JX.Stratcom.getData(e.getTarget()).item;
|
|
||||||
if (!item) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (item.getDisabled()) {
|
|
||||||
e.prevent();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
item.select();
|
|
||||||
e.prevent();
|
|
||||||
this.close();
|
|
||||||
},
|
|
||||||
|
|
||||||
_onclickglobal : function(e) {
|
|
||||||
if (!this._open) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (JX.Stratcom.pass(e)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var t = e.getTarget();
|
|
||||||
while (t) {
|
|
||||||
if (t == this._menu || t == this._node) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
t = t.parentNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.close();
|
|
||||||
},
|
|
||||||
|
|
||||||
_show : function() {
|
|
||||||
document.body.appendChild(this._menu);
|
|
||||||
|
|
||||||
if (this.getWidth()) {
|
|
||||||
new JX.Vector(this.getWidth(), null).setDim(this._menu);
|
|
||||||
}
|
|
||||||
|
|
||||||
this._onresize();
|
|
||||||
|
|
||||||
JX.DOM.alterClass(this._node, 'dropdown-open', true);
|
|
||||||
},
|
|
||||||
|
|
||||||
_onresize : function() {
|
|
||||||
if (!this._open) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var m = JX.Vector.getDim(this._menu);
|
|
||||||
|
|
||||||
var v = JX.$V(this._node);
|
|
||||||
var d = JX.Vector.getDim(this._node);
|
|
||||||
if (this._alignRight) {
|
|
||||||
v = v.add(d)
|
|
||||||
.add(JX.$V(-m.x, 0));
|
|
||||||
} else {
|
|
||||||
v = v.add(0, d.y);
|
|
||||||
}
|
|
||||||
v.setPos(this._menu);
|
|
||||||
},
|
|
||||||
|
|
||||||
_hide : function() {
|
|
||||||
JX.DOM.remove(this._menu);
|
|
||||||
JX.DOM.alterClass(this._node, 'dropdown-open', false);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
|
@ -1,56 +0,0 @@
|
||||||
/**
|
|
||||||
* @requires javelin-install
|
|
||||||
* javelin-dom
|
|
||||||
* @provides phabricator-menu-item
|
|
||||||
* @javelin
|
|
||||||
*/
|
|
||||||
|
|
||||||
JX.install('PhabricatorMenuItem', {
|
|
||||||
|
|
||||||
construct : function(name, action, href) {
|
|
||||||
this.setName(name);
|
|
||||||
this.setHref(href || '#');
|
|
||||||
this._action = action;
|
|
||||||
},
|
|
||||||
|
|
||||||
members : {
|
|
||||||
_action : null,
|
|
||||||
|
|
||||||
render : function() {
|
|
||||||
var classes = [];
|
|
||||||
classes.push('dropdown-menu-item');
|
|
||||||
|
|
||||||
if (this.getSelected()) {
|
|
||||||
classes.push('dropdown-menu-item-selected');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.getDisabled()) {
|
|
||||||
classes.push('dropdown-menu-item-disabled');
|
|
||||||
}
|
|
||||||
|
|
||||||
var attrs = {
|
|
||||||
href: this.getHref(),
|
|
||||||
meta: { item: this },
|
|
||||||
className: classes.join(' ')
|
|
||||||
};
|
|
||||||
|
|
||||||
if (this.getDisabled()) {
|
|
||||||
return JX.$N('span', attrs, this.getName());
|
|
||||||
} else {
|
|
||||||
return JX.$N('a', attrs, this.getName());
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
select : function() {
|
|
||||||
this._action();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
properties : {
|
|
||||||
name: '',
|
|
||||||
href: '',
|
|
||||||
disabled: false,
|
|
||||||
selected: false
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
Loading…
Reference in a new issue