wip

src/client/components/deck/widgets-column.vue

@@ -29,8 +29,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import * as XDraggable from 'vuedraggable';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
 import { faWindowMaximize, faTimes, faCog, faPlus } from '@fortawesome/free-solid-svg-icons';
 import MkSelect from '@/components/ui/select.vue';
@@ -42,7 +41,7 @@ import * as os from '@/os';
 export default defineComponent({
 	components: {
 		XColumn,
-		XDraggable,
+		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
 		MkSelect,
 		MkButton,
 	},

src/client/components/image-viewer.vue

@@ -1,19 +1,17 @@
 <template>
-<x-modal ref="modal" @closed="() => { $emit('closed'); destroyDom(); }">
-	<img class="xubzgfga" ref="img" :src="image.url" :alt="image.name" :title="image.name" @click="close" tabindex="-1"/>
-</x-modal>
+<div class="xubzgfga">
+	<header>{{ image.name }}</header>
+	<img :src="image.url" :alt="image.name" :title="image.name" @click="close"/>
+	<footer>{{ image.type }}, {{ bytes(image.size) }}</footer>
+</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import XModal from './modal.vue';
 import * as os from '@/os';
+import bytes from '@/filters/bytes';
 
 export default defineComponent({
-	components: {
-		XModal,
-	},
-
 	props: {
 		image: {
 			type: Object,
@@ -21,32 +19,34 @@ export default defineComponent({
 		},
 	},
 
-	mounted() {
-		this.$nextTick(() => {
-			this.$refs.img.focus();
-		});
-	},
-
 	methods: {
 		close() {
-			this.$refs.modal.close();
+			this.$emit('done');
 		},
+
+		bytes,
 	}
 });
 </script>
 
 <style lang="scss" scoped>
 .xubzgfga {
-	position: fixed;
-	z-index: 2;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	max-width: 100%;
-	max-height: 100%;
-	margin: auto;
-	cursor: zoom-out;
-	image-orientation: from-image;
+	max-width: 1024px;
+
+	> header {
+		margin-bottom: 8px;
+	}
+
+	> img {
+		display: block;
+		max-width: 100%;
+		cursor: zoom-out;
+		image-orientation: from-image;
+	}
+
+	> footer {
+		margin-top: 8px;
+		opacity: 0.7;
+	}
 }
 </style>

src/client/components/media-image.vue

@@ -72,12 +72,9 @@ export default defineComponent({
 			if (this.$store.state.device.imageNewTab) {
 				window.open(this.image.url, '_blank');
 			} else {
-				const viewer = os.modal(ImageViewer, {
+				os.modal(ImageViewer, {
 					image: this.image
 				});
-				this.$once('hook:beforeDestroy', () => {
-					viewer.close();
-				});
 			}
 		}
 	}

src/client/components/modal.vue

@@ -166,8 +166,10 @@ export default defineComponent({
 		max-height: calc(100% - 16px);
 		overflow: auto;
 		display: flex;
-		justify-content: center;
-		align-items: center;
+
+		> * {
+			margin: auto;
+		}
 	}
 
 	> .content.popup {

src/client/components/post-form-attaches.vue

@@ -13,8 +13,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import * as XDraggable from 'vuedraggable';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { faTimesCircle, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import { faExclamationTriangle, faICursor } from '@fortawesome/free-solid-svg-icons';
 import XFileThumbnail from './drive-file-thumbnail.vue'
@@ -22,7 +21,7 @@ import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		XDraggable,
+		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
 		XFileThumbnail
 	},