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.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.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));
|
||||||
|
|
|
||||||
|
|
@ -42,17 +42,13 @@ return [
|
||||||
'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
|
// 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' => 'Shelf Color',
|
||||||
'bookshelf_color_desc' => 'Sets the color indicator for shelves.',
|
|
||||||
'book_color' => 'Book Color',
|
'book_color' => 'Book Color',
|
||||||
'book_color_desc' => 'Sets the color indicator for books.',
|
|
||||||
'chapter_color' => 'Chapter Color',
|
'chapter_color' => 'Chapter Color',
|
||||||
'chapter_color_desc' => 'Sets the color indicator for chapters.',
|
|
||||||
'page_color' => 'Page Color',
|
'page_color' => 'Page Color',
|
||||||
'page_color_desc' => 'Sets the color indicator for pages.',
|
|
||||||
'page_draft_color' => 'Page Draft Color',
|
'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',
|
||||||
|
|
|
||||||
|
|
@ -40,6 +40,11 @@
|
||||||
fill: #575757 !important;
|
fill: #575757 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-dark {
|
||||||
|
color: #222 !important;
|
||||||
|
fill: #222 !important;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Entity text colors
|
* Entity text colors
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -172,6 +172,11 @@ input[type=date] {
|
||||||
|
|
||||||
input[type=color] {
|
input[type=color] {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
|
&.small {
|
||||||
|
height: 42px;
|
||||||
|
width: 60px;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle-switch {
|
.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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Shelf Color -->
|
<!-- Entity Color -->
|
||||||
<div class="grid half gap-xl">
|
<div class="pb-l">
|
||||||
<div>
|
<div>
|
||||||
<label class="setting-list-label">{{ trans('settings.bookshelf_color') }}</label>
|
<label class="setting-list-label">{{ trans('settings.content_colors') }}</label>
|
||||||
<p class="small">{!! trans('settings.bookshelf_color_desc') !!}</p>
|
<p class="small">{!! trans('settings.content_colors_desc') !!}</p>
|
||||||
</div>
|
</div>
|
||||||
<div setting-color-picker class="text-m-right">
|
<div class="grid half pt-m">
|
||||||
<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">
|
<div>
|
||||||
<br>
|
@include('components.setting-entity-color-picker', ['type' => 'bookshelf'])
|
||||||
<button type="button" class="text-button text-muted mt-s mx-s" setting-color-picker-default>{{ trans('common.default') }}</button>
|
@include('components.setting-entity-color-picker', ['type' => 'book'])
|
||||||
<span class="sep">|</span>
|
@include('components.setting-entity-color-picker', ['type' => 'chapter'])
|
||||||
<button type="button" class="text-button text-muted mt-s mx-s" setting-color-picker-reset>{{ trans('common.reset') }}</button>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
</div>
|
@include('components.setting-entity-color-picker', ['type' => 'page'])
|
||||||
|
@include('components.setting-entity-color-picker', ['type' => 'page-draft'])
|
||||||
<!-- Book Color -->
|
</div>
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue