UI improvements part 3

resources/js/components/Others/Forms/AvatarInput.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="relative cursor-pointer">
+        <input
+			ref="file"
+			type="file"
+			@change="showImagePreview($event)"
+			class="absolute opacity-0 top-0 bottom-0 left-0 right-0 w-full z-10 cursor-pointer"
+		/>
+        <img
+			v-if="imagePreview"
+			ref="image"
+			:src="imagePreview"
+			class="md:w-16 w-14 md:h-16 h-14 object-cover rounded-xl relative z-0 shadow-lg cursor-pointer"
+			alt="avatar"
+		/>
+    </div>
+</template>
+
+<script>
+    export default {
+		name: 'AvatarInput',
+		props: [
+			'avatar',
+		],
+		data() {
+			return {
+				imagePreview: undefined
+			}
+		},
+		watch: {
+			imagePreview(val) {
+				this.$store.commit('UPDATE_AVATAR', val)
+			}
+		},
+		methods: {
+			showImagePreview(event) {
+				let imgPath = event.target.files[0].name,
+					extension = imgPath
+					.substring(imgPath.lastIndexOf('.') + 1)
+					.toLowerCase()
+
+				if (['png', 'jpg', 'jpeg'].includes(extension)) {
+					let file = event.target.files[0],
+						reader = new FileReader()
+
+					reader.onload = () => (this.imagePreview = reader.result)
+
+					reader.readAsDataURL(file)
+
+					// Update user avatar
+					this.$updateImage('/user/settings', 'avatar', event.target.files[0])
+				} else {
+					alert(this.$t('validation_errors.wrong_image'))
+				}
+			}
+		},
+		created() {
+			// If there is default image then load
+			if (this.avatar) this.imagePreview = this.avatar
+		}
+	}
+</script>

resources/js/components/Others/ShareEditPopup.vue

@@ -350,6 +350,7 @@
 					this.shareOptions = undefined
 					this.pickedItem = undefined
 					this.activeSection = undefined
+					this.qrCode = undefined
 				}, 150)
 			})
 		}

resources/js/components/Others/UserImageInput.vue

@@ -1,101 +0,0 @@
-<template>
-    <div class="dropzone" :class="{ 'is-error': error }">
-        <input
-                ref="file"
-                type="file"
-                @change="showImagePreview($event)"
-                :name="name"
-                class="dummy"
-        />
-        <img
-                ref="image"
-                :src="imagePreview"
-                class="image-preview"
-                v-if="imagePreview"
-        />
-        <img
-                ref="image"
-                :src="imagePreview"
-                class="image-preview blurred"
-                v-if="imagePreview"
-        />
-    </div>
-</template>
-
-<script>
-
-    export default {
-        props: ['label', 'name', 'avatar', 'info', 'error'],
-        data() {
-            return {
-                imagePreview: undefined
-            }
-        },
-        watch: {
-            imagePreview(val) {
-                this.$store.commit('UPDATE_AVATAR', val)
-            }
-        },
-        methods: {
-            showImagePreview(event) {
-                const imgPath = event.target.files[0].name,
-                    extn = imgPath
-                        .substring(imgPath.lastIndexOf('.') + 1)
-                        .toLowerCase()
-
-                if (['png', 'jpg', 'jpeg'].includes(extn)) {
-                    const file = event.target.files[0],
-                        reader = new FileReader()
-
-                    reader.onload = () => (this.imagePreview = reader.result)
-
-                    reader.readAsDataURL(file)
-
-                    // Update user avatar
-                    this.$updateImage('/user/settings', 'avatar', event.target.files[0])
-                } else {
-                    alert( this.$t('validation_errors.wrong_image') )
-                }
-            }
-        },
-        created() {
-            // If has default image then load
-            if (this.avatar) this.imagePreview = this.avatar
-        }
-    }
-</script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-
-    .dropzone {
-        position: relative;
-        line-height: 0;
-
-        input[type='file'] {
-            opacity: 0;
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            z-index: 2;
-            width: 100%;
-            cursor: pointer;
-        }
-
-        .image-preview {
-            width: 62px;
-            height: 62px;
-            object-fit: cover;
-            border-radius: 8px;
-            z-index: 1;
-            position: relative;
-        }
-
-        .blurred {
-            @include blurred-image;
-        }
-    }
-</style>