diff --git a/app/Config/setting-defaults.php b/app/Config/setting-defaults.php index c6080df1d..d84c0c264 100644 --- a/app/Config/setting-defaults.php +++ b/app/Config/setting-defaults.php @@ -16,6 +16,11 @@ return [ 'app-editor' => 'wysiwyg', 'app-color' => '#206ea7', '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, 'registration-enabled' => false, diff --git a/resources/js/components/index.js b/resources/js/components/index.js index 14cf08ae2..bbe059898 100644 --- a/resources/js/components/index.js +++ b/resources/js/components/index.js @@ -26,6 +26,7 @@ import permissionsTable from "./permissions-table"; import customCheckbox from "./custom-checkbox"; import bookSort from "./book-sort"; import settingAppColorPicker from "./setting-app-color-picker"; +import settingColorPicker from "./setting-color-picker"; import entityPermissionsEditor from "./entity-permissions-editor"; import templateManager from "./template-manager"; import newUserPassword from "./new-user-password"; @@ -59,6 +60,7 @@ const componentMapping = { 'custom-checkbox': customCheckbox, 'book-sort': bookSort, 'setting-app-color-picker': settingAppColorPicker, + 'setting-color-picker': settingColorPicker, 'entity-permissions-editor': entityPermissionsEditor, 'template-manager': templateManager, 'new-user-password': newUserPassword, diff --git a/resources/js/components/setting-app-color-picker.js b/resources/js/components/setting-app-color-picker.js index 6c0c0b31d..02512e109 100644 --- a/resources/js/components/setting-app-color-picker.js +++ b/resources/js/components/setting-app-color-picker.js @@ -6,11 +6,16 @@ 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.colorInput.addEventListener('change', this.updateColor.bind(this)); this.colorInput.addEventListener('input', this.updateColor.bind(this)); 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(); }); } @@ -53,4 +58,4 @@ class SettingAppColorPicker { } -export default SettingAppColorPicker; \ No newline at end of file +export default SettingAppColorPicker; diff --git a/resources/js/components/setting-color-picker.js b/resources/js/components/setting-color-picker.js new file mode 100644 index 000000000..4d8ce0f93 --- /dev/null +++ b/resources/js/components/setting-color-picker.js @@ -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; diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php index 026308a34..e709fedfe 100755 --- a/resources/lang/en/settings.php +++ b/resources/lang/en/settings.php @@ -33,7 +33,7 @@ return [ 'app_logo' => 'Application Logo', 'app_logo_desc' => 'This image should be 43px in height.
Large images will be scaled down.', 'app_primary_color' => 'Application Primary Color', - 'app_primary_color_desc' => 'This should be a hex value.
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_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', @@ -41,6 +41,19 @@ return [ 'app_disable_comments_toggle' => 'Disable comments', 'app_disable_comments_desc' => 'Disables comments across all pages in the application.
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 'reg_settings' => 'Registration', 'reg_enable' => 'Enable Registration', diff --git a/resources/views/partials/custom-styles.blade.php b/resources/views/partials/custom-styles.blade.php index 908079082..f81939109 100644 --- a/resources/views/partials/custom-styles.blade.php +++ b/resources/views/partials/custom-styles.blade.php @@ -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')}}; } - \ No newline at end of file + diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php index a52774186..4da1d90b0 100644 --- a/resources/views/settings/index.blade.php +++ b/resources/views/settings/index.blade.php @@ -130,19 +130,97 @@ +

{!! trans('settings.app_primary_color_desc') !!}

- +
+ + |
+ +
+
+ +

{!! trans('settings.bookshelf_color_desc') !!}

+
+
+ +
+ + | + +
+
+ + +
+
+ +

{!! trans('settings.book_color_desc') !!}

+
+
+ +
+ + | + +
+
+ + +
+
+ +

{!! trans('settings.chapter_color_desc') !!}

+
+
+ +
+ + | + +
+
+ + +
+
+ +

{!! trans('settings.page_color_desc') !!}

+
+
+ +
+ + | + +
+
+ + +
+
+ +

{!! trans('settings.page_draft_color_desc') !!}

+
+
+ +
+ + | + +
+
+
@@ -246,4 +324,4 @@ @include('components.image-manager', ['imageType' => 'system']) @include('components.entity-selector-popup', ['entityTypes' => 'page']) -@stop \ No newline at end of file +@stop