chg: [instance:settings] Support of BS5 in setting page

templates/Instance/settings.php

@@ -158,13 +158,13 @@ function getResolvableID($sectionName, $panelName=false)
             }
         })
 
-        $('.tab-content .input-group-actions .btn-save-setting').click(function() {
+        $('.tab-content .setting-group .btn-save-setting').click(function() {
             const $input = $(this).closest('.input-group').find('input, select')
             const settingName = $input.data('setting-name')
             const settingValue = $input.val()
             saveSetting(this, $input, settingName, settingValue)
         })
-        $('.tab-content .input-group-actions .btn-reset-setting').click(function() {
+        $('.tab-content .setting-group .btn-reset-setting').click(function() {
             const $btn = $(this)
             const $input = $btn.closest('.input-group').find('input, select')
             let oldValue = settingsFlattened[$input.data('setting-name')].value
@@ -213,34 +213,31 @@ function getResolvableID($sectionName, $panelName=false)
 
     function removeWarnings($input) {
         const $inputGroup = $input.closest('.input-group')
-        const $inputGroupAppend = $inputGroup.find('.input-group-actions')
+        const $btnSettingAction = $inputGroup.find('.btn-setting-action')
-        const $saveButton = $inputGroup.find('button.btn-save-setting')
+        const $saveButton = $('.setting-group button.btn-save-setting')
         $input.removeClass(['is-invalid', 'border-warning', 'border-danger', 'border-info', 'warning', 'info'])
-        $inputGroupAppend.removeClass('d-none')
+        $btnSettingAction.removeClass('d-none')
         if ($input.is('select') && $input.find('option:selected').data('is-empty-option') == 1) {
-            $inputGroupAppend.addClass('d-none') // hide save button if empty selection picked
+            $btnSettingAction.addClass('d-none') // hide save button if empty selection picked
         }
         $inputGroup.parent().find('.invalid-feedback').removeClass('d-block')
     }
 
     function restoreWarnings($input) {
         const $inputGroup = $input.closest('.input-group')
-        const $inputGroupAppend = $inputGroup.find('.input-group-actions')
+        const $btnSettingAction = $inputGroup.find('.btn-setting-action')
-        const $saveButton = $inputGroup.find('button.btn-save-setting')
+        const $saveButton = $('.setting-group button.btn-save-setting')
         const setting = settingsFlattened[$input.data('setting-name')]
         if (setting.error) {
             borderVariant = setting.severity !== undefined ? variantFromSeverity[setting.severity] : 'warning'
             $input.addClass(['is-invalid', `border-${borderVariant}`, borderVariant])
-            if (setting.severity == 'warning') {
-                $input.addClass('warning')
-            }
             $inputGroup.parent().find('.invalid-feedback').addClass('d-block').text(setting.errorMessage)
         } else {
             removeWarnings($input)
         }
         const $callout = $input.closest('.settings-group')
         updateCalloutColors($callout)
-        $inputGroupAppend.addClass('d-none')
+        $btnSettingAction.addClass('d-none')
     }
 
     function updateCalloutColors($callout) {
@@ -285,12 +282,6 @@ function getResolvableID($sectionName, $panelName=false)
     .input-group-actions {
         z-index: 5;
     }
-    a.btn-reset-setting {
-        left: -1.25em;
-    }
-    .custom-select ~ div > a.btn-reset-setting {
-        left: -2.5em;
-    }
     .form-control[type="number"] ~ div > a.btn-reset-setting {
         left: -3em;
     }

templates/element/Settings/fieldGroup.php

@@ -40,18 +40,16 @@
         'settingName' => $settingName,
     ]);
 
-    $inputGroupSave = $this->Bootstrap->genNode('div', [
+    $inputGroupSave = $this->Bootstrap->button([
-        'class' => ['d-none', 'position-relative', 'input-group-actions'],
+        'icon' => 'times',
-    ], implode('', [
+        'variant' => 'secondary',
-            $this->Bootstrap->genNode('a', [
+        'class' => ['btn-setting-action', 'btn-reset-setting', 'd-none'],
-                'class' => ['position-absolute', 'fas fa-times', 'p-abs-center-y', 'text-reset text-decoration-none', 'btn-reset-setting'],
+    ]);
-                'href' => '#',
+    $inputGroupSave .= $this->Bootstrap->button([
-            ]),
+        'text' => __('save'),
-            $this->Bootstrap->genNode('button', [
+        'variant' => 'success',
-                'class' => ['btn', 'btn-success', 'btn-save-setting'],
+        'class' => ['btn-setting-action', 'btn-save-setting', 'd-none'],
-                'type' => 'button',
+    ]);
-            ], __('save')),
-    ]));
     $inputGroup = $this->Bootstrap->genNode('div', [
         'class' => ['input-group'],
     ], implode('', [$input, $inputGroupSave]));

templates/layout/default.php

@@ -61,7 +61,7 @@ $cakeDescription = 'Cerebrate';
     <?= $this->fetch('meta') ?>
     <?= $this->fetch('css') ?>
     <?= $this->fetch('script') ?>
-    <?= $this->Html->css('bootstrap-additional.css') ?>
+    <?= $this->Html->css('themes/bootstrap-additional.css') ?>
 
     <?= $this->Html->script('Tags.tagging') ?>
     <?= $this->Html->css('Tags.tagging') ?>

webroot/css/bootstrap-additional.css

@@ -1,207 +0,0 @@
-/* utils */
-.mw-75 {
-    max-width: 75% !important;
-  }
-.mw-50 {
-    max-width: 50% !important;
-}
-.mw-25 {
-    max-width: 25% !important;
-}
-.mh-75 {
-    max-height: 75% !important;
-}
-.mh-50 {
-    max-height: 50% !important;
-}
-.mh-25 {
-    max-height: 25% !important;
-}
-
-/* Toast */
-.toast {
-    min-width: 250px;
-}
-.toast-primary {
-    color: #004085;
-    background-color: #cce5ff;
-    border-color: #b8daff;
-}
-.toast-primary strong {
-    color: #002752;
-}
-.toast-secondary {
-    color: #383d41;
-    background-color: #e2e3e5;
-    border-color: #d6d8db;
-}
-.toast-secondary strong {
-    color: #202326;
-}
-.toast-success {
-    color: #155724 !important;
-    background-color: #d4edda !important;
-    border-color: #c3e6cb !important;
-}
-.toast-success strong {
-    color: #0b2e13;
-}
-.toast-info {
-    color: #0c5460;
-    background-color: #d1ecf1;
-    border-color: #bee5eb;
-}
-.toast-info strong {
-    color: #062c33;
-}
-.toast-warning {
-    color: #856404;
-    background-color: #fff3cd;
-    border-color: #ffeeba;
-}
-.toast-warning strong {
-    color: #533f03;
-}
-.toast-danger {
-    color: #721c24;
-    background-color: #f8d7da;
-    border-color: #f5c6cb;
-}
-.toast-danger strong {
-    color: #491217;
-}
-.toast-light {
-    color: #818182;
-    background-color: #fefefe;
-    border-color: #fdfdfe;
-}
-.toast-light strong {
-    color: #686868;
-}
-.toast-dark {
-    color: #1b1e21;
-    background-color: #d6d8d9;
-    border-color: #c6c8ca;
-}
-.toast-dark strong {
-    color: #040505;
-}
-
-div.progress-timeline {
-    padding: 0.2em 0.2em 0.5em 0.2em;
-}
-div.progress-timeline ul {
-    position: relative;
-    padding: 0;
-}
-div.progress-timeline li {
-    list-style-type: none;
-    position: relative
-}
-div.progress-timeline li.progress-inactive {
-    opacity: 0.5;
-}
-div.progress-timeline .progress-line {
-    height: 2px;
-    /* background: gray; */
-}
-div.progress-timeline .progress-line.progress-inactive {
-    opacity: 0.5;
-}
-
-.callout {
-    border: 1px solid #00000000;
-        border-left-color: var(--bs-light);
-        border-left-width: 1px;
-    border-left-width: .25rem;
-    border-radius: .25rem;
-}
-.callout-primary {
-    border-left-color: var(--bs-primary);
-}
-.callout-info {
-    border-left-color: var(--bs-info);
-}
-.callout-success {
-    border-left-color: var(--bs-success);
-}
-.callout-warning {
-    border-left-color: var(--bs-warning);
-}
-.callout-danger {
-    border-left-color: var(--bs-danger);
-}
-.callout-dark {
-    border-left-color: var(--bs-dark);
-}
-.callout-light {
-    border-left-color: var(--bs-light);
-}
-
-.form-control.is-invalid.warning {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ffc107' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ffc107' stroke='none'/%3e%3c/svg%3e")
-}
-.form-control.is-invalid.warning:focus {
-    box-shadow: 0 0 0 0.2rem #ffc10740;
-}
-
-.form-control.is-invalid.info {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2317a2b8' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%2317a2b8' stroke='none'/%3e%3c/svg%3e")
-}
-.form-control.is-invalid.info:focus {
-    box-shadow: 0 0 0 0.2rem #17a2b840;
-}
-
-.custom-select.is-invalid.warning {
-    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ffc107' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ffc107' stroke='none'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
-}
-.custom-select.is-invalid.info {
-    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2317a2b8' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%2317a2b8' stroke='none'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
-}
-
-.form-check-input.is-invalid.warning ~ .form-check-label {
-    color: unset;
-}
-.form-check-input.is-invalid.warning ~ .form-check-label::before {
-    border-color: #ffc107;
-}
-.form-check-input.is-invalid.warning:checked ~ .form-check-label::before {
-    background-color: #ffc107;
-}
-.form-check-input.is-invalid.warning:focus:not(:checked) ~ .form-check-label::before {
-    border-color: #ffc107;
-}
-.form-check-input.is-invalid.warning:focus ~ .form-check-label::before {
-    box-shadow: 0 0 0 0.2rem #ffc10740;
-}
-.form-check-input.is-invalid.info ~ .form-check-label {
-    color: unset;
-}
-.form-check-input.is-invalid.info ~ .form-check-label::before {
-    border-color: #17a2b8;
-}
-.form-check-input.is-invalid.info:checked ~ .form-check-label::before {
-    background-color: #17a2b8;
-}
-.form-check-input.is-invalid.info:focus:not(:checked) ~ .form-check-label::before {
-    border-color: #17a2b8;
-}
-.form-check-input.is-invalid.info:focus ~ .form-check-label::before {
-    box-shadow: 0 0 0 0.2rem #17a2b840;
-}
-
-.p-abs-center-y {
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-.p-abs-center-x {
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-.p-abs-center-both {
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
-}

webroot/css/main.css

@@ -21,78 +21,6 @@
     color:black;
 }
 
-/* .sidebar {}
-
-.side-bar-ul {
-    top: 70px;
-    left:0;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.side-bar-ul li {
-    line-height: 40px;
-}
-
-.side-bar-ul .sidebar-header {
-    padding-left: 10px;
-    color: black;
-}
-
-.side-bar-ul .sidebar-element {
-    padding-left: 20px;
-}
-
-.side-bar-ul li a {
-    display: block;
-    text-decoration: none;
-}
-
-.sidebar-header a {
-    color: black;
-}
-
-.sidebar-element a {
-    color: #999999;
-}
-
-.side-bar-ul li a:hover {
-    text-decoration: none;
-    color: #fff;
-}
-
-.side-bar-ul li:hover {
-    background: #007bff;
-}
-
-.side-bar-ul .active {
-    background: #007bff;
-}
-
-.side-bar-ul .active a {
-    color: white !important;
-}
-
-.side-bar-ul li a:active, .side-bar-ul li a:focus {
-    text-decoration: none;
-}
-
-.side-bar-ul>.sidebar-brand {
-    height: 65px;
-    font-size: 18px;
-    line-height: 60px;
-}
-
-.side-bar-ul>.sidebar-brand a {
-    color: #999999;
-}
-
-.side-bar-ul>.sidebar-brand a:hover {
-    color: #fff;
-    background: none;
-} */
-
 @media(min-width:768px) {
     #wrapper {
         padding-left: 0;

webroot/js/bootstrap-helper.js

@@ -353,9 +353,9 @@ class Toaster {
             if (options.title !== false || options.titleHtml !== false) {
                 var $toastHeaderText
                 if (options.titleHtml !== false) {
-                    $toastHeaderText = $('<div class="mr-auto"/>').html(options.titleHtml);
+                    $toastHeaderText = $('<div class="me-auto"/>').html(options.titleHtml);
                 } else {
-                    $toastHeaderText = $('<strong class="mr-auto"/>').text(options.title)
+                    $toastHeaderText = $('<strong class="me-auto"/>').text(options.title)
                 }
                 $toastHeader.append($toastHeaderText)
             }
@@ -369,7 +369,7 @@ class Toaster {
                 $toastHeader.append($toastHeaderMuted)
             }
             if (options.closeButton) {
-                var $closeButton = $('<button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast" aria-label="Close"></button>')
+                var $closeButton = $('<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>')
                     .click(function() {
                         $(this).closest('.toast').data('toastObject').removeToast()
                     })
@@ -531,7 +531,7 @@ class ModalFactory {
         'confirm-danger',
     ]
 
-    static closeButtonHtml = '<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"></button>'
+    static closeButtonHtml = '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>'
 
     /** Create the HTML of the modal and inject it into the DOM */
     makeModal() {

webroot/theme/scss/bootstrap-additional.scss

@@ -0,0 +1,144 @@
+@import "../node_modules/bootstrap/scss/functions";
+@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/mixins";
+@import "../node_modules/bootstrap/scss/utilities";
+
+@import "mixins/callout";
+@import "mixins/toast";
+@import "mixins/forms-severity";
+
+/* Callout */
+.callout {
+    border: 1px solid $gray-200;
+        border-left-color: $gray-200;
+        border-left-width: 1px;
+    border-left-width: .25rem;
+    border-radius: .25rem;
+}
+
+@each $color, $value in $theme-colors {
+    .callout-#{$color} {
+        @include callout-variant($value);
+    }
+}
+
+
+/* Toasts */
+$toast-bg-level:                    -7 !default;
+$toast-border-level:                -6 !default;
+$toast-color-level:                 7 !default;
+
+.toast {
+    min-width: 250px;
+}
+
+@each $color, $value in $theme-colors {
+    .toast-#{$color} {
+        @include toast-variant(theme-color-level($color, $toast-bg-level), theme-color-level($color, $toast-border-level), theme-color-level($color, $toast-color-level));
+    }
+}
+
+/* Progress Timeline */
+.progress-timeline {
+    padding: 0.2em 0.2em 0.5em 0.2em;
+    ul {
+        position: relative;
+        padding: 0;
+    }
+    li {
+        list-style-type: none;
+        position: relative
+    }
+    li.progress-inactive {
+        opacity: 0.5;
+    }
+    .progress-line {
+        height: 2px;
+    }
+    .progress-line.progress-inactive {
+        opacity: 0.5;
+    }
+}
+
+/* Forms severity */
+.form-control.is-invalid {
+    &.info {
+        @include form-control-validation-severity-state(theme-color("info"));
+    }
+    &.warning {
+        @include form-control-validation-severity-state(theme-color("warning"));
+    }
+}
+
+.form-select.is-invalid:not([multiple]):not([size]),
+.form-select.is-invalid:not([multiple])[size="1"]
+.form-select.is-invalid {
+    &.info {
+        @include form-select-validation-severity-state(theme-color("info"));
+    }
+    &.warning {
+        @include form-select-validation-severity-state(theme-color("warning"));
+    }
+}
+
+.form-check-input.is-invalid {
+    &.info {
+        @include form-check-input-validation-severity-state(theme-color("info"));
+    }
+    &.warning {
+        @include form-check-input-validation-severity-state(theme-color("warning"));
+    }
+}
+
+/* Utilities */
+// Use bootstrap's utilities API with something like this
+// $utilities: map-merge(
+//     $utilities,
+//     (
+//         "max-width": map-merge(
+//             map-get($utilities, "max-width"),
+//             (
+//                 values: map-merge(
+//                     map-get(map-get($utilities, "max-width"), "values"),
+//                     (
+//                         25: 25%,
+//                         50: 50%,
+//                         75: 75%,
+//                     ),
+//                 ),
+//             ),
+//         )
+//     )
+// );
+.mw-75 {
+    max-width: 75% !important;
+  }
+.mw-50 {
+    max-width: 50% !important;
+}
+.mw-25 {
+    max-width: 25% !important;
+}
+.mh-75 {
+    max-height: 75% !important;
+}
+.mh-50 {
+    max-height: 50% !important;
+}
+.mh-25 {
+    max-height: 25% !important;
+}
+
+.p-abs-center-y {
+    top: 50%;
+    transform: translateY(-50%);
+}
+.p-abs-center-x {
+    left: 50%;
+    transform: translateX(-50%);
+}
+.p-abs-center-both {
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+}

webroot/theme/scss/mixins/_callout.scss

@@ -0,0 +1,4 @@
+@mixin callout-variant($border) {
+    border-left-color: $border;
+}
+  

webroot/theme/scss/mixins/_forms-severity.scss

@@ -0,0 +1,32 @@
+@mixin form-control-validation-severity-state($color) {
+    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$color}' stroke='none'/></svg>"));
+
+    &:focus {
+        border-color: $color;
+        box-shadow: 0 0 0 $custom-select-focus-width rgba($color, .25);
+    }
+}
+
+@mixin form-select-validation-severity-state($color) {
+    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$color}' stroke='none'/></svg>"));
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+
+    &:focus {
+        box-shadow: 0 0 0 $custom-select-focus-width rgba($color, .25);
+    }
+}
+
+@mixin form-check-input-validation-severity-state($color) {
+    & {
+        border-color: $color;
+    }
+    &:checked {
+        background-color: $color;
+    }
+    & ~ .form-check-label {
+        color: unset;
+    }
+    &:focus {
+        box-shadow: 0 0 0 0.2rem rgba($color, .25);
+    }
+}

webroot/theme/scss/mixins/_toast.scss

@@ -0,0 +1,10 @@
+@mixin toast-variant($background, $border, $color) {
+    color: $color;
+    @include gradient-bg($background);
+    border-color: $border;
+  
+    strong {
+        border-top-color: darken($border, 5%);
+    }
+}
+