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/_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/_location-swap-form.scss b/src/bundle/Resources/public/scss/_location-swap-form.scss
new file mode 100644
index 0000000000..e5627cf019
--- /dev/null
+++ b/src/bundle/Resources/public/scss/_location-swap-form.scss
@@ -0,0 +1,12 @@
+.ibexa-location-swap-form {
+ 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/_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 7fbb75de67..d7e9b40c33 100644
--- a/src/bundle/Resources/public/scss/ibexa.scss
+++ b/src/bundle/Resources/public/scss/ibexa.scss
@@ -109,3 +109,5 @@
@import 'search-links-form';
@import 'custom-url-form';
@import 'details';
+@import 'content-locations';
+@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 2b8286a74f..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
@@ -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-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',
+ '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 {