feat: dialog ui

zio/stable
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>
<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 v-if="serverName" text-secondary-light>@{{ serverName }}</span>
</p>

View File

@ -100,7 +100,11 @@ watchEffect(() => {
<AccountAvatar :account="account" hover:opacity-90 transition-opacity />
</button>
<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" />
</div>
</div>

View File

@ -15,7 +15,7 @@ const { link = true } = defineProps<{
min-w-0 flex gap-1 items-center
>
<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>
</AccountHoverWrapper>
</template>

View File

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

View File

@ -9,13 +9,13 @@ import {
</script>
<template>
<ModalDialog v-model="isSigninDialogOpen" py-6 px-3 sm-px-6>
<ModalDialog v-model="isSigninDialogOpen" py-4 px-8>
<UserSignIn />
</ModalDialog>
<ModalDialog v-model="isPreviewHelpOpen">
<HelpPreview @close="closePreviewHelp()" />
</ModalDialog>
<ModalDialog v-model="isPublishDialogOpen" max-w-180>
<ModalDialog v-model="isPublishDialogOpen" max-w-180 md:min-w-160>
<PublishWidget :draft-key="dialogDraftKey" expanded />
</ModalDialog>
<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
*
* @default false
*
*/
*/
keepAlive?: boolean
/** customizable class for the div outside of slot */
customClass?: string
}
const props = withDefaults(defineProps<Props>(), {
zIndex: 100,
closeByMask: true,
@ -144,7 +144,8 @@ export default {
:style="{
'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, -->
<!-- corresponding to issue: #106, so please don't remove it. -->
@ -159,13 +160,19 @@ export default {
<!-- Dialog it self -->
<div
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)"
>
<!-- header -->
<slot name="header" />
<!-- 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 />
</div>
<!-- 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
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" />
</NuxtLink>
</template>

View File

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

View File

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