mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-24 08:44:06 +00:00
97ca9f489e
## Summary The current help / feedback is often overlooked by users, this adds a setting that makes it more visible moving it up into the tab bar and moves the user login/profile button out of the "action bar" into the tab bar. ## Changes - Add 'Comfy.UI.TabBarLayout' setting with Default/Integrated options - Move Help & User controls to tab bar when Integrated mode is enabled - Extract help center logic into shared useHelpCenter composable ## Screenshots (if applicable) <img width="515" height="540" alt="image" src="https://github.com/user-attachments/assets/c9e6057f-4fb1-4da6-b25d-9df4b19be31a" /> <img width="835" height="268" alt="image" src="https://github.com/user-attachments/assets/24afc0e8-97eb-45cf-af86-15a9b464e9a8" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7853-Integrated-tab-bar-UI-elements-2df6d73d365081b1beb8f7c641c2fa43) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
135 lines
2.8 KiB
Vue
135 lines
2.8 KiB
Vue
<template>
|
|
<!-- Help Center Popup positioned within canvas area -->
|
|
<Teleport to="#graph-canvas-container">
|
|
<div
|
|
v-if="isHelpCenterVisible"
|
|
class="help-center-popup"
|
|
:class="{
|
|
'sidebar-left':
|
|
triggerLocation === 'sidebar' && sidebarLocation === 'left',
|
|
'sidebar-right':
|
|
triggerLocation === 'sidebar' && sidebarLocation === 'right',
|
|
'topbar-right': triggerLocation === 'topbar',
|
|
'small-sidebar': isSmall
|
|
}"
|
|
>
|
|
<HelpCenterMenuContent @close="closeHelpCenter" />
|
|
</div>
|
|
</Teleport>
|
|
|
|
<!-- Release Notification Toast positioned within canvas area -->
|
|
<Teleport to="#graph-canvas-container">
|
|
<ReleaseNotificationToast
|
|
:class="{
|
|
'sidebar-left': sidebarLocation === 'left',
|
|
'sidebar-right': sidebarLocation === 'right',
|
|
'small-sidebar': isSmall
|
|
}"
|
|
/>
|
|
</Teleport>
|
|
|
|
<!-- WhatsNew Popup positioned within canvas area -->
|
|
<Teleport to="#graph-canvas-container">
|
|
<WhatsNewPopup
|
|
:class="{
|
|
'sidebar-left': sidebarLocation === 'left',
|
|
'sidebar-right': sidebarLocation === 'right',
|
|
'small-sidebar': isSmall
|
|
}"
|
|
@whats-new-dismissed="handleWhatsNewDismissed"
|
|
/>
|
|
</Teleport>
|
|
|
|
<!-- Backdrop to close popup when clicking outside -->
|
|
<Teleport to="body">
|
|
<div
|
|
v-if="isHelpCenterVisible"
|
|
class="help-center-backdrop"
|
|
@click="closeHelpCenter"
|
|
/>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useHelpCenter } from '@/composables/useHelpCenter'
|
|
import ReleaseNotificationToast from '@/platform/updates/components/ReleaseNotificationToast.vue'
|
|
import WhatsNewPopup from '@/platform/updates/components/WhatsNewPopup.vue'
|
|
|
|
import HelpCenterMenuContent from './HelpCenterMenuContent.vue'
|
|
|
|
const { isSmall = false } = defineProps<{
|
|
isSmall?: boolean
|
|
}>()
|
|
|
|
const {
|
|
isHelpCenterVisible,
|
|
triggerLocation,
|
|
sidebarLocation,
|
|
closeHelpCenter,
|
|
handleWhatsNewDismissed
|
|
} = useHelpCenter()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.help-center-backdrop {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 9999;
|
|
background: transparent;
|
|
}
|
|
|
|
.help-center-popup {
|
|
position: absolute;
|
|
bottom: 1rem;
|
|
z-index: 10000;
|
|
animation: slideInUp 0.2s ease-out;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.help-center-popup.sidebar-left {
|
|
left: 1rem;
|
|
}
|
|
|
|
.help-center-popup.sidebar-left.small-sidebar {
|
|
left: 1rem;
|
|
}
|
|
|
|
.help-center-popup.sidebar-right {
|
|
right: 1rem;
|
|
}
|
|
|
|
.help-center-popup.topbar-right {
|
|
top: 2rem;
|
|
right: 1rem;
|
|
bottom: auto;
|
|
animation: slideInDown 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes slideInDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|