fix: ui search items

This commit is contained in:
Anthony Fu 2023-01-05 23:50:14 +01:00
parent 954a6bd5a1
commit 916793f5ae
6 changed files with 45 additions and 10 deletions

View file

@ -4,8 +4,12 @@ import sparkline from '@fnando/sparkline'
const { const {
history, history,
width = 60,
height = 40,
} = $defineProps<{ } = $defineProps<{
history?: History[] history?: History[]
width?: number
height?: number
}>() }>()
const historyNum = $computed(() => { const historyNum = $computed(() => {
@ -24,5 +28,5 @@ watch([$$(historyNum), $$(sparklineEl)], ([historyNum, sparklineEl]) => {
</script> </script>
<template> <template>
<svg ref="sparklineEl" class="sparkline" width="60" height="40" stroke-width="3" /> <svg ref="sparklineEl" class="sparkline" :width="width" :height="height" stroke-width="3" />
</template> </template>

View file

@ -0,0 +1,24 @@
<script setup lang="ts">
import type { Account } from 'masto'
defineProps<{
account: Account
}>()
</script>
<template>
<button flex gap-2 items-center>
<AccountAvatar w-10 h-10 :account="account" shrink-0 />
<div flex="~ col gap1" shrink h-full overflow-hidden leading-none>
<div flex="~" gap-2>
<ContentRich
line-clamp-1 ws-pre-wrap break-all text-base
:content="getDisplayName(account, { rich: true })"
:emojis="account.emojis"
/>
<AccountBotIndicator v-if="account.bot" />
</div>
<AccountHandle text-sm :account="account" text-secondary-light />
</div>
</button>
</template>

View file

@ -9,8 +9,8 @@ const totalTrend = $computed(() =>
</script> </script>
<template> <template>
<div flex flex-row items-center gap2> <div flex flex-row items-center gap2 relative>
<div w-12 h-12 rounded-full bg-active flex place-items-center place-content-center> <div w-10 h-10 flex-none rounded-full bg-active flex place-items-center place-content-center>
<div i-ri:hashtag text-secondary text-lg /> <div i-ri:hashtag text-secondary text-lg />
</div> </div>
<div flex flex-col> <div flex flex-col>
@ -19,8 +19,8 @@ const totalTrend = $computed(() =>
</span> </span>
<CommonTrending :history="hashtag.history" text-xs text-secondary truncate /> <CommonTrending :history="hashtag.history" text-xs text-secondary truncate />
</div> </div>
<div v-if="totalTrend" w-12 h-12 flex place-items-center place-content-center ml-auto> <div v-if="totalTrend" absolute left-15 right-0 top-0 bottom-4 op35 flex place-items-center place-content-center ml-auto>
<CommonTrendingCharts :history="hashtag.history" text-xs text-secondary /> <CommonTrendingCharts :history="hashtag.history" text-xs text-secondary width="150" height="20" h-full w-full />
</div> </div>
</div> </div>
</template> </template>

View file

@ -12,9 +12,17 @@ const onActivate = () => {
</script> </script>
<template> <template>
<CommonScrollIntoView as="RouterLink" :active="active" :to="result.to" py2 block px2 :aria-selected="active" :class="{ 'bg-active': active }" hover:bg-active @click="() => onActivate()"> <CommonScrollIntoView
as="RouterLink"
hover:bg-active
:active="active"
:to="result.to" py2 block px2
:aria-selected="active"
:class="{ 'bg-active': active }"
@click="() => onActivate()"
>
<SearchHashtagInfo v-if="result.type === 'hashtag'" :hashtag="result.hashtag" /> <SearchHashtagInfo v-if="result.type === 'hashtag'" :hashtag="result.hashtag" />
<AccountInfo v-else-if="result.type === 'account' && result.account" :account="result.account" /> <SearchAccountInfo v-else-if="result.type === 'account' && result.account" :account="result.account" />
<StatusCard v-else-if="result.type === 'status' && result.status" :status="result.status" :actions="false" :show-reply-to="false" /> <StatusCard v-else-if="result.type === 'status' && result.status" :status="result.status" :actions="false" :show-reply-to="false" />
<!-- <div v-else-if="result.type === 'action'" text-center> <!-- <div v-else-if="result.type === 'action'" text-center>
{{ result.action!.label }} {{ result.action!.label }}

View file

@ -90,7 +90,7 @@ const activate = () => {
> >
</div> </div>
<!-- Results --> <!-- Results -->
<div p4 left-0 top-10 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none> <div left-0 top-12 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
<div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto py2> <div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto py2>
<span v-if="query.length === 0" block text-center text-sm text-secondary> <span v-if="query.length === 0" block text-center text-sm text-secondary>
{{ t('search.search_desc') }} {{ t('search.search_desc') }}

View file

@ -1,7 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Tag } from 'masto' import type { Tag } from 'masto'
import CommonScrollIntoView from '../common/CommonScrollIntoView.vue' import CommonScrollIntoView from '../common/CommonScrollIntoView.vue'
import HashtagInfo from '../search/HashtagInfo.vue'
const { items, command } = defineProps<{ const { items, command } = defineProps<{
items: Tag[] items: Tag[]
@ -60,7 +59,7 @@ defineExpose({
block m0 w-full text-left px2 py1 block m0 w-full text-left px2 py1
@click="selectItem(index)" @click="selectItem(index)"
> >
<HashtagInfo :hashtag="item" /> <SearchHashtagInfo :hashtag="item" />
</CommonScrollIntoView> </CommonScrollIntoView>
</template> </template>
</div> </div>