mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 20:22:18 +00:00
added additional color settings into UI
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:
parent
ae19658b50
commit
e6fe299c4f
@ -16,6 +16,11 @@ return [
|
||||
'app-editor' => 'wysiwyg',
|
||||
'app-color' => '#206ea7',
|
||||
'app-color-light' => 'rgba(32,110,167,0.15)',
|
||||
'bookshelf-color' => '#a94747',
|
||||
'book-color' => '#077b70',
|
||||
'chapter-color' => '#af4d0d',
|
||||
'page-color' => '#206ea7',
|
||||
'page-draft-color' => '#7e50b1',
|
||||
'app-custom-head' => false,
|
||||
'registration-enabled' => false,
|
||||
|
||||
|
@ -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,
|
||||
|
@ -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();
|
||||
});
|
||||
}
|
||||
|
18
resources/js/components/setting-color-picker.js
Normal file
18
resources/js/components/setting-color-picker.js
Normal 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;
|
@ -33,7 +33,7 @@ return [
|
||||
'app_logo' => 'Application Logo',
|
||||
'app_logo_desc' => 'This image should be 43px in height. <br>Large images will be scaled down.',
|
||||
'app_primary_color' => 'Application Primary Color',
|
||||
'app_primary_color_desc' => 'This should be a hex value. <br>Leave empty to reset to the default color.',
|
||||
'app_primary_color_desc' => 'Sets the primary color for the application including the banner, buttons, and links.',
|
||||
'app_homepage' => 'Application Homepage',
|
||||
'app_homepage_desc' => 'Select a view to show on the homepage instead of the default view. Page permissions are ignored for selected pages.',
|
||||
'app_homepage_select' => 'Select a page',
|
||||
@ -41,6 +41,19 @@ return [
|
||||
'app_disable_comments_toggle' => 'Disable comments',
|
||||
'app_disable_comments_desc' => 'Disables comments across all pages in the application. <br> Existing comments are not shown.',
|
||||
|
||||
// Color settings
|
||||
'bookshelf_color' => 'Shelf Color',
|
||||
'bookshelf_color_desc' => 'Sets the color indicator for shelves.',
|
||||
'book_color' => 'Book Color',
|
||||
'book_color_desc' => 'Sets the color indicator for books.',
|
||||
'chapter_color' => 'Chapter Color',
|
||||
'chapter_color_desc' => 'Sets the color indicator for chapters.',
|
||||
'page_color' => 'Page Color',
|
||||
'page_color_desc' => 'Sets the color indicator for pages.',
|
||||
'page_draft_color' => 'Page Draft Color',
|
||||
'page_draft_color_desc' => 'Sets the color indicator for page drafts.',
|
||||
|
||||
|
||||
// Registration Settings
|
||||
'reg_settings' => 'Registration',
|
||||
'reg_enable' => 'Enable Registration',
|
||||
|
@ -2,5 +2,10 @@
|
||||
:root {
|
||||
--color-primary: {{ setting('app-color') }};
|
||||
--color-primary-light: {{ setting('app-color-light') }};
|
||||
--color-bookshelf: {{ setting('bookshelf-color')}};
|
||||
--color-book: {{ setting('book-color')}};
|
||||
--color-chapter: {{ setting('chapter-color')}};
|
||||
--color-page: {{ setting('page-color')}};
|
||||
--color-page-draft: {{ setting('page-draft-color')}};
|
||||
}
|
||||
</style>
|
@ -130,19 +130,97 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Primary Color -->
|
||||
<div class="grid half gap-xl">
|
||||
<div>
|
||||
<label class="setting-list-label">{{ trans('settings.app_primary_color') }}</label>
|
||||
<p class="small">{!! trans('settings.app_primary_color_desc') !!}</p>
|
||||
</div>
|
||||
<div setting-app-color-picker class="text-m-right">
|
||||
<input type="color" value="{{ setting('app-color') }}" name="setting-app-color" id="setting-app-color" placeholder="#206ea7">
|
||||
<input type="color" data-default="#206ea7" data-current="{{ setting('app-color') }}" value="{{ setting('app-color') }}" name="setting-app-color" id="setting-app-color" placeholder="#206ea7">
|
||||
<input type="hidden" value="{{ setting('app-color-light') }}" name="setting-app-color-light" id="setting-app-color-light">
|
||||
<br>
|
||||
<button type="button" class="text-button text-muted mt-s mx-s" setting-app-color-picker-default>{{ trans('common.default') }}</button>
|
||||
<span class="sep">|</span>
|
||||
<button type="button" class="text-button text-muted mt-s mx-s" setting-app-color-picker-reset>{{ trans('common.reset') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shelf Color -->
|
||||
<div class="grid half gap-xl">
|
||||
<div>
|
||||
<label class="setting-list-label">{{ trans('settings.bookshelf_color') }}</label>
|
||||
<p class="small">{!! trans('settings.bookshelf_color_desc') !!}</p>
|
||||
</div>
|
||||
<div setting-color-picker class="text-m-right">
|
||||
<input type="color" data-default="#a94747" data-current="{{ setting('bookshelf-color') }}" value="{{ setting('bookshelf-color') }}" name="setting-bookshelf-color" id="setting-bookshelf-color" placeholder="#a94747">
|
||||
<br>
|
||||
<button type="button" class="text-button text-muted mt-s mx-s" setting-color-picker-default>{{ trans('common.default') }}</button>
|
||||
<span class="sep">|</span>
|
||||
<button type="button" class="text-button text-muted mt-s mx-s" setting-color-picker-reset>{{ trans('common.reset') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Book Color -->
|
||||
<div class="grid half gap-xl">
|
||||
<div>
|
||||
<label class="setting-list-label">{{ trans('settings.book_color') }}</label>
|
||||
<p class="small">{!! trans('settings.book_color_desc') !!}</p>
|
||||
</div>
|
||||
<div setting-color-picker class="text-m-right">
|
||||
<input type="color" data-default="#077b70" data-current="{{ setting('book-color') }}" value="{{ setting('book-color') }}" name="setting-book-color" id="setting-book-color" placeholder="#077b70">
|
||||
<br>
|
||||
<button type="button" class="text-button text-muted mt-s mx-s" setting-color-picker-default>{{ trans('common.default') }}</button>
|
||||
<span class="sep">|</span>
|
||||
<button type="button" class="text-button text-muted mt-s mx-s" setting-color-picker-reset>{{ trans('common.reset') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chapter Color -->
|
||||
<div class="grid half gap-xl">
|
||||
<div>
|
||||
<label class="setting-list-label">{{ trans('settings.chapter_color') }}</label>
|
||||
<p class="small">{!! trans('settings.chapter_color_desc') !!}</p>
|
||||
</div>
|
||||
<div setting-color-picker class="text-m-right">
|
||||
<input type="color" data-default="#af4d0d" data-current="{{ setting('chapter-color') }}" value="{{ setting('chapter-color') }}" name="setting-chapter-color" id="setting-chapter-color" placeholder="#af4d0d">
|
||||
<br>
|
||||
<button type="button" class="text-button text-muted mt-s mx-s" setting-color-picker-default>{{ trans('common.default') }}</button>
|
||||
<span class="sep">|</span>
|
||||
<button type="button" class="text-button text-muted mt-s mx-s" setting-color-picker-reset>{{ trans('common.reset') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page Color -->
|
||||
<div class="grid half gap-xl">
|
||||
<div>
|
||||
<label class="setting-list-label">{{ trans('settings.page_color') }}</label>
|
||||
<p class="small">{!! trans('settings.page_color_desc') !!}</p>
|
||||
</div>
|
||||
<div setting-color-picker class="text-m-right">
|
||||
<input type="color" data-default="#206ea7" data-current="{{ setting('page-color') }}" value="{{ setting('page-color') }}" name="setting-page-color" id="setting-page-color" placeholder="#206ea7">
|
||||
<br>
|
||||
<button type="button" class="text-button text-muted mt-s mx-s" setting-color-picker-default>{{ trans('common.default') }}</button>
|
||||
<span class="sep">|</span>
|
||||
<button type="button" class="text-button text-muted mt-s mx-s" setting-color-picker-reset>{{ trans('common.reset') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page Draft Color -->
|
||||
<div class="grid half gap-xl">
|
||||
<div>
|
||||
<label class="setting-list-label">{{ trans('settings.page_draft_color') }}</label>
|
||||
<p class="small">{!! trans('settings.page_draft_color_desc') !!}</p>
|
||||
</div>
|
||||
<div setting-color-picker class="text-m-right">
|
||||
<input type="color" data-default="#7e50b1" data-current="{{ setting('page-draft-color') }}" value="{{ setting('page-draft-color') }}" name="setting-page-draft-color" id="setting-page-draft-color" placeholder="#7e50b1">
|
||||
<br>
|
||||
<button type="button" class="text-button text-muted mt-s mx-s" setting-color-picker-default>{{ trans('common.default') }}</button>
|
||||
<span class="sep">|</span>
|
||||
<button type="button" class="text-button text-muted mt-s mx-s" setting-color-picker-reset>{{ trans('common.reset') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div homepage-control id="homepage-control" class="grid half gap-xl">
|
||||
<div>
|
||||
<label for="setting-app-homepage" class="setting-list-label">{{ trans('settings.app_homepage') }}</label>
|
||||
|
Loading…
Reference in New Issue
Block a user