add color intensity option
This commit is contained in:
parent
c98e4430b1
commit
a8c8c017f6
|
@ -11,29 +11,54 @@
|
||||||
import BuiltinModule from './BuiltinModule';
|
import BuiltinModule from './BuiltinModule';
|
||||||
|
|
||||||
import { Utils } from 'common';
|
import { Utils } from 'common';
|
||||||
import { Patcher, MonkeyPatch, WebpackModules, ReactComponents } from 'modules';
|
import { Settings, Patcher, MonkeyPatch, WebpackModules, ReactComponents } from 'modules';
|
||||||
|
|
||||||
export default new class ColoredText extends BuiltinModule {
|
export default new class ColoredText extends BuiltinModule {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this._intensityUpdated = this._intensityUpdated.bind(this);
|
||||||
|
this.injectColoredText = this.injectColoredText.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
get settingPath() {
|
get settingPath() {
|
||||||
return ['ui', 'default', 'colored-text'];
|
return ['ui', 'default', 'colored-text'];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get intensityPath() {
|
||||||
|
return ['ui', 'advanced', 'colored-text-intensity'];
|
||||||
|
}
|
||||||
|
|
||||||
|
get intensitySetting() {
|
||||||
|
return Settings.getSetting(...this.intensityPath);
|
||||||
|
}
|
||||||
|
|
||||||
|
get intensity() {
|
||||||
|
return 1 - this.intensitySetting.value / 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
_intensityUpdated() {
|
||||||
|
this.MessageContent.forceUpdateAll();
|
||||||
|
}
|
||||||
|
|
||||||
async enabled(e) {
|
async enabled(e) {
|
||||||
if (Patcher.getPatchesByCaller('BD:ColoredText').length) return;
|
if (Patcher.getPatchesByCaller('BD:ColoredText').length) return;
|
||||||
const MessageContent = await ReactComponents.getComponent('MessageContent', { selector: WebpackModules.getSelector('container', 'containerCozy', 'containerCompact', 'edited') });
|
this.intensitySetting.on('setting-updated', this._intensityUpdated);
|
||||||
MonkeyPatch('BD:ColoredText', MessageContent.component.prototype).after('render', this.injectColoredText);
|
this.MessageContent = await ReactComponents.getComponent('MessageContent', { selector: WebpackModules.getSelector('container', 'containerCozy', 'containerCompact', 'edited') });
|
||||||
MessageContent.forceUpdateAll();
|
MonkeyPatch('BD:ColoredText', this.MessageContent.component.prototype).after('render', this.injectColoredText);
|
||||||
|
this.MessageContent.forceUpdateAll();
|
||||||
}
|
}
|
||||||
|
|
||||||
injectColoredText(thisObject, args, returnValue) {
|
injectColoredText(thisObject, args, returnValue) {
|
||||||
|
const ColorShader = WebpackModules.getModuleByName('ColorShader');
|
||||||
const markup = Utils.findInReactTree(returnValue, m => m && m.props && m.props.className && m.props.className.includes('da-markup'));
|
const markup = Utils.findInReactTree(returnValue, m => m && m.props && m.props.className && m.props.className.includes('da-markup'));
|
||||||
const roleColor = thisObject.props.message.colorString;
|
const roleColor = thisObject.props.message.colorString;
|
||||||
if (markup && roleColor) markup.props.style = {color: roleColor};
|
if (markup && roleColor) markup.props.style = {color: ColorShader.lighten(roleColor, this.intensity)};
|
||||||
}
|
}
|
||||||
|
|
||||||
disabled(e) {
|
disabled(e) {
|
||||||
Patcher.unpatchAll('BD:ColoredText');
|
Patcher.unpatchAll('BD:ColoredText');
|
||||||
|
this.intensitySetting.off('setting-updated', this._intensityUpdated);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -129,6 +129,24 @@
|
||||||
"value": false
|
"value": false
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "advanced",
|
||||||
|
"name": "Advanced",
|
||||||
|
"type": "drawer",
|
||||||
|
"settings": [
|
||||||
|
{
|
||||||
|
"id": "colored-text-intensity",
|
||||||
|
"type": "slider",
|
||||||
|
"text": "Colored Text Intensity",
|
||||||
|
"hint": "Intensity of the colored text setting.",
|
||||||
|
"value": 100,
|
||||||
|
"min": 0,
|
||||||
|
"max": 100,
|
||||||
|
"step": 1,
|
||||||
|
"unit": "%"
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue