From cee4dccc5543a237710ea4d84653b8af1738121a Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sat, 7 Dec 2019 21:23:15 +0000 Subject: [PATCH] Compacted entity color options in settings view - Also extracted the view code into it's own blade template - Made smaller color input styles --- .../js/components/setting-app-color-picker.js | 2 +- resources/lang/en/settings.php | 8 +- resources/sass/_colors.scss | 5 ++ resources/sass/_forms.scss | 5 ++ .../setting-entity-color-picker.blade.php | 21 +++++ resources/views/settings/index.blade.php | 84 ++++--------------- 6 files changed, 48 insertions(+), 77 deletions(-) create mode 100644 resources/views/components/setting-entity-color-picker.blade.php diff --git a/resources/js/components/setting-app-color-picker.js b/resources/js/components/setting-app-color-picker.js index 02512e109..ee894c932 100644 --- a/resources/js/components/setting-app-color-picker.js +++ b/resources/js/components/setting-app-color-picker.js @@ -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)); diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php index efb849077..8255b4cbe 100755 --- a/resources/lang/en/settings.php +++ b/resources/lang/en/settings.php @@ -42,17 +42,13 @@ return [ 'app_disable_comments_desc' => 'Disables comments across all pages in the application.
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', diff --git a/resources/sass/_colors.scss b/resources/sass/_colors.scss index 8623d374a..77f51b324 100644 --- a/resources/sass/_colors.scss +++ b/resources/sass/_colors.scss @@ -40,6 +40,11 @@ fill: #575757 !important; } +.text-dark { + color: #222 !important; + fill: #222 !important; +} + /* * Entity text colors */ diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss index 64308b29e..1e0c908f9 100644 --- a/resources/sass/_forms.scss +++ b/resources/sass/_forms.scss @@ -172,6 +172,11 @@ input[type=date] { input[type=color] { height: 60px; + &.small { + height: 42px; + width: 60px; + padding: 2px; + } } .toggle-switch { diff --git a/resources/views/components/setting-entity-color-picker.blade.php b/resources/views/components/setting-entity-color-picker.blade.php new file mode 100644 index 000000000..fffb4220e --- /dev/null +++ b/resources/views/components/setting-entity-color-picker.blade.php @@ -0,0 +1,21 @@ +{{-- + @type - Name of entity type +--}} +
+
+ + + | + +
+
+ +
+
\ No newline at end of file diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php index 4da1d90b0..1bc454385 100644 --- a/resources/views/settings/index.blade.php +++ b/resources/views/settings/index.blade.php @@ -146,78 +146,22 @@ - -
+ +
- -

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

+ +

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

-
- -
- - | - -
-
- - -
-
- -

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

-
-
- -
- - | - -
-
- - -
-
- -

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

-
-
- -
- - | - -
-
- - -
-
- -

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

-
-
- -
- - | - -
-
- - -
-
- -

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

-
-
- -
- - | - +
+
+ @include('components.setting-entity-color-picker', ['type' => 'bookshelf']) + @include('components.setting-entity-color-picker', ['type' => 'book']) + @include('components.setting-entity-color-picker', ['type' => 'chapter']) +
+
+ @include('components.setting-entity-color-picker', ['type' => 'page']) + @include('components.setting-entity-color-picker', ['type' => 'page-draft']) +