Move user menu to MkFollowButton

This commit is contained in:
Freeplay 2023-06-12 17:59:13 -04:00
parent 1862d83f9f
commit 85c5af4a5b
4 changed files with 44 additions and 38 deletions

View File

@ -1,4 +1,13 @@
<template>
<button
class="menu _button"
@click="menu"
v-tooltip="i18n.ts.menu"
>
<i
class="ph-dots-three-outline ph-bold ph-lg"
></i>
</button>
<button
v-if="$i != null && $i.id != user.id"
class="kpoogebi _button follow-button"
@ -60,6 +69,11 @@ import * as os from "@/os";
import { stream } from "@/stream";
import { i18n } from "@/i18n";
import { $i } from "@/account";
import { getUserMenu } from "@/scripts/get-user-menu";
import { useRouter } from "@/router";
const router = useRouter();
const emit = defineEmits(["refresh"]);
const props = withDefaults(
@ -151,6 +165,13 @@ async function onClick() {
}
}
function menu(ev) {
os.popupMenu(
getUserMenu(props.user, router),
ev.currentTarget ?? ev.target
);
}
onMounted(() => {
connection.on("follow", onFollowChange);
connection.on("unfollow", onFollowChange);
@ -176,6 +197,7 @@ onBeforeUnmount(() => {
height: 2em;
border-radius: 100px;
background: var(--bg);
margin-left: 14px;
&.full {
padding: 0.2em 0.7em;

View File

@ -101,13 +101,14 @@
<span>{{ user.followersCount }}</span>
</div>
</div>
<div class="follow-button-container">
<MkFollowButton
v-if="$i && user.id != $i.id"
class="koudoku-button"
:user="user"
mini
/>
</div>
</div>
<div v-else>
<MkLoading />
</div>
@ -210,6 +211,15 @@ onMounted(() => {
border-radius: 6px;
}
&::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
height: 84px;
background: linear-gradient(-125deg, rgba(0,0,0,0.7), transparent, transparent);
}
&::after {
content: "";
background-image: var(--blur, inherit);
@ -368,10 +378,11 @@ onMounted(() => {
}
}
> .koudoku-button {
> .follow-button-container {
position: absolute;
top: 8px;
right: 8px;
z-index: 3;
}
}
}

View File

@ -162,15 +162,6 @@
</div>
<div class="follow-container">
<div class="actions">
<button
class="menu _button"
@click="menu"
v-tooltip="i18n.ts.menu"
>
<i
class="ph-dots-three-outline ph-bold ph-lg"
></i>
</button>
<MkFollowButton
:user="user"
@refresh="emit('refresh')"
@ -345,11 +336,9 @@ import MkRemoteCaution from "@/components/MkRemoteCaution.vue";
import MkInfo from "@/components/MkInfo.vue";
import MkMoved from "@/components/MkMoved.vue";
import { getScrollPosition } from "@/scripts/scroll";
import { getUserMenu } from "@/scripts/get-user-menu";
import number from "@/filters/number";
import { userPage } from "@/filters/user";
import * as os from "@/os";
import { useRouter } from "@/router";
import { i18n } from "@/i18n";
import { $i } from "@/account";
import { host } from "@/config";
@ -365,8 +354,6 @@ const props = withDefaults(
{}
);
const router = useRouter();
let parallaxAnimationId = $ref<null | number>(null);
let narrow = $ref<null | boolean>(null);
let rootEl = $ref<null | HTMLElement>(null);
@ -423,13 +410,6 @@ const timeForThem = $computed(() => {
const patrons = await os.api("patrons");
function menu(ev) {
os.popupMenu(
getUserMenu(props.user, router),
ev.currentTarget ?? ev.target
);
}
function parallaxLoop() {
parallaxAnimationId = window.requestAnimationFrame(parallaxLoop);
parallax();
@ -599,17 +579,6 @@ onUnmounted(() => {
display: flex;
justify-content: center;
align-items: center;
> .menu {
height: 31px;
width: 31px;
color: --fg;
font-size: 16px;
}
> :deep(.follow-button) {
margin-left: 8px;
}
}
> .title {

View File

@ -225,6 +225,10 @@ export function getUserMenu(user, router: Router = mainRouter) {
}
let menu = [
{
type: "label",
text: user.host ? `@${user.username}@${user.host || host}` : `@${user.username}`
},
{
icon: "ph-at ph-bold ph-lg",
text: i18n.ts.copyUsername,