Refining image input ui

2024-07-28 16:47:06 +02:00
parent a8310c4817
commit 9ce76dcd0c
3 changed files with 211 additions and 69 deletions
--- a/app/imports/client/ui/components/global/SmartImageInput.vue
+++ b/app/imports/client/ui/components/global/SmartImageInput.vue
@@ -1,7 +1,7 @@
 <template>
  <outlined-input
    :name="label"
-    class="smart-image-input mb-3 pt-4"
+    class="smart-image-input mb-3"
    :data-id="id"
    :class="{ dragging }"
    @click="openImageInputDialog"
@@ -9,11 +9,37 @@
    @dragleave="handleDragLeave"
    @drop="handleDrop"
  >
-    <img
-      v-if="value"
-      class="image"
-      :src="value"
+    <template v-if="value">
+      <img
+        v-if="value"
+        class="image"
+        :src="value"
+      >
+      <div
+        class="image-overlay"
+        :class="themeClasses"
+      />
+      <v-btn
+        v-if="value"
+        icon
+        dark
+        class="clear-button ma-1"
+        @click.stop="change(undefined)"
+      >
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </template>
+    <div
+      v-else
+      class="add-image-text d-flex align-center justify-center"
    >
+      Add image
+      <v-icon
+        right
+      >
+        mdi-image-outline
+      </v-icon>
+    </div>
  </outlined-input>
 </template>

@@ -61,6 +87,13 @@ export default {
    OutlinedInput,
  },
  mixins: [SmartInput],
