added additional color settings into UI

Adds new options in the customization section of the settings to change the shelf, book, chapter, page, and draft colors.

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,
 

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,

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;
+export default SettingAppColorPicker;

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;

resources/lang/en/settings.php

@@ -33,7 +33,7 @@ return [
     'app_logo' => 'Application Logo',
     '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_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_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. <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
     'reg_settings' => 'Registration',
     'reg_enable' => 'Enable Registration',

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')}};
     }
-</style>
+</style>

resources/views/settings/index.blade.php

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