fix: align status actions (#143)
This commit is contained in:
parent
509ff9e016
commit
e2000321c5
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in a new issue