teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix: align status actions (#143)

Browse source
This commit is contained in:
Shinigami 2022-11-27 16:11:34 +01:00 committed by GitHub
parent 509ff9e016
commit e2000321c5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
components/status/StatusActionButton.vue
View file

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
defineProps<{ defineProps<{
text?: string | number text?: string | number
content: string
color: string color: string
icon: string icon: string
activeIcon?: string activeIcon?: string
@ -18,16 +19,18 @@ defineOptions({
<template> <template>
<component <component
:is="as || 'button'" :is="as || 'button'" w-fit
flex gap-1 items-center rounded group flex gap-1 items-center rounded group
:hover="`op100 ${hover}`" focus:outline-none :focus-visible="`op100 ${hover}`" :hover="hover" focus:outline-none :focus-visible="hover"
:class="active ? [color, 'op100'] : 'op50'" :class="active ? [color] : 'text-secondary'"
v-bind="$attrs" v-bind="$attrs"
> >
<CommonTooltip placement="bottom" :content="content">
<div rounded-full p2 :group-hover="groupHover" :group-focus-visible="groupHover" group-focus-visible:ring="2 current"> <div rounded-full p2 :group-hover="groupHover" :group-focus-visible="groupHover" group-focus-visible:ring="2 current">
<div :class="[active && activeIcon ? activeIcon : icon, { 'pointer-events-none': disabled }]" /> <div :class="[active && activeIcon ? activeIcon : icon, { 'pointer-events-none': disabled }]" />
</div> </div>
</CommonTooltip>
<span v-if="text">{{ text }}</span> <span v-if="text" :class="active ? [color] : 'text-secondary-light'" text-sm>{{ text }}</span>
</component> </component>
</template> </template>

26
components/status/StatusActions.vue
View file

@ -122,18 +122,20 @@ function editStatus() {
<template> <template>
<div flex justify-between> <div flex justify-between>
<CommonTooltip placement="bottom" content="Reply"> <div flex-1>
<StatusActionButton <StatusActionButton
content="Reply"
as="router-link" as="router-link"
:to="getStatusPath(status)" :to="getStatusPath(status)"
:text="status.repliesCount" :text="status.repliesCount"
color="text-blue" hover="text-blue" group-hover="bg-blue/10" color="text-blue" hover="text-blue" group-hover="bg-blue/10"
icon="i-ri:chat-3-line" icon="i-ri:chat-3-line"
/> />
</CommonTooltip> </div>
<CommonTooltip placement="bottom" content="Boost"> <div flex-1>
<StatusActionButton <StatusActionButton
content="Boost"
:text="status.reblogsCount" :text="status.reblogsCount"
color="text-green" hover="text-green" group-hover="bg-green/10" color="text-green" hover="text-green" group-hover="bg-green/10"
icon="i-ri:repeat-line" icon="i-ri:repeat-line"
@ -142,23 +144,24 @@ function editStatus() {
:disabled="isLoading.reblogged" :disabled="isLoading.reblogged"
@click="toggleReblog()" @click="toggleReblog()"
/> />
</CommonTooltip> </div>
<CommonTooltip placement="bottom" content="Favourite"> <div flex-1>
<StatusActionButton <StatusActionButton
content="Favourite"
:text="status.favouritesCount" :text="status.favouritesCount"
color="text-rose" hover="text-rose" group-hover="bg-rose/10" color="text-rose" hover="text-rose" group-hover="bg-rose/10"
icon="i-ri:heart-3-line" icon="i-ri:heart-3-line"
active-icon="i-ri:heart-3-fill" active-icon="i-ri:heart-3-fill"
:active="status.favourited" :active="status.favourited"
:disabled="isLoading.favourited" :disabled="isLoading.favourited"
@click="toggleFavourite()" @click="toggleFavourite()"
/> />
</CommonTooltip> </div>
<CommonTooltip placement="bottom" content="Bookmark"> <div flex-none>
<StatusActionButton <StatusActionButton
content="Bookmark"
color="text-yellow" hover="text-yellow" group-hover="bg-yellow/10" color="text-yellow" hover="text-yellow" group-hover="bg-yellow/10"
icon="i-ri:bookmark-line" icon="i-ri:bookmark-line"
active-icon="i-ri:bookmark-fill" active-icon="i-ri:bookmark-fill"
@ -166,15 +169,14 @@ function editStatus() {
:disabled="isLoading.bookmarked" :disabled="isLoading.bookmarked"
@click="toggleBookmark()" @click="toggleBookmark()"
/> />
</CommonTooltip> </div>
<CommonDropdown placement="bottom"> <CommonDropdown flex-none ml3 placement="bottom">
<CommonTooltip placement="bottom" content="More">
<StatusActionButton <StatusActionButton
content="More"
color="text-purple" hover="text-purple" group-hover="bg-purple/10" color="text-purple" hover="text-purple" group-hover="bg-purple/10"
icon="i-ri:more-line" icon="i-ri:more-line"
/> />
</CommonTooltip>
<template #popper> <template #popper>
<div flex="~ col"> <div flex="~ col">