From 4cd6bb42d83d13110273f0561ba356deb8ebf0db Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Tue, 28 Dec 2021 13:19:04 +0100 Subject: [PATCH 1/4] IBX-1802: Update design for location swap and table locations --- .../js/scripts/admin.location.visibility.js | 8 +- .../public/js/scripts/core/toggle.button.js | 5 +- .../public/scss/_content-locations.scss | 22 ++ src/bundle/Resources/public/scss/_forms.scss | 13 ++ src/bundle/Resources/public/scss/ibexa.scss | 1 + .../tab/locations/panel_swap.html.twig | 27 ++- .../admin/content/tab/locations/tab.html.twig | 211 ++++++++++-------- 7 files changed, 174 insertions(+), 113 deletions(-) create mode 100644 src/bundle/Resources/public/scss/_content-locations.scss diff --git a/src/bundle/Resources/public/js/scripts/admin.location.visibility.js b/src/bundle/Resources/public/js/scripts/admin.location.visibility.js index 796a9277eb..5cb3668a62 100644 --- a/src/bundle/Resources/public/js/scripts/admin.location.visibility.js +++ b/src/bundle/Resources/public/js/scripts/admin.location.visibility.js @@ -1,5 +1,5 @@ (function(global, doc, ibexa) { - const SELECTOR_VISIBILITY_CHECKBOXES = '#ibexa-tab-location-view-locations .ibexa-checkbox-icon__checkbox'; + const SELECTOR_VISIBILITY_CHECKBOXES = '#ibexa-tab-location-view-locations .ibexa-content-locations__visibility-checkbox'; const SELECTOR_VISIBILITY_FORM = 'form[name="location_update_visibility_data"]'; const form = doc.querySelector(SELECTOR_VISIBILITY_FORM); const visibilityCheckboxes = doc.querySelectorAll(SELECTOR_VISIBILITY_CHECKBOXES); @@ -7,9 +7,11 @@ doc.body.dispatchEvent(new CustomEvent('ibexa-content-tree-refresh')); }; const onVisibilityUpdated = ({ target }) => { - const { checked: isVisible } = target; + const toggleLabel = target + .closest('.ibexa-content-locations__visibility-toggler') + .querySelector('.ibexa-content-locations__visibility-toggler-label'); - target.closest('.ibexa-checkbox-icon').classList.toggle('is-checked', isVisible); + toggleLabel.classList.toggle('ibexa-content-locations__visibility-toggler-label--hidden'); }; const handleUpdateError = ibexa.helpers.notification.showErrorNotification; const handleUpdateSuccess = (event, { message }) => { diff --git a/src/bundle/Resources/public/js/scripts/core/toggle.button.js b/src/bundle/Resources/public/js/scripts/core/toggle.button.js index 0e7d460501..0985d0a846 100644 --- a/src/bundle/Resources/public/js/scripts/core/toggle.button.js +++ b/src/bundle/Resources/public/js/scripts/core/toggle.button.js @@ -26,7 +26,10 @@ toggler.querySelector(`.form-check input[value="${valueToSet}"]`).checked = true; } else { - toggler.querySelector('.ibexa-toggle__input').checked = isChecked; + const toggleInput = toggler.querySelector('.ibexa-toggle__input'); + + toggleInput.checked = isChecked; + toggleInput.dispatchEvent(new Event('change')); } } diff --git a/src/bundle/Resources/public/scss/_content-locations.scss b/src/bundle/Resources/public/scss/_content-locations.scss new file mode 100644 index 0000000000..468f4fa7bb --- /dev/null +++ b/src/bundle/Resources/public/scss/_content-locations.scss @@ -0,0 +1,22 @@ +.ibexa-content-locations { + &__visibility-toggler-label { + color: $ibexa-color-dark-400; + font-size: $ibexa-text-font-size-small; + + .ibexa-icon { + fill: $ibexa-color-dark-400; + } + + &--hidden { + display: none; + } + } + + .ibexa-table { + &__header-cell { + &--visibility-toggler { + width: calculateRem(300px); + } + } + } +} diff --git a/src/bundle/Resources/public/scss/_forms.scss b/src/bundle/Resources/public/scss/_forms.scss index cfa974e829..41697dedab 100644 --- a/src/bundle/Resources/public/scss/_forms.scss +++ b/src/bundle/Resources/public/scss/_forms.scss @@ -93,3 +93,16 @@ form:not(.form-inline) { margin-right: calculateRem(4px); } } + +.ibexa-form-location-swap { + max-width: calculateRem(700px); + margin-top: calculateRem(24px); + padding: calculateRem(34px) calculateRem(21px); + border-radius: $ibexa-border-radius; + border: calculateRem(1px) solid $ibexa-color-dark-200; + + &__label { + font-size: $ibexa-text-font-size-medium; + margin-bottom: calculateRem(42px); + } +} diff --git a/src/bundle/Resources/public/scss/ibexa.scss b/src/bundle/Resources/public/scss/ibexa.scss index 7fbb75de67..588c8767b5 100644 --- a/src/bundle/Resources/public/scss/ibexa.scss +++ b/src/bundle/Resources/public/scss/ibexa.scss @@ -109,3 +109,4 @@ @import 'search-links-form'; @import 'custom-url-form'; @import 'details'; +@import 'content-locations'; diff --git a/src/bundle/Resources/views/themes/admin/content/tab/locations/panel_swap.html.twig b/src/bundle/Resources/views/themes/admin/content/tab/locations/panel_swap.html.twig index 2b8286a74f..20108faf38 100644 --- a/src/bundle/Resources/views/themes/admin/content/tab/locations/panel_swap.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/tab/locations/panel_swap.html.twig @@ -4,15 +4,20 @@ headline: 'tab.locations.location_content_swap'|trans()|desc('Swap Locations'), } only %} -{{ form_start(form, {'action': path('ezplatform.location.swap')}) }} -
- {{ 'tab.locations.swap_with_another'|trans()|desc('Swap the Content item at this Location with another') }} - {{ form_widget(form.swap, {'attr': { - 'disabled': not can_swap, - 'class': 'btn ibexa-btn ibexa-btn--secondary ibexa-btn--udw-swap ml-5', - 'data-udw-config': ibexa_udw_config('single_container', {}) - }}) }} - {{ form_widget(form.current_location) }} - {{ form_widget(form.new_location) }} -
+{{ form_start(form, { + 'action': path('ezplatform.location.swap'), + 'attr': { 'class': 'ibexa-form-location-swap' } +}) }} +
+ {{ 'tab.locations.swap_with_another'|trans()|desc('Swap the Content item at this Location with another') }} +
+
+ {{ form_widget(form.swap, {'attr': { + 'disabled': not can_swap, + 'class': 'btn ibexa-btn ibexa-btn--secondary ibexa-btn--udw-swap ml-5', + 'data-udw-config': ibexa_udw_config('single_container', {}) + }}) }} + {{ form_widget(form.current_location) }} + {{ form_widget(form.new_location) }} +
{{ form_end(form) }} diff --git a/src/bundle/Resources/views/themes/admin/content/tab/locations/tab.html.twig b/src/bundle/Resources/views/themes/admin/content/tab/locations/tab.html.twig index 610790aa18..db4ddb4001 100644 --- a/src/bundle/Resources/views/themes/admin/content/tab/locations/tab.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/tab/locations/tab.html.twig @@ -3,107 +3,116 @@ {% form_theme form_content_location_add '@ibexadesign/ui/form/flat_widgets.html.twig' %} {% form_theme form_content_location_remove with ['@ibexadesign/ui/form/flat_widgets.html.twig', '@ibexadesign/ui/form_fields.html.twig'] %} -
+
{{ form(form_content_location_add, {'action': path('ezplatform.location.add')}) }} - {% set body_rows = [] %} - {% if locations is not empty %} - {% for location in locations %} - {% set body_row_cols = [] %} - - {% set col_raw %} - {{ form_widget(form_content_location_remove.locations[location.id], {'attr': {'disabled': not location.canDelete}}) }} - {% endset %} - {% set body_row_cols = body_row_cols|merge([{ - has_checkbox: true, - content: col_raw, - raw: true, - }]) %} - - {% set col_raw %} - {% include '@ibexadesign/ui/location_path.html.twig' with {'locations': location.pathLocations, 'link_last_element': true} %} - {% endset %} - {% set body_row_cols = body_row_cols|merge([{ - content: col_raw, - raw: true, - }]) %} - - {% set body_row_cols = body_row_cols|merge([ - { content: location.childCount }, - ]) %} - - {% set col_raw %} - - {% if location.invisible %} - - {{ 'tab.locations.hidden_content_or_superior'|trans|desc('Content or its ancestor is hidden') }} - - {% endif %} - {% endset %} - {% set body_row_cols = body_row_cols|merge([{ - content: col_raw, - raw: true, - }]) %} - - {% set body_row_cols = body_row_cols|merge([ - { content: '' }, - ]) %} - - {% set col_raw %} - - {% endset %} - {% set body_row_cols = body_row_cols|merge([{ - content: col_raw, - raw: true, - }]) %} - - {% set body_rows = body_rows|merge([{ cols: body_row_cols }]) %} - {% endfor %} - {% endif %} + {% endset %} + {% set body_row_cols = body_row_cols|merge([{ + content: col_raw, + raw: true, + }]) %} - {% embed '@ibexadesign/ui/component/table/table.html.twig' with { - headline: 'tab.locations.content_locations'|trans|desc('Content Locations'), - head_cols: [ - { has_checkbox: true }, - { content: 'tab.locations.path'|trans|desc('Path') }, - { content: 'tab.locations.subitems'|trans|desc('Sub-items') }, - { content: 'tab.locations.visibility'|trans|desc('Visibility'), attr: { colspan: 2 } }, - { content: 'tab.locations.main'|trans|desc('Main') }, - ], - body_rows, - actions: tab.table_header_tools(form_content_location_add, form_content_location_remove, can_add), - } %} - {% block between_header_and_table %} - {{ form_start(form_content_location_remove, { - 'action': path('ezplatform.location.remove'), - 'attr': { 'class': 'ibexa-toggle-btn-state', 'data-toggle-button-id': '#delete-locations' } - }) }} - {% endblock %} - {% endembed %} + {% set col_raw %} +
+
+ + + {{ 'toggle_widget.label.on'|trans|desc('On') }} + + + {{ 'toggle_widget.label.off'|trans|desc('Off') }} + +
+ +
+ {% endset %} + + {% set body_row_cols = body_row_cols|merge([{ + content: col_raw, + raw: true, + }]) %} + + {% set body_row_cols = body_row_cols|merge([ + { content: location.childCount }, + ]) %} + + {% set body_rows = body_rows|merge([{ cols: body_row_cols }]) %} + {% endfor %} + {% endif %} + + {% embed '@ibexadesign/ui/component/table/table.html.twig' with { + headline: 'tab.locations.content_locations'|trans|desc('Content Locations'), + head_cols: [ + { has_checkbox: true }, + { content: 'tab.locations.path'|trans|desc('Path'), + attr: { colspan: 2 } + }, + { content: 'tab.locations.main'|trans|desc('Main') }, + { content: 'tab.locations.visibility'|trans|desc('Visibility'), + class: 'ibexa-table__header-cell--visibility-toggler' + }, + { content: 'tab.locations.subitems'|trans|desc('Sub-items') }, + ], + body_rows, + actions: tab.table_header_tools(form_content_location_add, form_content_location_remove, can_add), + } %} + {% block between_header_and_table %} + {{ form_start(form_content_location_remove, { + 'action': path('ezplatform.location.remove'), + 'attr': { 'class': 'ibexa-toggle-btn-state', 'data-toggle-button-id': '#delete-locations' } + }) }} + {% endblock %} + {% endembed %} {{ form_end(form_content_location_remove) }} {% if pager is defined and pager.haveToPaginate %} @@ -123,9 +132,15 @@ {% endif %} - {{ form(form_content_location_update_visibility, {'action': path('ezplatform.location.update_visibility')}) }} - {{ form(form_content_location_main_update, {'action': path('ezplatform.content.update_main_location')}) }} + {{ form_start(form_content_location_update_visibility, {'action': path('ezplatform.location.update_visibility')}) }} + {{ form_row(form_content_location_update_visibility.location) }} + {{ form_row(form_content_location_update_visibility.hidden, { + label_attr: { hidden: true } + }) }} + {{ form_row(form_content_location_update_visibility.set) }} + {{ form_end(form_content_location_update_visibility) }} + {{ form(form_content_location_main_update, {'action': path('ezplatform.content.update_main_location')}) }}
{% include '@ibexadesign/content/tab/locations/panel_swap.html.twig' with { From f6ea288064c51fc992ce2597535c0800d505f68d Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Wed, 29 Dec 2021 09:38:04 +0100 Subject: [PATCH 2/4] After CR: move form-location-swap to separate file --- .../Resources/public/scss/_form-location-swap.scss | 12 ++++++++++++ src/bundle/Resources/public/scss/_forms.scss | 13 ------------- src/bundle/Resources/public/scss/ibexa.scss | 1 + 3 files changed, 13 insertions(+), 13 deletions(-) create mode 100644 src/bundle/Resources/public/scss/_form-location-swap.scss diff --git a/src/bundle/Resources/public/scss/_form-location-swap.scss b/src/bundle/Resources/public/scss/_form-location-swap.scss new file mode 100644 index 0000000000..264e12425b --- /dev/null +++ b/src/bundle/Resources/public/scss/_form-location-swap.scss @@ -0,0 +1,12 @@ +.ibexa-form-location-swap { + max-width: calculateRem(700px); + margin-top: calculateRem(24px); + padding: calculateRem(34px) calculateRem(21px); + border-radius: $ibexa-border-radius; + border: calculateRem(1px) solid $ibexa-color-dark-200; + + &__label { + font-size: $ibexa-text-font-size-medium; + margin-bottom: calculateRem(42px); + } +} \ No newline at end of file diff --git a/src/bundle/Resources/public/scss/_forms.scss b/src/bundle/Resources/public/scss/_forms.scss index 41697dedab..cfa974e829 100644 --- a/src/bundle/Resources/public/scss/_forms.scss +++ b/src/bundle/Resources/public/scss/_forms.scss @@ -93,16 +93,3 @@ form:not(.form-inline) { margin-right: calculateRem(4px); } } - -.ibexa-form-location-swap { - max-width: calculateRem(700px); - margin-top: calculateRem(24px); - padding: calculateRem(34px) calculateRem(21px); - border-radius: $ibexa-border-radius; - border: calculateRem(1px) solid $ibexa-color-dark-200; - - &__label { - font-size: $ibexa-text-font-size-medium; - margin-bottom: calculateRem(42px); - } -} diff --git a/src/bundle/Resources/public/scss/ibexa.scss b/src/bundle/Resources/public/scss/ibexa.scss index 588c8767b5..e380934f87 100644 --- a/src/bundle/Resources/public/scss/ibexa.scss +++ b/src/bundle/Resources/public/scss/ibexa.scss @@ -110,3 +110,4 @@ @import 'custom-url-form'; @import 'details'; @import 'content-locations'; +@import 'form-location-swap'; From 744fbaada72046d98ad1d6396a7281ffae3f2e40 Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Wed, 29 Dec 2021 09:38:50 +0100 Subject: [PATCH 3/4] Added empty line --- src/bundle/Resources/public/scss/_form-location-swap.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/bundle/Resources/public/scss/_form-location-swap.scss b/src/bundle/Resources/public/scss/_form-location-swap.scss index 264e12425b..e2d03cb186 100644 --- a/src/bundle/Resources/public/scss/_form-location-swap.scss +++ b/src/bundle/Resources/public/scss/_form-location-swap.scss @@ -9,4 +9,4 @@ font-size: $ibexa-text-font-size-medium; margin-bottom: calculateRem(42px); } -} \ No newline at end of file +} From b338f9adff4c22672c9945ba85ab9e0bdcf7039f Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Thu, 30 Dec 2021 09:49:28 +0100 Subject: [PATCH 4/4] After CR --- .../Resources/public/scss/_general.scss | 4 -- ...ion-swap.scss => _location-swap-form.scss} | 2 +- src/bundle/Resources/public/scss/_mixins.scss | 64 ------------------- src/bundle/Resources/public/scss/ibexa.scss | 2 +- .../tab/locations/panel_swap.html.twig | 6 +- 5 files changed, 5 insertions(+), 73 deletions(-) rename src/bundle/Resources/public/scss/{_form-location-swap.scss => _location-swap-form.scss} (92%) diff --git a/src/bundle/Resources/public/scss/_general.scss b/src/bundle/Resources/public/scss/_general.scss index 4f42a98099..435995657e 100644 --- a/src/bundle/Resources/public/scss/_general.scss +++ b/src/bundle/Resources/public/scss/_general.scss @@ -93,10 +93,6 @@ img { } } -.ibexa-checkbox-icon { - @include checkbox-icon($ibexa-color-base-dark); -} - .ibexa-visually-hidden, .ibexa-visually-hidden[readonly] { height: calculateRem(1px); diff --git a/src/bundle/Resources/public/scss/_form-location-swap.scss b/src/bundle/Resources/public/scss/_location-swap-form.scss similarity index 92% rename from src/bundle/Resources/public/scss/_form-location-swap.scss rename to src/bundle/Resources/public/scss/_location-swap-form.scss index e2d03cb186..e5627cf019 100644 --- a/src/bundle/Resources/public/scss/_form-location-swap.scss +++ b/src/bundle/Resources/public/scss/_location-swap-form.scss @@ -1,4 +1,4 @@ -.ibexa-form-location-swap { +.ibexa-location-swap-form { max-width: calculateRem(700px); margin-top: calculateRem(24px); padding: calculateRem(34px) calculateRem(21px); diff --git a/src/bundle/Resources/public/scss/_mixins.scss b/src/bundle/Resources/public/scss/_mixins.scss index fb7622865f..02da7e6d4a 100644 --- a/src/bundle/Resources/public/scss/_mixins.scss +++ b/src/bundle/Resources/public/scss/_mixins.scss @@ -12,70 +12,6 @@ @import 'mixins/containers'; @import 'mixins/drag-and-drop'; -@mixin checkbox-icon($color: $ibexa-color-primary) { - border: calculateRem(1px) solid $color; - margin: 0; - padding: 0; - width: calculateRem(64px); - height: calculateRem(32px); - border-radius: $ibexa-border-radius; - position: relative; - z-index: 0; - cursor: pointer; - - &:before { - content: ''; - position: absolute; - width: calculateRem(32px); - height: calculateRem(32px); - top: 50%; - left: 0; - background-color: $color; - z-index: -1; - border-radius: $ibexa-border-radius; - transform: translate(100%, -50%); - transition: all 0.2s $ibexa-admin-transition; - } - - .ibexa-icon { - fill: $color; - height: calculateRem(20px); - width: calculateRem(20px); - margin: calculateRem(1px) calculateRem(4px) auto; - - &:first-child { - margin-left: calculateRem(5px); - } - } - - .ibexa-icon + .ibexa-icon { - fill: $ibexa-white; - } - - &.is-checked { - &:before { - transform: translate(0, -50%); - } - - .ibexa-icon { - fill: $ibexa-white; - } - - .ibexa-icon + .ibexa-icon { - fill: $color; - } - } - - &.disabled { - cursor: inherit; - opacity: 0.5; - } - - .ibexa-checkbox-icon__checkbox { - display: none; - } -} - @mixin datetime-field() { .ibexa-data-source__input-wrapper { max-width: 30ch; diff --git a/src/bundle/Resources/public/scss/ibexa.scss b/src/bundle/Resources/public/scss/ibexa.scss index e380934f87..d7e9b40c33 100644 --- a/src/bundle/Resources/public/scss/ibexa.scss +++ b/src/bundle/Resources/public/scss/ibexa.scss @@ -110,4 +110,4 @@ @import 'custom-url-form'; @import 'details'; @import 'content-locations'; -@import 'form-location-swap'; +@import 'location-swap-form'; diff --git a/src/bundle/Resources/views/themes/admin/content/tab/locations/panel_swap.html.twig b/src/bundle/Resources/views/themes/admin/content/tab/locations/panel_swap.html.twig index 20108faf38..970cd5f102 100644 --- a/src/bundle/Resources/views/themes/admin/content/tab/locations/panel_swap.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/tab/locations/panel_swap.html.twig @@ -6,12 +6,12 @@ {{ form_start(form, { 'action': path('ezplatform.location.swap'), - 'attr': { 'class': 'ibexa-form-location-swap' } + 'attr': { 'class': 'ibexa-location-swap-form' } }) }} -
+
{{ 'tab.locations.swap_with_another'|trans()|desc('Swap the Content item at this Location with another') }}
-
+
{{ form_widget(form.swap, {'attr': { 'disabled': not can_swap, 'class': 'btn ibexa-btn ibexa-btn--secondary ibexa-btn--udw-swap ml-5',