fix: style placeholder list and params

Author: paolosantarsiero

resources/js/app/components/placeholder-list/placeholder-list.vue

@@ -11,19 +11,54 @@
             v-for="item in items"
             :key="itemKey(item)"
         >
-            <app-icon v-if="item.obj?.type === 'audio'" icon="carbon:document-audio" height="24" />
-            <app-icon v-if="item.obj?.type === 'documents'" icon="carbon:document" height="24" />
-            <app-icon v-if="item.obj?.type === 'events'" icon="carbon:event" height="24" />
-            <app-icon v-if="item.obj?.type === 'files'" icon="carbon:document-blank" height="24" />
-            <app-icon v-if="item.obj?.type === 'images'" icon="carbon:image" height="24" />
-            <app-icon v-if="item.obj?.type === 'links'" icon="carbon:link" height="24" />
-            <app-icon v-if="item.obj?.type === 'locations'" icon="carbon:location" height="24" />
-            <app-icon v-if="item.obj?.type === 'news'" icon="carbon:calendar" height="24" />
-            <app-icon v-if="item.obj?.type === 'profiles'" icon="carbon:person" height="24" />
-            <app-icon v-if="item.obj?.type === 'publications'" icon="carbon:wikis" height="24" />
-            <app-icon v-if="item.obj?.type === 'videos'" icon="carbon:video" height="24" />
+            <div class="placeholder-item-name">
+                <app-icon icon="carbon:document-audio"
+                          height="24"
+                          v-if="item.obj?.type === 'audio'"
+                />
+                <app-icon icon="carbon:document"
+                          height="24"
+                          v-if="item.obj?.type === 'documents'"
+                />
+                <app-icon icon="carbon:event"
+                          height="24"
+                          v-if="item.obj?.type === 'events'"
+                />
+                <app-icon icon="carbon:document-blank"
+                          height="24"
+                          v-if="item.obj?.type === 'files'"
+                />
+                <app-icon icon="carbon:image"
+                          height="24"
+                          v-if="item.obj?.type === 'images'"
+                />
+                <app-icon icon="carbon:link"
+                          height="24"
+                          v-if="item.obj?.type === 'links'"
+                />
+                <app-icon icon="carbon:location"
+                          height="24"
+                          v-if="item.obj?.type === 'locations'"
+                />
+                <app-icon icon="carbon:calendar"
+                          height="24"
+                          v-if="item.obj?.type === 'news'"
+                />
+                <app-icon icon="carbon:person"
+                          height="24"
+                          v-if="item.obj?.type === 'profiles'"
+                />
+                <app-icon icon="carbon:wikis"
+                          height="24"
+                          v-if="item.obj?.type === 'publications'"
+                />
+                <app-icon icon="carbon:video"
+                          height="24"
+                          v-if="item.obj?.type === 'videos'"
+                />
 
-            <span>{{ item.obj?.title }}</span>
+                <span>{{ item.obj?.title }}</span>
+            </div>
             <placeholder-params
                 :id="item.id"
                 :field="field"
@@ -163,11 +198,19 @@ div.placeholdersList > div.header {
 }
 div.placeholdersList > div.placeholder-item {
     display: grid;
-    grid-template-columns: 5% 60% 1fr;
+    grid-template-columns: 35% 60% 1fr;
     text-align: left;
     align-items: center;
     gap: 8px;
+    padding: 4px 0;
     margin: 4px 0;
     border-top: dotted 1px #ccc;
 }
+div.placeholdersList > div.placeholder-item > div.placeholder-item-name {
+    display: flex;
+    align-items: start;
+    align-self: flex-start;
+    gap: 8px;
+    margin: 4px 0;
+}
 </style>

resources/js/app/components/placeholder-list/placeholder-params.vue

@@ -21,7 +21,7 @@
             <template v-if="parameters[column] === 'boolean'">
                 <input type="checkbox"
                        v-model="decodedValue[column]"
-                       @click="changeParams"
+                       @change="changeParams"
                 >
             </template>
             <template v-if="parameters[column] === 'richtext'">
@@ -96,6 +96,7 @@ export default {
             }
             try {
                 this.decodedValue = JSON.parse(decoded);
+                console.log(this.decodedValue);
             } catch(e) {
                 console.error(e, decoded, this.value);
             }
@@ -113,6 +114,10 @@ export default {
             });
             this.oldValue = this.newValue;
         },
+        changeParamsBoolean(value, column) {
+            this.decodedValue[column] = value;
+            this.changeParams();
+        },
         changeRichText(value, column) {
             this.decodedValue[column] = value;
             this.changeParams();
@@ -125,13 +130,15 @@ export default {
 </script>
 <style>
 div.placeholderParams {
-    display: grid;
-    align-items: center;
+    display: flex;
+    flex-direction: column;
     gap: 8px;
     margin: 4px 0;
+}
 
-    .paramName {
-        text-transform: capitalize;
-    }
+.paramName {
+    display: block;
+    margin-bottom: 4px;
+    text-transform: capitalize;
 }
 </style>