add color intensity option

This commit is contained in:
Zack Rauen 2018-08-21 01:19:43 -04:00
parent c98e4430b1
commit a8c8c017f6
2 changed files with 48 additions and 5 deletions

View File

@ -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);
} }
} }

View File

@ -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": "%"
}
]
} }
] ]
}, },