Merge branch 'settings-color-selector' of git://github.com/james-geiger/BookStack into james-geiger-settings-color-selector

This commit is contained in:
Dan Brown 2019-12-07 20:36:39 +00:00
commit 615a050856
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
7 changed files with 132 additions and 6 deletions

View File

@ -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,

View File

@ -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,

View File

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

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;

View File

@ -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',

View File

@ -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>

View File

@ -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>