feat: dialog ui

This commit is contained in:
Anthony Fu 2022-12-02 15:27:44 +08:00
parent feb8872f5f
commit 57eef8e77f
9 changed files with 29 additions and 16 deletions

View file

@ -9,7 +9,7 @@ const serverName = $computed(() => getServerName(account))
</script> </script>
<template> <template>
<p line-clamp-1 whitespace-pre-wrap break-all text-secondary-light> <p ws-nowrap text-ellipsis of-hidden text-secondary-light>
<span text-secondary>{{ getShortHandle(account) }}</span> <span text-secondary>{{ getShortHandle(account) }}</span>
<span v-if="serverName" text-secondary-light>@{{ serverName }}</span> <span v-if="serverName" text-secondary-light>@{{ serverName }}</span>
</p> </p>

View file

@ -100,7 +100,11 @@ watchEffect(() => {
<AccountAvatar :account="account" hover:opacity-90 transition-opacity /> <AccountAvatar :account="account" hover:opacity-90 transition-opacity />
</button> </button>
<div flex flex-col> <div flex flex-col>
<ContentRich font-bold text-2xl break-words :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" /> <ContentRich
font-bold text-2xl ws-nowrap
:content="getDisplayName(account, { rich: true })"
:emojis="account.emojis"
/>
<AccountHandle :account="account" /> <AccountHandle :account="account" />
</div> </div>
</div> </div>

View file

@ -15,7 +15,7 @@ const { link = true } = defineProps<{
min-w-0 flex gap-1 items-center min-w-0 flex gap-1 items-center
> >
<AccountAvatar :account="account" w-5 h-5 /> <AccountAvatar :account="account" w-5 h-5 />
<ContentRich :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" /> <ContentRich ws-nowrap :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
</NuxtLink> </NuxtLink>
</AccountHoverWrapper> </AccountHoverWrapper>
</template> </template>

View file

@ -39,8 +39,8 @@ const teams: Team[] = [
</script> </script>
<template> <template>
<div my-8 px-3 sm-px-8 flex="~ col gap-4" relative max-h-screen> <div my-8 px-3 sm:px-8 md:max-w-200 flex="~ col gap-4" relative max-h-screen>
<button btn-action-icon absolute top-0 right-0 m1 aria-label="Close" @click="emit('close')"> <button btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
<div i-ri:close-fill /> <div i-ri:close-fill />
</button> </button>

View file

@ -9,13 +9,13 @@ import {
</script> </script>
<template> <template>
<ModalDialog v-model="isSigninDialogOpen" py-6 px-3 sm-px-6> <ModalDialog v-model="isSigninDialogOpen" py-4 px-8>
<UserSignIn /> <UserSignIn />
</ModalDialog> </ModalDialog>
<ModalDialog v-model="isPreviewHelpOpen"> <ModalDialog v-model="isPreviewHelpOpen">
<HelpPreview @close="closePreviewHelp()" /> <HelpPreview @close="closePreviewHelp()" />
</ModalDialog> </ModalDialog>
<ModalDialog v-model="isPublishDialogOpen" max-w-180> <ModalDialog v-model="isPublishDialogOpen" max-w-180 md:min-w-160>
<PublishWidget :draft-key="dialogDraftKey" expanded /> <PublishWidget :draft-key="dialogDraftKey" expanded />
</ModalDialog> </ModalDialog>
<ModalDialog v-model="isMediaPreviewOpen" w-full max-w-full h-full max-h-full bg-transparent border-0 pointer-events-none> <ModalDialog v-model="isMediaPreviewOpen" w-full max-w-full h-full max-h-full bg-transparent border-0 pointer-events-none>

View file

@ -32,13 +32,13 @@ export interface Props {
* keep the dialog opened even when in other views * keep the dialog opened even when in other views
* *
* @default false * @default false
*
*/ */
keepAlive?: boolean keepAlive?: boolean
/** customizable class for the div outside of slot */ /** customizable class for the div outside of slot */
customClass?: string customClass?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
zIndex: 100, zIndex: 100,
closeByMask: true, closeByMask: true,
@ -144,7 +144,8 @@ export default {
:style="{ :style="{
'z-index': zIndex, 'z-index': zIndex,
}" }"
class="scrollbar-hide" fixed inset-0 overflow-y-auto overscroll-none class="scrollbar-hide"
fixed inset-0 overflow-y-auto overscroll-none
> >
<!-- The style `scrollbar-hide overscroll-none overflow-y-scroll` and `h="[calc(100%+0.5px)]"` is used to implement scroll locking, --> <!-- The style `scrollbar-hide overscroll-none overflow-y-scroll` and `h="[calc(100%+0.5px)]"` is used to implement scroll locking, -->
<!-- corresponding to issue: #106, so please don't remove it. --> <!-- corresponding to issue: #106, so please don't remove it. -->
@ -159,13 +160,19 @@ export default {
<!-- Dialog it self --> <!-- Dialog it self -->
<div <div
ref="elDialogMain" ref="elDialogMain"
class="dialog-main w-full rounded shadow-lg pointer-events-auto isolate bg-base border-base border-1px border-solid w-full max-w-125 max-h-full flex flex-col" class="dialog-main"
rounded shadow-lg pointer-events-auto isolate bg-base
border="~ base" max-h-full flex flex-col
v-bind="bindTypeToAny($attrs)" v-bind="bindTypeToAny($attrs)"
> >
<!-- header --> <!-- header -->
<slot name="header" /> <slot name="header" />
<!-- main --> <!-- main -->
<div ref="elDialogScroll" class="overflow-y-auto touch-pan-y touch-pan-x overscroll-none flex-1" :class="customClass"> <div
ref="elDialogScroll"
overflow-y-auto touch-pan-y touch-pan-x overscroll-none
:class="customClass"
>
<slot /> <slot />
</div> </div>
<!-- footer --> <!-- footer -->

View file

@ -13,7 +13,7 @@ const { account, link = true } = defineProps<{
flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
text-link-rounded text-link-rounded
> >
<ContentRich font-bold break-words :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" /> <ContentRich font-bold ws-nowrap :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<AccountHandle :account="account" /> <AccountHandle :account="account" />
</NuxtLink> </NuxtLink>
</template> </template>

View file

@ -93,8 +93,11 @@ function editStatus() {
<CommonDropdown flex-none ml3 placement="bottom" :eager-mount="command"> <CommonDropdown flex-none ml3 placement="bottom" :eager-mount="command">
<StatusActionButton <StatusActionButton
:content="$t('action.more')" :content="$t('action.more')"
color="text-purple" hover="text-purple" group-hover="bg-purple/10" color="text-purple"
icon="i-ri:more-2-line" hover="text-purple"
group-hover="bg-purple/10"
icon="i-ri:more-line"
my--2
/> />
<template #popper> <template #popper>

View file

@ -30,7 +30,6 @@ export function getDisplayName(account?: Account, options?: { rich?: boolean })
const displayName = account?.displayName || account?.username || '' const displayName = account?.displayName || account?.username || ''
if (options?.rich) if (options?.rich)
return displayName return displayName
return displayName.replace(/:([\w-]+?):/g, '') return displayName.replace(/:([\w-]+?):/g, '')
} }