feat: dialog ui
parent
feb8872f5f
commit
57eef8e77f
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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, '')
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue