ayanova/src/components/attachment-control.vue

@@ -1,9 +1,38 @@
 <template>
-  <div>
+  <div v-resize="onResize">
     <span class="v-label v-label--active theme--light">
       {{ $ay.t("Attachments") }}
     </span>
-    <v-expansion-panels focusable>
+    <v-card :height="height" style="overflow-y:auto;" class="mx-auto">
+      <v-card-text>
+        <v-list two-line>
+          <v-list-item v-for="item in items" :key="item.title" @click="aClick">
+            <v-list-item-avatar>
+              <v-icon :class="[item.iconClass]" v-text="item.icon"></v-icon>
+            </v-list-item-avatar>
+
+            <v-list-item-content>
+              <v-list-item-title v-text="item.title"></v-list-item-title>
+              <v-list-item-subtitle
+                v-text="item.subtitle"
+              ></v-list-item-subtitle>
+            </v-list-item-content>
+
+            <v-list-item-action>
+              <v-btn icon>
+                <v-icon color="red lighten-1">fa-trash</v-icon>
+              </v-btn>
+            </v-list-item-action>
+          </v-list-item>
+        </v-list>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn text>
+          Attach file
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+    <!-- <v-expansion-panels focusable>
       <v-expansion-panel v-for="(item, i) in 5" :key="i">
         <v-expansion-panel-header>Item</v-expansion-panel-header>
         <v-expansion-panel-content>
@@ -13,14 +42,36 @@
           aliquip ex ea commodo consequat.
         </v-expansion-panel-content>
       </v-expansion-panel>
-    </v-expansion-panels>
+    </v-expansion-panels> -->
   </div>
 </template>
 <script>
 export default {
   created() {},
   data() {
-    return {};
+    return {
+      height: 300,
+      items: [
+        {
+          icon: "fa-file",
+          iconClass: "grey lighten-1 white--text",
+          title: "drawings.pdf",
+          subtitle: "2020-01-09"
+        },
+        {
+          icon: "fa-image",
+          iconClass: "grey lighten-1 white--text",
+          title: "Recipes",
+          subtitle: "Jan 17, 2014"
+        },
+        {
+          icon: "fa-pen",
+          iconClass: "grey lighten-1 white--text",
+          title: "Work",
+          subtitle: "Jan 28, 2014"
+        }
+      ]
+    };
   },
   props: {
     ayaType: Number,
@@ -28,6 +79,13 @@ export default {
     readonly: Boolean
   },
 
-  methods: {}
+  methods: {
+    onResize() {
+      this.height = window.innerHeight * 0.25;
+    },
+    aClick() {
+      console.log("CLICK");
+    }
+  }
 };
 </script>