Merge pull request #549 from threefoldtech/development_playground_enh…

…ance_UI
threefoldtech · Jun 15, 2023 · d5c7a26 · d5c7a26
2 parents 006f3f3 + 642886d
commit d5c7a26
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/packages/playground/src/components/expandable_layout.vue b/packages/playground/src/components/expandable_layout.vue
@@ -1,17 +1,33 @@
 <template>
   <section>
-    <div class="d-flex mb-6">
+    <div class="d-flex my-6">
+      <v-card-subtitle class="text-subtitle-1 mt-3" v-if="title">{{ title }}</v-card-subtitle>
       <v-spacer />
-      <v-btn prepend-icon="mdi-plus" color="primary" @click="$emit('add')"> add </v-btn>
+      <v-tooltip text="Add">
+        <template #activator="{ props }">
+          <v-btn icon="mdi-plus" variant="tonal" color="primary" @click="$emit('add')" v-bind="props" />
+        </template>
+      </v-tooltip>
     </div>
+    <v-divider class="my-2" />
     <div v-for="(item, index) in modelValue" :key="item">
       <div class="d-flex">
         <div class="flex-grow-1 mr-4">
           <slot :item="item" :index="index" :isRequired="required.includes(index)" />
         </div>
         <div class="d-flex">
           <v-spacer />
-          <v-btn color="error" icon="mdi-delete-outline" @click="remove(index)" v-if="!required.includes(index)" />
+          <v-tooltip text="Remove">
+            <template #activator="{ props }">
+              <v-btn
+                color="error"
+                icon="mdi-delete-outline"
+                @click="remove(index)"
+                v-if="!required.includes(index)"
+                v-bind="props"
+              />
+            </template>
+          </v-tooltip>
         </div>
       </div>
       <v-divider class="mb-4" v-if="index + 1 < modelValue.length" />
@@ -31,6 +47,7 @@ const props = defineProps({
     type: Array as PropType<number[]>,
     default: () => [],
   },
+  title: String,
 });
 const emits = defineEmits<{
   (event: "update:modelValue", value: any[]): void;

diff --git a/packages/playground/src/weblets/full_vm.vue b/packages/playground/src/weblets/full_vm.vue
@@ -160,7 +160,12 @@
       </template>
 
       <template #disks>
-        <ExpandableLayout v-model="disks" @add="addDisk" #="{ index }">
+        <ExpandableLayout
+          v-model="disks"
+          @add="addDisk"
+          title="Add additional disk space to your full virtual machine"
+          #="{ index }"
+        >
           <p class="text-h6 mb-4">Disk #{{ index + 1 }}</p>
           <input-validator
             :value="disks[index].name"

diff --git a/packages/playground/src/weblets/micro_vm.vue b/packages/playground/src/weblets/micro_vm.vue
@@ -185,7 +185,12 @@
       </template>
 
       <template #disks>
-        <ExpandableLayout v-model="disks" @add="addDisk" #="{ index }">
+        <ExpandableLayout
+          v-model="disks"
+          @add="addDisk"
+          title="Add additional disk space to your micro virtual machine"
+          #="{ index }"
+        >
           <p class="text-h6 mb-4">Disk #{{ index + 1 }}</p>
           <input-validator
             :value="disks[index].name"