mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
a3bfc2e91a
## Summary `CurrentUserButton` was not showing at all. Now it shows when the user is logged in. ## Changes - Fix template logic - Add test for `CurrentUserButton` and `LoginButton` display logic. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6239-fix-TopMenuSection-show-current-user-if-logged-in-2956d73d3650812bb9f8fcf5a3c01db5) by [Unito](https://www.unito.io)
54 lines
1.8 KiB
Vue
54 lines
1.8 KiB
Vue
<template>
|
|
<div v-if="!workspaceStore.focusMode" class="ml-2 flex pt-1">
|
|
<div class="min-w-0 flex-1">
|
|
<SubgraphBreadcrumb />
|
|
</div>
|
|
|
|
<div
|
|
class="actionbar-container pointer-events-auto mx-1 flex h-12 items-center rounded-lg px-2 shadow-md"
|
|
>
|
|
<!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
|
|
<div
|
|
ref="legacyCommandsContainerRef"
|
|
class="[&:not(:has(*>*:not(:empty)))]:hidden"
|
|
></div>
|
|
<ComfyActionbar />
|
|
<CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
|
|
<LoginButton v-else-if="isDesktop" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
|
|
import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
|
|
import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
|
|
import LoginButton from '@/components/topbar/LoginButton.vue'
|
|
import { useCurrentUser } from '@/composables/auth/useCurrentUser'
|
|
import { app } from '@/scripts/app'
|
|
import { useWorkspaceStore } from '@/stores/workspaceStore'
|
|
import { isElectron } from '@/utils/envUtil'
|
|
|
|
const workspaceStore = useWorkspaceStore()
|
|
const { isLoggedIn } = useCurrentUser()
|
|
const isDesktop = isElectron()
|
|
|
|
// Maintain support for legacy topbar elements attached by custom scripts
|
|
const legacyCommandsContainerRef = ref<HTMLElement>()
|
|
onMounted(() => {
|
|
if (legacyCommandsContainerRef.value) {
|
|
app.menu.element.style.width = 'fit-content'
|
|
legacyCommandsContainerRef.value.appendChild(app.menu.element)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.actionbar-container {
|
|
background-color: var(--comfy-menu-bg);
|
|
border: 1px solid var(--p-panel-border-color);
|
|
}
|
|
</style>
|