mirrors/elk
1
0
Fork 0
mirror of https://github.com/elk-zone/elk.git synced 2024-11-22 01:15:25 +03:00
Code Issues Projects Releases Packages 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

17
components/status/StatusActionButton.vue
View file

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

34
components/status/StatusActions.vue
View file

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