mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-05 05:32:02 +00:00
1687ca93b3
## Summary Next iteration of the integrated tab/top menu ## Changes - **What**: - make integrated default, rename old to legacy - move feedback to integrated - fix user icon shapes - remove comfy cloud text in top bar, move to canvas stats - add chevron to C logo menu - move help back to sidebar - remove now unused help top positioning code ## Screenshots (if applicable) <img width="428" height="148" alt="image" src="https://github.com/user-attachments/assets/725025b7-4982-4f61-be11-8aabb0a1faff" /> <img width="264" height="187" alt="image" src="https://github.com/user-attachments/assets/91fa5e92-df08-4467-9bc5-50a614d9b8aa" /> <img width="1169" height="220" alt="image" src="https://github.com/user-attachments/assets/68c81bea-0cff-48df-8303-a6231a1d2fc4" /> <img width="242" height="207" alt="image" src="https://github.com/user-attachments/assets/5a10f40e-83ae-44c3-9434-3dbe87ba30e2" /> <img width="302" height="222" alt="image" src="https://github.com/user-attachments/assets/27fcc638-5fff-4302-9a1f-066227aafd86" /> --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: github-actions <github-actions@github.com>
112 lines
2.4 KiB
Vue
112 lines
2.4 KiB
Vue
<template>
|
|
<!-- Help Center Popup positioned within canvas area -->
|
|
<Teleport to="body">
|
|
<div
|
|
v-if="isHelpCenterVisible"
|
|
class="help-center-popup"
|
|
:class="{
|
|
'sidebar-left': sidebarLocation === 'left',
|
|
'sidebar-right': sidebarLocation === 'right',
|
|
'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,
|
|
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;
|
|
}
|
|
|
|
@keyframes slideInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|