mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-25 09:14:25 +00:00
372890811d
Adds a button to toggle the view mode of the media assets panel <img width="530" height="326" alt="image" src="https://github.com/user-attachments/assets/0946e87d-03b0-4606-9142-ac18aae89ecc" /> Part of the QPO v2 iteration, figma design can be found [here](https://www.figma.com/design/LVilZgHGk5RwWOkVN6yCEK/Queue-Progress-Modal?node-id=3330-37286&m=dev). This will be implemented in a series of stacked PRs that can be reviewed and merged individually. main <-- #7729, #7731, #7737, #7743, #7745 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7729-QPOv2-Add-media-assets-viewmode-toggle-2d16d73d365081e5b641efce5a5c1662) by [Unito](https://www.unito.io)
55 lines
1.5 KiB
Vue
55 lines
1.5 KiB
Vue
<template>
|
|
<div
|
|
class="inline-flex items-center gap-1 rounded-lg bg-secondary-background p-1"
|
|
role="group"
|
|
>
|
|
<Button
|
|
type="button"
|
|
variant="muted-textonly"
|
|
size="icon"
|
|
:aria-label="t('sideToolbar.queueProgressOverlay.viewList')"
|
|
:aria-pressed="viewMode === 'list'"
|
|
:class="
|
|
cn(
|
|
'rounded-lg',
|
|
viewMode === 'list'
|
|
? 'bg-secondary-background-selected text-text-primary hover:bg-secondary-background-selected'
|
|
: 'text-text-secondary hover:bg-secondary-background-hover'
|
|
)
|
|
"
|
|
@click="viewMode = 'list'"
|
|
>
|
|
<i class="icon-[lucide--table-of-contents] size-4" />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="muted-textonly"
|
|
size="icon"
|
|
:aria-label="t('sideToolbar.queueProgressOverlay.viewGrid')"
|
|
:aria-pressed="viewMode === 'grid'"
|
|
:class="
|
|
cn(
|
|
'rounded-lg',
|
|
viewMode === 'grid'
|
|
? 'bg-secondary-background-selected text-text-primary hover:bg-secondary-background-selected'
|
|
: 'text-text-secondary hover:bg-secondary-background-hover'
|
|
)
|
|
"
|
|
@click="viewMode = 'grid'"
|
|
>
|
|
<i class="icon-[lucide--layout-grid] size-4" />
|
|
</Button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
const viewMode = defineModel<'list' | 'grid'>('viewMode', { required: true })
|
|
|
|
const { t } = useI18n()
|
|
</script>
|