webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-30 04:23:11 +03:00
Code Activity

added additional color settings into UI

Browse Source 
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:
James Geiger
2019-10-17 13:46:18 -05:00
parent ae19658b50
commit e6fe299c4f
7 changed files with 132 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
resources/views/partials/custom-styles.blade.php
View File

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

82
resources/views/settings/index.blade.php
View File

@ -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>
@ -246,4 +324,4 @@
@include('components.image-manager', ['imageType' => 'system'])
@include('components.entity-selector-popup', ['entityTypes' => 'page'])
@stop
@stop