mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-24 14:30:56 +01:00
0ede616f31
Summary: Ref T13516. Minor improvements here: - Show key commands in the "View Options" dropdown. - Organize it slightly better. - Improve disabled item behaviors a little bit. - Add a "Browse Directory" action. - Rename "...in Diffusion" to "...in Repository". - Make "d", "D", and "h" use the same targeting rules as "\". - When you hide a file with the "h" menu item, select it. Test Plan: Poked at the menu a lot, ran into less questionable behavior. Maniphest Tasks: T13516 Differential Revision: https://secure.phabricator.com/D21160
238 lines
5.1 KiB
JavaScript
238 lines
5.1 KiB
JavaScript
/**
|
|
* @provides phuix-action-view
|
|
* @requires javelin-install
|
|
* javelin-dom
|
|
* javelin-util
|
|
* @javelin
|
|
*/
|
|
|
|
JX.install('PHUIXActionView', {
|
|
|
|
members: {
|
|
_node: null,
|
|
_name: null,
|
|
_icon: 'none',
|
|
_iconColor: null,
|
|
_disabled: false,
|
|
_label: false,
|
|
_handler: null,
|
|
_selected: false,
|
|
_divider: false,
|
|
_keyCommand: null,
|
|
_unresponsive: null,
|
|
|
|
_iconNode: null,
|
|
_nameNode: null,
|
|
|
|
setDisabled: function(disabled) {
|
|
this._disabled = disabled;
|
|
JX.DOM.alterClass(
|
|
this.getNode(),
|
|
'phabricator-action-view-disabled',
|
|
disabled);
|
|
|
|
this._buildIconNode(true);
|
|
|
|
return this;
|
|
},
|
|
|
|
setUnresponsive: function(unresponsive) {
|
|
this._unresponsive = unresponsive;
|
|
this._buildNameNode(true);
|
|
return this;
|
|
},
|
|
|
|
getDisabled: function() {
|
|
return this._disabled;
|
|
},
|
|
|
|
setLabel: function(label) {
|
|
this._label = label;
|
|
JX.DOM.alterClass(
|
|
this.getNode(),
|
|
'phabricator-action-view-label',
|
|
label);
|
|
return this;
|
|
},
|
|
|
|
setDivider: function(divider) {
|
|
this._divider = divider;
|
|
JX.DOM.alterClass(
|
|
this.getNode(),
|
|
'phabricator-action-view-type-divider',
|
|
divider);
|
|
return this;
|
|
},
|
|
|
|
setSelected: function(selected) {
|
|
this._selected = selected;
|
|
JX.DOM.alterClass(
|
|
this.getNode(),
|
|
'phabricator-action-view-selected',
|
|
selected);
|
|
|
|
return this;
|
|
},
|
|
|
|
setName: function(name) {
|
|
this._name = name;
|
|
this._buildNameNode(true);
|
|
return this;
|
|
},
|
|
|
|
setHandler: function(handler) {
|
|
this._handler = handler;
|
|
this._buildNameNode(true);
|
|
this._rebuildClasses();
|
|
return this;
|
|
},
|
|
|
|
setIcon: function(icon) {
|
|
this._icon = icon;
|
|
this._buildIconNode(true);
|
|
return this;
|
|
},
|
|
|
|
setIconColor: function(color) {
|
|
this._iconColor = color;
|
|
this._buildIconNode(true);
|
|
return this;
|
|
},
|
|
|
|
setHref: function(href) {
|
|
this._href = href;
|
|
this._buildNameNode(true);
|
|
this._rebuildClasses();
|
|
return this;
|
|
},
|
|
|
|
setKeyCommand: function(command) {
|
|
this._keyCommand = command;
|
|
|
|
var key_node = this._buildKeyCommandNode();
|
|
JX.DOM.setContent(key_node, this._keyCommand);
|
|
|
|
var node = this.getNode();
|
|
JX.DOM.alterClass(node, 'has-key-command', !!this._keyCommand);
|
|
|
|
return this;
|
|
},
|
|
|
|
getNode: function() {
|
|
if (!this._node) {
|
|
var classes = ['phabricator-action-view'];
|
|
|
|
if (this._icon) {
|
|
classes.push('action-has-icon');
|
|
}
|
|
|
|
var content = [
|
|
this._buildIconNode(),
|
|
this._buildNameNode(),
|
|
this._buildKeyCommandNode(),
|
|
];
|
|
|
|
var attr = {
|
|
className: classes.join(' ')
|
|
};
|
|
this._node = JX.$N('li', attr, content);
|
|
|
|
JX.Stratcom.addSigil(this._node, 'phuix-action-view');
|
|
|
|
this._rebuildClasses();
|
|
}
|
|
|
|
return this._node;
|
|
},
|
|
|
|
_rebuildClasses: function() {
|
|
var node = this.getNode();
|
|
|
|
var is_href = !!(this._href || this._handler);
|
|
JX.DOM.alterClass(node, 'phabricator-action-view-href', is_href);
|
|
},
|
|
|
|
_buildIconNode: function(dirty) {
|
|
if (!this._iconNode || dirty) {
|
|
var attr = {
|
|
className: [
|
|
'phui-icon-view',
|
|
'phabricator-action-view-icon',
|
|
'phui-font-fa'
|
|
].join(' ')
|
|
};
|
|
var node = JX.$N('span', attr);
|
|
|
|
var icon_class = this._icon;
|
|
if (this._disabled) {
|
|
icon_class = icon_class + ' grey';
|
|
}
|
|
|
|
if (this._iconColor) {
|
|
icon_class = icon_class + ' ' + this._iconColor;
|
|
}
|
|
|
|
JX.DOM.alterClass(node, icon_class, true);
|
|
|
|
if (this._iconNode && this._iconNode.parentNode) {
|
|
JX.DOM.replace(this._iconNode, node);
|
|
}
|
|
this._iconNode = node;
|
|
}
|
|
|
|
return this._iconNode;
|
|
},
|
|
|
|
_buildKeyCommandNode: function() {
|
|
if (!this._keyCommandNode) {
|
|
var attrs = {
|
|
className: 'keyboard-shortcut-key'
|
|
};
|
|
|
|
this._keyCommandNode = JX.$N('div', attrs);
|
|
}
|
|
return this._keyCommandNode;
|
|
},
|
|
|
|
_buildNameNode: function(dirty) {
|
|
if (!this._nameNode || dirty) {
|
|
var attr = {
|
|
className: 'phabricator-action-view-item'
|
|
};
|
|
|
|
var href = this._href;
|
|
if (!href && this._handler && !this._unresponsive) {
|
|
href = '#';
|
|
}
|
|
if (href) {
|
|
attr.href = href;
|
|
}
|
|
|
|
var tag = href ? 'a' : 'span';
|
|
|
|
var node = JX.$N(tag, attr, this._name);
|
|
JX.DOM.listen(node, 'click', null, JX.bind(this, this._onclick));
|
|
|
|
if (this._nameNode && this._nameNode.parentNode) {
|
|
JX.DOM.replace(this._nameNode, node);
|
|
}
|
|
this._nameNode = node;
|
|
}
|
|
|
|
return this._nameNode;
|
|
},
|
|
|
|
_onclick: function(e) {
|
|
if (this._unresponsive) {
|
|
e.prevent();
|
|
return;
|
|
}
|
|
|
|
if (this._handler) {
|
|
this._handler(e);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
});
|