rudeshark.net/packages/client/src/components/MkAutocomplete.vue

559 lines
11 KiB
Vue
Raw Normal View History

2018-02-20 12:29:52 +01:00
<template>
2023-04-08 02:01:42 +02:00
<div
ref="rootEl"
class="swhvrteh _popup _shadow"
:style="{ zIndex }"
@contextmenu.prevent="() => {}"
>
<ol v-if="type === 'user'" ref="suggests" class="users">
<li
v-for="user in users"
tabindex="-1"
class="user"
@click="complete(type, user)"
@keydown="onKeydown"
>
<img class="avatar" :src="user.avatarUrl" />
<span class="name">
<MkUserName :key="user.id" :user="user" />
</span>
<span class="username">@{{ acct(user) }}</span>
</li>
<li
tabindex="-1"
class="choose"
@click="chooseUser()"
@keydown="onKeydown"
>
{{ i18n.ts.selectUser }}
</li>
</ol>
<ol v-else-if="hashtags.length > 0" ref="suggests" class="hashtags">
<li
v-for="hashtag in hashtags"
tabindex="-1"
@click="complete(type, hashtag)"
@keydown="onKeydown"
>
<span class="name">{{ hashtag }}</span>
</li>
</ol>
<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
<li
v-for="emoji in emojis"
tabindex="-1"
@click="complete(type, emoji.emoji)"
@keydown="onKeydown"
>
<span v-if="emoji.isCustomEmoji" class="emoji"
><img
:src="
defaultStore.state.disableShowingAnimatedImages
? getStaticImageUrl(emoji.url)
: emoji.url
"
:alt="emoji.emoji"
/></span>
<span
v-else-if="!defaultStore.state.useOsNativeEmojis"
class="emoji"
><img :src="emoji.url" :alt="emoji.emoji"
/></span>
<span v-else class="emoji">{{ emoji.emoji }}</span>
<span
class="name"
v-html="emoji.name.replace(q, `<b>${q}</b>`)"
></span>
<span v-if="emoji.aliasOf" class="alias"
>({{ emoji.aliasOf }})</span
>
</li>
</ol>
<ol v-else-if="mfmTags.length > 0" ref="suggests" class="mfmTags">
<li
v-for="tag in mfmTags"
tabindex="-1"
@click="complete(type, tag)"
@keydown="onKeydown"
>
<span class="tag">{{ tag }}</span>
</li>
</ol>
</div>
2018-02-20 12:29:52 +01:00
</template>
<script lang="ts">
2023-04-08 02:01:42 +02:00
import {
markRaw,
ref,
onUpdated,
onMounted,
onBeforeUnmount,
nextTick,
watch,
} from "vue";
import contains from "@/scripts/contains";
import { char2filePath } from "@/scripts/twemoji-base";
import { getStaticImageUrl } from "@/scripts/get-static-image-url";
import { acct } from "@/filters/user";
import * as os from "@/os";
import { MFM_TAGS } from "@/scripts/mfm-tags";
import { defaultStore } from "@/store";
import { emojilist } from "@/scripts/emojilist";
import { instance } from "@/instance";
import { i18n } from "@/i18n";
2018-02-20 12:29:52 +01:00
2018-11-01 13:28:39 +01:00
type EmojiDef = {
emoji: string;
name: string;
aliasOf?: string;
url?: string;
isCustomEmoji?: boolean;
2018-11-01 13:28:39 +01:00
};
2023-04-08 02:01:42 +02:00
const lib = emojilist.filter((x) => x.category !== "flags");
2018-04-09 11:52:29 +02:00
2023-04-08 02:01:42 +02:00
const emjdb: EmojiDef[] = lib.map((x) => ({
emoji: x.char,
name: x.name,
feat: Add Badge Image to Push Notification (#8012) * fix * nanka iroiro * wip * wip * fix lint * fix loginId * fix * refactor * refactor * remove follow action * clean up * Revert "remove follow action" This reverts commit defbb416480905af2150d1c92f10d8e1d1288c0a. * Revert "clean up" This reverts commit f94919cb9cff41e274044fc69c56ad36a33974f2. * remove fetch specification * renoteの条件追加 * apiFetch => cli * bypass fetch? * fix * refactor: use path alias * temp: add submodule * remove submodule * enhane: unison-reloadに指定したパスに移動できるように * null * null * feat: ログインするアカウントのIDをクエリ文字列で指定する機能 * null * await? * rename * rename * Update read.ts * merge * get-note-summary * fix * swパッケージに * add missing packages * fix getNoteSummary * add webpack-cli * :v: * remove plugins * sw-inject分離したがテストしてない * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix * :v: * clean up config * typesを戻した * backend/src/web/index.ts * notification-badges * add scripts * change create-notification.ts * Update packages/client/src/components/notification.vue Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> * disconnect * oops * Failed to load the script unexpectedly回避 sw.jsとlib.tsを分離してみた * truncate notification * Update packages/client/src/ui/_common_/common.vue Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * clean up * clean up * refactor * キャッシュ対策 * Truncate push notification message * fix * クライアントがあったらストリームに接続しているということなので通知しない判定の位置を修正 * components/drive-file-thumbnail.vue * components/drive-select-dialog.vue * components/drive-window.vue * merge * fix * Service Workerのビルドにesbuildを使うようにする * return createEmptyNotification() * fix * fix * i18n.ts * update * :v: * remove ts-loader * fix * fix * enhance: Service Workerを常に登録するように * pollEnded * pollEnded * URLをsw.jsに戻す * clean up * fix lint * changelog * alpha-test * also with twemoji * add isMimeImage function * catch * Colour => Color * char2file => char2filePath * Update autocomplete.vue * remove clone? Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
2022-06-19 17:33:46 +02:00
url: char2filePath(x.char),
2018-02-25 09:03:39 +01:00
}));
2018-04-09 11:52:29 +02:00
for (const x of lib) {
if (x.keywords) {
for (const k of x.keywords) {
2018-02-25 09:03:39 +01:00
emjdb.push({
emoji: x.char,
2018-02-25 09:03:39 +01:00
name: k,
aliasOf: x.name,
feat: Add Badge Image to Push Notification (#8012) * fix * nanka iroiro * wip * wip * fix lint * fix loginId * fix * refactor * refactor * remove follow action * clean up * Revert "remove follow action" This reverts commit defbb416480905af2150d1c92f10d8e1d1288c0a. * Revert "clean up" This reverts commit f94919cb9cff41e274044fc69c56ad36a33974f2. * remove fetch specification * renoteの条件追加 * apiFetch => cli * bypass fetch? * fix * refactor: use path alias * temp: add submodule * remove submodule * enhane: unison-reloadに指定したパスに移動できるように * null * null * feat: ログインするアカウントのIDをクエリ文字列で指定する機能 * null * await? * rename * rename * Update read.ts * merge * get-note-summary * fix * swパッケージに * add missing packages * fix getNoteSummary * add webpack-cli * :v: * remove plugins * sw-inject分離したがテストしてない * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix * :v: * clean up config * typesを戻した * backend/src/web/index.ts * notification-badges * add scripts * change create-notification.ts * Update packages/client/src/components/notification.vue Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> * disconnect * oops * Failed to load the script unexpectedly回避 sw.jsとlib.tsを分離してみた * truncate notification * Update packages/client/src/ui/_common_/common.vue Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * clean up * clean up * refactor * キャッシュ対策 * Truncate push notification message * fix * クライアントがあったらストリームに接続しているということなので通知しない判定の位置を修正 * components/drive-file-thumbnail.vue * components/drive-select-dialog.vue * components/drive-window.vue * merge * fix * Service Workerのビルドにesbuildを使うようにする * return createEmptyNotification() * fix * fix * i18n.ts * update * :v: * remove ts-loader * fix * fix * enhance: Service Workerを常に登録するように * pollEnded * pollEnded * URLをsw.jsに戻す * clean up * fix lint * changelog * alpha-test * also with twemoji * add isMimeImage function * catch * Colour => Color * char2file => char2filePath * Update autocomplete.vue * remove clone? Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
2022-06-19 17:33:46 +02:00
url: char2filePath(x.char),
2018-02-25 09:03:39 +01:00
});
}
2018-02-25 09:03:39 +01:00
}
}
2018-04-09 11:52:29 +02:00
2018-02-25 09:03:39 +01:00
emjdb.sort((a, b) => a.name.length - b.name.length);
//#region Construct Emoji DB
const customEmojis = instance.emojis;
const emojiDefinitions: EmojiDef[] = [];
for (const x of customEmojis) {
emojiDefinitions.push({
name: x.name,
emoji: `:${x.name}:`,
url: x.url,
2023-04-08 02:01:42 +02:00
isCustomEmoji: true,
});
if (x.aliases) {
for (const alias of x.aliases) {
emojiDefinitions.push({
name: alias,
aliasOf: x.name,
emoji: `:${x.name}:`,
url: x.url,
2023-04-08 02:01:42 +02:00
isCustomEmoji: true,
});
}
}
}
emojiDefinitions.sort((a, b) => a.name.length - b.name.length);
const emojiDb = markRaw(emojiDefinitions.concat(emjdb));
//#endregion
export default {
emojiDb,
emojiDefinitions,
emojilist,
customEmojis,
};
</script>
2018-07-18 00:19:24 +02:00
<script lang="ts" setup>
const props = defineProps<{
type: string;
q: string | null;
textarea: HTMLTextAreaElement;
close: () => void;
x: number;
y: number;
}>();
const emit = defineEmits<{
2023-04-08 02:01:42 +02:00
(event: "done", value: { type: string; value: any }): void;
(event: "closed"): void;
}>();
const suggests = ref<Element>();
const rootEl = ref<HTMLDivElement>();
const fetching = ref(true);
const users = ref<any[]>([]);
const hashtags = ref<any[]>([]);
2023-04-08 02:01:42 +02:00
const emojis = ref<EmojiDef[]>([]);
const items = ref<Element[] | HTMLCollection>([]);
const mfmTags = ref<string[]>([]);
const select = ref(-1);
2023-04-08 02:01:42 +02:00
const zIndex = os.claimZIndex("high");
function complete(type: string, value: any) {
2023-04-08 02:01:42 +02:00
emit("done", { type, value });
emit("closed");
if (type === "emoji") {
let recents = defaultStore.state.recentlyUsedEmojis;
recents = recents.filter((emoji: any) => emoji !== value);
recents.unshift(value);
2023-04-08 02:01:42 +02:00
defaultStore.set("recentlyUsedEmojis", recents.splice(0, 32));
}
}
2018-07-18 00:19:24 +02:00
function setPosition() {
if (!rootEl.value) return;
if (props.x + rootEl.value.offsetWidth > window.innerWidth) {
2023-04-08 02:01:42 +02:00
rootEl.value.style.left =
window.innerWidth - rootEl.value.offsetWidth + "px";
} else {
rootEl.value.style.left = `${props.x}px`;
}
if (props.y + rootEl.value.offsetHeight > window.innerHeight) {
2023-04-08 02:01:42 +02:00
rootEl.value.style.top = props.y - rootEl.value.offsetHeight + "px";
rootEl.value.style.marginTop = "0";
} else {
2023-04-08 02:01:42 +02:00
rootEl.value.style.top = props.y + "px";
rootEl.value.style.marginTop = "calc(1em + 8px)";
}
}
2020-01-31 23:38:40 +01:00
function exec() {
select.value = -1;
if (suggests.value) {
for (const el of Array.from(items.value)) {
2023-04-08 02:01:42 +02:00
el.removeAttribute("data-selected");
}
}
2023-04-08 02:01:42 +02:00
if (props.type === "user") {
if (!props.q) {
users.value = [];
fetching.value = false;
return;
}
2018-02-20 12:29:52 +01:00
const cacheKey = `autocomplete:user:${props.q}`;
const cache = sessionStorage.getItem(cacheKey);
if (cache) {
users.value = JSON.parse(cache);
fetching.value = false;
} else {
2023-04-08 02:01:42 +02:00
os.api("users/search-by-username-and-host", {
username: props.q,
limit: 10,
2023-04-08 02:01:42 +02:00
detail: false,
}).then((searchedUsers) => {
users.value = searchedUsers as any[];
fetching.value = false;
// キャッシュ
sessionStorage.setItem(cacheKey, JSON.stringify(searchedUsers));
});
}
2023-04-08 02:01:42 +02:00
} else if (props.type === "hashtag") {
if (!props.q || props.q === "") {
hashtags.value = JSON.parse(
localStorage.getItem("hashtags") || "[]"
);
fetching.value = false;
} else {
const cacheKey = `autocomplete:hashtag:${props.q}`;
const cache = sessionStorage.getItem(cacheKey);
if (cache) {
const hashtags = JSON.parse(cache);
hashtags.value = hashtags;
fetching.value = false;
} else {
2023-04-08 02:01:42 +02:00
os.api("hashtags/search", {
query: props.q,
2023-04-08 02:01:42 +02:00
limit: 30,
}).then((searchedHashtags) => {
hashtags.value = searchedHashtags as any[];
fetching.value = false;
// キャッシュ
2023-04-08 02:01:42 +02:00
sessionStorage.setItem(
cacheKey,
JSON.stringify(searchedHashtags)
);
});
}
}
2023-04-08 02:01:42 +02:00
} else if (props.type === "emoji") {
if (!props.q || props.q === "") {
// 最近使った絵文字をサジェスト
2023-04-08 02:01:42 +02:00
emojis.value = defaultStore.state.recentlyUsedEmojis
.map((emoji) =>
emojiDb.find((dbEmoji) => dbEmoji.emoji === emoji)
)
.filter((x) => x) as EmojiDef[];
return;
}
2018-02-20 12:29:52 +01:00
const matched: EmojiDef[] = [];
const max = 30;
2018-02-25 09:38:16 +01:00
2023-04-08 02:01:42 +02:00
emojiDb.some((x) => {
if (
x.name.startsWith(props.q ?? "") &&
!x.aliasOf &&
!matched.some((y) => y.emoji === x.emoji)
)
matched.push(x);
2022-03-01 13:36:20 +01:00
return matched.length === max;
2018-02-25 10:40:39 +01:00
});
2018-07-18 00:19:24 +02:00
if (matched.length < max) {
2023-04-08 02:01:42 +02:00
emojiDb.some((x) => {
if (
x.name.startsWith(props.q ?? "") &&
!matched.some((y) => y.emoji === x.emoji)
)
matched.push(x);
2022-03-01 13:36:20 +01:00
return matched.length === max;
});
}
2018-02-20 12:29:52 +01:00
if (matched.length < max) {
2023-04-08 02:01:42 +02:00
emojiDb.some((x) => {
if (
x.name.includes(props.q ?? "") &&
!matched.some((y) => y.emoji === x.emoji)
)
matched.push(x);
2022-03-01 13:36:20 +01:00
return matched.length === max;
});
}
Migrate to Vue3 (#6587) * Update reaction.vue * fix bug * wip * wip * wjio * wip * Revert "wip" This reverts commit e427f2160adf4e8a4147006e25a89854edab0033. * wip * wip * wip * Update init.ts * Update drive-window.vue * wip * wip * Use PascalCase for components * Use PascalCase for components * update dep * wip * wip * wip * Update init.ts * wip * Update paging.ts * Update test.vue * watch deep * wip * lint * wip * wip * wip * wip * wiop * wip * Update webpack.config.ts * alllow null poll * wip * wip * wip * wiop * UI redesign & refactor (#6714) * wip * wip * wip * wip * wip * Update drive.vue * Update word-mute.vue * wip * wip * wip * clean up * wip * Update default.vue * wip * Update notes.vue * Update mfm.ts * Update index.home.vue * Update post-form.vue * Update post-form-attaches.vue * wip * Update post-form.vue * Update sidebar.vue * wip * wip * Update index.vue * wip * Update default.vue * Update index.vue * Update index.vue * wip * Update post-form-attaches.vue * Update note.vue * wip * clean up * Update notes.vue * wip * wip * Update ja-JP.yml * wip * wip * Update index.vue * wip * wip * wip * wip * wip * wip * wip * wip * Update default.vue * wip * Update _dark.json5 * wip * wip * wip * clean up * wip * wip * Update index.vue * Update test.vue * wip * wip * fix * wip * wip * wip * wip * clena yop * wip * wip * Update store.ts * Update messaging-room.vue * Update default.widgets.vue * fix * wip * wip * Update modal.vue * wip * Update os.ts * Update os.ts * Update deck.vue * Update init.ts * wip * Update ja-JP.yml * v-sizeは単にwindowのresizeを監視するだけで良いかもしれない * Update modal.vue * wip * Update tooltip.ts * wip * wip * wip * wip * wip * Update image-viewer.vue * wip * wip * Update style.scss * Update style.scss * Update visitor.vue * wip * Update init.ts * Update init.ts * wip * wip * Update visitor.vue * Update visitor.vue * Update visitor.vue * Update visitor.vue * wip * wip * Update modal.vue * Update header.vue * Update menu.vue * Update about.vue * Update about-misskey.vue * wip * wip * Update visitor.vue * Update tooltip.ts * wip * Update drive.vue * wip * Update style.scss * Update header.vue * wip * wip * Update users.user.vue * Update announcements.vue * wip * wip * wip * Update emojis.vue * wip * Update emojis.vue * Update style.scss * Update users.vue * wip * Update style.scss * wip * Update welcome.entrance.vue * Update radio.vue * Update size.ts * Update emoji-edit-dialog.vue * wip * Update emojis.vue * wip * Update emojis.vue * Update emojis.vue * Update emojis.vue * wip * wip * wip * wip * Update file-dialog.vue * wip * wip * Update token-generate-window.vue * Update notification-setting-window.vue * wip * wip * Update _error_.vue * Update ja-JP.yml * wip * wip * Update store.ts * Update emojis.vue * Update emojis.vue * Update emojis.vue * Update announcements.vue * Update store.ts * wip * Update page-editor.vue * wip * wip * Update modal.vue * wip * Update select-file.ts * Update timeline.vue * Update emojis.vue * Update os.ts * wip * Update user-select.vue * Update mfm.ts * Update get-file-info.ts * Update drive.vue * Update init.ts * Update mfm.ts * wip * wip * Update window.vue * Update note.vue * wip * wip * Update user-info.vue * wip * wip * wip * wip * wip * Update header.vue * Update header.vue * wip * Update explore.vue * wip * wip * wip * Update webpack.config.ts * wip * wip * wip * wip * wip * wip * Update autocomplete.ts * wip * wip * wip * Update toast.vue * wip * Update post-form-dialog.vue * wip * wip * wip * wip * wip * Update users.vue * wip * Update explore.vue * wip * wip * wip * Update package.json * wip * Update icon-dialog.vue * wip * wip * Update user-preview.ts * wip * wip * wip * wip * wip * Update instance.vue * Update user-name.vue * Update federation.vue * Update instance.vue * wip * wip * Update tag.vue * wip * wip * wip * wip * wip * Update instance.vue * wip * Update os.ts * Update os.ts * wip * wip * wip * Update router.ts * wip * Update init.ts * Update note.vue * Update messages.vue * wip * wip * wip * wip * wip * google * wip * wip * wip * wip * Update theme-editor.vue * wip * wip * Update room.vue * Update channel-editor.vue * wip * Update window.vue * Update window.vue * wip * Update window.vue * Update window.vue * wip * Update menu.vue * wip * wip * wip * wip * Update messaging-room.vue * wip * Update post-form.vue * Update default.widgets.vue * Update window.vue * wip
2020-10-17 13:12:00 +02:00
emojis.value = matched;
2023-04-08 02:01:42 +02:00
} else if (props.type === "mfmTag") {
if (!props.q || props.q === "") {
mfmTags.value = MFM_TAGS;
return;
}
2023-04-08 02:01:42 +02:00
mfmTags.value = MFM_TAGS.filter((tag) => tag.startsWith(props.q ?? ""));
}
}
function onMousedown(event: Event) {
2023-04-08 02:01:42 +02:00
if (!contains(rootEl.value, event.target) && rootEl.value !== event.target)
props.close();
}
function onKeydown(event: KeyboardEvent) {
const cancel = () => {
event.preventDefault();
event.stopPropagation();
};
switch (event.key) {
2023-04-08 02:01:42 +02:00
case "Enter":
if (select.value !== -1) {
cancel();
(items.value[select.value] as any).click();
2020-01-31 23:38:40 +01:00
} else {
props.close();
2020-01-31 23:38:40 +01:00
}
break;
2023-04-08 02:01:42 +02:00
case "Escape":
cancel();
props.close();
break;
2020-01-31 23:38:40 +01:00
2023-04-08 02:01:42 +02:00
case "ArrowUp":
if (select.value !== -1) {
cancel();
selectPrev();
2020-01-31 23:38:40 +01:00
} else {
props.close();
2018-02-25 10:40:39 +01:00
}
break;
2018-02-25 10:40:39 +01:00
2023-04-08 02:01:42 +02:00
case "Tab":
case "ArrowDown":
cancel();
selectNext();
break;
2018-02-20 12:29:52 +01:00
default:
event.stopPropagation();
props.textarea.focus();
}
}
function selectNext() {
if (++select.value >= items.value.length) select.value = 0;
if (items.value.length === 0) select.value = -1;
applySelect();
}
function selectPrev() {
if (--select.value < 0) select.value = items.value.length - 1;
applySelect();
}
function applySelect() {
for (const el of Array.from(items.value)) {
2023-04-08 02:01:42 +02:00
el.removeAttribute("data-selected");
}
2020-01-31 23:38:40 +01:00
if (select.value !== -1) {
2023-04-08 02:01:42 +02:00
items.value[select.value].setAttribute("data-selected", "true");
(items.value[select.value] as any).focus();
}
}
function chooseUser() {
props.close();
2023-04-08 02:01:42 +02:00
os.selectUser().then((user) => {
complete("user", user);
props.textarea.focus();
});
}
onUpdated(() => {
setPosition();
2022-03-01 13:36:20 +01:00
items.value = suggests.value?.children ?? [];
});
onMounted(() => {
setPosition();
2023-04-08 02:01:42 +02:00
props.textarea.addEventListener("keydown", onKeydown);
2023-04-08 02:01:42 +02:00
for (const el of Array.from(document.querySelectorAll("body *"))) {
el.addEventListener("mousedown", onMousedown);
}
nextTick(() => {
exec();
2023-04-08 02:01:42 +02:00
watch(
() => props.q,
() => {
nextTick(() => {
exec();
});
}
);
});
});
onBeforeUnmount(() => {
2023-04-08 02:01:42 +02:00
props.textarea.removeEventListener("keydown", onKeydown);
Migrate to Vue3 (#6587) * Update reaction.vue * fix bug * wip * wip * wjio * wip * Revert "wip" This reverts commit e427f2160adf4e8a4147006e25a89854edab0033. * wip * wip * wip * Update init.ts * Update drive-window.vue * wip * wip * Use PascalCase for components * Use PascalCase for components * update dep * wip * wip * wip * Update init.ts * wip * Update paging.ts * Update test.vue * watch deep * wip * lint * wip * wip * wip * wip * wiop * wip * Update webpack.config.ts * alllow null poll * wip * wip * wip * wiop * UI redesign & refactor (#6714) * wip * wip * wip * wip * wip * Update drive.vue * Update word-mute.vue * wip * wip * wip * clean up * wip * Update default.vue * wip * Update notes.vue * Update mfm.ts * Update index.home.vue * Update post-form.vue * Update post-form-attaches.vue * wip * Update post-form.vue * Update sidebar.vue * wip * wip * Update index.vue * wip * Update default.vue * Update index.vue * Update index.vue * wip * Update post-form-attaches.vue * Update note.vue * wip * clean up * Update notes.vue * wip * wip * Update ja-JP.yml * wip * wip * Update index.vue * wip * wip * wip * wip * wip * wip * wip * wip * Update default.vue * wip * Update _dark.json5 * wip * wip * wip * clean up * wip * wip * Update index.vue * Update test.vue * wip * wip * fix * wip * wip * wip * wip * clena yop * wip * wip * Update store.ts * Update messaging-room.vue * Update default.widgets.vue * fix * wip * wip * Update modal.vue * wip * Update os.ts * Update os.ts * Update deck.vue * Update init.ts * wip * Update ja-JP.yml * v-sizeは単にwindowのresizeを監視するだけで良いかもしれない * Update modal.vue * wip * Update tooltip.ts * wip * wip * wip * wip * wip * Update image-viewer.vue * wip * wip * Update style.scss * Update style.scss * Update visitor.vue * wip * Update init.ts * Update init.ts * wip * wip * Update visitor.vue * Update visitor.vue * Update visitor.vue * Update visitor.vue * wip * wip * Update modal.vue * Update header.vue * Update menu.vue * Update about.vue * Update about-misskey.vue * wip * wip * Update visitor.vue * Update tooltip.ts * wip * Update drive.vue * wip * Update style.scss * Update header.vue * wip * wip * Update users.user.vue * Update announcements.vue * wip * wip * wip * Update emojis.vue * wip * Update emojis.vue * Update style.scss * Update users.vue * wip * Update style.scss * wip * Update welcome.entrance.vue * Update radio.vue * Update size.ts * Update emoji-edit-dialog.vue * wip * Update emojis.vue * wip * Update emojis.vue * Update emojis.vue * Update emojis.vue * wip * wip * wip * wip * Update file-dialog.vue * wip * wip * Update token-generate-window.vue * Update notification-setting-window.vue * wip * wip * Update _error_.vue * Update ja-JP.yml * wip * wip * Update store.ts * Update emojis.vue * Update emojis.vue * Update emojis.vue * Update announcements.vue * Update store.ts * wip * Update page-editor.vue * wip * wip * Update modal.vue * wip * Update select-file.ts * Update timeline.vue * Update emojis.vue * Update os.ts * wip * Update user-select.vue * Update mfm.ts * Update get-file-info.ts * Update drive.vue * Update init.ts * Update mfm.ts * wip * wip * Update window.vue * Update note.vue * wip * wip * Update user-info.vue * wip * wip * wip * wip * wip * Update header.vue * Update header.vue * wip * Update explore.vue * wip * wip * wip * Update webpack.config.ts * wip * wip * wip * wip * wip * wip * Update autocomplete.ts * wip * wip * wip * Update toast.vue * wip * Update post-form-dialog.vue * wip * wip * wip * wip * wip * Update users.vue * wip * Update explore.vue * wip * wip * wip * Update package.json * wip * Update icon-dialog.vue * wip * wip * Update user-preview.ts * wip * wip * wip * wip * wip * Update instance.vue * Update user-name.vue * Update federation.vue * Update instance.vue * wip * wip * Update tag.vue * wip * wip * wip * wip * wip * Update instance.vue * wip * Update os.ts * Update os.ts * wip * wip * wip * Update router.ts * wip * Update init.ts * Update note.vue * Update messages.vue * wip * wip * wip * wip * wip * google * wip * wip * wip * wip * Update theme-editor.vue * wip * wip * Update room.vue * Update channel-editor.vue * wip * Update window.vue * Update window.vue * wip * Update window.vue * Update window.vue * wip * Update menu.vue * wip * wip * wip * wip * Update messaging-room.vue * wip * Update post-form.vue * Update default.widgets.vue * Update window.vue * wip
2020-10-17 13:12:00 +02:00
2023-04-08 02:01:42 +02:00
for (const el of Array.from(document.querySelectorAll("body *"))) {
el.removeEventListener("mousedown", onMousedown);
2018-02-20 12:29:52 +01:00
}
});
</script>
<style lang="scss" scoped>
2020-01-31 23:38:40 +01:00
.swhvrteh {
position: fixed;
max-width: 100%;
margin-top: calc(1em + 8px);
overflow: hidden;
transition: top 0.1s ease, left 0.1s ease;
> ol {
display: block;
margin: 0;
padding: 4px 0;
max-height: 190px;
max-width: 500px;
overflow: auto;
list-style: none;
> li {
display: flex;
align-items: center;
padding: 4px 12px;
white-space: nowrap;
overflow: hidden;
font-size: 0.9em;
cursor: default;
2023-04-08 02:01:42 +02:00
&,
* {
user-select: none;
}
* {
overflow: hidden;
text-overflow: ellipsis;
}
&:hover {
2020-07-04 20:49:58 +02:00
background: var(--X3);
}
2023-04-08 02:01:42 +02:00
&[data-selected="true"] {
background: var(--accent);
2023-04-08 02:01:42 +02:00
&,
* {
color: #fff !important;
}
}
&:active {
background: var(--accentDarken);
2023-04-08 02:01:42 +02:00
&,
* {
color: #fff !important;
}
}
}
}
> .users > li {
.avatar {
min-width: 28px;
min-height: 28px;
max-width: 28px;
max-height: 28px;
margin: 0 8px 0 0;
border-radius: 100%;
}
.name {
margin: 0 8px 0 0;
}
}
> .emojis > li {
.emoji {
display: inline-block;
margin: 0 4px 0 0;
width: 24px;
> img {
width: 24px;
vertical-align: bottom;
}
}
.alias {
margin: 0 0 0 8px;
}
}
> .mfmTags > li {
.name {
}
}
}
2018-02-20 12:29:52 +01:00
</style>