github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-21 22:36:05 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

added additional color settings into UI

Browse Source 
Adds new options in the customization section of the settings to change the shelf, book, chapter, page, and draft colors.
This commit is contained in:
James Geiger
2019-10-17 13:46:18 -05:00
parent ae19658b50
commit e6fe299c4f
7 changed files with 132 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/index.js
View File

@ -26,6 +26,7 @@ import permissionsTable from "./permissions-table";
import customCheckbox from "./custom-checkbox";
import bookSort from "./book-sort";
import settingAppColorPicker from "./setting-app-color-picker";
import settingColorPicker from "./setting-color-picker";
import entityPermissionsEditor from "./entity-permissions-editor";
import templateManager from "./template-manager";
import newUserPassword from "./new-user-password";
@ -59,6 +60,7 @@ const componentMapping = {
'custom-checkbox': customCheckbox,
'book-sort': bookSort,
'setting-app-color-picker': settingAppColorPicker,
'setting-color-picker': settingColorPicker,
'entity-permissions-editor': entityPermissionsEditor,
'template-manager': templateManager,
'new-user-password': newUserPassword,

9
resources/js/components/setting-app-color-picker.js
View File

@ -6,11 +6,16 @@ class SettingAppColorPicker {
this.colorInput = elem.querySelector('input[type=color]');
this.lightColorInput = elem.querySelector('input[name="setting-app-color-light"]');
this.resetButton = elem.querySelector('[setting-app-color-picker-reset]');
this.defaultButton = elem.querySelector('[setting-app-color-picker-default]')
this.colorInput.addEventListener('change', this.updateColor.bind(this));
this.colorInput.addEventListener('input', this.updateColor.bind(this));
this.resetButton.addEventListener('click', event => {
this.colorInput.value = '#206ea7';
this.colorInput.value = this.colorInput.dataset.current;
this.updateColor();
});
this.defaultButton.addEventListener('click', event => {
this.colorInput.value = this.colorInput.dataset.default;
this.updateColor();
});
}
@ -53,4 +58,4 @@ class SettingAppColorPicker {
}
export default SettingAppColorPicker;
export default SettingAppColorPicker;

18
resources/js/components/setting-color-picker.js Normal file
View File

@ -0,0 +1,18 @@
class SettingColorPicker {
constructor(elem) {
this.elem = elem;
this.colorInput = elem.querySelector('input[type=color]');
this.resetButton = elem.querySelector('[setting-color-picker-reset]');
this.defaultButton = elem.querySelector('[setting-color-picker-default]');
this.resetButton.addEventListener('click', event => {
this.colorInput.value = this.colorInput.dataset.current;
});
this.defaultButton.addEventListener('click', event => {
this.colorInput.value = this.colorInput.dataset.default;
});
}
}
export default SettingColorPicker;