feat: publish via dialog

This commit is contained in:
Anthony Fu 2022-11-24 16:04:53 +08:00
parent cd2a06e969
commit 83c0fafbec
9 changed files with 42 additions and 6 deletions

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { isPreviewHelpOpen, isSigninDialogOpen, isUserSwitcherOpen } from '~/composables/dialog'
import { isPreviewHelpOpen, isPublishDialogOpen, isSigninDialogOpen, isUserSwitcherOpen } from '~/composables/dialog'
</script>
<template>
@ -12,4 +12,7 @@ import { isPreviewHelpOpen, isSigninDialogOpen, isUserSwitcherOpen } from '~/com
<ModalDialog v-model="isPreviewHelpOpen">
<HelpPreview />
</ModalDialog>
<ModalDialog v-model="isPublishDialogOpen">
<PublishWidget draft-key="dialog" min-w-180 p6 />
</ModalDialog>
</template>

View file

@ -2,6 +2,11 @@
const { modelValue } = defineModel<{
modelValue: boolean
}>()
let init = $ref(false)
watchOnce(modelValue, () => {
init = true
})
</script>
<template>
@ -23,7 +28,7 @@ const { modelValue } = defineModel<{
"
:class="modelValue ? 'opacity-100' : 'opacity-0'"
>
<slot />
<slot v-if="init" />
</div>
</div>
</template>

View file

@ -38,6 +38,11 @@ const transform = computed(() => {
return ''
}
})
let init = $ref(false)
watchOnce(modelValue, () => {
init = true
})
</script>
<template>
@ -55,7 +60,7 @@ const transform = computed(() => {
:class="positionClass"
:style="modelValue ? {} : { transform }"
>
<slot />
<slot v-if="init" />
</div>
</div>
</template>

View 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>

View file

@ -103,7 +103,7 @@ onUnmounted(() => {
</script>
<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 />
<div
flex flex-col gap-3 flex-auto

View file

@ -6,6 +6,7 @@ export const toggleZenMode = useToggle(isZenMode)
export const isUserSwitcherOpen = ref(false)
export const isSigninDialogOpen = ref(false)
export const isPublishDialogOpen = ref(false)
export const isPreviewHelpOpen = ref(isFirstVisit.value)
export function openUserSwitcher() {
@ -21,6 +22,10 @@ export function openPreviewHelp() {
isPreviewHelpOpen.value = true
}
export function openPublishDialog() {
isPublishDialogOpen.value = true
}
if (isPreviewHelpOpen.value) {
watch(isPreviewHelpOpen, () => {
isFirstVisit.value = false

View file

@ -25,6 +25,7 @@
<slot name="right">
<NavTitle p5 />
<NavSide border="y base" />
<PublishButton v-if="currentUser" m5 />
<div flex-auto />
<NavFooter />
</slot>

View file

@ -20,6 +20,7 @@ const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fet
<StatusDetails ref="main" :status="status" border="t base" />
<PublishWidget
v-if="currentUser"
border="t base"
:draft-key="`reply-${id}`"
:placeholder="`Reply to ${status?.account ? getDisplayName(status?.account) : 'this thread'}`"
:in-reply-to-id="id"

View file

@ -13,17 +13,27 @@ export default defineConfig({
shortcuts: [
{
'border-base': 'border-$c-border',
// background
'bg-base': 'bg-$c-bg-base',
'bg-active': 'bg-$c-bg-active',
'bg-code': 'bg-$c-bg-code',
// text
'text-base': 'text-$c-text-base',
'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-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-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: [