ui: restyling navbar

This commit is contained in:
Anthony Fu 2022-11-23 16:08:49 +08:00
parent c42fe49ce9
commit 507aedceee
17 changed files with 56 additions and 36 deletions

View file

@ -9,7 +9,6 @@ const { paginator } = defineProps<{
<template> <template>
<CommonPaginator <CommonPaginator
:paginator="paginator" :paginator="paginator"
border="t base"
> >
<template #default="{ item }"> <template #default="{ item }">
<AccountCard <AccountCard

View file

@ -1,9 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
defineProps<{ defineProps<{
modelValue: string
options: string[] options: string[]
}>() }>()
defineEmits(['update:modelValue'])
const { modelValue } = defineModel<{
modelValue: string
}>()
function toValidName(otpion: string) { function toValidName(otpion: string) {
return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-') return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
@ -11,11 +13,27 @@ function toValidName(otpion: string) {
</script> </script>
<template> <template>
<div flex w-full> <div flex w-full text-lg>
<template v-for="option in options" :key="option"> <template v-for="option in options" :key="option">
<input <input
:id="`tab-${toValidName(option)}`" :checked="modelValue === option" :value="option" type="radio" name="tabs" display="none" @change="$emit('update:modelValue', option)" :id="`tab-${toValidName(option)}`"
><label flex w-full justify-center h-8 cursor-pointer :for="`tab-${toValidName(option)}`" :class="modelValue === option ? 'color-primary' : 'hover:color-purple'" tabindex="1" @keypress.enter="$emit('update:modelValue', option)">{{ option }}</label> :checked="modelValue === option"
:value="option"
type="radio"
name="tabs"
display="none"
@change="modelValue = option"
><label
flex flex-1 cursor-pointer pt2 m1 rounded transition-all
:for="`tab-${toValidName(option)}`"
tabindex="1"
hover:bg-active
@keypress.enter="modelValue = option"
><span
mxa px2
:class="modelValue === option ? 'font-bold border-b-3 border-primary' : 'op50 hover:op50'"
>{{ option }}</span>
</label>
</template> </template>
</div> </div>
</template> </template>

View file

@ -9,7 +9,6 @@ const { paginator } = defineProps<{
<template> <template>
<CommonPaginator <CommonPaginator
:paginator="paginator" :paginator="paginator"
border="t base"
> >
<template #default="{ item }"> <template #default="{ item }">
<ConversationCard <ConversationCard

View file

@ -1,14 +1,19 @@
<template> <template>
<div relative> <div relative>
<div sticky top-0 bg="#222" z10> <div
<div flex justify-between> sticky top-0 z10
<div p3 flex gap-1> border="b base"
backdrop="blur-10px brightness-120 dark:brightness-80"
>
<div flex justify-between px5 py4>
<div flex gap-1>
<slot name="title" /> <slot name="title" />
</div> </div>
<div p3 flex> <div flex>
<slot name="actions" /> <slot name="actions" />
</div> </div>
</div> </div>
<slot name="header" />
</div> </div>
<div> <div>
<slot /> <slot />

View file

@ -18,7 +18,7 @@ const displayName = $computed(() => getDisplayName(notification.account))
</template> </template>
<template v-if="notification.type === 'follow_request'"> <template v-if="notification.type === 'follow_request'">
<div flex ml-4> <div flex ml-4>
<div i-ri:user-follow-fill mr-3 color-gray />{{ displayName }} requested to follow you <div i-ri:user-follow-fill mr-3 />{{ displayName }} requested to follow you
</div> </div>
<!-- TODO: accept request --> <!-- TODO: accept request -->
<AccountCard :account="notification.account" p3 /> <AccountCard :account="notification.account" p3 />

View file

@ -9,12 +9,11 @@ const { paginator } = defineProps<{
<template> <template>
<CommonPaginator <CommonPaginator
:paginator="paginator" :paginator="paginator"
border="t base"
> >
<template #default="{ item }"> <template #default="{ item }">
<NotificationCard <NotificationCard
:notification="item" :notification="item"
border="t base" pt-4 border="b base" pt-4
/> />
</template> </template>
</CommonPaginator> </CommonPaginator>

View file

@ -9,7 +9,6 @@ const { paginator } = defineProps<{
<template> <template>
<CommonPaginator <CommonPaginator
:paginator="paginator" :paginator="paginator"
border="t base"
> >
<template #default="{ item }"> <template #default="{ item }">
<StatusCard <StatusCard

View file

@ -9,10 +9,10 @@ const paginator = masto.bookmarks.getIterator()
<template> <template>
<MainContent> <MainContent>
<template #title> <template #title>
<div i-ri:bookmark-fill h-6 mr-1 /><span>Bookmarks</span> <span text-lg font-bold>Bookmarks</span>
</template> </template>
<template #actions> <template #actions>
<div color-gray i-ri:equalizer-fill mr-1 h-6 /> <div i-ri:equalizer-fill mr-1 h-6 />
</template> </template>
<slot> <slot>
<TimelinePaginator :paginator="paginator" /> <TimelinePaginator :paginator="paginator" />

View file

@ -9,10 +9,10 @@ const paginator = masto.conversations.getIterator()
<template> <template>
<MainContent> <MainContent>
<template #title> <template #title>
<div i-ri:at-line h-6 mr-1 /><span>Conversations</span> <span text-lg font-bold>Conversations</span>
</template> </template>
<template #actions> <template #actions>
<div color-gray i-ri:equalizer-fill mr-1 h-6 /> <div i-ri:equalizer-fill mr-1 h-6 />
</template> </template>
<slot> <slot>
<ConversationPaginator :paginator="paginator" /> <ConversationPaginator :paginator="paginator" />

View file

@ -12,7 +12,7 @@ const paginator = masto.trends.getStatuses()
<div i-ri:hashtag h-6 mr-1 /><span>Explore</span> <div i-ri:hashtag h-6 mr-1 /><span>Explore</span>
</template> </template>
<template #actions> <template #actions>
<div color-gray i-ri:equalizer-fill mr-1 h-6 /> <div i-ri:equalizer-fill mr-1 h-6 />
</template> </template>
<slot> <slot>
<!-- TODO: Tabs for trending statuses, tags, and links --> <!-- TODO: Tabs for trending statuses, tags, and links -->

View file

@ -9,10 +9,10 @@ const paginator = masto.favourites.getIterator()
<template> <template>
<MainContent> <MainContent>
<template #title> <template #title>
<div i-ri:heart-fill h-6 mr-1 /><span>Favourites</span> <span text-lg font-bold>Favourites</span>
</template> </template>
<template #actions> <template #actions>
<div color-gray i-ri:equalizer-fill mr-1 h-6 /> <div i-ri:equalizer-fill mr-1 h-6 />
</template> </template>
<slot> <slot>
<TimelinePaginator :paginator="paginator" /> <TimelinePaginator :paginator="paginator" />

View file

@ -9,10 +9,10 @@ const paginator = masto.timelines.getHomeIterable()
<template> <template>
<MainContent> <MainContent>
<template #title> <template #title>
<div i-ri:home-fill h-6 mr-1 /><span>Home</span> <span text-lg font-bold>Home</span>
</template> </template>
<template #actions> <template #actions>
<div color-gray i-ri:equalizer-fill mr-1 h-6 /> <div i-ri:equalizer-fill mr-1 h-6 />
</template> </template>
<slot> <slot>
<TimelinePaginator :paginator="paginator" /> <TimelinePaginator :paginator="paginator" />

View file

@ -14,13 +14,15 @@ const paginator = $computed(() => {
<template> <template>
<MainContent> <MainContent>
<template #title> <template #title>
<div i-ri:notification-2-fill h-6 mr-1 /><span>Notifications</span> <span text-lg font-bold>Notifications</span>
</template> </template>
<template #actions> <template #actions>
<div color-gray i-ri:equalizer-fill mr-1 h-6 /> <div i-ri:equalizer-fill mr-1 h-6 />
</template>
<template #header>
<CommonTabs v-model="tab" :options="tabNames" />
</template> </template>
<slot> <slot>
<CommonTabs v-model="tab" :options="tabNames" />
<NotificationPaginator :key="tab" :paginator="paginator" /> <NotificationPaginator :key="tab" :paginator="paginator" />
</slot> </slot>
</MainContent> </MainContent>

View file

@ -6,10 +6,10 @@ const paginator = masto.timelines.getPublicIterable()
<template> <template>
<MainContent> <MainContent>
<template #title> <template #title>
<div i-ri:earth-fill h-6 mr-1 /><span>Federated Timeline</span> <span text-lg font-bold>Federated Timeline</span>
</template> </template>
<template #actions> <template #actions>
<div color-gray i-ri:equalizer-fill mr-1 h-6 /> <div i-ri:equalizer-fill mr-1 h-6 />
</template> </template>
<slot> <slot>
<TimelinePaginator :paginator="paginator" /> <TimelinePaginator :paginator="paginator" />

View file

@ -4,17 +4,16 @@ const router = useRouter()
if (!token.value) if (!token.value)
router.replace('/public') router.replace('/public')
const { data: timelines } = await useAsyncData('timelines-home', () => masto.timelines.fetchPublic({ local: true }).then(r => r.value)) const { data: timelines } = await useAsyncData('timelines-home', () => masto.timelines.fetchPublic({ local: true }).then(r => r.value))
</script> </script>
<template> <template>
<MainContent> <MainContent>
<template #title> <template #title>
<div i-ri:group-fill h-6 mr-1 /><span>Local timeline</span> <span text-lg font-bold>Local timeline</span>
</template> </template>
<template #actions> <template #actions>
<div color-gray i-ri:equalizer-fill mr-1 h-6 /> <div i-ri:equalizer-fill mr-1 h-6 />
</template> </template>
<slot> <slot>
<TimelineList :timelines="timelines" /> <TimelineList :timelines="timelines" />

View file

@ -8,10 +8,10 @@ const paginator = masto.timelines.getHashtagIterable(tag)
<template> <template>
<MainContent> <MainContent>
<template #title> <template #title>
<div i-ri:hashtag h-6 mr-1 /><span>{{ tag }}</span> <span text-lg font-bold>#{{ tag }}</span>
</template> </template>
<template #actions> <template #actions>
<div color-gray i-ri:equalizer-fill mr-1 h-6 /> <div i-ri:equalizer-fill mr-1 h-6 />
</template> </template>
<slot> <slot>
<TimelinePaginator :paginator="paginator" /> <TimelinePaginator :paginator="paginator" />

View file

@ -3,13 +3,13 @@
--c-primary-active: #3a7b8c; --c-primary-active: #3a7b8c;
--c-border: #88888820; --c-border: #88888820;
--c-bg-base: #fff; --c-bg-base: #fff;
--c-bg-active: #efefef; --c-bg-active: #f6f6f6;
--c-text-base: #222; --c-text-base: #222;
--c-text-secondary: #888; --c-text-secondary: #888;
} }
.dark { .dark {
--c-bg-base: #111; --c-bg-base: #111;
--c-bg-active: #222; --c-bg-active: #151515;
--c-text-base: #fff; --c-text-base: #fff;
} }