mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-27 01:02:42 +01:00
75a5dd8d8c
Summary: Depends on D19594. See PHI823. Ref T13164. - Add a label for the "X" button in comment areas, like "Remove Action: Change Subscribers". - Add a label for the floating header display options menu in Differential. - Add `role="button"` to `PHUIButtonView` objects that we render with an `<a ...>` tag. Test Plan: Viewed a revision with `?__aural__=true`: - Saw "Remove Action: ..." label. - Saw "Display Options" label. - Used inspector to verify that some `<a class="button" ...>` now have `<a class="button" role="button" ...>`. This isn't exhaustive, but at least improves things. A specific example is the "edit", "reply", etc., actions on inline comments. Reviewers: amckinley Reviewed By: amckinley Maniphest Tasks: T13164 Differential Revision: https://secure.phabricator.com/D19595
144 lines
2.9 KiB
JavaScript
144 lines
2.9 KiB
JavaScript
/**
|
|
* @provides phuix-button-view
|
|
* @requires javelin-install
|
|
* javelin-dom
|
|
*/
|
|
JX.install('PHUIXButtonView', {
|
|
|
|
statics: {
|
|
BUTTONTYPE_DEFAULT: 'buttontype.default',
|
|
BUTTONTYPE_SIMPLE: 'buttontype.simple'
|
|
},
|
|
|
|
members: {
|
|
_node: null,
|
|
_textNode: null,
|
|
_auralNode: null,
|
|
|
|
_iconView: null,
|
|
_color: null,
|
|
_selected: null,
|
|
_buttonType: null,
|
|
|
|
setIcon: function(icon) {
|
|
this.getIconView().setIcon(icon);
|
|
return this;
|
|
},
|
|
|
|
getIconView: function() {
|
|
if (!this._iconView) {
|
|
this._iconView = new JX.PHUIXIconView();
|
|
this._redraw();
|
|
}
|
|
return this._iconView;
|
|
},
|
|
|
|
setColor: function(color) {
|
|
var node = this.getNode();
|
|
|
|
if (this._color) {
|
|
JX.DOM.alterClass(node, 'button-' + this._color, false);
|
|
}
|
|
this._color = color;
|
|
JX.DOM.alterClass(node, 'button-' + this._color, true);
|
|
|
|
return this;
|
|
},
|
|
|
|
setSelected: function(selected) {
|
|
var node = this.getNode();
|
|
this._selected = selected;
|
|
JX.DOM.alterClass(node, 'selected', this._selected);
|
|
return this;
|
|
},
|
|
|
|
setButtonType: function(button_type) {
|
|
var self = JX.PHUIXButtonView;
|
|
|
|
this._buttonType = button_type;
|
|
var node = this.getNode();
|
|
|
|
var is_simple = (this._buttonType == self.BUTTONTYPE_SIMPLE);
|
|
JX.DOM.alterClass(node, 'phui-button-simple', is_simple);
|
|
|
|
return this;
|
|
},
|
|
|
|
setText: function(text) {
|
|
JX.DOM.setContent(this._getTextNode(), text);
|
|
this._redraw();
|
|
return this;
|
|
},
|
|
|
|
setAuralLabel: function(label) {
|
|
JX.DOM.setContent(this._getAuralNode(), label);
|
|
this._redraw();
|
|
return this;
|
|
},
|
|
|
|
getNode: function() {
|
|
if (!this._node) {
|
|
var attrs = {
|
|
className: 'button'
|
|
};
|
|
|
|
this._node = JX.$N('button', attrs);
|
|
|
|
this._redraw();
|
|
}
|
|
|
|
return this._node;
|
|
},
|
|
|
|
_getTextNode: function() {
|
|
if (!this._textNode) {
|
|
var attrs = {
|
|
className: 'phui-button-text'
|
|
};
|
|
|
|
this._textNode = JX.$N('div', attrs);
|
|
}
|
|
|
|
return this._textNode;
|
|
},
|
|
|
|
_getAuralNode: function() {
|
|
if (!this._auralNode) {
|
|
var attrs = {
|
|
className: 'aural-only'
|
|
};
|
|
|
|
this._auralNode = JX.$N('span', attrs);
|
|
}
|
|
|
|
return this._auralNode;
|
|
},
|
|
|
|
_redraw: function() {
|
|
var node = this.getNode();
|
|
|
|
var aural = this._auralNode;
|
|
var icon = this._iconView;
|
|
var text = this._textNode;
|
|
|
|
var content = [];
|
|
|
|
if (aural) {
|
|
content.push(aural);
|
|
}
|
|
|
|
if (icon) {
|
|
content.push(icon.getNode());
|
|
}
|
|
|
|
if (text) {
|
|
content.push(text);
|
|
}
|
|
|
|
JX.DOM.alterClass(node, 'has-icon', !!icon);
|
|
JX.DOM.alterClass(node, 'has-text', !!text);
|
|
JX.DOM.setContent(node, content);
|
|
}
|
|
}
|
|
|
|
});
|