ayanova/src/components/attachment-control.vue

@@ -3,12 +3,19 @@
     <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-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
+                  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-icon v-text="item.icon"></v-icon>
                   </v-list-item-avatar>
 
                   <v-list-item-content>
@@ -20,29 +27,27 @@
 
                   <v-list-item-action>
                     <v-btn icon>
-                <v-icon color="red lighten-1">fa-trash</v-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-btn text>
+            <v-file-input
-          Attach file
+              :label="$ay.t('AttachFile')"
-        </v-btn>
+              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-expansion-panels focusable>
+      </v-col>
-      <v-expansion-panel v-for="(item, i) in 5" :key="i">
+    </v-row>
-        <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> -->
   </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");
     }