feat: publish via dialog
This commit is contained in:
parent
cd2a06e969
commit
83c0fafbec
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { isPreviewHelpOpen, isSigninDialogOpen, isUserSwitcherOpen } from '~/composables/dialog'
|
import { isPreviewHelpOpen, isPublishDialogOpen, isSigninDialogOpen, isUserSwitcherOpen } from '~/composables/dialog'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -12,4 +12,7 @@ import { isPreviewHelpOpen, isSigninDialogOpen, isUserSwitcherOpen } from '~/com
|
||||||
<ModalDialog v-model="isPreviewHelpOpen">
|
<ModalDialog v-model="isPreviewHelpOpen">
|
||||||
<HelpPreview />
|
<HelpPreview />
|
||||||
</ModalDialog>
|
</ModalDialog>
|
||||||
|
<ModalDialog v-model="isPublishDialogOpen">
|
||||||
|
<PublishWidget draft-key="dialog" min-w-180 p6 />
|
||||||
|
</ModalDialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -2,6 +2,11 @@
|
||||||
const { modelValue } = defineModel<{
|
const { modelValue } = defineModel<{
|
||||||
modelValue: boolean
|
modelValue: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
let init = $ref(false)
|
||||||
|
watchOnce(modelValue, () => {
|
||||||
|
init = true
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -23,7 +28,7 @@ const { modelValue } = defineModel<{
|
||||||
"
|
"
|
||||||
:class="modelValue ? 'opacity-100' : 'opacity-0'"
|
:class="modelValue ? 'opacity-100' : 'opacity-0'"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot v-if="init" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -38,6 +38,11 @@ const transform = computed(() => {
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
let init = $ref(false)
|
||||||
|
watchOnce(modelValue, () => {
|
||||||
|
init = true
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -55,7 +60,7 @@ const transform = computed(() => {
|
||||||
:class="positionClass"
|
:class="positionClass"
|
||||||
:style="modelValue ? {} : { transform }"
|
:style="modelValue ? {} : { transform }"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot v-if="init" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
6
components/publish/PublishButton.vue
Normal file
6
components/publish/PublishButton.vue
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
<template>
|
||||||
|
<button btn-outline rounded-full font-bold py4 flex="~ gap2 center" @click="openPublishDialog">
|
||||||
|
<div i-ri:quill-pen-line />
|
||||||
|
Compose
|
||||||
|
</button>
|
||||||
|
</template>
|
|
@ -103,7 +103,7 @@ onUnmounted(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-if="currentUser" border="t base" p4 flex gap-4>
|
<div v-if="currentUser" p4 flex gap-4>
|
||||||
<AccountAvatar :account="currentUser.account" w-12 h-12 />
|
<AccountAvatar :account="currentUser.account" w-12 h-12 />
|
||||||
<div
|
<div
|
||||||
flex flex-col gap-3 flex-auto
|
flex flex-col gap-3 flex-auto
|
||||||
|
|
|
@ -6,6 +6,7 @@ export const toggleZenMode = useToggle(isZenMode)
|
||||||
|
|
||||||
export const isUserSwitcherOpen = ref(false)
|
export const isUserSwitcherOpen = ref(false)
|
||||||
export const isSigninDialogOpen = ref(false)
|
export const isSigninDialogOpen = ref(false)
|
||||||
|
export const isPublishDialogOpen = ref(false)
|
||||||
export const isPreviewHelpOpen = ref(isFirstVisit.value)
|
export const isPreviewHelpOpen = ref(isFirstVisit.value)
|
||||||
|
|
||||||
export function openUserSwitcher() {
|
export function openUserSwitcher() {
|
||||||
|
@ -21,6 +22,10 @@ export function openPreviewHelp() {
|
||||||
isPreviewHelpOpen.value = true
|
isPreviewHelpOpen.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function openPublishDialog() {
|
||||||
|
isPublishDialogOpen.value = true
|
||||||
|
}
|
||||||
|
|
||||||
if (isPreviewHelpOpen.value) {
|
if (isPreviewHelpOpen.value) {
|
||||||
watch(isPreviewHelpOpen, () => {
|
watch(isPreviewHelpOpen, () => {
|
||||||
isFirstVisit.value = false
|
isFirstVisit.value = false
|
||||||
|
|
|
@ -25,6 +25,7 @@
|
||||||
<slot name="right">
|
<slot name="right">
|
||||||
<NavTitle p5 />
|
<NavTitle p5 />
|
||||||
<NavSide border="y base" />
|
<NavSide border="y base" />
|
||||||
|
<PublishButton v-if="currentUser" m5 />
|
||||||
<div flex-auto />
|
<div flex-auto />
|
||||||
<NavFooter />
|
<NavFooter />
|
||||||
</slot>
|
</slot>
|
||||||
|
|
|
@ -20,6 +20,7 @@ const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fet
|
||||||
<StatusDetails ref="main" :status="status" border="t base" />
|
<StatusDetails ref="main" :status="status" border="t base" />
|
||||||
<PublishWidget
|
<PublishWidget
|
||||||
v-if="currentUser"
|
v-if="currentUser"
|
||||||
|
border="t base"
|
||||||
:draft-key="`reply-${id}`"
|
:draft-key="`reply-${id}`"
|
||||||
:placeholder="`Reply to ${status?.account ? getDisplayName(status?.account) : 'this thread'}`"
|
:placeholder="`Reply to ${status?.account ? getDisplayName(status?.account) : 'this thread'}`"
|
||||||
:in-reply-to-id="id"
|
:in-reply-to-id="id"
|
||||||
|
|
|
@ -13,17 +13,27 @@ export default defineConfig({
|
||||||
shortcuts: [
|
shortcuts: [
|
||||||
{
|
{
|
||||||
'border-base': 'border-$c-border',
|
'border-base': 'border-$c-border',
|
||||||
|
|
||||||
|
// background
|
||||||
'bg-base': 'bg-$c-bg-base',
|
'bg-base': 'bg-$c-bg-base',
|
||||||
'bg-active': 'bg-$c-bg-active',
|
'bg-active': 'bg-$c-bg-active',
|
||||||
'bg-code': 'bg-$c-bg-code',
|
'bg-code': 'bg-$c-bg-code',
|
||||||
|
|
||||||
|
// text
|
||||||
'text-base': 'text-$c-text-base',
|
'text-base': 'text-$c-text-base',
|
||||||
'text-secondary': 'text-$c-text-secondary',
|
'text-secondary': 'text-$c-text-secondary',
|
||||||
'interact-disabled': 'disabled:opacity-50 disabled:pointer-events-none disabled:saturate-0',
|
|
||||||
'btn-base': 'interact-disabled cursor-pointer',
|
// buttons
|
||||||
|
'btn-base': 'cursor-pointer disabled:opacity-50 disabled:pointer-events-none disabled:saturate-0',
|
||||||
'btn-solid': 'btn-base px-4 py-2 rounded text-white bg-$c-primary hover:bg-$c-primary-active',
|
'btn-solid': 'btn-base px-4 py-2 rounded text-white bg-$c-primary hover:bg-$c-primary-active',
|
||||||
'btn-outline': 'btn-base px-4 py-2 rounded text-$c-primary border border-$c-primary hover:bg-$c-primary hover:text-white',
|
'btn-outline': 'btn-base px-4 py-2 rounded text-$c-primary border border-$c-primary hover:bg-$c-primary hover:text-white',
|
||||||
'btn-text': 'btn-base px-4 py-2 text-$c-primary hover:text-$c-primary-active',
|
'btn-text': 'btn-base px-4 py-2 text-$c-primary hover:text-$c-primary-active',
|
||||||
'btn-action-icon': 'btn-base hover:bg-active rounded-full h9 w9 flex items-center justify-center',
|
'btn-action-icon': 'btn-base hover:bg-active rounded-full h9 w9 flex items-center justify-center',
|
||||||
|
|
||||||
|
// utils
|
||||||
|
'flex-center': 'items-center justify-center',
|
||||||
|
'flex-v-center': 'items-center',
|
||||||
|
'flex-h-center': 'justify-center',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
presets: [
|
presets: [
|
||||||
|
|
Loading…
Reference in a new issue