cerebrate-project
/
cerebrate
mirror of https://github.com/cerebrate-project/cerebrate
1
0
Fork 0
Code Issues Releases Wiki Activity

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

pull/72/head
mokaddem 2021-09-28 09:23:02 +02:00
parent de8ee047f9
commit 20a7903573
11 changed files with 2847 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
templates/Instance/settings.php
View File

@ -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 $saveButton = $inputGroup.find('button.btn-save-setting')
const $btnSettingAction = $inputGroup.find('.btn-setting-action')
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 $saveButton = $inputGroup.find('button.btn-save-setting')
const $btnSettingAction = $inputGroup.find('.btn-setting-action')
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;
}

22
templates/element/Settings/fieldGroup.php
View File

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

2
templates/layout/default.php
View File

@ -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') ?>

207
webroot/css/bootstrap-additional.css
View File

@ -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%);
}

72
webroot/css/main.css
View File

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

2633
webroot/css/themes/bootstrap-additional.css Normal file
View File

File diff suppressed because it is too large Load Diff

8
webroot/js/bootstrap-helper.js
View File

@ -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() {

144
webroot/theme/scss/bootstrap-additional.scss Normal file
View File

@ -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%);
}

4
webroot/theme/scss/mixins/_callout.scss Normal file
View File

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

32
webroot/theme/scss/mixins/_forms-severity.scss Normal file
View File

@ -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);
}
}

10
webroot/theme/scss/mixins/_toast.scss Normal file
View File

@ -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%);
}
}