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

View File

@ -101,13 +101,14 @@
<span>{{ user.followersCount }}</span> <span>{{ user.followersCount }}</span>
</div> </div>
</div> </div>
<div class="follow-button-container">
<MkFollowButton <MkFollowButton
v-if="$i && user.id != $i.id" v-if="$i && user.id != $i.id"
class="koudoku-button"
:user="user" :user="user"
mini mini
/> />
</div> </div>
</div>
<div v-else> <div v-else>
<MkLoading /> <MkLoading />
</div> </div>
@ -210,6 +211,15 @@ onMounted(() => {
border-radius: 6px; 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 { &::after {
content: ""; content: "";
background-image: var(--blur, inherit); background-image: var(--blur, inherit);
@ -368,10 +378,11 @@ onMounted(() => {
} }
} }
> .koudoku-button { > .follow-button-container {
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; right: 8px;
z-index: 3;
} }
} }
} }

View File

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

View File

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