IBX-1802: Update design for location swap and table locations

src/bundle/Resources/public/js/scripts/admin.location.visibility.js

@@ -1,15 +1,17 @@
 (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);
     const refreshContentTree = () => {
         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 }) => {

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

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

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

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

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;

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

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')}) }}
-<div class="bg-white ml-4">
-    {{ '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) }}
-</div>
+{{ form_start(form, {
+    'action': path('ezplatform.location.swap'),
+    'attr': { 'class': 'ibexa-location-swap-form' }
+}) }}
+    <div class="ibexa-location-swap-form__label">
+        {{ 'tab.locations.swap_with_another'|trans()|desc('Swap the Content item at this Location with another') }}
+    </div>
+    <div class="ibexa-location-swap-form__action-content">
+        {{ 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) }}
+    </div>
 {{ form_end(form) }}