diff --git a/assets/css/main.css b/assets/css/main.css index c5323e9..41a289c 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -19,6 +19,9 @@ --taskbar-item-text-color: #ffffff; --taskbar-item-border-color: rgba(255, 255, 255, 0.2); + --start-menu-background: var(--window-background); + --start-menu-border-color: var(--window-border-color); + /* Shadows */ --shadow-window: 0 10px 30px rgba(0, 0, 0, 0.2); --shadow-button: 0 4px 10px rgba(0, 0, 0, 0.2); @@ -31,6 +34,7 @@ /* Z-Indexes */ --z-window-base: 100; --z-taskbar: 9999; + --z-start-menu: 10000; --z-resizer: 1; } @@ -50,6 +54,9 @@ --taskbar-item-background-active: rgba(0, 0, 0, 0.15); --taskbar-item-text-color: #000000; --taskbar-item-border-color: rgba(0, 0, 0, 0.1); + + --start-menu-background: var(--window-background); + --start-menu-border-color: var(--window-border-color); } diff --git a/components/Desktop.vue b/components/Desktop.vue index 208c57b..f71f82b 100644 --- a/components/Desktop.vue +++ b/components/Desktop.vue @@ -2,8 +2,8 @@ import { ref } from 'vue'; import { storeToRefs } from 'pinia'; import { useWindowsStore } from '../stores/windows'; -import { useSettingsStore } from '../stores/settings'; import { useUIStore } from '../stores/ui'; +import { useSettingsStore } from '../stores/settings'; // Import settings store import Window from './Window.vue'; import Taskbar from './Taskbar.vue'; import SnapPreview from './SnapPreview.vue'; @@ -11,23 +11,37 @@ import StartMenu from './StartMenu.vue'; import type { SnapType } from '../composables/useDraggable'; const windowsStore = useWindowsStore(); -const settingsStore = useSettingsStore(); const uiStore = useUIStore(); +const settingsStore = useSettingsStore(); const { orderedWindows } = storeToRefs(windowsStore); -const { createWindow, snapWindow } = windowsStore; -const { toggleTheme } = settingsStore; +const { isStartMenuOpen } = storeToRefs(uiStore); // Get start menu state +const { createWindow, snapWindow, closeAllWindows } = windowsStore; const { closeStartMenu } = uiStore; +const { toggleTheme } = settingsStore; const snapPreview = ref<{ x: number; y: number; width: number; height: number; } | null>(null); +// --- Start Menu Event Handlers --- +function handleMenuAction(action: () => void) { + action(); + closeStartMenu(); +} + +function handleAbout() { handleMenuAction(() => console.log('About clicked')); } +function handleSettings() { handleMenuAction(() => console.log('Settings clicked')); } +function handleSignOut() { handleMenuAction(() => console.log('Sign Out clicked')); } +function handleToggleTheme() { handleMenuAction(toggleTheme); } +function handleCloseAllWindows() { handleMenuAction(closeAllWindows); } +// -------------------------------- + function handleSnapPreview(snapType: SnapType) { if (!snapType) { snapPreview.value = null; return; } - const taskbarHeight = 48; + const taskbarHeight = 22; const screenWidth = window.innerWidth; const screenHeight = window.innerHeight - taskbarHeight; @@ -68,15 +82,19 @@ function handleDesktopClick() { /> - +
-
@@ -90,6 +108,6 @@ function handleDesktopClick() { height: 100vh; background: var(--background-desktop); overflow: hidden; - padding-top: 48px; + padding-top: 22px; } diff --git a/components/StartMenu.vue b/components/StartMenu.vue index b4e6f9c..1f9e1b4 100644 --- a/components/StartMenu.vue +++ b/components/StartMenu.vue @@ -1,122 +1,67 @@ diff --git a/components/Taskbar.vue b/components/Taskbar.vue index 2f8aa1c..19a0ad7 100644 --- a/components/Taskbar.vue +++ b/components/Taskbar.vue @@ -1,4 +1,5 @@