chore(dashboard): several frontend moments fixed

twirapp · May 23, 2024 · 586d92e · 586d92e
1 parent 6acf787
commit 586d92e
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 45 deletions.
diff --git a/frontend/dashboard/src/features/greetings/ui/greetings-dialog.vue b/frontend/dashboard/src/features/greetings/ui/greetings-dialog.vue
@@ -122,7 +122,7 @@ const rules: FormRules = {
 		<DialogTrigger as-child>
 			<slot name="dialog-trigger" />
 		</DialogTrigger>
-		<DialogOrSheet class="sm:max-w-[425px]">
+		<DialogOrSheet class="sm:max-w-[424px]">
 			<DialogHeader>
 				<DialogTitle>
 					{{ greeting ? t('greetings.edit') : t('greetings.create') }}

diff --git a/frontend/dashboard/src/pages/Dashboard.vue b/frontend/dashboard/src/pages/Dashboard.vue
@@ -1,60 +1,59 @@
 <script setup lang="ts">
-import { IconPencilPlus } from '@tabler/icons-vue';
-import { GridLayout, GridItem } from 'grid-layout-plus';
-import { NButton, NDropdown } from 'naive-ui';
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+import { GridItem, GridLayout } from 'grid-layout-plus'
+import { SquarePen } from 'lucide-vue-next'
+import { NButton, NDropdown } from 'naive-ui'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 
+import BotStatus from '@/components/dashboard/bot-status.vue'
+import Chat from '@/components/dashboard/chat.vue'
+import Events from '@/components/dashboard/events.vue'
+import Stream from '@/components/dashboard/stream.vue'
+import { useWidgets } from '@/components/dashboard/widgets.js'
 
-import BotStatus from '@/components/dashboard/bot-status.vue';
-import Chat from '@/components/dashboard/chat.vue';
-import Events from '@/components/dashboard/events.vue';
-import Stream from '@/components/dashboard/stream.vue';
-import { useWidgets } from '@/components/dashboard/widgets.js';
-
-const widgets = useWidgets();
-const visibleWidgets = computed(() => widgets.value.filter((v) => v.visible));
+const widgets = useWidgets()
+const visibleWidgets = computed(() => widgets.value.filter((v) => v.visible))
 const dropdownOptions = computed(() => {
 	return widgets.value
 		.filter((v) => !v.visible)
-		.map((v) => ({ label: v.i, key: v.i }));
-});
+		.map((v) => ({ label: v.i, key: v.i }))
+})
 
-const addWidget = (key: string) => {
-	const item = widgets.value.find(v => v.i === key);
-	if (!item) return;
+function addWidget(key: string) {
+	const item = widgets.value.find(v => v.i === key)
+	if (!item) return
 
-	const widgetsLength = visibleWidgets.value.length;
+	const widgetsLength = visibleWidgets.value.length
 
-	item.visible = true;
-	item.x = (widgetsLength * 2) % 12;
-	item.y = widgetsLength + 12;
-};
+	item.visible = true
+	item.x = (widgetsLength * 2) % 12
+	item.y = widgetsLength + 12
+}
 
-const showEmptyItem = ref(false);
+const showEmptyItem = ref(false)
 
-const onMouseUp = () => {
-	showEmptyItem.value = false;
-};
+function onMouseUp() {
+	showEmptyItem.value = false
+}
 
 onMounted(async () => {
-	await nextTick();
+	await nextTick()
 
 	document.querySelectorAll('.vgl-item__resizer').forEach((el) => {
 		el.addEventListener('mousedown', () => {
-			showEmptyItem.value = true;
-		});
+			showEmptyItem.value = true
+		})
 
-		window.addEventListener('mouseup', onMouseUp);
-	});
-});
+		window.addEventListener('mouseup', onMouseUp)
+	})
+})
 
 onBeforeUnmount(() => {
-	window.removeEventListener('mouseup', onMouseUp);
-});
+	window.removeEventListener('mouseup', onMouseUp)
+})
 </script>
 
 <template>
-	<bot-status />
+	<BotStatus />
 	<div class="w-full h-full pl-1">
 		<GridLayout
 			v-model:layout="widgets"
@@ -78,12 +77,13 @@ onBeforeUnmount(() => {
 				<Events v-if="item.i === 'events'" :item="item" class="h-full" />
 			</GridItem>
 		</GridLayout>
-		<div v-if="dropdownOptions.length" class="fixed bottom-2.5 right-6">
-			<n-dropdown size="huge" trigger="click" :options="dropdownOptions" @select="addWidget">
-				<n-button block circle type="info" class="w-full h-full p-1">
-					<IconPencilPlus class="w-11 h-11" />
-				</n-button>
-			</n-dropdown>
+
+		<div v-if="dropdownOptions.length" class="fixed bottom-2.5 right-2">
+			<NDropdown size="huge" trigger="click" :options="dropdownOptions" @select="addWidget">
+				<NButton block circle type="success" style="width: 100%; height: 100%; padding: 8px;">
+					<SquarePen class="size-8" />
+				</NButton>
+			</NDropdown>
 		</div>
 	</div>
 </template>

diff --git a/frontend/dashboard/src/pages/Overlays.vue b/frontend/dashboard/src/pages/Overlays.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { IconPlus, IconSettings, IconTrash } from '@tabler/icons-vue'
+import { IconSettings, IconTrash } from '@tabler/icons-vue'
+import { SquarePen } from 'lucide-vue-next'
 import {
 	NAlert,
 	NButton,
@@ -141,12 +142,14 @@ function editCustomOverlay(id?: string) {
 
 			<NGridItem :span="1">
 				<NCard
-					class="flex items-center justify-center h-full"
+					class="h-full"
 					:style="{ cursor: userCanManageOverlays ? 'pointer' : 'not-allowed' }"
 					embedded
 					@click="() => editCustomOverlay()"
 				>
-					<IconPlus class="h-20 w-20" />
+					<div class="flex items-center justify-center h-full">
+						<SquarePen class="size-16" />
+					</div>
 				</NCard>
 			</NGridItem>
 		</NGrid>