mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-27 20:51:57 +00:00
Merge branch 'settings-color-selector' of git://github.com/james-geiger/BookStack into james-geiger-settings-color-selector
This commit is contained in:
commit
615a050856
@ -16,6 +16,11 @@ return [
|
|||||||
'app-editor' => 'wysiwyg',
|
'app-editor' => 'wysiwyg',
|
||||||
'app-color' => '#206ea7',
|
'app-color' => '#206ea7',
|
||||||
'app-color-light' => 'rgba(32,110,167,0.15)',
|
'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,
|
'app-custom-head' => false,
|
||||||
'registration-enabled' => false,
|
'registration-enabled' => false,
|
||||||
|
|
||||||
|
@ -26,6 +26,7 @@ import permissionsTable from "./permissions-table";
|
|||||||
import customCheckbox from "./custom-checkbox";
|
import customCheckbox from "./custom-checkbox";
|
||||||
import bookSort from "./book-sort";
|
import bookSort from "./book-sort";
|
||||||
import settingAppColorPicker from "./setting-app-color-picker";
|
import settingAppColorPicker from "./setting-app-color-picker";
|
||||||
|
import settingColorPicker from "./setting-color-picker";
|
||||||
import entityPermissionsEditor from "./entity-permissions-editor";
|
import entityPermissionsEditor from "./entity-permissions-editor";
|
||||||
import templateManager from "./template-manager";
|
import templateManager from "./template-manager";
|
||||||
import newUserPassword from "./new-user-password";
|
import newUserPassword from "./new-user-password";
|
||||||
@ -59,6 +60,7 @@ const componentMapping = {
|
|||||||
'custom-checkbox': customCheckbox,
|
'custom-checkbox': customCheckbox,
|
||||||
'book-sort': bookSort,
|
'book-sort': bookSort,
|
||||||
'setting-app-color-picker': settingAppColorPicker,
|
'setting-app-color-picker': settingAppColorPicker,
|
||||||
|
'setting-color-picker': settingColorPicker,
|
||||||
'entity-permissions-editor': entityPermissionsEditor,
|
'entity-permissions-editor': entityPermissionsEditor,
|
||||||
'template-manager': templateManager,
|
'template-manager': templateManager,
|
||||||
'new-user-password': newUserPassword,
|
'new-user-password': newUserPassword,
|
||||||
|
@ -6,11 +6,16 @@ class SettingAppColorPicker {
|
|||||||
this.colorInput = elem.querySelector('input[type=color]');
|
this.colorInput = elem.querySelector('input[type=color]');
|
||||||
this.lightColorInput = elem.querySelector('input[name="setting-app-color-light"]');
|
this.lightColorInput = elem.querySelector('input[name="setting-app-color-light"]');
|
||||||
this.resetButton = elem.querySelector('[setting-app-color-picker-reset]');
|
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('change', this.updateColor.bind(this));
|
||||||
this.colorInput.addEventListener('input', this.updateColor.bind(this));
|
this.colorInput.addEventListener('input', this.updateColor.bind(this));
|
||||||
this.resetButton.addEventListener('click', event => {
|
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();
|
this.updateColor();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -53,4 +58,4 @@ class SettingAppColorPicker {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default SettingAppColorPicker;
|
export default SettingAppColorPicker;
|
||||||
|
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' => 'Application Logo',
|
||||||
'app_logo_desc' => 'This image should be 43px in height. <br>Large images will be scaled down.',
|
'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' => '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' => '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_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',
|
'app_homepage_select' => 'Select a page',
|
||||||
@ -41,6 +41,19 @@ return [
|
|||||||
'app_disable_comments_toggle' => 'Disable comments',
|
'app_disable_comments_toggle' => 'Disable comments',
|
||||||
'app_disable_comments_desc' => 'Disables comments across all pages in the application. <br> Existing comments are not shown.',
|
'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
|
// Registration Settings
|
||||||
'reg_settings' => 'Registration',
|
'reg_settings' => 'Registration',
|
||||||
'reg_enable' => 'Enable Registration',
|
'reg_enable' => 'Enable Registration',
|
||||||
|
@ -2,5 +2,10 @@
|
|||||||
:root {
|
:root {
|
||||||
--color-primary: {{ setting('app-color') }};
|
--color-primary: {{ setting('app-color') }};
|
||||||
--color-primary-light: {{ setting('app-color-light') }};
|
--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>
|
</style>
|
||||||
|
@ -130,19 +130,97 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Primary Color -->
|
||||||
<div class="grid half gap-xl">
|
<div class="grid half gap-xl">
|
||||||
<div>
|
<div>
|
||||||
<label class="setting-list-label">{{ trans('settings.app_primary_color') }}</label>
|
<label class="setting-list-label">{{ trans('settings.app_primary_color') }}</label>
|
||||||
<p class="small">{!! trans('settings.app_primary_color_desc') !!}</p>
|
<p class="small">{!! trans('settings.app_primary_color_desc') !!}</p>
|
||||||
</div>
|
</div>
|
||||||
<div setting-app-color-picker class="text-m-right">
|
<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">
|
<input type="hidden" value="{{ setting('app-color-light') }}" name="setting-app-color-light" id="setting-app-color-light">
|
||||||
<br>
|
<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>
|
<button type="button" class="text-button text-muted mt-s mx-s" setting-app-color-picker-reset>{{ trans('common.reset') }}</button>
|
||||||
</div>
|
</div>
|
||||||
</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 homepage-control id="homepage-control" class="grid half gap-xl">
|
||||||
<div>
|
<div>
|
||||||
<label for="setting-app-homepage" class="setting-list-label">{{ trans('settings.app_homepage') }}</label>
|
<label for="setting-app-homepage" class="setting-list-label">{{ trans('settings.app_homepage') }}</label>
|
||||||
@ -246,4 +324,4 @@
|
|||||||
|
|
||||||
@include('components.image-manager', ['imageType' => 'system'])
|
@include('components.image-manager', ['imageType' => 'system'])
|
||||||
@include('components.entity-selector-popup', ['entityTypes' => 'page'])
|
@include('components.entity-selector-popup', ['entityTypes' => 'page'])
|
||||||
@stop
|
@stop
|
||||||
|
Loading…
Reference in New Issue
Block a user