ayanova/src/components/attachment-control.vue

@@ -3,46 +3,51 @@
     <span class="v-label v-label--active theme--light">
       {{ $ay.t("Attachments") }}
     </span>
-    <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-row>
+      <v-col cols="12" sm="8">
+        <v-card class="mx-auto">
+          <v-card-text>
+            <div :style="cardTextStyle()">
+              <v-list two-line>
+                <v-list-item
+                  v-for="item in items"
+                  :key="item.title"
+                  @click="aClick"
+                >
+                  <v-list-item-avatar>
+                    <v-icon 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-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>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
-        </v-expansion-panel-content>
-      </v-expansion-panel>
-    </v-expansion-panels> -->
+                  <v-list-item-action>
+                    <v-btn icon>
+                      <v-icon>fa-trash</v-icon>
+                    </v-btn>
+                  </v-list-item-action>
+                </v-list-item>
+              </v-list>
+            </div>
+          </v-card-text>
+
+          <v-card-actions>
+            <v-file-input
+              :label="$ay.t('AttachFile')"
+              prepend-icon="fa-paperclip"
+            ></v-file-input>
+            <v-text-field
+              v-model="notes"
+              :label="$ay.t('ImageDescription')"
+            ></v-text-field>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
   </div>
 </template>
 <script>
@@ -54,23 +59,66 @@ export default {
       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"
+        },
+        {
+          icon: "fa-file",
+          title: "2drawings.pdf",
+          subtitle: "2020-01-09"
+        },
+        {
+          icon: "fa-image",
+          title: "2Recipes",
+          subtitle: "Jan 17, 2014"
+        },
+        {
+          icon: "fa-pen",
+          title: "2Work",
+          subtitle: "Jan 28, 2014"
+        },
+        {
+          icon: "fa-file",
+          title: "3drawings.pdf",
+          subtitle: "2020-01-09"
+        },
+        {
+          icon: "fa-image",
+          title: "3Recipes",
+          subtitle: "Jan 17, 2014"
+        },
+        {
+          icon: "fa-pen",
+          title: "3Work",
+          subtitle: "Jan 28, 2014"
+        },
+        {
+          icon: "fa-file",
+          title: "4drawings.pdf",
+          subtitle: "2020-01-09"
+        },
+        {
+          icon: "fa-image",
+          title: "4Recipes",
+          subtitle: "Jan 17, 2014"
+        },
+        {
+          icon: "fa-pen",
+          title: "4Work",
+          subtitle: "Jan 28, 2014"
         }
-      ]
+      ],
+      notes: null
     };
   },
   props: {
@@ -83,6 +131,9 @@ export default {
     onResize() {
       this.height = window.innerHeight * 0.25;
     },
+    cardTextStyle() {
+      return "height: " + this.height + "px;overflow-y:auto;";
+    },
     aClick() {
       console.log("CLICK");
     }