Add order class to layout builder UI

templaza · Oct 25, 2023 · 2f83fad · 2f83fad
1 parent 8b44d21
commit 2f83fad
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 17 deletions.
diff --git a/assets/vendor/manager/dist/index.js b/assets/vendor/manager/dist/index.js
diff --git a/assets/vendor/manager/src/components/helpers/LayoutBuilder.vue b/assets/vendor/manager/src/components/helpers/LayoutBuilder.vue
@@ -232,6 +232,24 @@ function deleteElement(element, index) {
         layout.value[map[props.group]].splice(index, 1);
     }
 }
+
+function getColumnClass(element) {
+    let column_class = props.device !== 'xs' ? `col-`+element.size[props.device] : `col-`+element.size.xs;
+    let column_order = 0;
+    if (typeof element.params !== 'undefined') {
+        element.params.every(param => {
+            if (param.name === 'column_order_' + props.device) {
+                column_order = parseInt(param.value);
+                return false;
+            }
+            return true;
+        });
+    }
+    if (column_order > 0) {
+        column_class += ' order-' + column_order;
+    }
+    return column_class;
+}
 </script>
 <template>
     <draggable
@@ -285,9 +303,9 @@ function deleteElement(element, index) {
                     <LayoutGrid v-if="showGrid[element.id]" :element="element" @update:close-element="(id) => {showGrid[id] = false}" @update:saveElement="(grid) => {editGrid(element, grid)}" />
                 </Transition>
             </div>
-            <div v-else-if="props.group === `rows`" class="astroid-col-container" :class="(props.device !== 'xs' ? `col-`+element.size[props.device] : `col-`+element.size.xs)">
+            <div v-else-if="props.group === `rows`" class="astroid-col-container" :class="getColumnClass(element)">
                 <div class="d-flex justify-content-between align-items-center">
-                    <div class="column-size text-body-tertiary mb-2">
+                    <div class="column-size mb-2">
                         <select class="form-select form-select-sm" v-model="element.size[props.device]" aria-label="Select column size" :id="`select-column-size-`+element.id">
                             <option v-for="option in [1,2,3,4,5,6,7,8,9,10,11,12]" :value="option" :key="option">{{ 'col'+(props.device !== 'xs' ? '-'+props.device+'-'+option : '-'+option) }}</option>
                         </select>