+  inject: {
+    theme: {
+      default: {
+        isDark: false,
+      },
+    },
+  },
  props: {
    label: {
      type: String,
@@ -73,6 +106,14 @@ export default {
      dragging: false,
    };
  },
+  computed: {
+    themeClasses() {
+      return {
+        'theme--dark': this.theme.isDark,
+        'theme--light': !this.theme.isDark,
+      }
+    },
+  },
  watch: {
    file(file){
      if (!file) return;
@@ -129,6 +170,11 @@ export default {
        data: {
          href: this.value,
        },
+        callback: (href) => {
+          if (href) {
+            this.change(href);
+          }
+        },
      });
    },
    handleUrlChange() {
@@ -161,12 +207,21 @@ export default {

 <style scoped>
 .smart-image-input {
+  position: relative;
  min-height: 120px;
  cursor: pointer;
+  overflow: hidden;
 }
 .image {
+  min-height: 100px;
  max-height: 400px;
  max-width: 100%;
+  margin-bottom: -7px;
+}
+.clear-button {
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 .dragging {
  border-style: dashed;
@@ -177,4 +232,34 @@ export default {
 .outlined-input.dragging.theme--light:not(.no-hover) {
  border-color: rgba(0,0,0,.86);
 }
+.image-overlay {
+  position: absolute;
+  top: 0;
+  height: 12px;
+  left: 0;
+  right: 0;
+}
+.image-overlay.theme--dark {
+  background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
+}
+.image-overlay.theme--light {
+  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
+}
+.add-image-text {
+  opacity: 0.7;
+  height: 118px; 
+}
+.smart-image-input:hover .add-image-text {
+  opacity: 1;
+}
+</style>
+
+<style>
+.smart-image-input > legend {
+  position: relative;
+  z-index: 1;
+}
+.smart-image-input .clear-button i {
+  text-shadow: 0 0 4px #000, 0 0 4px #000 ;
+}
 </style>
--- a/app/imports/client/ui/files/userImages/ImageInputDialog.vue
+++ b/app/imports/client/ui/files/userImages/ImageInputDialog.vue
@@ -3,6 +3,7 @@
    <template slot="toolbar">
      <v-tabs
        v-model="tab"
+        :color="$vuetify.theme.themes.dark.accent"
        grow
      >
        <v-tab>User Files</v-tab>
@@ -12,99 +13,109 @@
    <v-tabs-items
      slot="unwrapped-content"
      v-model="tab"
-      class="fill-height"
+      class="file-input-content fill-height"
    >
      <v-tab-item
        class="fill-height"
        style="overflow: auto;"
      >
-        <v-card-text
-          class="user-image-list d-flex flex-wrap"
+        <div
+          class="user-image-list pa-4 d-flex flex-wrap"
        >
-          <image-field
+          <v-img
            v-for="file in userImages"
            :key="file._id"
-            class="image-field"
-            :name="file.name"
-            :href="file.href"
-            :aspect-ratio="0.2"
-          />
-          <image-field
-            name="Example image 3"
-            href="https://picsum.photos/1000/1000"
-          />
-          <image-field
-            name="Example image 2"
-            href="https://picsum.photos/500/600"
-          />
-          <image-field
-            name="Example image 3"
-            href="https://picsum.photos/850/700"
-          />
-          <v-col
-            class="mb-3"
-            v-bind="{cols: 12, sm: 6, md: 4}"
+            :data-id="`image-${file._id}`"
+            class="user-image ma-1 v-sheet"
+            :class="{'elevation-4': file.href === href}"
+            height="250"
+            :src="file.href"
+            @click="selectUserImage(file.href)"
          >
            <v-btn
-              outlined
-              style="height: 100%; width: 100%; min-height: 120px;"
-              class="archive-button"
-              :color="fileUploadError ? 'error' : undefined"
-              :disabled="fileUploadInProgress"
-              @click="$refs.archiveFileInput.click()"
+              class="zoom-button"
+              icon
+              @click.stop="previewImage(file._id, file.href)"
            >
-              <v-icon left>
-                mdi-file-upload-outline
-              </v-icon>
-              <template v-if="fileUploadError">
-                {{ fileUploadError }}
-              </template>
-              <template v-else>
-                Upload Image
-              </template>
-              <v-progress-linear
-                v-if="fileUploadInProgress"
-                :value="fileUploadProgress"
-                :indeterminate="fileUploadIndeterminate"
-              />
+              <v-icon>mdi-magnify-plus</v-icon>
            </v-btn>
-          </v-col>
-        </v-card-text>
+          </v-img>
+          <v-btn
+            outlined
+            class="upload-image-button ma-1"
+            :color="fileUploadError ? 'error' : undefined"
+            :disabled="fileUploadInProgress"
+            @click="$refs.archiveFileInput.click()"
+          >
+            <v-icon left>
+              mdi-file-upload-outline
+            </v-icon>
+            <template v-if="fileUploadError">
+              {{ fileUploadError }}
+            </template>
+            <template v-else>
+              Upload Image
+            </template>
+            <v-progress-linear
+              v-if="fileUploadInProgress"
+              :value="fileUploadProgress"
+              :indeterminate="fileUploadIndeterminate"
+            />
+          </v-btn>
+          <div style="height: 0;" />
+          <div style="height: 0;" />
+          <div style="height: 0;" />
+        </div>
      </v-tab-item>
      <v-tab-item
        class="fill-height"
      >
-        <v-card-text class="fill-height d-flex align-center">
-          <text-field
+        <v-card-text class="fill-height d-flex flex-column justify-center align-center">
+          <v-text-field
+            v-model="inputHref"
            label="Direct link to image"
-            :value="href"
+            class="flex-grow-0"
+            style="width: 100%"
          />
        </v-card-text>
      </v-tab-item>
    </v-tabs-items>
-    <v-spacer slot="actions" />
+    <v-spacer
+      slot="actions"
+    />
    <v-btn
+      v-if="tab === 1"
+      slot="actions" 
+      color="accent"
+      outlined
+      :disabled="!inputHref"
+      @click="selectUserImage(inputHref)"
+    >
+      <v-icon left>
+        mdi-check
+      </v-icon>
+      Save
+    </v-btn>
+    <v-btn
+      v-else
      slot="actions"
      text
-      @click="$store.dispatch('popDialogStack')"
+      @click="$emit('pop')"
    >
-      Done
+      Close
    </v-btn>
  </dialog-base>
 </template>

 <script lang="js">
 import DialogBase from '/imports/client/ui/dialogStack/DialogBase.vue';
-import UserImages from '/imports/api/files/userImages/UserImages';
-import ImageField from '/imports/client/ui/properties/viewers/shared/ImageField.vue';

 export default {
  components: {
    DialogBase,
-    ImageField,
  },
  props: {
-    currentHref: {
+    href: {
      type: String,
      default: undefined,
    },
@@ -113,23 +124,69 @@ export default {
    return {
      tab: 0,
      progress: 0,
-      href: this.currentHref,
+      inputHref: this.href,
    };
  },
  meteor: {
    userImages() {
-      return UserImages.find({});
+      // return UserImages.find({});
+      return [
+        {
+          _id: '1',
+          name: 'Example image 1',
+          href: 'https://picsum.photos/1000/1000',
+        },
+        {
+          _id: '2',
+          name: 'Example image 2',
+          href: 'https://picsum.photos/500/600',
+        },
+        {
+          _id: '3',
+          name: 'Example image 3',
+          href: 'https://picsum.photos/850/700',
+        },
+      ]
+    },
+  },
+  methods: {
+    previewImage(id, href) {
+      this.$store.commit('pushDialogStack', {
+        component: 'image-preview-dialog',
+        elementId: `image-${id}`,
+        data: {
+          href: href,
+        },
+      });
+    },
+    selectUserImage(href) {
+      this.$store.dispatch('popDialogStack', href);
    },
  },
 };
 </script>

 <style lang="css" scoped>
-.user-image-list {
-  
+.user-image-list > * {
+  height: 250px;
+  width: 250px;
+  flex-basis: 200px;
+  flex-grow: 1;
+  flex-shrink: 1;
 }
-
-.image-field > fieldset {
-  
+.user-image-list > .upload-image-button {
+  height: 250px;
+}
+.user-image {
+  cursor: pointer;
+}
+.user-image.elevation-4 {
+  border: 2px solid #f44336;
+}
+.zoom-button {
+  position: absolute;
+  cursor: zoom-in;
+  bottom: 0;
+  right: 0;
 }
 </style>
--- a/app/imports/client/ui/pages/Files.vue
+++ b/app/imports/client/ui/pages/Files.vue
@@ -73,7 +73,7 @@
        <smart-image-input
          label="Image input"
          :value="inputImageHref"
-          @change="(val, ack) => {inputImageHref = val; ack()}"
+          @change="(val, ack) => {inputImageHref = val; /*ack()*/}"
        />
      </v-col>
    </v-row>