From 75034d9240c069baff5a24409ea172374261ea3b Mon Sep 17 00:00:00 2001 From: zyoshoka <107108195+zyoshoka@users.noreply.github.com> Date: Tue, 26 Dec 2023 14:19:35 +0900 Subject: refactor(frontend): Reactivityで型を明示するように (#12791) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor(frontend): Reactivityで型を明示するように * fix: プロパティの参照が誤っているのを修正 * fix: 初期化の値を空配列に書き換えていた部分をnullに置き換え --- packages/frontend/src/components/MkNote.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/frontend/src/components/MkNote.vue') diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 66a5be22c3..7d4207f0fb 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -250,7 +250,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong); const isDeleted = ref(false); const muted = ref(checkMute(appearNote.value, $i?.mutedWords)); const hardMuted = ref(props.withHardMute && checkMute(appearNote.value, $i?.hardMutedWords)); -const translation = ref(null); +const translation = ref(null); const translating = ref(false); const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance); const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i.id)); -- cgit v1.2.3-freya From f92f474088696f4379650f6a03688b44eb934632 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 1 Jan 2024 17:44:13 +0100 Subject: Bring note style closer to Firefish --- .../frontend/src/components/MkAchievements.vue | 4 +- packages/frontend/src/components/MkNote.vue | 4 +- .../frontend/src/components/MkNoteDetailed.vue | 4 +- packages/frontend/src/components/MkUserInfo.vue | 4 +- packages/frontend/src/components/MkUserPopup.vue | 4 +- .../src/components/MkUserSetupDialog.User.vue | 4 +- .../frontend/src/components/SkInstanceTicker.vue | 1 - packages/frontend/src/components/SkNote.vue | 26 ++++++++-- .../frontend/src/components/SkNoteDetailed.vue | 23 ++++----- packages/frontend/src/components/SkNoteHeader.vue | 11 ++-- packages/frontend/src/components/SkNoteSub.vue | 59 +++++++++++----------- .../frontend/src/components/SkOldNoteWindow.vue | 4 +- packages/frontend/src/style.scss | 3 ++ packages/frontend/src/themes/_dark.json5 | 1 + packages/frontend/src/themes/_light.json5 | 1 + 15 files changed, 87 insertions(+), 66 deletions(-) (limited to 'packages/frontend/src/components/MkNote.vue') diff --git a/packages/frontend/src/components/MkAchievements.vue b/packages/frontend/src/components/MkAchievements.vue index cdd9cb87b1..333f62e29c 100644 --- a/packages/frontend/src/components/MkAchievements.vue +++ b/packages/frontend/src/components/MkAchievements.vue @@ -120,8 +120,8 @@ onMounted(() => { .iconFrame { position: relative; - width: 58px; - height: 58px; + width: var(--avatar); + height: var(--avatar); padding: 6px; border-radius: var(--radius-full); box-sizing: border-box; diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 8a3b4cef48..6274419c54 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -986,8 +986,8 @@ function emitUpdReaction(emoji: string, delta: number) { flex-shrink: 0; display: block !important; margin: 0 14px 0 0; - width: 58px; - height: 58px; + width: var(--avatar); + height: var(--avatar); position: sticky !important; top: calc(22px + var(--stickyTop, 0px)); left: 0; diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index e287890e2c..6558e24630 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/packages/frontend/src/components/MkNoteDetailed.vue @@ -871,8 +871,8 @@ function animatedMFM() { .noteHeaderAvatar { display: block; flex-shrink: 0; - width: 58px; - height: 58px; + width: var(--avatar); + height: var(--avatar); } .noteHeaderBody { diff --git a/packages/frontend/src/components/MkUserInfo.vue b/packages/frontend/src/components/MkUserInfo.vue index 4e326911d8..0e3f3914b8 100644 --- a/packages/frontend/src/components/MkUserInfo.vue +++ b/packages/frontend/src/components/MkUserInfo.vue @@ -65,8 +65,8 @@ defineProps<{ top: 62px; left: 13px; z-index: 2; - width: 58px; - height: 58px; + width: var(--avatar); + height: var(--avatar); border: solid 4px var(--panel); } diff --git a/packages/frontend/src/components/MkUserPopup.vue b/packages/frontend/src/components/MkUserPopup.vue index ec2c48b1cf..c9100652f3 100644 --- a/packages/frontend/src/components/MkUserPopup.vue +++ b/packages/frontend/src/components/MkUserPopup.vue @@ -199,8 +199,8 @@ onMounted(() => { right: 0; margin: 0 auto; z-index: 2; - width: 58px; - height: 58px; + width: var(--avatar); + height: var(--avatar); } .title { diff --git a/packages/frontend/src/components/MkUserSetupDialog.User.vue b/packages/frontend/src/components/MkUserSetupDialog.User.vue index 621995cc5b..7becc5c66d 100644 --- a/packages/frontend/src/components/MkUserSetupDialog.User.vue +++ b/packages/frontend/src/components/MkUserSetupDialog.User.vue @@ -59,8 +59,8 @@ async function follow() { top: 30px; left: 13px; z-index: 2; - width: 58px; - height: 58px; + width: var(--avatar); + height: var(--avatar); border: solid 4px var(--panel); } diff --git a/packages/frontend/src/components/SkInstanceTicker.vue b/packages/frontend/src/components/SkInstanceTicker.vue index 96bc1ca2c0..9cfc332698 100644 --- a/packages/frontend/src/components/SkInstanceTicker.vue +++ b/packages/frontend/src/components/SkInstanceTicker.vue @@ -46,7 +46,6 @@ const bg = { align-items: center; height: 1.5ex; border-radius: var(--radius-xl); - margin-top: 5px; padding: 4px; overflow: clip; color: #fff; diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue index 83909654c7..10c7c72e61 100644 --- a/packages/frontend/src/components/SkNote.vue +++ b/packages/frontend/src/components/SkNote.vue @@ -882,7 +882,6 @@ function emitUpdReaction(emoji: string, delta: number) { } .replyTo { - opacity: 0.7; padding-bottom: 0; } @@ -890,11 +889,28 @@ function emitUpdReaction(emoji: string, delta: number) { position: relative; display: flex; align-items: center; - padding: 24px 38px 16px; + padding: 24px 32px 16px calc(32px + var(--avatar) + 14px); line-height: 28px; white-space: pre; color: var(--renote); + &::before { + content: ''; + position: absolute; + top: 0; + left: calc(32px + .5 * var(--avatar)); + bottom: -8px; + border-left: var(--thread-width) solid var(--thread); + } + + &:first-child { + padding-left: 32px; + + &::before { + display: none; + } + } + & + .article { padding-top: 8px; } @@ -906,7 +922,7 @@ function emitUpdReaction(emoji: string, delta: number) { .renoteAvatar { flex-shrink: 0; - display: inline-block; + display: none; /* same as Firefish, but keeping the element around in case someone wants to add it back via CSS override */ width: 28px; height: 28px; margin: 0 8px 0 0; @@ -987,8 +1003,8 @@ function emitUpdReaction(emoji: string, delta: number) { display: block !important; position: sticky !important; margin: 0 14px 0 0; - width: 58px; - height: 58px; + width: var(--avatar); + height: var(--avatar); position: sticky !important; top: calc(22px + var(--stickyTop, 0px)); left: 0; diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue index f850adba1b..6bd5d77442 100644 --- a/packages/frontend/src/components/SkNoteDetailed.vue +++ b/packages/frontend/src/components/SkNoteDetailed.vue @@ -178,7 +178,7 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ i18n.ts.loadReplies }}
- +
@@ -381,16 +381,16 @@ const reactionsPagination = computed(() => ({ })); async function addReplyTo(replyNote: Misskey.entities.Note) { - replies.value.unshift(replyNote); - appearNote.value.repliesCount += 1; + replies.value.unshift(replyNote); + appearNote.value.repliesCount += 1; } async function removeReply(id: Misskey.entities.Note['id']) { - const replyIdx = replies.value.findIndex(note => note.id === id); - if (replyIdx >= 0) { - replies.value.splice(replyIdx, 1); - appearNote.value.repliesCount -= 1; - } + const replyIdx = replies.value.findIndex(note => note.id === id); + if (replyIdx >= 0) { + replies.value.splice(replyIdx, 1); + appearNote.value.repliesCount -= 1; + } } useNoteCapture({ @@ -807,12 +807,11 @@ function animatedMFM() { } .replyTo { - opacity: 0.7; padding-bottom: 0; } .replyToMore { - opacity: 0.7; + } .renote { @@ -879,8 +878,8 @@ function animatedMFM() { .noteHeaderAvatar { display: block; flex-shrink: 0; - width: 58px; - height: 58px; + width: var(--avatar); + height: var(--avatar); } .noteHeaderBody { diff --git a/packages/frontend/src/components/SkNoteHeader.vue b/packages/frontend/src/components/SkNoteHeader.vue index d3ecdf17bb..7a3f9d02f5 100644 --- a/packages/frontend/src/components/SkNoteHeader.vue +++ b/packages/frontend/src/components/SkNoteHeader.vue @@ -116,6 +116,8 @@ const mock = inject('mock', false); .root { display: flex; cursor: auto; /* not clickToOpen-able */ + min-height: 100%; + align-items: center; } .classicRoot { @@ -135,6 +137,7 @@ const mock = inject('mock', false); display: flex; align-items: flex-end; margin-left: auto; + margin-bottom: auto; padding-left: 10px; overflow: clip; } @@ -143,10 +146,9 @@ const mock = inject('mock', false); .name { flex-shrink: 1; display: block; - // note, these margin top values were done by hand may need futher checking if it actualy aligns pixel perfect - margin: 3px .5em 0 0; + margin: 0 .5em 0 0; padding: 0; - overflow: scroll; + overflow: hidden; overflow-wrap: anywhere; font-size: 1em; font-weight: bold; @@ -192,8 +194,7 @@ const mock = inject('mock', false); .username { flex-shrink: 9999999; - // note these top margins were made to align with the instance ticker - margin: 4px .5em 0 0; + margin: 0 .5em 0 0; overflow: hidden; text-overflow: ellipsis; font-size: .95em; diff --git a/packages/frontend/src/components/SkNoteSub.vue b/packages/frontend/src/components/SkNoteSub.vue index bc482294b4..0fb6e00ab1 100644 --- a/packages/frontend/src/components/SkNoteSub.vue +++ b/packages/frontend/src/components/SkNoteSub.vue @@ -426,22 +426,22 @@ if (props.detail) { diff --git a/packages/frontend/src/components/MkUserPopup.vue b/packages/frontend/src/components/MkUserPopup.vue index 04244ac308..9a1dce2d8e 100644 --- a/packages/frontend/src/components/MkUserPopup.vue +++ b/packages/frontend/src/components/MkUserPopup.vue @@ -86,6 +86,7 @@ const top = ref(0); const left = ref(0); function showMenu(ev: MouseEvent) { + if (user.value == null) return; const { menu, cleanup } = getUserMenu(user.value); os.popupMenu(menu, ev.currentTarget ?? ev.target).finally(cleanup); } diff --git a/packages/frontend/src/components/MkUserSelectDialog.vue b/packages/frontend/src/components/MkUserSelectDialog.vue index ad11ba1940..d7bd73aa8a 100644 --- a/packages/frontend/src/components/MkUserSelectDialog.vue +++ b/packages/frontend/src/components/MkUserSelectDialog.vue @@ -80,9 +80,9 @@ const props = defineProps<{ const username = ref(''); const host = ref(''); -const users = ref([]); +const users = ref([]); const recentUsers = ref([]); -const selected = ref(null); +const selected = ref(null); const dialogEl = ref(); function search() { @@ -100,14 +100,19 @@ function search() { }); } -function ok() { +async function ok() { if (selected.value == null) return; - emit('ok', selected.value); + + const user = await misskeyApi('users/show', { + userId: selected.value.id, + }); + emit('ok', user); + dialogEl.value.close(); // 最近使ったユーザー更新 let recents = defaultStore.state.recentlyUsedUsers; - recents = recents.filter(x => x !== selected.value.id); + recents = recents.filter(x => x !== selected.value?.id); recents.unshift(selected.value.id); defaultStore.set('recentlyUsedUsers', recents.splice(0, 16)); } @@ -122,7 +127,7 @@ onMounted(() => { userIds: defaultStore.state.recentlyUsedUsers, }).then(users => { if (props.includeSelf && users.find(x => $i ? x.id === $i.id : true) == null) { - recentUsers.value = [$i, ...users]; + recentUsers.value = [$i!, ...users]; } else { recentUsers.value = users; } diff --git a/packages/frontend/src/components/MkUserSetupDialog.Follow.vue b/packages/frontend/src/components/MkUserSetupDialog.Follow.vue index 5f3f5b81dd..46459df6a6 100644 --- a/packages/frontend/src/components/MkUserSetupDialog.Follow.vue +++ b/packages/frontend/src/components/MkUserSetupDialog.Follow.vue @@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -34,18 +34,28 @@ SPDX-License-Identifier: AGPL-3.0-only diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue index dfaa583d6f..852fb8cc99 100644 --- a/packages/frontend/src/components/MkSubNoteContent.vue +++ b/packages/frontend/src/components/MkSubNoteContent.vue @@ -165,5 +165,6 @@ const collapsed = ref(isLong); .clickToOpen { cursor: pointer; + -webkit-tap-highlight-color: transparent; } diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue index 704c31e92a..0e00b60daf 100644 --- a/packages/frontend/src/components/SkNote.vue +++ b/packages/frontend/src/components/SkNote.vue @@ -1312,5 +1312,6 @@ function emitUpdReaction(emoji: string, delta: number) { .clickToOpen { cursor: pointer; + -webkit-tap-highlight-color: transparent; } -- cgit v1.2.3-freya From 3818e9531f35214b136b3b50daa52e8724874a08 Mon Sep 17 00:00:00 2001 From: ShittyKopper Date: Sat, 6 Jan 2024 19:28:38 +0300 Subject: upd: make note footer wider on smaller screens https://git.gay/eepy.zone/Sharkey/commit/3cc8320eb7d840e2a1bf458d4adfd8f41ac43e26 Co-authored-by: blueb --- packages/frontend/src/components/MkNote.vue | 7 +++--- packages/frontend/src/components/SkNote.vue | 7 +++--- .../frontend/src/components/SkNoteDetailed.vue | 25 +++++++++++----------- packages/frontend/src/components/SkNoteSub.vue | 13 +++++------ 4 files changed, 26 insertions(+), 26 deletions(-) (limited to 'packages/frontend/src/components/MkNote.vue') diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index aee74138c2..fa35c59aaf 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -854,12 +854,13 @@ function emitUpdReaction(emoji: string, delta: number) { } .footer { + display: flex; + align-items: center; + justify-content: space-between; position: relative; z-index: 1; margin-top: 0.4em; - width: max-content; - min-width: min-content; - max-width: fit-content; + max-width: 400px; } &:hover > .article > .main > .footer > .footerButton { diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue index 0e00b60daf..0bad3fd61d 100644 --- a/packages/frontend/src/components/SkNote.vue +++ b/packages/frontend/src/components/SkNote.vue @@ -855,12 +855,13 @@ function emitUpdReaction(emoji: string, delta: number) { } .footer { + display: flex; + align-items: center; + justify-content: space-between; position: relative; z-index: 1; margin-top: 0.4em; - width: max-content; - min-width: min-content; - max-width: fit-content; + max-width: 400px; } &:hover > .article > .main > .footer > .footerButton { diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue index cf54d9d50e..18cba35c0a 100644 --- a/packages/frontend/src/components/SkNoteDetailed.vue +++ b/packages/frontend/src/components/SkNoteDetailed.vue @@ -112,16 +112,16 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ appearNote.channel.name }} -