mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-11-24 03:42:32 +01:00
Compacted entity color options in settings view
- Also extracted the view code into it's own blade template - Made smaller color input styles
This commit is contained in:
Dan Brown
parent
615a050856
commit
cee4dccc55
@ -6,7 +6,7 @@ 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.defaultButton = elem.querySelector('[setting-app-color-picker-default]');
|
||||
|
||||
this.colorInput.addEventListener('change', this.updateColor.bind(this));
|
||||
this.colorInput.addEventListener('input', this.updateColor.bind(this));
|
||||
|
||||
@ -42,17 +42,13 @@ return [
|
||||
'app_disable_comments_desc' => 'Disables comments across all pages in the application. <br> Existing comments are not shown.',
|
||||
|
||||
// Color settings
|
||||
'content_colors' => 'Content Colors',
|
||||
'content_colors_desc' => 'Sets colors for all elements in the page organisation hierarchy. Choosing colors with a similar brightness to the default colors is recommended for readability.',
|
||||
'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',
|
||||
|
||||
@ -40,6 +40,11 @@
|
||||
fill: #575757 !important;
|
||||
}
|
||||
|
||||
.text-dark {
|
||||
color: #222 !important;
|
||||
fill: #222 !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Entity text colors
|
||||
*/
|
||||
|
||||
@ -172,6 +172,11 @@ input[type=date] {
|
||||
|
||||
input[type=color] {
|
||||
height: 60px;
|
||||
&.small {
|
||||
height: 42px;
|
||||
width: 60px;
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
{{--
|
||||
@type - Name of entity type
|
||||
--}}
|
||||
<div setting-color-picker class="grid no-break half mb-l">
|
||||
<div>
|
||||
<label for="setting-{{ $type }}-color" class="text-dark">{{ trans('settings.'. str_replace('-', '_', $type) .'_color') }}</label>
|
||||
<button type="button" class="text-button text-muted" setting-color-picker-default>{{ trans('common.default') }}</button>
|
||||
<span class="sep mx-xs">|</span>
|
||||
<button type="button" class="text-button text-muted" setting-color-picker-reset>{{ trans('common.reset') }}</button>
|
||||
</div>
|
||||
<div>
|
||||
<input type="color"
|
||||
data-default="{{ config('setting-defaults.'. $type .'-color') }}"
|
||||
data-current="{{ setting($type .'-color') }}"
|
||||
value="{{ setting($type .'-color') }}"
|
||||
name="setting-{{ $type }}-color"
|
||||
id="setting-{{ $type }}-color"
|
||||
placeholder="{{ config('setting-defaults.'. $type .'-color') }}"
|
||||
class="small">
|
||||
</div>
|
||||
</div>
|
||||
@ -146,78 +146,22 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shelf Color -->
|
||||
<div class="grid half gap-xl">
|
||||
<!-- Entity Color -->
|
||||
<div class="pb-l">
|
||||
<div>
|
||||
<label class="setting-list-label">{{ trans('settings.bookshelf_color') }}</label>
|
||||
<p class="small">{!! trans('settings.bookshelf_color_desc') !!}</p>
|
||||
<label class="setting-list-label">{{ trans('settings.content_colors') }}</label>
|
||||
<p class="small">{!! trans('settings.content_colors_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 class="grid half pt-m">
|
||||
<div>
|
||||
@include('components.setting-entity-color-picker', ['type' => 'bookshelf'])
|
||||
@include('components.setting-entity-color-picker', ['type' => 'book'])
|
||||
@include('components.setting-entity-color-picker', ['type' => 'chapter'])
|
||||
</div>
|
||||
<div>
|
||||
@include('components.setting-entity-color-picker', ['type' => 'page'])
|
||||
@include('components.setting-entity-color-picker', ['type' => 'page-draft'])
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user