mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-04 05:02:17 +00:00
efc0431a5e
Side toolbar menu UI updates ## Summary - Currently the template modal is very hidden. Many users do not find it - The current icons are quite aleatory ## Changes **What**: - Add templates shortcut button - Add item label in normal size - Use custom icon Critical design decisions or edge cases that need attention: - Sidebar tabs registered using custom icons will have their associated command registed with an undefined icon (currently only string icons are accepted, not components). I couldn't see anywhere directly using this icon, but we should consider autogenerating an icon font so we can use classes for our custom icons (or locating and updating locations to support both icon types) ## Screenshots (if applicable) Normal mode: <img width="621" height="1034" alt="image" src="https://github.com/user-attachments/assets/c1d1cee2-004e-4ff8-b3fa-197329b0d2ae" /> Small mode: <img width="176" height="325" alt="image" src="https://github.com/user-attachments/assets/3824b8f6-bc96-4e62-aece-f0265113d2e3" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-4946-Update-side-toolbar-menu-24d6d73d365081c5b2bdc0ee8b61dc50) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
126 lines
3.1 KiB
Vue
126 lines
3.1 KiB
Vue
<template>
|
|
<Button
|
|
v-tooltip="{
|
|
value: computedTooltip,
|
|
showDelay: 300,
|
|
hideDelay: 300
|
|
}"
|
|
text
|
|
:pt="{
|
|
root: {
|
|
class: `side-bar-button ${
|
|
selected
|
|
? 'p-button-primary side-bar-button-selected'
|
|
: 'p-button-secondary'
|
|
}`,
|
|
'aria-label': computedTooltip
|
|
}
|
|
}"
|
|
@click="emit('click', $event)"
|
|
>
|
|
<template #icon>
|
|
<div class="side-bar-button-content">
|
|
<slot name="icon">
|
|
<OverlayBadge v-if="shouldShowBadge" :value="overlayValue">
|
|
<i
|
|
v-if="typeof icon === 'string'"
|
|
:class="icon + ' side-bar-button-icon'"
|
|
/>
|
|
<component :is="icon" v-else class="side-bar-button-icon" />
|
|
</OverlayBadge>
|
|
<i
|
|
v-else-if="typeof icon === 'string'"
|
|
:class="icon + ' side-bar-button-icon'"
|
|
/>
|
|
<component
|
|
:is="icon"
|
|
v-else-if="typeof icon === 'object'"
|
|
class="side-bar-button-icon"
|
|
/>
|
|
</slot>
|
|
<span v-if="label && !isSmall" class="side-bar-button-label">{{
|
|
t(label)
|
|
}}</span>
|
|
</div>
|
|
</template>
|
|
</Button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Button from 'primevue/button'
|
|
import OverlayBadge from 'primevue/overlaybadge'
|
|
import { computed } from 'vue'
|
|
import type { Component } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
const { t } = useI18n()
|
|
const {
|
|
icon = '',
|
|
selected = false,
|
|
tooltip = '',
|
|
tooltipSuffix = '',
|
|
iconBadge = '',
|
|
label = '',
|
|
isSmall = false
|
|
} = defineProps<{
|
|
icon?: string | Component
|
|
selected?: boolean
|
|
tooltip?: string
|
|
tooltipSuffix?: string
|
|
iconBadge?: string | (() => string | null)
|
|
label?: string
|
|
isSmall?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'click', event: MouseEvent): void
|
|
}>()
|
|
const overlayValue = computed(() =>
|
|
typeof iconBadge === 'function' ? iconBadge() ?? '' : iconBadge
|
|
)
|
|
const shouldShowBadge = computed(() => !!overlayValue.value)
|
|
const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
|
|
</script>
|
|
|
|
<style>
|
|
.side-bar-button-icon {
|
|
font-size: var(--sidebar-icon-size) !important;
|
|
}
|
|
|
|
.side-bar-button-selected .side-bar-button-icon {
|
|
font-size: var(--sidebar-icon-size) !important;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.side-bar-button {
|
|
width: var(--sidebar-width);
|
|
height: calc(var(--sidebar-width) + 0.5rem);
|
|
border-radius: 0;
|
|
}
|
|
|
|
.side-tool-bar-end .side-bar-button {
|
|
height: var(--sidebar-width);
|
|
}
|
|
|
|
.side-bar-button-content {
|
|
@apply flex flex-col items-center gap-2;
|
|
}
|
|
|
|
.side-bar-button-label {
|
|
@apply text-[10px] text-center whitespace-nowrap;
|
|
line-height: 1;
|
|
}
|
|
|
|
.comfyui-body-left .side-bar-button.side-bar-button-selected,
|
|
.comfyui-body-left .side-bar-button.side-bar-button-selected:hover {
|
|
border-left: 4px solid var(--p-button-text-primary-color);
|
|
}
|
|
|
|
.comfyui-body-right .side-bar-button.side-bar-button-selected,
|
|
.comfyui-body-right .side-bar-button.side-bar-button-selected:hover {
|
|
border-right: 4px solid var(--p-button-text-primary-color);
|
|
}
|
|
</style>
|