From 880d4f35dab43378c8b3b8ec6e7bb8e30ea7f07e Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sat, 2 Feb 2019 15:49:57 +0000 Subject: [PATCH] Started the migration of the setting views --- resources/assets/icons/check.svg | 1 + .../assets/js/components/toggle-switch.js | 8 +- resources/assets/sass/_buttons.scss | 7 +- resources/assets/sass/_forms.scss | 88 ++--- resources/assets/sass/_grid.scss | 10 +- resources/assets/sass/_lists.scss | 15 + resources/assets/sass/_tables.scss | 9 +- resources/assets/sass/_text.scss | 4 + resources/lang/en/settings.php | 4 +- .../views/components/toggle-switch.blade.php | 8 +- .../views/form/entity-permissions.blade.php | 2 + .../views/form/restriction-checkbox.blade.php | 2 +- resources/views/settings/index.blade.php | 245 +++++++++----- .../views/settings/maintenance.blade.php | 69 ++-- resources/views/settings/navbar.blade.php | 10 +- .../views/settings/roles/create.blade.php | 19 +- .../views/settings/roles/delete.blade.php | 48 +-- resources/views/settings/roles/edit.blade.php | 21 +- resources/views/settings/roles/form.blade.php | 315 +++++++++--------- .../views/settings/roles/index.blade.php | 52 +-- resources/views/users/create.blade.php | 2 + resources/views/users/edit.blade.php | 2 + resources/views/users/index.blade.php | 114 +++---- resources/views/users/profile.blade.php | 140 ++++---- 24 files changed, 666 insertions(+), 529 deletions(-) create mode 100644 resources/assets/icons/check.svg diff --git a/resources/assets/icons/check.svg b/resources/assets/icons/check.svg new file mode 100644 index 000000000..93607ef7e --- /dev/null +++ b/resources/assets/icons/check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/assets/js/components/toggle-switch.js b/resources/assets/js/components/toggle-switch.js index 957a41642..3be67d5dc 100644 --- a/resources/assets/js/components/toggle-switch.js +++ b/resources/assets/js/components/toggle-switch.js @@ -3,15 +3,15 @@ class ToggleSwitch { constructor(elem) { this.elem = elem; - this.input = elem.querySelector('input'); + this.input = elem.querySelector('input[type=hidden]'); + this.checkbox = elem.querySelector('input[type=checkbox]'); - this.elem.onclick = this.onClick.bind(this); + this.checkbox.addEventListener('change', this.onClick.bind(this)); } onClick(event) { - let checked = this.input.value !== 'true'; + let checked = this.checkbox.checked; this.input.value = checked ? 'true' : 'false'; - checked ? this.elem.classList.add('active') : this.elem.classList.remove('active'); } } diff --git a/resources/assets/sass/_buttons.scss b/resources/assets/sass/_buttons.scss index 2c20c3f41..49615fc9d 100644 --- a/resources/assets/sass/_buttons.scss +++ b/resources/assets/sass/_buttons.scss @@ -31,7 +31,8 @@ $button-border-radius: 2px; font-size: $fs-m; line-height: 1.4em; padding: $-xs*1.3 $-m; - margin: $-xs $-xs $-xs 0; + margin-top: $-xs; + margin-bottom: $-xs; display: inline-block; border: none; font-weight: 400; @@ -62,6 +63,10 @@ $button-border-radius: 2px; } } +.button + .button { + margin-left: $-s; +} + .button.outline { background-color: transparent; color: #888; diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss index d955b7efc..2c612f533 100644 --- a/resources/assets/sass/_forms.scss +++ b/resources/assets/sass/_forms.scss @@ -139,64 +139,68 @@ input[type=date] { } .toggle-switch { - display: inline-block; - background-color: #BBB; - width: 36px; - height: 14px; - border-radius: 7px; - position: relative; - transition: all ease-in-out 120ms; - cursor: pointer; user-select: none; - &:after { - content: ''; - display: block; - position: relative; - left: 0; - margin-top: -3px; - width: 20px; - height: 20px; - border-radius: 50%; - background-color: #fafafa; - border: 1px solid #CCC; - box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); - transition: all ease-in-out 120ms; - } - &.active { - background-color: rgba($positive, 0.4); - &:after { - left: 16px; - background-color: $positive; - border: darken($positive, 20%); + display: inline-grid; + grid-template-columns: (16px + $-s) 1fr; + align-items: center; + margin: $-m 0; + .custom-checkbox { + width: 16px; + height: 16px; + border-radius: 2px; + display: inline-block; + border: 2px solid #999; + overflow: hidden; + fill: #888; + .svg-icon { + width: 100%; + height: 100%; + margin: 0; + bottom: auto; + top: -1.5px; + left: 0; + transition: transform ease-in-out 120ms; + transform: scale(0); + transform-origin: center center; } } -} -.toggle-switch-checkbox { - display: none; -} -input:checked + .toggle-switch { - background-color: rgba($positive, 0.4); - &:after { - left: 16px; - background-color: $positive; - border: darken($positive, 20%); + input[type=checkbox] { + display: none; + } + input[type=checkbox]:checked + .custom-checkbox .svg-icon { + transform: scale(1); + } + .custom-checkbox:hover { + background-color: rgba(0, 0, 0, 0.05); } } .form-group { margin-bottom: $-s; - textarea { - display: block; - width: 100%; - min-height: 64px; +} + +.setting-list > div { + border-bottom: 1px solid #DDD; + padding: $-xl 0; + &:last-child { + border-bottom: none; } } +.setting-list-label { + color: #444; + font-size: 1rem; +} +.setting-list-label + p.small { + margin-bottom: 0; +} .simple-code-input { background-color: #F8F8F8; font-family: monospace; font-size: 12px; min-height: 100px; + display: block; + width: 100%; } .form-group { diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss index dfe02fab1..1bcfefe64 100644 --- a/resources/assets/sass/_grid.scss +++ b/resources/assets/sass/_grid.scss @@ -60,6 +60,9 @@ body.flexbox { &.auto-height { min-height: 0; } + &.fill-width { + width: 100%; + } } .tri-layout-container { @@ -211,7 +214,6 @@ div[class^="col-"] img { &.large-gap { grid-column-gap: $-xl; grid-row-gap: $-xl; - justify-items: start; } } @@ -272,6 +274,12 @@ div[class^="col-"] img { .grid.left-focus, .grid.right-focus { grid-template-columns: 1fr; } + .grid.right-focus.reverse-collapse > *:nth-child(2) { + order: 0; + } + .grid.right-focus.reverse-collapse > *:nth-child(1) { + order: 1; + } } @include smaller-than($s) { diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss index 9bae934d8..3392d831c 100644 --- a/resources/assets/sass/_lists.scss +++ b/resources/assets/sass/_lists.scss @@ -396,3 +396,18 @@ ul.pagination { padding: $-m 0; } +.active-link-list { + a { + display: inline-block; + padding: $-s; + } + a:not(.active) { + color: #444; + fill: #444; + } + a:hover { + background-color: rgba(0, 0, 0, 0.05); + border-radius: 3px; + text-decoration: none; + } +} \ No newline at end of file diff --git a/resources/assets/sass/_tables.scss b/resources/assets/sass/_tables.scss index ec24e2fa6..a1a2fef0a 100644 --- a/resources/assets/sass/_tables.scss +++ b/resources/assets/sass/_tables.scss @@ -19,13 +19,13 @@ table { table.table { width: 100%; - tr { - border-bottom: 1px solid #DDD; + tr td, tr th { + border-bottom: 1px solid rgba(0, 0, 0, 0.05); } th, td { text-align: left; border: none; - padding: $-xs $-xs; + padding: $-s $-s; vertical-align: middle; margin: 0; } @@ -44,6 +44,9 @@ table.table { td.actions { overflow: visible; } + a { + display: inline-block; + } } table.no-style { diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss index 43b3e5898..683c8077a 100644 --- a/resources/assets/sass/_text.scss +++ b/resources/assets/sass/_text.scss @@ -83,6 +83,10 @@ h5, h6 { font-size: 2rem; } +h2.list-heading { + font-size: 1.333rem; +} + /* * Link styling */ diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php index ef947829d..c5dba1dd5 100755 --- a/resources/lang/en/settings.php +++ b/resources/lang/en/settings.php @@ -14,8 +14,8 @@ return [ // App Settings 'app_settings' => 'App Settings', 'app_name' => 'Application name', - 'app_name_desc' => 'This name is shown in the header and any emails.', - 'app_name_header' => 'Show Application name in header?', + 'app_name_desc' => 'This name is shown in the header and in any system-sent emails.', + 'app_name_header' => 'Show name in header', 'app_public_viewing' => 'Allow public viewing?', 'app_secure_images' => 'Enable higher security image uploads?', 'app_secure_images_desc' => 'For performance reasons, all images are public. This option adds a random, hard-to-guess string in front of image urls. Ensure directory indexes are not enabled to prevent easy access.', diff --git a/resources/views/components/toggle-switch.blade.php b/resources/views/components/toggle-switch.blade.php index c5a30a60f..c6d78f1b9 100644 --- a/resources/views/components/toggle-switch.blade.php +++ b/resources/views/components/toggle-switch.blade.php @@ -1,4 +1,6 @@ -
+
\ No newline at end of file + + @icon('check') + {{ $label ?? '' }} {{-- TODO - remove default operataor backup --}} + \ No newline at end of file diff --git a/resources/views/form/entity-permissions.blade.php b/resources/views/form/entity-permissions.blade.php index 9dce0b59e..92af4d592 100644 --- a/resources/views/form/entity-permissions.blade.php +++ b/resources/views/form/entity-permissions.blade.php @@ -8,6 +8,8 @@ @include('form/checkbox', ['name' => 'restricted', 'label' => trans('entities.permissions_enable')]) + {{--TODO - Add global and role "Select All" options--}} + diff --git a/resources/views/form/restriction-checkbox.blade.php b/resources/views/form/restriction-checkbox.blade.php index 5a8662b56..aab5a0729 100644 --- a/resources/views/form/restriction-checkbox.blade.php +++ b/resources/views/form/restriction-checkbox.blade.php @@ -1,4 +1,4 @@ - +{{--TODO - Make custom--}}
{{ trans('common.role') }}