From 1d0b657c8329ce3d96409162c4c48b9e1bd84fd4 Mon Sep 17 00:00:00 2001 From: Simon Vieille Date: Wed, 25 Oct 2023 19:12:02 +0200 Subject: [PATCH 1/5] add sass classes to mange with of elements fix the aspect of the actions's column in the crud add background in the modal header change vavigation pills colors --- src/core/Resources/assets/css/admin.scss | 46 +++++++++++++++++-- .../views/admin/crud/index.html.twig | 2 +- 2 files changed, 44 insertions(+), 4 deletions(-) diff --git a/src/core/Resources/assets/css/admin.scss b/src/core/Resources/assets/css/admin.scss index 2d72e22..01f2aa0 100644 --- a/src/core/Resources/assets/css/admin.scss +++ b/src/core/Resources/assets/css/admin.scss @@ -12,6 +12,16 @@ $pagination-active-bg: #343a40 !default; $sidebar-width: 260px !default; +$input-border-color: map-get($theme-colors, 'dark-blue'); +$input-btn-focus-color: $input-border-color; + +$component-active-color: map-get($theme-colors, 'dark-blue'); + +$nav-tabs-link-active-bg: map-get($theme-colors, 'dark-blue'); +$nav-pills-link-active-bg: map-get($theme-colors, 'dark-blue'); +$nav-tabs-link-active-color: lighten(map-get($theme-colors, 'dark-blue'), 100%); +$nav-pills-link-active-color: lighten(map-get($theme-colors, 'dark-blue'), 100%); + @import "~choices.js/src/styles/choices.scss"; @import "~bootstrap/scss/bootstrap.scss"; @import "~@fortawesome/fontawesome-free/css/all.css"; @@ -19,9 +29,29 @@ $sidebar-width: 260px !default; @import '~grapesjs/dist/css/grapes.min.css'; @import '~grapesjs-component-code-editor/dist/grapesjs-component-code-editor.min.css'; -@for $i from 1 through 100 { - .miw-#{$i*5} { - min-width: $i * 5px; +@for $i from 1 through 400 { + .miw-#{$i}, .min-width-#{$i} { + min-width: #{$i}px; + } + + .min-width-#{$i}p { + min-width: #{$i}#{"%"}; + } + + .maw-#{$i}, .max-width-#{$i} { + max-width: #{$i}px; + } + + .max-width-#{$i}p { + max-width: #{$i}#{"%"}; + } + + .width-#{$i} { + width: #{$i}px; + } + + .width-#{$i}p { + width: #{$i}#{"%"}; } } @@ -110,6 +140,7 @@ body { .table .thead-light { a, th { color: map-get($theme-colors, 'dark-blue'); + background: lighten(map-get($theme-colors, 'dark-blue'), 80%); } } @@ -629,6 +660,15 @@ form { .modal { z-index: 3000; + + &-header { + background: map-get($theme-colors, 'dark-blue'); + color: lighten(map-get($theme-colors, 'dark-blue'), 100%); + } + + .close { + color: lighten(map-get($theme-colors, 'dark-blue'), 100%); + } } .modal-dialog-large { diff --git a/src/core/Resources/views/admin/crud/index.html.twig b/src/core/Resources/views/admin/crud/index.html.twig index d8e17f9..e4e3a6d 100644 --- a/src/core/Resources/views/admin/crud/index.html.twig +++ b/src/core/Resources/views/admin/crud/index.html.twig @@ -144,7 +144,7 @@ {% endblock %} {% endfor %} {% if configuration.showActions %} - + {{ 'Actions'|trans }} {% endif %} From b89e036c49f6705503c2fca3927922e771f4e4e2 Mon Sep 17 00:00:00 2001 From: Simon Vieille Date: Wed, 25 Oct 2023 19:21:53 +0200 Subject: [PATCH 2/5] change border colors of inputs when focused --- src/core/Resources/assets/css/admin.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/core/Resources/assets/css/admin.scss b/src/core/Resources/assets/css/admin.scss index 01f2aa0..09122d4 100644 --- a/src/core/Resources/assets/css/admin.scss +++ b/src/core/Resources/assets/css/admin.scss @@ -21,6 +21,7 @@ $nav-tabs-link-active-bg: map-get($theme-colors, 'dark-blue'); $nav-pills-link-active-bg: map-get($theme-colors, 'dark-blue'); $nav-tabs-link-active-color: lighten(map-get($theme-colors, 'dark-blue'), 100%); $nav-pills-link-active-color: lighten(map-get($theme-colors, 'dark-blue'), 100%); +$input-focus-border-color: lighten(map-get($theme-colors, 'dark-blue'), 80%); @import "~choices.js/src/styles/choices.scss"; @import "~bootstrap/scss/bootstrap.scss"; From 1463f43298dcfbb4e864f24a58dedb0267e4ccdf Mon Sep 17 00:00:00 2001 From: Simon Vieille Date: Wed, 25 Oct 2023 19:22:56 +0200 Subject: [PATCH 3/5] update changelog --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index fbee69b..1a9710a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,14 +4,19 @@ * allow to define templates show before and after a murph collection item * add global batch actions * add constraint `Length` in forms +* add sass classes to mange with of elements +* add background in the modal header ### Changed * refactor services using constructor property promotions * remove twig in the mail notifier service +* change pills colors +* change border colors of inputs when focused ### Fixed * fix regression on crud sorting * fix test in RepositoryQuery::addForcedFilterHandler * remove parameter $option on CrudConfiguration::setForm and fix CrudController make template +* fix the aspect of the actions's column in the crud ## [v1.22.0] 2023-09-28 ### Added From 8713b401f95142007742b2c52070c63260f9affa Mon Sep 17 00:00:00 2001 From: Simon Vieille Date: Wed, 25 Oct 2023 19:36:10 +0200 Subject: [PATCH 4/5] rollback modal changes --- CHANGELOG.md | 1 - src/core/Resources/assets/css/admin.scss | 9 --------- 2 files changed, 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1a9710a..970c101 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,6 @@ * add global batch actions * add constraint `Length` in forms * add sass classes to mange with of elements -* add background in the modal header ### Changed * refactor services using constructor property promotions * remove twig in the mail notifier service diff --git a/src/core/Resources/assets/css/admin.scss b/src/core/Resources/assets/css/admin.scss index 09122d4..b4ac473 100644 --- a/src/core/Resources/assets/css/admin.scss +++ b/src/core/Resources/assets/css/admin.scss @@ -661,15 +661,6 @@ form { .modal { z-index: 3000; - - &-header { - background: map-get($theme-colors, 'dark-blue'); - color: lighten(map-get($theme-colors, 'dark-blue'), 100%); - } - - .close { - color: lighten(map-get($theme-colors, 'dark-blue'), 100%); - } } .modal-dialog-large { From 498c71081dfeb811a9676a18c21c499ae185548a Mon Sep 17 00:00:00 2001 From: Simon Vieille Date: Wed, 25 Oct 2023 19:59:28 +0200 Subject: [PATCH 5/5] add red * on required label --- src/core/Entity/Site/Navigation.php | 2 +- src/core/Resources/assets/css/admin.scss | 10 ++++ .../form/bootstrap_4_form_theme.html.twig | 48 +++++++++++++++++++ 3 files changed, 59 insertions(+), 1 deletion(-) diff --git a/src/core/Entity/Site/Navigation.php b/src/core/Entity/Site/Navigation.php index 679ec3f..d538df1 100644 --- a/src/core/Entity/Site/Navigation.php +++ b/src/core/Entity/Site/Navigation.php @@ -67,7 +67,7 @@ class Navigation implements EntityInterface return $this->label; } - public function setLabel(string $label): self + public function setLabel(?string $label): self { $this->label = $label; diff --git a/src/core/Resources/assets/css/admin.scss b/src/core/Resources/assets/css/admin.scss index b4ac473..e6ac634 100644 --- a/src/core/Resources/assets/css/admin.scss +++ b/src/core/Resources/assets/css/admin.scss @@ -704,6 +704,16 @@ form { } } +label.required::after { + content: '*'; + margin-left: 3px; + color: #b41215; +} + +.invalid-feedback { + margin-top: -3px; +} + .gjs-editor-cont { border-radius: 10px; overflow: hidden !important; diff --git a/src/core/Resources/views/form/bootstrap_4_form_theme.html.twig b/src/core/Resources/views/form/bootstrap_4_form_theme.html.twig index 66d1862..05895ce 100644 --- a/src/core/Resources/views/form/bootstrap_4_form_theme.html.twig +++ b/src/core/Resources/views/form/bootstrap_4_form_theme.html.twig @@ -254,3 +254,51 @@ {{- form_help(form) -}} {%- endblock form_row %} + + +{% block form_label -%} + {% if label is not same as(false) -%} + {%- if compound is defined and compound -%} + {%- set element = 'legend' -%} + {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label')|trim}) -%} + {%- else -%} + {%- set label_attr = label_attr|merge({for: id}) -%} + {%- endif -%} + {% if required -%} + {% set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' required')|trim}) %} + {%- endif -%} + {% if label is empty -%} + {%- if label_format is not empty -%} + {% set label = label_format|replace({ + '%name%': name, + '%id%': id, + }) %} + {%- else -%} + {% set label = name|humanize %} + {%- endif -%} + {%- endif -%} + <{{ element|default('label') }}{% if label_attr %}{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}{% endif %}> + {%- if translation_domain is same as(false) -%} + {%- if label_html is same as(false) -%} + {{- label -}} + {%- else -%} + {{- label|raw -}} + {%- endif -%} + {%- else -%} + {%- if label_html is same as(false) -%} + {{- label|trans(label_translation_parameters, translation_domain) -}} + {%- else -%} + {{- label|trans(label_translation_parameters, translation_domain)|raw -}} + {%- endif -%} + {%- endif -%} + + {% block form_label_errors %}{{- form_errors(form) -}}{% endblock form_label_errors %} + {%- else -%} + {%- if errors|length > 0 -%} +
+ {{- form_errors(form) -}} +
+ {%- endif -%} + {%- endif -%} +{%- endblock form_label %} +