Add maximize/restore/minimize buttons and QualityBadge placement
Window controls: - Maximize button shows restore icon when maximized - Add minimize button - Button order: Fullscreen | Maximize/Restore | Minimize | Exit | Close QualityBadge placement: - Coverflow: below album name - Split views (Lyrics/TrackInfo/Suggestions/Queue): below album name - Added album name display in split view Layout improvements: - Panel section max-height 80vh - Lyrics scrollbar only visible on hover - Content vertically centered with artwork
This commit is contained in:
1 parent
730ce323c4
commit
2c389408d0
5 files changed
+323
-14
No files matched your search
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Disc3, LayoutGrid, Mic2, ListMusic, Music2, Info, Radio, Maximize, Minimize, ChevronDown, X, Square } from 'lucide-svelte';
|
||||
import { Disc3, LayoutGrid, Mic2, ListMusic, Music2, Info, Radio, Maximize, Minimize, ChevronDown, X, Square, Copy, Minus } from 'lucide-svelte';
|
||||
import { t } from '$lib/i18n';
|
||||
import { getCurrentWindow } from '@tauri-apps/api/window';
|
||||
|
||||
@@ -18,8 +18,10 @@
|
||||
hasTrackInfo?: boolean;
|
||||
hasSuggestions?: boolean;
|
||||
isFullscreen?: boolean;
|
||||
isMaximized?: boolean;
|
||||
onToggleFullscreen?: () => void;
|
||||
onToggleMaximize?: () => void;
|
||||
onMinimize?: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
@@ -34,8 +36,10 @@
|
||||
hasTrackInfo = true,
|
||||
hasSuggestions = true,
|
||||
isFullscreen = false,
|
||||
isMaximized = false,
|
||||
onToggleFullscreen,
|
||||
onToggleMaximize
|
||||
onToggleMaximize,
|
||||
onMinimize
|
||||
}: Props = $props();
|
||||
|
||||
// Expandable window controls state
|
||||
@@ -144,9 +148,20 @@
|
||||
<button
|
||||
class="window-btn"
|
||||
onclick={onToggleMaximize}
|
||||
title="Maximize Window"
|
||||
title={isMaximized ? 'Restore Window' : 'Maximize Window'}
|
||||
>
|
||||
<Square size={14} />
|
||||
{#if isMaximized}
|
||||
<Copy size={14} />
|
||||
{:else}
|
||||
<Square size={14} />
|
||||
{/if}
|
||||
</button>
|
||||
<button
|
||||
class="window-btn"
|
||||
onclick={onMinimize}
|
||||
title="Minimize"
|
||||
>
|
||||
<Minus size={16} />
|
||||
</button>
|
||||
<button
|
||||
class="window-btn"
|
||||
@@ -334,7 +349,7 @@
|
||||
}
|
||||
|
||||
.window-controls.expanded .expanded-buttons {
|
||||
max-width: 160px;
|
||||
max-width: 200px;
|
||||
opacity: 1;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user