misskey/packages/frontend/src/components/MkPreferenceContainer.vue

<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->

<template>
<div :class="$style.root">
	<div :class="$style.body">
		<slot></slot>
	</div>
	<div :class="$style.menu">
		<i v-if="isAccountOverrided" class="ti ti-user-cog" style="color: var(--MI_THEME-accent); opacity: 0.7;"></i>
		<div :class="$style.buttons">
			<button class="_button" style="color: var(--MI_THEME-fg)" @click="showMenu"><i class="ti ti-dots"></i></button>
		</div>
	</div>
</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { PREF_DEF } from '@/preferences/def.js';
import * as os from '@/os.js';
import { profileManager } from '@/preferences.js';

const props = withDefaults(defineProps<{
	k: keyof typeof PREF_DEF;
}>(), {
});

const isAccountOverrided = ref(profileManager.isAccountOverrided(props.k));

function showMenu(ev: MouseEvent) {
	const i = window.setInterval(() => {
		isAccountOverrided.value = profileManager.isAccountOverrided(props.k);
	}, 100);
	os.popupMenu(profileManager.getPerPrefMenu(props.k), ev.currentTarget ?? ev.target, {
		onClosing: () => {
			window.clearInterval(i);
		},
	});
}
</script>

<style lang="scss" module>
.root {
	position: relative;
	display: flex;

	&:hover {
		&::after {
			content: '';
			position: absolute;
			top: -8px;
			left: -8px;
			width: calc(100% + 16px);
			height: calc(100% + 16px);
			border-radius: 8px;
			background: light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.02));
			pointer-events: none;
		}

		.menu {
			.buttons {
				opacity: 0.7;
			}
		}
	}

	.body {
		flex: 1;
	}

	.menu {
		display: flex;
		gap: 8px;
		align-items: center;
		margin-left: 12px;
		font-size: 12px;
		padding-left: 8px;
		border-left: solid 1px var(--MI_THEME-divider);

		&:hover {
			.buttons {
				opacity: 1;
			}
		}

		.buttons {
			opacity: 0.3;
		}
	}
}
</style>