Added textAlpha and textActiveAlpha to Button and ButtonGroup.

This commit is contained in:
2019-10-15 14:56:24 +02:00
parent e50ea6af31
commit e2ea89cc0b
73 changed files with 440 additions and 161 deletions
+16 -13
View File
@@ -81,6 +81,8 @@
* large text.
* @param {object} [opts.textStyleLargeActive=textStyleLarge + {fill: primaryColor}] - A textstyle object which
* is used for large actived text.
* @param {number} [opts.textAlpha=Theme.textAlpha] - The alpha value of text.
* @param {number} [opts.textActiveAlpha=Theme.textActiveAlpha] - The alpha value of text when activated.
*/
constructor(opts = {}) {
const colorPrimary = opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8; // blue
@@ -109,6 +111,8 @@
strokeActive: color2,
strokeActiveWidth: 0.6,
strokeActiveAlpha: 1,
textAlpha: 1,
textActiveAlpha: 1,
iconColor: color2,
iconColorActive: colorPrimary,
background: color1
@@ -1331,19 +1335,6 @@
static toLine(event) {
return `${event.type} #${event.target.id} ${event.clientX} ${event.clientY}`
let result = event.type;
let selector = this.selector(event.target);
result += ' selector: ' + selector;
if (event.target != document.querySelector(selector)) console.log('Cannot resolve', selector);
let keys = ['layerX', 'layerY', 'pageX', 'pageY', 'clientX', 'clientY'];
for (let key of keys) {
try {
result += ' ' + key + ':' + event[key];
} catch (e) {
console.log('Invalid key: ' + key);
}
}
return result
}
static compareExtractedWithSimulated() {
@@ -2311,6 +2302,8 @@
* for possible options.
* @param {number} [opts.textStyleActive=Theme.textStyleActive] - A textstyle object for the styling of the label when the
* button is activated. See PIXI.TextStyle for possible options.
* @param {number} [opts.textAlpha=Theme.textAlpha] - The alpha value of the text.
* @param {number} [opts.textActiveAlpha=Theme.textActiveAlpha] - The alpha value of the text when activated.
* @param {string} [opts.style=default] - A shortcut for styling options. Possible values are default, link.
* @param {number} [opts.radius=Theme.radius] - The radius of the four corners of the button (which is a rounded rectangle).
* @param {boolean} [opts.disabled=false] - Is the button disabled? When disabled, the button has a lower alpha value
@@ -2368,6 +2361,8 @@
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: {},
textStyleActive: {},
textAlpha: theme.textAlpha,
textActiveAlpha: theme.textActiveAlpha,
style: 'default',
radius: theme.radius,
disabled: false,
@@ -2796,10 +2791,12 @@
if (this._active) {
if (this.text) {
this.text.style = this.opts.textStyleActive;
this.text.alpha = this.opts.textActiveAlpha;
}
} else {
if (this.text) {
this.text.style = this.opts.textStyle;
this.text.alpha = this.opts.textAlpha;
}
}
@@ -3006,6 +3003,8 @@
* for possible options.
* @param {number} [opts.textStyleActive=Theme.textStyleActive] - Button: A textstyle object for the styling of the label when the
* button is activated. See PIXI.TextStyle for possible options.
* @param {number} [opts.textAlpha=Theme.textAlpha] - Button: The alpha value of the text.
* @param {number} [opts.textActiveAlpha=Theme.textActiveAlpha] - Button: The alpha value of the text when activated.
* @param {string} [opts.style=default] - A shortcut for styling options. Possible values are default, link.
* @param {number} [opts.radius=Theme.radius] - Button: The radius of the four corners of the button (which is a rounded rectangle).
* @param {boolean} [opts.disabled=false] - Is the button group disabled? When disabled, the button group has a lower alpha value
@@ -3056,6 +3055,8 @@
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: {},
textStyleActive: {},
textAlpha: theme.textAlpha,
textActiveAlpha: theme.textActiveAlpha,
style: 'default',
radius: theme.radius,
disabled: null,
@@ -3134,6 +3135,8 @@
it.strokeActiveAlpha = it.strokeActiveAlpha != null ? it.strokeActiveAlpha : this.opts.strokeActiveAlpha;
it.textStyle = it.textStyle || this.opts.textStyle;
it.textStyleActive = it.textStyleActive || this.opts.textStyleActive;
it.textAlpha = it.textAlpha != null ? it.textAlpha : this.opts.textAlpha;
it.textActiveAlpha = it.textActiveAlpha != null ? it.textActiveAlpha : this.opts.textActiveAlpha;
it.style = it.style || this.opts.style;
it.radius = it.radius != null ? it.radius : this.opts.radius;
if (!it.type) {