mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-31 05:19:53 +00:00
make subscribe-to-run button responsive (#6581)
## Summary Change to just "Subscribe" on mobile breakpoint. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6581-make-subscribe-to-run-button-responsive-2a16d73d365081e3a776cde0290432f3) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -1696,7 +1696,8 @@
|
||||
"waitingForSubscription": "Complete your subscription in the new tab. We'll automatically detect when you're done!",
|
||||
"subscribe": "Subscribe"
|
||||
},
|
||||
"subscribeToRun": "Subscribe to Run",
|
||||
"subscribeToRun": "Subscribe",
|
||||
"subscribeToRunFull": "Subscribe to Run",
|
||||
"subscribeNow": "Subscribe Now",
|
||||
"subscribeToComfyCloud": "Subscribe to Comfy Cloud",
|
||||
"partnerNodesCredits": "Partner Nodes credits"
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<Button
|
||||
v-tooltip.bottom="{
|
||||
value: $t('subscription.subscribeToRun'),
|
||||
value: $t('subscription.subscribeToRunFull'),
|
||||
showDelay: 600
|
||||
}"
|
||||
class="subscribe-to-run-button"
|
||||
:label="$t('subscription.subscribeToRun')"
|
||||
:label="buttonLabel"
|
||||
icon="pi pi-lock"
|
||||
severity="primary"
|
||||
size="small"
|
||||
@@ -15,6 +15,7 @@
|
||||
}"
|
||||
:pt="{
|
||||
root: {
|
||||
class: 'whitespace-nowrap',
|
||||
style: {
|
||||
borderColor: 'transparent'
|
||||
}
|
||||
@@ -26,12 +27,25 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
|
||||
import Button from 'primevue/button'
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
|
||||
import { isCloud } from '@/platform/distribution/types'
|
||||
import { useTelemetry } from '@/platform/telemetry'
|
||||
|
||||
const { t } = useI18n()
|
||||
const breakpoints = useBreakpoints(breakpointsTailwind)
|
||||
const isMdOrLarger = breakpoints.greaterOrEqual('md')
|
||||
|
||||
const buttonLabel = computed(() =>
|
||||
isMdOrLarger.value
|
||||
? t('subscription.subscribeToRunFull')
|
||||
: t('subscription.subscribeToRun')
|
||||
)
|
||||
|
||||
const { showSubscriptionDialog } = useSubscription()
|
||||
|
||||
const handleSubscribeToRun = () => {
|
||||
|
||||
Reference in New Issue
Block a user