From 7cb84dc30a9143efa225203bd5b45d774508949f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 6 Jul 2022 06:36:14 +0900
Subject: [PATCH 01/12] revert: feat: styled error screen (#8930)
---
packages/backend/src/server/web/boot.js | 43 ++------
packages/backend/src/server/web/error.css | 98 -------------------
.../backend/src/server/web/views/base.pug | 2 +-
.../backend/src/server/web/views/flush.pug | 6 --
4 files changed, 11 insertions(+), 138 deletions(-)
delete mode 100644 packages/backend/src/server/web/error.css
diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index e82de8e14..9fc536555 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -106,39 +106,15 @@
function renderError(code, details) {
let errorsElement = document.getElementById('errors');
if (!errorsElement) {
- document.getElementsByTagName("head")[0].insertAdjacentHTML(
- "beforeend",
- `<link rel="stylesheet" href="../error.css" />`);
document.documentElement.innerHTML = `
- <svg class="icon-warning" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
- <path d="M12 9v2m0 4v.01"></path>
- <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"></path>
- </svg>
- <h1>An error has occurred!</h1>
- <button class="button-big" onclick="location.reload(true);">
- <span class="button-label-big">Refresh</span>
- </button>
- <p class="dont-worry">Don't worry, it's (probably) not your fault.</p>
- <p>If the problem persists after refreshing, please contact your instance's administrator.<br>You may also try the following options:</p>
- <a href="/flush">
- <button class="button-small">
- <span class="button-label-small">Flush preferences and cache</span>
- </button>
- </a>
- <br>
- <a href="/cli">
- <button class="button-small">
- <span class="button-label-small">Start the simple client</span>
- </button>
- </a>
- <br>
- <a href="/bios">
- <button class="button-small">
- <span class="button-label-small">Attempt to repair in Repair Tool</span>
- </button>
- </a>
- <br>
+ <h1>⚠ An error has occurred. ⚠</h1>
+ <p>If the problem persists, please contact the administrator. You may also try the following options:</p>
+ <ul>
+ <li>Start <a href="/cli">the simple client</a></li>
+ <li>Attempt to repair in <a href="/bios">BIOS</a></li>
+ <li><a href="/flush">Flush preferences and cache</a></li>
+ </ul>
+ <hr>
<div id="errors"></div>
`;
@@ -146,7 +122,8 @@
}
const detailsElement = document.createElement('details');
- detailsElement.innerHTML = `<br><summary><code>ERROR CODE: ${code}</code></summary>${JSON.stringify(details)}`;
+ detailsElement.innerHTML = `<summary><code>ERROR CODE: ${code}</code></summary>${JSON.stringify(details)}`;
+
errorsElement.appendChild(detailsElement);
}
diff --git a/packages/backend/src/server/web/error.css b/packages/backend/src/server/web/error.css
deleted file mode 100644
index 9f8f90501..000000000
--- a/packages/backend/src/server/web/error.css
+++ /dev/null
@@ -1,98 +0,0 @@
-* {
- font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif;
-}
-
-body,
-html {
- background-color: #222;
- color: #dfddcc;
- justify-content: center;
- margin: auto;
- width: 80%;
- padding: 10px;
- text-align: center;
-}
-
-button {
- border-radius: 999px;
- padding: 0px 12px 0px 12px;
- border: none;
- cursor: pointer;
- margin-bottom: 12px;
-}
-
-.button-big {
- background: linear-gradient(90deg, rgb(134, 179, 0), rgb(74, 179, 0));
- line-height: 50px;
-}
-
-.button-big:hover {
- background: rgb(153, 204, 0);
-}
-
-.button-small {
- background: #444;
- line-height: 40px;
-}
-
-.button-small:hover {
- background: #555;
-}
-
-.button-label-big {
- color: #222;
- font-weight: bold;
- font-size: 20px;
- padding: 12px;
-}
-
-.button-label-small {
- color: rgb(153, 204, 0);
- font-size: 16px;
- padding: 12px;
-}
-
-a {
- color: rgb(134, 179, 0);
- text-decoration: none;
-}
-
-p,
-li {
- font-size: 16px;
-}
-
-.dont-worry,
-#msg {
- font-size: 18px;
-}
-
-.icon-warning {
- color: #dec340;
- height: 4rem;
-}
-
-h1 {
- font-size: 32px;
-}
-
-code {
- font-family: Fira, FiraCode, monospace;
-}
-
-details {
- background: #333;
- margin-bottom: 2rem;
- padding: 0.5rem 1rem;
- border-radius: 5px;
- justify-content: center;
- margin: auto;
-}
-
-summary {
- cursor: pointer;
-}
-
-summary > * {
- display: inline;
-}
diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug
index 32499aa45..5bb156f0f 100644
--- a/packages/backend/src/server/web/views/base.pug
+++ b/packages/backend/src/server/web/views/base.pug
@@ -53,7 +53,7 @@ html
block meta
block og
- meta(property='og:title' content= title || 'Misskey')
+ meta(property='og:title' content= title || 'Misskey')
meta(property='og:description' content= desc || '✨🌎✨ A interplanetary communication platform ✨🚀✨')
meta(property='og:image' content= img)
diff --git a/packages/backend/src/server/web/views/flush.pug b/packages/backend/src/server/web/views/flush.pug
index b08f61c73..ec585a34d 100644
--- a/packages/backend/src/server/web/views/flush.pug
+++ b/packages/backend/src/server/web/views/flush.pug
@@ -1,12 +1,6 @@
doctype html
html
- head
- meta(charset='utf-8')
- meta(name='application-name' content='Misskey')
- title Flushing Misskey
- style
- include ../error.css
#msg
script.
const msg = document.getElementById('msg');
From 1ceeec7cfa032adeb092f38e1f86d79883c49ae7 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 6 Jul 2022 07:08:45 +0900
Subject: [PATCH 02/12] =?UTF-8?q?fix(client):=20=E3=83=86=E3=83=BC?=
=?UTF-8?q?=E3=83=9E=E3=82=92=E4=BD=9C=E6=88=90=E3=81=99=E3=82=8B=E3=81=A8?=
=?UTF-8?q?=E3=82=AF=E3=83=A9=E3=82=A4=E3=82=A2=E3=83=B3=E3=83=88=E3=81=8C?=
=?UTF-8?q?=E8=B5=B7=E5=8B=95=E3=81=97=E3=81=AA=E3=81=8F=E3=81=AA=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/client/src/pages/settings/theme.vue | 10 ++++++++--
packages/client/src/pages/theme-editor.vue | 2 +-
packages/client/src/store.ts | 8 ++++++++
3 files changed, 17 insertions(+), 3 deletions(-)
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 1bdad3e75..d330e1ba2 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -97,7 +97,10 @@ const darkThemeId = computed({
return darkTheme.value.id;
},
set(id) {
- ColdDeviceStorage.set('darkTheme', themes.value.find(x => x.id === id));
+ const t = themes.value.find(x => x.id === id);
+ if (t) { // テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
+ ColdDeviceStorage.set('darkTheme', t);
+ }
},
});
const lightTheme = ColdDeviceStorage.ref('lightTheme');
@@ -106,7 +109,10 @@ const lightThemeId = computed({
return lightTheme.value.id;
},
set(id) {
- ColdDeviceStorage.set('lightTheme', themes.value.find(x => x.id === id));
+ const t = themes.value.find(x => x.id === id);
+ if (t) { // テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
+ ColdDeviceStorage.set('lightTheme', t);
+ }
},
});
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue
index 44b5a05f2..548e60614 100644
--- a/packages/client/src/pages/theme-editor.vue
+++ b/packages/client/src/pages/theme-editor.vue
@@ -192,7 +192,7 @@ async function saveAs() {
theme.name = name;
theme.author = `@${$i.username}@${toUnicode(host)}`;
if (description) theme.desc = description;
- addTheme(theme);
+ await addTheme(theme);
applyTheme(theme);
if (defaultStore.state.darkMode) {
ColdDeviceStorage.set('darkTheme', theme);
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index d87e05a4d..503333331 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -304,6 +304,14 @@ export class ColdDeviceStorage {
}
public static set<T extends keyof typeof ColdDeviceStorage.default>(key: T, value: typeof ColdDeviceStorage.default[T]): void {
+ // 呼び出し側のバグ等で undefined が来ることがある
+ // undefined を文字列として localStorage に入れると参照する際の JSON.parse でコケて不具合の元になるため無視
+ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+ if (value === undefined) {
+ console.error(`attempt to store undefined value for key '${key}'`);
+ return;
+ }
+
localStorage.setItem(PREFIX + key, JSON.stringify(value));
for (const watcher of this.watchers) {
From 7672369a7dae7816d993097514be8dc68c6d135a Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 6 Jul 2022 07:26:58 +0900
Subject: [PATCH 03/12] revert emoji picker changes
---
.../src/components/emoji-picker.section.vue | 7 ++-
.../client/src/components/emoji-picker.vue | 50 ++++++++++---------
2 files changed, 29 insertions(+), 28 deletions(-)
diff --git a/packages/client/src/components/emoji-picker.section.vue b/packages/client/src/components/emoji-picker.section.vue
index e2a80d546..901bc76ac 100644
--- a/packages/client/src/components/emoji-picker.section.vue
+++ b/packages/client/src/components/emoji-picker.section.vue
@@ -1,17 +1,16 @@
<template>
-<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
<section>
<header class="_acrylic" @click="shown = !shown">
<i class="toggle fa-fw" :class="shown ? 'fas fa-chevron-down' : 'fas fa-chevron-up'"></i> <slot></slot> ({{ emojis.length }})
</header>
- <div v-if="shown" class="body">
+ <div v-if="shown">
<button
v-for="emoji in emojis"
:key="emoji"
- class="_button item"
+ class="_button"
@click="emit('chosen', emoji, $event)"
>
- <MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
+ <MkEmoji :emoji="emoji" :normal="true"/>
</button>
</div>
</section>
diff --git a/packages/client/src/components/emoji-picker.vue b/packages/client/src/components/emoji-picker.vue
index 2f974cbda..46cf56230 100644
--- a/packages/client/src/components/emoji-picker.vue
+++ b/packages/client/src/components/emoji-picker.vue
@@ -3,67 +3,67 @@
<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @paste.stop="paste" @keyup.enter="done()">
<div ref="emojis" class="emojis">
<section class="result">
- <div v-if="searchResultCustom.length > 0" class="body">
+ <div v-if="searchResultCustom.length > 0">
<button
v-for="emoji in searchResultCustom"
:key="emoji.id"
- class="_button item"
+ class="_button"
:title="emoji.name"
tabindex="0"
@click="chosen(emoji, $event)"
>
<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
- <img class="emoji" :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
+ <img :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
</button>
</div>
- <div v-if="searchResultUnicode.length > 0" class="body">
+ <div v-if="searchResultUnicode.length > 0">
<button
v-for="emoji in searchResultUnicode"
:key="emoji.name"
- class="_button item"
+ class="_button"
:title="emoji.name"
tabindex="0"
@click="chosen(emoji, $event)"
>
- <MkEmoji class="emoji" :emoji="emoji.char"/>
+ <MkEmoji :emoji="emoji.char"/>
</button>
</div>
</section>
- <div v-if="tab === 'index'" class="group index">
+ <div v-if="tab === 'index'" class="index">
<section v-if="showPinned">
- <div class="body">
+ <div>
<button
v-for="emoji in pinned"
:key="emoji"
- class="_button item"
+ class="_button"
tabindex="0"
@click="chosen(emoji, $event)"
>
- <MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
+ <MkEmoji :emoji="emoji" :normal="true"/>
</button>
</div>
</section>
<section>
<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ i18n.ts.recentUsed }}</header>
- <div class="body">
+ <div>
<button
v-for="emoji in recentlyUsedEmojis"
:key="emoji"
- class="_button item"
+ class="_button"
@click="chosen(emoji, $event)"
>
- <MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
+ <MkEmoji :emoji="emoji" :normal="true"/>
</button>
</div>
</section>
</div>
- <div class="group">
+ <div>
<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
</div>
- <div class="group">
+ <div>
<header class="_acrylic">{{ i18n.ts.emoji }}</header>
<XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
</div>
@@ -419,16 +419,19 @@ defineExpose({
font-size: 15px;
}
- > .body {
+ > div {
display: grid;
grid-template-columns: var(--columns);
- font-size: 30px;
- > .item {
+ > button {
aspect-ratio: 1 / 1;
width: auto;
height: auto;
min-width: 0;
+
+ > * {
+ font-size: 30px;
+ }
}
}
}
@@ -479,7 +482,7 @@ defineExpose({
display: none;
}
- > .group {
+ > div {
&:not(.index) {
padding: 4px 0 8px 0;
border-top: solid 0.5px var(--divider);
@@ -514,18 +517,16 @@ defineExpose({
}
}
- > .body {
+ > div {
position: relative;
padding: $pad;
- > .item {
+ > button {
position: relative;
padding: 0;
width: var(--eachSize);
height: var(--eachSize);
- contain: strict;
border-radius: 4px;
- font-size: 24px;
&:focus-visible {
outline: solid 2px var(--focus);
@@ -541,7 +542,8 @@ defineExpose({
box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
}
- > .emoji {
+ > * {
+ font-size: 24px;
height: 1.25em;
vertical-align: -.25em;
pointer-events: none;
From fe534fc3b4791815105d1cfbacf747bb008ceb09 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 6 Jul 2022 07:27:09 +0900
Subject: [PATCH 04/12] 12.112.0-beta.19
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index d86750411..9ba79b3b5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "misskey",
- "version": "12.112.0-beta.18",
+ "version": "12.112.0-beta.19",
"codename": "indigo",
"repository": {
"type": "git",
From d7ed3c370e11bd53d6e441735c61b138dfc710a5 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Wed, 6 Jul 2022 00:29:51 +0200
Subject: [PATCH 05/12] fix prismjs import
fixes #8944
---
packages/client/src/components/code-core.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/client/src/components/code-core.vue b/packages/client/src/components/code-core.vue
index a816f3480..b07402882 100644
--- a/packages/client/src/components/code-core.vue
+++ b/packages/client/src/components/code-core.vue
@@ -6,7 +6,7 @@
<script lang="ts" setup>
import { computed } from 'vue';
-import { Prism } from 'prismjs';
+import Prism from 'prismjs';
import 'prismjs/themes/prism-okaidia.css';
const props = defineProps<{
From 2015c81ce4af2367f3c9a99d804f59381511f265 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 6 Jul 2022 07:30:56 +0900
Subject: [PATCH 06/12] Revert "revert emoji picker changes"
This reverts commit 38d5303ccd067e67f11ae130b643713f6ca86eef.
---
.../src/components/emoji-picker.section.vue | 7 +--
.../client/src/components/emoji-picker.vue | 50 +++++++++----------
2 files changed, 28 insertions(+), 29 deletions(-)
diff --git a/packages/client/src/components/emoji-picker.section.vue b/packages/client/src/components/emoji-picker.section.vue
index 901bc76ac..e2a80d546 100644
--- a/packages/client/src/components/emoji-picker.section.vue
+++ b/packages/client/src/components/emoji-picker.section.vue
@@ -1,16 +1,17 @@
<template>
+<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
<section>
<header class="_acrylic" @click="shown = !shown">
<i class="toggle fa-fw" :class="shown ? 'fas fa-chevron-down' : 'fas fa-chevron-up'"></i> <slot></slot> ({{ emojis.length }})
</header>
- <div v-if="shown">
+ <div v-if="shown" class="body">
<button
v-for="emoji in emojis"
:key="emoji"
- class="_button"
+ class="_button item"
@click="emit('chosen', emoji, $event)"
>
- <MkEmoji :emoji="emoji" :normal="true"/>
+ <MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
</button>
</div>
</section>
diff --git a/packages/client/src/components/emoji-picker.vue b/packages/client/src/components/emoji-picker.vue
index 46cf56230..2f974cbda 100644
--- a/packages/client/src/components/emoji-picker.vue
+++ b/packages/client/src/components/emoji-picker.vue
@@ -3,67 +3,67 @@
<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @paste.stop="paste" @keyup.enter="done()">
<div ref="emojis" class="emojis">
<section class="result">
- <div v-if="searchResultCustom.length > 0">
+ <div v-if="searchResultCustom.length > 0" class="body">
<button
v-for="emoji in searchResultCustom"
:key="emoji.id"
- class="_button"
+ class="_button item"
:title="emoji.name"
tabindex="0"
@click="chosen(emoji, $event)"
>
<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
- <img :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
+ <img class="emoji" :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
</button>
</div>
- <div v-if="searchResultUnicode.length > 0">
+ <div v-if="searchResultUnicode.length > 0" class="body">
<button
v-for="emoji in searchResultUnicode"
:key="emoji.name"
- class="_button"
+ class="_button item"
:title="emoji.name"
tabindex="0"
@click="chosen(emoji, $event)"
>
- <MkEmoji :emoji="emoji.char"/>
+ <MkEmoji class="emoji" :emoji="emoji.char"/>
</button>
</div>
</section>
- <div v-if="tab === 'index'" class="index">
+ <div v-if="tab === 'index'" class="group index">
<section v-if="showPinned">
- <div>
+ <div class="body">
<button
v-for="emoji in pinned"
:key="emoji"
- class="_button"
+ class="_button item"
tabindex="0"
@click="chosen(emoji, $event)"
>
- <MkEmoji :emoji="emoji" :normal="true"/>
+ <MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
</button>
</div>
</section>
<section>
<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ i18n.ts.recentUsed }}</header>
- <div>
+ <div class="body">
<button
v-for="emoji in recentlyUsedEmojis"
:key="emoji"
- class="_button"
+ class="_button item"
@click="chosen(emoji, $event)"
>
- <MkEmoji :emoji="emoji" :normal="true"/>
+ <MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
</button>
</div>
</section>
</div>
- <div>
+ <div class="group">
<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
</div>
- <div>
+ <div class="group">
<header class="_acrylic">{{ i18n.ts.emoji }}</header>
<XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
</div>
@@ -419,19 +419,16 @@ defineExpose({
font-size: 15px;
}
- > div {
+ > .body {
display: grid;
grid-template-columns: var(--columns);
+ font-size: 30px;
- > button {
+ > .item {
aspect-ratio: 1 / 1;
width: auto;
height: auto;
min-width: 0;
-
- > * {
- font-size: 30px;
- }
}
}
}
@@ -482,7 +479,7 @@ defineExpose({
display: none;
}
- > div {
+ > .group {
&:not(.index) {
padding: 4px 0 8px 0;
border-top: solid 0.5px var(--divider);
@@ -517,16 +514,18 @@ defineExpose({
}
}
- > div {
+ > .body {
position: relative;
padding: $pad;
- > button {
+ > .item {
position: relative;
padding: 0;
width: var(--eachSize);
height: var(--eachSize);
+ contain: strict;
border-radius: 4px;
+ font-size: 24px;
&:focus-visible {
outline: solid 2px var(--focus);
@@ -542,8 +541,7 @@ defineExpose({
box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
}
- > * {
- font-size: 24px;
+ > .emoji {
height: 1.25em;
vertical-align: -.25em;
pointer-events: none;
From 21cdbdc7c80dcaf139284247cd89376d6c296164 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 6 Jul 2022 07:54:04 +0900
Subject: [PATCH 07/12] perf(client): trying improve perf of emoji-picker
---
packages/client/src/components/emoji-picker.vue | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/client/src/components/emoji-picker.vue b/packages/client/src/components/emoji-picker.vue
index 2f974cbda..4a46e0ecf 100644
--- a/packages/client/src/components/emoji-picker.vue
+++ b/packages/client/src/components/emoji-picker.vue
@@ -59,11 +59,11 @@
</div>
</section>
</div>
- <div class="group">
+ <div v-once class="group">
<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
</div>
- <div class="group">
+ <div v-once class="group">
<header class="_acrylic">{{ i18n.ts.emoji }}</header>
<XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
</div>
From ee40c20fa40edc146fb5dfbed91aba596e605f95 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 6 Jul 2022 07:54:35 +0900
Subject: [PATCH 08/12] 12.112.0-beta.20
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 9ba79b3b5..ccdfa727f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "misskey",
- "version": "12.112.0-beta.19",
+ "version": "12.112.0-beta.20",
"codename": "indigo",
"repository": {
"type": "git",
From 8fee1ec9f4988555db3b3829707ad461f359d019 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 6 Jul 2022 08:42:04 +0900
Subject: [PATCH 09/12] Update CHANGELOG.md
---
CHANGELOG.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 039a0ec08..e44ac75b6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,7 @@ You should also include the user name that made the change.
- Client: Improve deck UI @syuilo
- Client: Word mute also checks content warnings @Johann150
- Client: メニューからページをリロードできるように @syuilo
+- Client: Improve emoji picker performance @syuilo
- ユーザーにモデレーションメモを残せる機能 @syuilo
- Make possible to delete an account by admin @syuilo
- Improve player detection in URL preview @mei23
From 95ca3ab718dcf0a20b4859974b51779ef5525950 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 6 Jul 2022 18:20:32 +0900
Subject: [PATCH 10/12] chore(client): tweak style
---
packages/client/src/components/ui/menu.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/client/src/components/ui/menu.vue b/packages/client/src/components/ui/menu.vue
index cb4ec7c34..1f3d50897 100644
--- a/packages/client/src/components/ui/menu.vue
+++ b/packages/client/src/components/ui/menu.vue
@@ -136,7 +136,7 @@ function focusDown() {
> .item {
display: block;
position: relative;
- padding: 6px 18px;
+ padding: 6px 16px;
width: 100%;
box-sizing: border-box;
white-space: nowrap;
From 0af344b4e3c6aa09eaf7a5e879f421078db8d440 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Wed, 6 Jul 2022 18:23:05 +0200
Subject: [PATCH 11/12] refactor: use autofocus parameter
Using the `ref` seems to be broken but using the autofocus parameter
seems to fix it.
---
.../client/src/components/user-select-dialog.vue | 15 +--------------
1 file changed, 1 insertion(+), 14 deletions(-)
diff --git a/packages/client/src/components/user-select-dialog.vue b/packages/client/src/components/user-select-dialog.vue
index b34d21af0..972d35348 100644
--- a/packages/client/src/components/user-select-dialog.vue
+++ b/packages/client/src/components/user-select-dialog.vue
@@ -11,7 +11,7 @@
<div class="tbhwbxda">
<div class="form">
<FormSplit :min-width="170">
- <MkInput ref="usernameEl" v-model="username" @update:modelValue="search">
+ <MkInput v-model="username" :autofocus="true" @update:modelValue="search">
<template #label>{{ $ts.username }}</template>
<template #prefix>@</template>
</MkInput>
@@ -70,15 +70,8 @@ let host = $ref('');
let users: misskey.entities.UserDetailed[] = $ref([]);
let recentUsers: misskey.entities.UserDetailed[] = $ref([]);
let selected: misskey.entities.UserDetailed | null = $ref(null);
-let usernameEl: HTMLElement = $ref();
let dialogEl = $ref();
-const focus = () => {
- if (usernameEl) {
- usernameEl.focus();
- }
-};
-
const search = () => {
if (username === '' && host === '') {
users = [];
@@ -112,12 +105,6 @@ const cancel = () => {
};
onMounted(() => {
- focus();
-
- nextTick(() => {
- focus();
- });
-
os.api('users/show', {
userIds: defaultStore.state.recentlyUsedUsers,
}).then(users => {
From 1c0966726b9aa505e05f65b72101c0a61178869d Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Wed, 6 Jul 2022 19:02:39 +0200
Subject: [PATCH 12/12] refactor: use overflow-y to determine scroll container
By using `overflow-y` instead of `overflow` using `endsWith` can be
avoided and represents the data we are actually interested in here
more accurately.
---
packages/client/src/scripts/scroll.ts | 8 ++------
1 file changed, 2 insertions(+), 6 deletions(-)
diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts
index 0643bad2f..f5bc6bf9c 100644
--- a/packages/client/src/scripts/scroll.ts
+++ b/packages/client/src/scripts/scroll.ts
@@ -2,12 +2,8 @@ type ScrollBehavior = 'auto' | 'smooth' | 'instant';
export function getScrollContainer(el: HTMLElement | null): HTMLElement | null {
if (el == null || el.tagName === 'HTML') return null;
- const overflow = window.getComputedStyle(el).getPropertyValue('overflow');
- if (
- // xとyを個別に指定している場合、`hidden scroll`みたいな値になる
- overflow.endsWith('scroll') ||
- overflow.endsWith('auto')
- ) {
+ const overflow = window.getComputedStyle(el).getPropertyValue('overflow-y');
+ if (overflow === 'scroll' || overflow === 'auto') {
return el;
} else {
return getScrollContainer(el.parentElement);