Reorganize Vue components and add documentation explaining each folder

2026-09-23 22:38:11 +08:00 · 2022-05-23 19:03:34 -07:00
parent 5650a87465
commit e4e37cca7b
23 changed files with 46 additions and 28 deletions
@@ -0,0 +1,94 @@
+<template>
+	<FloatingMenu :open="true" class="dialog-modal" :type="'Dialog'" :direction="'Center'" data-dialog-modal>
+		<LayoutRow ref="main">
+			<LayoutCol class="icon-column">
+				<!-- `dialog.state.icon` class exists to provide special sizing in CSS to specific icons -->
+				<IconLabel :icon="dialog.state.icon" :class="dialog.state.icon.toLowerCase()" />
+			</LayoutCol>
+			<LayoutCol class="main-column">
+				<WidgetLayout v-if="dialog.state.widgets.layout.length > 0" :layout="dialog.state.widgets" class="details" />
+				<LayoutRow v-if="(dialog.state.jsCallbackBasedButtons?.length || NaN) > 0" class="panic-buttons-row">
+					<TextButton v-for="(button, index) in dialog.state.jsCallbackBasedButtons" :key="index" :action="() => button.callback?.()" v-bind="button.props" />
+				</LayoutRow>
+			</LayoutCol>
+		</LayoutRow>
+	</FloatingMenu>
+</template>
+
+<style lang="scss">
+.dialog-modal {
+	position: absolute;
+	pointer-events: none;
+	width: 100%;
+	height: 100%;
+
+	> .floating-menu-container > .floating-menu-content {
+		pointer-events: auto;
+		padding: 24px;
+	}
+
+	.icon-column {
+		margin-right: 24px;
+
+		.icon-label {
+			width: 80px;
+			height: 80px;
+
+			&.file,
+			&.copy {
+				width: 60px;
+
+				svg {
+					width: 80px;
+					height: 80px;
+					margin: 0 -10px;
+				}
+			}
+		}
+	}
+
+	.main-column {
+		margin: -4px 0;
+
+		.details.text-label {
+			user-select: text;
+			white-space: pre-wrap;
+			max-width: 400px;
+			height: auto;
+		}
+
+		.panic-buttons-row {
+			height: 32px;
+			align-items: center;
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
+import LayoutCol from "@/components/layout/LayoutCol.vue";
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import TextButton from "@/components/widgets/buttons/TextButton.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import WidgetLayout from "@/components/widgets/WidgetLayout.vue";
+
+export default defineComponent({
+	inject: ["dialog"],
+	components: {
+		LayoutRow,
+		LayoutCol,
+		FloatingMenu,
+		IconLabel,
+		TextButton,
+		WidgetLayout,
+	},
+	methods: {
+		dismiss() {
+			this.dialog.dismissDialog();
+		},
+	},
+});
+</script>