mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-03 22:59:14 +00:00
549ef79e02
Update minimap and graph canvas menu (bottom right) to use menu tokens. Change canvas BG color on default dark theme. <img width="3840" height="2029" alt="image" src="https://github.com/user-attachments/assets/6d168981-df27-40c0-829c-59150b8a6a12" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6589-wip-Style-graph-canvas-color-2a26d73d365081cb88c4c4bdb2b6d3a5) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>
53 lines
1.8 KiB
Vue
53 lines
1.8 KiB
Vue
<template>
|
|
<div v-if="!workspaceStore.focusMode" class="ml-1 flex gap-x-0.5 pt-1">
|
|
<div class="min-w-0 flex-1">
|
|
<SubgraphBreadcrumb />
|
|
</div>
|
|
|
|
<div
|
|
class="actionbar-container pointer-events-auto flex h-12 items-center rounded-lg border border-[var(--interface-stroke)] px-2 shadow-interface"
|
|
>
|
|
<!-- 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);
|
|
}
|
|
</style>
|