Move user menu to MkFollowButton
This commit is contained in:
Freeplay
parent
1862d83f9f
commit
85c5af4a5b
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -101,12 +101,13 @@
|
|||
<span>{{ user.followersCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<MkFollowButton
|
||||
v-if="$i && user.id != $i.id"
|
||||
class="koudoku-button"
|
||||
:user="user"
|
||||
mini
|
||||
/>
|
||||
<div class="follow-button-container">
|
||||
<MkFollowButton
|
||||
v-if="$i && user.id != $i.id"
|
||||
:user="user"
|
||||
mini
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<MkLoading />
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue