rudeshark.net/packages/client/src/components/MkVisibilityPicker.vue
2023-04-07 17:01:42 -07:00

244 lines
4.9 KiB
Vue

<template>
<MkModal
ref="modal"
:z-priority="'high'"
:src="src"
@click="modal.close()"
@closed="emit('closed')"
>
<div class="_popup" :class="$style.root">
<button
key="public"
class="_button"
:class="[$style.item, { [$style.active]: v === 'public' }]"
data-index="1"
@click="choose('public')"
>
<div :class="$style.icon">
<i class="ph-planet ph-bold ph-lg"></i>
</div>
<div :class="$style.body">
<span :class="$style.itemTitle">{{
i18n.ts._visibility.public
}}</span>
<span :class="$style.itemDescription">{{
i18n.ts._visibility.publicDescription
}}</span>
</div>
</button>
<button
key="home"
class="_button"
:class="[$style.item, { [$style.active]: v === 'home' }]"
data-index="2"
@click="choose('home')"
>
<div :class="$style.icon">
<i class="ph-house ph-bold ph-lg"></i>
</div>
<div :class="$style.body">
<span :class="$style.itemTitle">{{
i18n.ts._visibility.home
}}</span>
<span :class="$style.itemDescription">{{
i18n.ts._visibility.homeDescription
}}</span>
</div>
</button>
<button
key="followers"
class="_button"
:class="[$style.item, { [$style.active]: v === 'followers' }]"
data-index="3"
@click="choose('followers')"
>
<div :class="$style.icon">
<i class="ph-lock-simple-open ph-bold ph-lg"></i>
</div>
<div :class="$style.body">
<span :class="$style.itemTitle">{{
i18n.ts._visibility.followers
}}</span>
<span :class="$style.itemDescription">{{
i18n.ts._visibility.followersDescription
}}</span>
</div>
</button>
<button
key="specified"
:disabled="localOnly"
class="_button"
:class="[$style.item, { [$style.active]: v === 'specified' }]"
data-index="4"
@click="choose('specified')"
>
<div :class="$style.icon">
<i class="ph-envelope-simple-open ph-bold ph-lg"></i>
</div>
<div :class="$style.body">
<span :class="$style.itemTitle">{{
i18n.ts._visibility.specified
}}</span>
<span :class="$style.itemDescription">{{
i18n.ts._visibility.specifiedDescription
}}</span>
</div>
</button>
<div :class="$style.divider"></div>
<button
key="localOnly"
class="_button"
:class="[
$style.item,
$style.localOnly,
{ [$style.active]: localOnly },
]"
data-index="5"
@click="localOnly = !localOnly"
>
<div :class="$style.icon">
<i class="ph-hand-fist ph-bold ph-lg"></i>
</div>
<div :class="$style.body">
<span :class="$style.itemTitle">{{
i18n.ts._visibility.localOnly
}}</span>
<span :class="$style.itemDescription">{{
i18n.ts._visibility.localOnlyDescription
}}</span>
</div>
<div :class="$style.toggle">
<i
:class="
localOnly
? 'ph-toggle-right ph-bold ph-lg'
: 'ph-toggle-left ph-bold ph-lg'
"
></i>
</div>
</button>
</div>
</MkModal>
</template>
<script lang="ts" setup>
import { nextTick, watch } from "vue";
import * as misskey from "calckey-js";
import MkModal from "@/components/MkModal.vue";
import { i18n } from "@/i18n";
const modal = $shallowRef<InstanceType<typeof MkModal>>();
const props = withDefaults(
defineProps<{
currentVisibility: (typeof misskey.noteVisibilities)[number];
currentLocalOnly: boolean;
src?: HTMLElement;
}>(),
{}
);
const emit = defineEmits<{
(
ev: "changeVisibility",
v: (typeof misskey.noteVisibilities)[number]
): void;
(ev: "changeLocalOnly", v: boolean): void;
(ev: "closed"): void;
}>();
let v = $ref(props.currentVisibility);
let localOnly = $ref(props.currentLocalOnly);
watch($$(localOnly), () => {
emit("changeLocalOnly", localOnly);
});
function choose(visibility: (typeof misskey.noteVisibilities)[number]): void {
v = visibility;
emit("changeVisibility", visibility);
nextTick(() => {
modal.close();
});
}
</script>
<style lang="scss" module>
.root {
width: 240px;
padding: 8px 0;
}
.divider {
margin: 8px 0;
border-top: solid 0.5px var(--divider);
}
.item {
display: flex;
padding: 8px 14px;
font-size: 12px;
text-align: left;
width: 100%;
box-sizing: border-box;
&:hover {
background: rgba(0, 0, 0, 0.05);
}
&:active {
background: rgba(0, 0, 0, 0.1);
}
&.active {
color: var(--fgOnAccent);
background: var(--accent);
}
&.localOnly.active {
color: var(--accent);
background: inherit;
}
}
.icon {
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
width: 16px;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
}
.body {
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.itemTitle {
display: block;
font-weight: bold;
}
.itemDescription {
opacity: 0.6;
}
.toggle {
display: flex;
justify-content: center;
align-items: center;
margin-left: 10px;
width: 16px;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
}
</style>