From ce4ea5071f58a3d9af7624d02a36f97200186431 Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 23 Sep 2021 23:01:32 +0900 Subject: enhance(client): アニメーションを減らす設定をメニューのアニメーションにも適用するように MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Resolve #7826 --- src/client/directives/click-anime.ts | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src/client') diff --git a/src/client/directives/click-anime.ts b/src/client/directives/click-anime.ts index 9fd583d6dd..0d5a6da94e 100644 --- a/src/client/directives/click-anime.ts +++ b/src/client/directives/click-anime.ts @@ -1,7 +1,10 @@ import { Directive } from 'vue'; +import { defaultStore } from '@client/store'; export default { mounted(el, binding, vn) { + if (!defaultStore.state.animation) return; + el.classList.add('_anime_bounce_standBy'); el.addEventListener('mousedown', () => { -- cgit v1.2.3-freya From da71d8f4afb83d62891388ab6900c297a60f51cb Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 26 Sep 2021 01:53:56 +0900 Subject: fix(client): fix tabs of page header behaviour --- CHANGELOG.md | 4 +++- src/client/ui/_common_/header.vue | 4 ++++ 2 files changed, 7 insertions(+), 1 deletion(-) (limited to 'src/client') diff --git a/CHANGELOG.md b/CHANGELOG.md index 7d412fb7d1..fcf2f369f5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,11 +10,13 @@ ## 12.x.x (unreleased) ### Improvements -- アニメーションを減らす設定をメニューのアニメーションにも適用するように +- クライアント: アニメーションを減らす設定をメニューのアニメーションにも適用するように ### Bugfixes - Fix createDeleteAccountJob - admin inbox queue does not show individual jobs +- クライアント: ヘッダーのタブが折り返される問題を修正 +- クライアント: ヘッダーにタブが表示されている状態でタイトルをクリックしたときにタブ選択が表示されるのを修正 ## 12.91.0 (2021/09/22) diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue index 1e0db9a3a1..f21be2f9cd 100644 --- a/src/client/ui/_common_/header.vue +++ b/src/client/ui/_common_/header.vue @@ -141,6 +141,7 @@ export default defineComponent({ showTabsPopup(ev) { if (!this.hasTabs) return; + if (!this.narrow) return; ev.preventDefault(); ev.stopPropagation(); const menu = this.info.tabs.map(tab => ({ @@ -218,6 +219,7 @@ export default defineComponent({ white-space: nowrap; text-align: left; font-weight: bold; + flex-shrink: 0; > .avatar { $size: 32px; @@ -263,6 +265,8 @@ export default defineComponent({ > .tabs { margin-left: 16px; font-size: 0.8em; + overflow: auto; + white-space: nowrap; > .tab { display: inline-block; -- cgit v1.2.3-freya From a75f3fb87c2fdd6d0eb66af4c2ce9939a29c180d Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 26 Sep 2021 02:10:07 +0900 Subject: refactor: fix types --- src/client/scripts/autocomplete.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/client') diff --git a/src/client/scripts/autocomplete.ts b/src/client/scripts/autocomplete.ts index 924d6a62ee..c4bcc4b724 100644 --- a/src/client/scripts/autocomplete.ts +++ b/src/client/scripts/autocomplete.ts @@ -7,9 +7,9 @@ export class Autocomplete { private suggestion: { x: Ref; y: Ref; - q: Ref; + q: Ref; close: Function; - }; + } | null; private textarea: any; private vm: any; private currentType: string; @@ -122,7 +122,7 @@ export class Autocomplete { /** * サジェストを提示します。 */ - private async open(type: string, q: string) { + private async open(type: string, q: string | null) { if (type != this.currentType) { this.close(); } -- cgit v1.2.3-freya From a70dbb7e74356caed2fe03bec05c4e8d5bde4316 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 26 Sep 2021 02:55:11 +0900 Subject: feat(client): MFM関数構文のサジェストを実装 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + src/client/components/autocomplete.vue | 47 +++++++++++++++++++++------------- src/client/scripts/autocomplete.ts | 29 ++++++++++++++++++++- 3 files changed, 58 insertions(+), 19 deletions(-) (limited to 'src/client') diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a5f497ddb..9bbc09860e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ ### Improvements - クライアント: アニメーションを減らす設定をメニューのアニメーションにも適用するように +- クライアント: MFM関数構文のサジェストを実装 - ActivityPub: HTML -> MFMの変換を強化 ### Bugfixes diff --git a/src/client/components/autocomplete.vue b/src/client/components/autocomplete.vue index 065ee6de2e..e2c1af3356 100644 --- a/src/client/components/autocomplete.vue +++ b/src/client/components/autocomplete.vue @@ -10,12 +10,12 @@
  • {{ $ts.selectUser }}
    • -
      +
      1. {{ hashtag }}
      -
        +
        1. @@ -24,6 +24,11 @@ ({{ emoji.aliasOf }})
        +
          +
        1. + {{ tag }} +
          2. +
        @@ -106,6 +111,8 @@ emojiDefinitions.sort((a, b) => a.name.length - b.name.length); const emojiDb = markRaw(emojiDefinitions.concat(emjdb)); //#endregion +const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'sparkle']; + export default defineComponent({ props: { type: { @@ -137,11 +144,6 @@ export default defineComponent({ type: Number, required: true, }, - - showing: { - type: Boolean, - required: true - }, }, emits: ['done', 'closed'], @@ -154,18 +156,11 @@ export default defineComponent({ hashtags: [], emojis: [], items: [], + mfmTags: [], select: -1, } }, - watch: { - showing() { - if (!this.showing) { - this.$emit('closed'); - } - } - }, - updated() { this.setPosition(); this.items = (this.$refs.suggests as Element | undefined)?.children || []; @@ -236,7 +231,9 @@ export default defineComponent({ } } - if (this.type == 'user') { + console.log(this.type); + + if (this.type === 'user') { if (this.q == null) { this.users = []; this.fetching = false; @@ -262,7 +259,7 @@ export default defineComponent({ sessionStorage.setItem(cacheKey, JSON.stringify(users)); }); } - } else if (this.type == 'hashtag') { + } else if (this.type === 'hashtag') { if (this.q == null || this.q == '') { this.hashtags = JSON.parse(localStorage.getItem('hashtags') || '[]'); this.fetching = false; @@ -286,7 +283,7 @@ export default defineComponent({ }); } } - } else if (this.type == 'emoji') { + } else if (this.type === 'emoji') { if (this.q == null || this.q == '') { // 最近使った絵文字をサジェスト this.emojis = this.$store.state.recentlyUsedEmojis.map(emoji => emojiDb.find(e => e.emoji == emoji)).filter(x => x != null); @@ -314,6 +311,14 @@ export default defineComponent({ } this.emojis = matched; + } else if (this.type === 'mfmTag') { + console.log(this.q); + if (this.q == null || this.q == '') { + this.mfmTags = MFM_TAGS; + return; + } + + this.mfmTags = MFM_TAGS.filter(tag => tag.startsWith(this.q)); } }, @@ -490,5 +495,11 @@ export default defineComponent({ margin: 0 0 0 8px; } } + + > .mfmTags > li { + + .name { + } + } } diff --git a/src/client/scripts/autocomplete.ts b/src/client/scripts/autocomplete.ts index c4bcc4b724..e952ad3907 100644 --- a/src/client/scripts/autocomplete.ts +++ b/src/client/scripts/autocomplete.ts @@ -70,11 +70,13 @@ export class Autocomplete { const mentionIndex = text.lastIndexOf('@'); const hashtagIndex = text.lastIndexOf('#'); const emojiIndex = text.lastIndexOf(':'); + const mfmTagIndex = text.lastIndexOf('$'); const max = Math.max( mentionIndex, hashtagIndex, - emojiIndex); + emojiIndex, + mfmTagIndex); if (max == -1) { this.close(); @@ -83,6 +85,7 @@ export class Autocomplete { const isMention = mentionIndex != -1; const isHashtag = hashtagIndex != -1; + const isMfmTag = mfmTagIndex != -1; const isEmoji = emojiIndex != -1 && text.split(/:[a-z0-9_+\-]+:/).pop()!.includes(':'); let opened = false; @@ -114,6 +117,14 @@ export class Autocomplete { } } + if (isMfmTag && !opened) { + const mfmTag = text.substr(mfmTagIndex + 1); + if (!mfmTag.includes(' ')) { + this.open('mfmTag', mfmTag); + opened = true; + } + } + if (!opened) { this.close(); } @@ -244,6 +255,22 @@ export class Autocomplete { const pos = trimmedBefore.length + value.length; this.textarea.setSelectionRange(pos, pos); }); + } else if (type == 'mfmTag') { + const source = this.text; + + const before = source.substr(0, caret); + const trimmedBefore = before.substring(0, before.lastIndexOf('$')); + const after = source.substr(caret); + + // 挿入 + this.text = `${trimmedBefore}$[${value} ]${after}`; + + // キャレットを戻す + this.vm.$nextTick(() => { + this.textarea.focus(); + const pos = trimmedBefore.length + (value.length + 3); + this.textarea.setSelectionRange(pos, pos); + }); } } } -- cgit v1.2.3-freya From 5fd549656b14d2ba79dca70bc87325844ed1a27a Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 26 Sep 2021 02:56:02 +0900 Subject: chore: clean up --- src/client/components/autocomplete.vue | 2 -- 1 file changed, 2 deletions(-) (limited to 'src/client') diff --git a/src/client/components/autocomplete.vue b/src/client/components/autocomplete.vue index e2c1af3356..98998293ac 100644 --- a/src/client/components/autocomplete.vue +++ b/src/client/components/autocomplete.vue @@ -231,8 +231,6 @@ export default defineComponent({ } } - console.log(this.type); - if (this.type === 'user') { if (this.q == null) { this.users = []; -- cgit v1.2.3-freya From 4b8a2d2a6bbdeb50aeb55220cfff37c048c10c74 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 26 Sep 2021 03:16:30 +0900 Subject: fix(client): 絵文字一覧ページのタグ一覧をとりあえず無効に MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 重いため --- src/client/pages/emojis.category.vue | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/client') diff --git a/src/client/pages/emojis.category.vue b/src/client/pages/emojis.category.vue index 091c3f20a9..69e22361d8 100644 --- a/src/client/pages/emojis.category.vue +++ b/src/client/pages/emojis.category.vue @@ -5,9 +5,11 @@ + -- cgit v1.2.3-freya From 8d93f148beb12b9d740edfd98bdc6778dfc52be4 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 26 Sep 2021 03:17:16 +0900 Subject: 重いというか邪魔 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/pages/emojis.category.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client') diff --git a/src/client/pages/emojis.category.vue b/src/client/pages/emojis.category.vue index 69e22361d8..7fee792854 100644 --- a/src/client/pages/emojis.category.vue +++ b/src/client/pages/emojis.category.vue @@ -5,7 +5,7 @@ -
        - +
        - + {{ $ts.name }} - + - + CSS @@ -95,11 +95,11 @@ import { defineComponent } from 'vue'; import * as JSON5 from 'json5'; import { toUnicode } from 'punycode/'; -import MkRadio from '@client/components/ui/radio.vue'; +import MkRadio from '@client/components/form/radio.vue'; import MkButton from '@client/components/ui/button.vue'; -import MkInput from '@client/components/ui/input.vue'; -import MkTextarea from '@client/components/ui/textarea.vue'; -import MkSelect from '@client/components/ui/select.vue'; +import MkInput from '@client/components/form/input.vue'; +import MkTextarea from '@client/components/form/textarea.vue'; +import MkSelect from '@client/components/form/select.vue'; import MkSample from '@client/components/sample.vue'; import { convertToMisskeyTheme, ThemeValue, convertToViewModel, ThemeViewModel } from '@client/scripts/theme-editor'; diff --git a/src/client/pages/api-console.vue b/src/client/pages/api-console.vue index c6d459fd6d..9aa7d4ea4d 100644 --- a/src/client/pages/api-console.vue +++ b/src/client/pages/api-console.vue @@ -1,7 +1,7 @@ +
        +
        + + + + +
        + + +
        @@ -102,12 +103,28 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.explore, - icon: 'fas fa-hashtag' + icon: 'fas fa-hashtag', + bg: 'var(--bg)', }, - header: { + tab: 'local', + header: computed(() => ({ title: this.$ts.explore, - icon: 'fas fa-hashtag' - }, + icon: 'fas fa-hashtag', + bg: 'var(--bg)', + tabs: [{ + active: this.tab === 'local', + title: this.$ts.local, + onClick: () => { this.tab = 'local'; }, + }, { + active: this.tab === 'remote', + title: this.$ts.remote, + onClick: () => { this.tab = 'remote'; }, + }, { + active: this.tab === 'search', + title: this.$ts.search, + onClick: () => { this.tab = 'search'; }, + },] + })), pinnedUsers: { endpoint: 'pinned-users' }, popularUsers: { endpoint: 'users', limit: 10, noPaging: true, params: { state: 'alive', @@ -200,6 +217,7 @@ export default defineComponent({ .lznhrdub { max-width: 1400px; margin: 0 auto; + padding: 16px; } .localfedi7 { diff --git a/src/client/pages/instance/database.vue b/src/client/pages/instance/database.vue index a8a1e9a54a..ffbeed8b30 100644 --- a/src/client/pages/instance/database.vue +++ b/src/client/pages/instance/database.vue @@ -43,7 +43,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.database, - icon: 'fas fa-database' + icon: 'fas fa-database', + bg: 'var(--bg)', }, databasePromiseFactory: () => os.api('admin/get-table-stats', {}).then(res => Object.entries(res).sort((a, b) => b[1].size - a[1].size)), } diff --git a/src/client/pages/instance/email-settings.vue b/src/client/pages/instance/email-settings.vue index 251354a43a..ebf724fcdd 100644 --- a/src/client/pages/instance/email-settings.vue +++ b/src/client/pages/instance/email-settings.vue @@ -66,7 +66,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.emailServer, - icon: 'fas fa-envelope' + icon: 'fas fa-envelope', + bg: 'var(--bg)', }, enableEmail: false, email: null, diff --git a/src/client/pages/instance/files-settings.vue b/src/client/pages/instance/files-settings.vue index 8bf4613a76..8aefa9e90d 100644 --- a/src/client/pages/instance/files-settings.vue +++ b/src/client/pages/instance/files-settings.vue @@ -56,7 +56,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.files, - icon: 'fas fa-cloud' + icon: 'fas fa-cloud', + bg: 'var(--bg)', }, cacheRemoteFiles: false, proxyRemoteFiles: false, diff --git a/src/client/pages/instance/index.link.vue b/src/client/pages/instance/index.link.vue deleted file mode 100644 index e1f4773800..0000000000 --- a/src/client/pages/instance/index.link.vue +++ /dev/null @@ -1,97 +0,0 @@ - - - - - diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue index 959c4be6cd..e2cb5b8f58 100644 --- a/src/client/pages/instance/index.vue +++ b/src/client/pages/instance/index.vue @@ -1,47 +1,15 @@ diff --git a/src/client/pages/user/index.timeline.vue b/src/client/pages/user/index.timeline.vue index 8796ded469..c3444f26f6 100644 --- a/src/client/pages/user/index.timeline.vue +++ b/src/client/pages/user/index.timeline.vue @@ -1,6 +1,6 @@ diff --git a/src/client/ui/deck/main-column.vue b/src/client/ui/deck/main-column.vue index 2127444769..baf88a9721 100644 --- a/src/client/ui/deck/main-column.vue +++ b/src/client/ui/deck/main-column.vue @@ -7,7 +7,7 @@ - + diff --git a/src/client/ui/default.vue b/src/client/ui/default.vue index 69668ff96d..3518b1a91a 100644 --- a/src/client/ui/default.vue +++ b/src/client/ui/default.vue @@ -13,7 +13,7 @@
        -
        +
        diff --git a/src/client/widgets/notifications.vue b/src/client/widgets/notifications.vue index 01c76850d8..b0245eed6a 100644 --- a/src/client/widgets/notifications.vue +++ b/src/client/widgets/notifications.vue @@ -3,7 +3,7 @@ -
        +
        -- cgit v1.2.3-freya From 1e8132e610a5cc2f28060de1a4e6f72eca97736f Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 16 Oct 2021 19:25:40 +0900 Subject: :art: --- src/client/pages/messaging/messaging-room.message.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client') diff --git a/src/client/pages/messaging/messaging-room.message.vue b/src/client/pages/messaging/messaging-room.message.vue index dfac83ad6a..a2740c0bdc 100644 --- a/src/client/pages/messaging/messaging-room.message.vue +++ b/src/client/pages/messaging/messaging-room.message.vue @@ -302,7 +302,7 @@ export default defineComponent({ > .text { &, ::v-deep(*) { - color: #fff !important; + color: var(--fgOnAccent) !important; } } } -- cgit v1.2.3-freya From 3f688a728b59514da94e16764cf356c6b81931ad Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 16 Oct 2021 19:30:31 +0900 Subject: :art: --- src/client/components/ui/window.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client') diff --git a/src/client/components/ui/window.vue b/src/client/components/ui/window.vue index 6a7c61a7d5..00284b0467 100644 --- a/src/client/components/ui/window.vue +++ b/src/client/components/ui/window.vue @@ -382,7 +382,7 @@ export default defineComponent({