keith/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey synced 2024-11-22 04:25:13 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'develop' into future-2024-05-31

Browse source
This commit is contained in:
dakkar 2024-06-14 11:19:13 +01:00
commit fdd9df8ae9
6 changed files with 83 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
locales/en-US.yml
View file

@ -1071,6 +1071,7 @@ thisPostIsMissingAltTextIgnore: "Post anyway"
thisPostIsMissingAltText: "One of the files attached to this post is missing alt text. Please ensure all the attachments have alt text."
collapseRenotes: "Collapse boosts you've already seen"
collapseRenotesDescription: "Collapse boosts that you have boosted or reacted to"
collapseNotesRepliedTo: "Collapse notes replied to"
collapseFiles: "Collapse files"
autoloadConversation: "Load conversation on replies"
internalServerError: "Internal Server Error"

30
packages/frontend/src/components/MkNote.vue
View file

@ -12,7 +12,14 @@ SPDX-License-Identifier: AGPL-3.0-only
:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]"
:tabindex="!isDeleted ? '-1' : undefined"
>
<MkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
<div v-if="appearNote.reply && inReplyToCollapsed" :class="$style.collapsedInReplyTo">
<MkAvatar :class="$style.collapsedInReplyToAvatar" :user="appearNote.reply.user" link preview/>
<MkA v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)">
<MkAcct :user="appearNote.reply.user"/>
</MkA>:
<Mfm :text="getNoteSummary(appearNote.reply)" :plain="true" :nowrap="true" :author="appearNote.reply.user" :nyaize="'respect'" :class="$style.collapsedInReplyToText" @click="inReplyToCollapsed = false"/>
</div>
<MkNoteSub v-if="appearNote.reply && !renoteCollapsed && !inReplyToCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
<div v-if="pinned" :class="$style.tip"><i class="ph-push-pin ph-bold ph-lg"></i> {{ i18n.ts.pinnedNote }}</div>
<!--<div v-if="appearNote._prId_" class="tip"><i class="ph-megaphone ph-bold ph-lg"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ph-x ph-bold ph-lg"></i></button></div>-->
<!--<div v-if="appearNote._featuredId_" class="tip"><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts.featured }}</div>-->
@ -44,7 +51,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div v-if="renoteCollapsed" :class="$style.collapsedRenoteTarget">
<MkAvatar :class="$style.collapsedRenoteTargetAvatar" :user="appearNote.user" link preview/>
<Mfm :text="getNoteSummary(appearNote)" :isBlock="true" :plain="true" :nowrap="true" :author="appearNote.user" :nyaize="'respect'" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/>
<Mfm :text="getNoteSummary(appearNote)" :isBlock="true" :plain="true" :nowrap="true" :author="appearNote.user" :nyaize="'respect'" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false; inReplyToCollapsed = false"/>
</div>
<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
@ -316,6 +323,7 @@ const renoteCollapsed = ref(
(appearNote.value.myReaction != null)
),
);
const inReplyToCollapsed = ref(defaultStore.state.collapseNotesRepliedTo);
const defaultLike = computed(() => defaultStore.state.like ? defaultStore.state.like : null);
const animated = computed(() => parsed.value ? checkAnimationFromMfm(parsed.value) : null);
const allowAnim = ref(defaultStore.state.advancedMfm && defaultStore.state.animatedMfm ? true : false);
@ -959,7 +967,7 @@ function emitUpdReaction(emoji: string, delta: number) {
margin-right: 4px;
}
.collapsedRenoteTarget {
.collapsedRenoteTarget, .collapsedInReplyTo {
display: flex;
align-items: center;
line-height: 28px;
@ -967,7 +975,12 @@ function emitUpdReaction(emoji: string, delta: number) {
padding: 0 32px 18px;
}
.collapsedRenoteTargetAvatar {
.collapsedInReplyTo {
padding: 28px 32px 0;
opacity: 0.7;
}
.collapsedRenoteTargetAvatar, .collapsedInReplyToAvatar {
flex-shrink: 0;
display: inline-block;
width: 28px;
@ -976,12 +989,15 @@ function emitUpdReaction(emoji: string, delta: number) {
}
.collapsedRenoteTargetText {
opacity: 0.7;
}
.collapsedRenoteTargetText, .collapsedInReplyToText {
overflow: hidden;
flex-shrink: 1;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 90%;
opacity: 0.7;
cursor: pointer;
&:hover {
@ -1194,6 +1210,10 @@ function emitUpdReaction(emoji: string, delta: number) {
margin-top: 4px;
}
.collapsedInReplyTo {
padding: 14px 16px 0;
}
.article {
padding: 14px 16px;
}

53
packages/frontend/src/components/SkNote.vue
View file

@ -12,7 +12,15 @@ SPDX-License-Identifier: AGPL-3.0-only
:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]"
:tabindex="!isDeleted ? '-1' : undefined"
>
<SkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
<SkNoteSub v-if="appearNote.reply && !renoteCollapsed && !inReplyToCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
<div v-if="appearNote.reply && inReplyToCollapsed && !renoteCollapsed" :class="$style.collapsedInReplyTo">
<div :class="$style.collapsedInReplyToLine"></div>
<MkAvatar :class="$style.collapsedInReplyToAvatar" :user="appearNote.reply.user" link preview/>
<MkA v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)">
<MkAcct :user="appearNote.reply.user"/>
</MkA>:
<Mfm :text="getNoteSummary(appearNote.reply)" :plain="true" :nowrap="true" :author="appearNote.reply.user" :nyaize="'respect'" :class="$style.collapsedInReplyToText" @click="inReplyToCollapsed = false"/>
</div>
<div v-if="pinned" :class="$style.tip"><i class="ph-push-pin ph-bold ph-lg"></i> {{ i18n.ts.pinnedNote }}</div>
<!--<div v-if="appearNote._prId_" class="tip"><i class="ph-megaphone ph-bold ph-lg"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ph-x ph-bold ph-lg"></i></button></div>-->
<!--<div v-if="appearNote._featuredId_" class="tip"><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts.featured }}</div>-->
@ -44,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div v-if="renoteCollapsed" :class="$style.collapsedRenoteTarget">
<MkAvatar :class="$style.collapsedRenoteTargetAvatar" :user="appearNote.user" link preview/>
<Mfm :text="getNoteSummary(appearNote)" :isBlock="true" :plain="true" :nowrap="true" :author="appearNote.user" :nyaize="'respect'" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/>
<Mfm :text="getNoteSummary(appearNote)" :isBlock="true" :plain="true" :nowrap="true" :author="appearNote.user" :nyaize="'respect'" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false; inReplyToCollapsed = false"/>
</div>
<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
<div style="display: flex; padding-bottom: 10px;">
@ -315,6 +323,7 @@ const renoteCollapsed = ref(
(appearNote.value.myReaction != null)
)
);
const inReplyToCollapsed = ref(defaultStore.state.collapseNotesRepliedTo);
const defaultLike = computed(() => defaultStore.state.like ? defaultStore.state.like : null);
const animated = computed(() => parsed.value ? checkAnimationFromMfm(parsed.value) : null);
const allowAnim = ref(defaultStore.state.advancedMfm && defaultStore.state.animatedMfm ? true : false);
@ -974,7 +983,7 @@ function emitUpdReaction(emoji: string, delta: number) {
margin-right: 4px;
}
.collapsedRenoteTarget {
.collapsedRenoteTarget, .collapsedInReplyTo {
display: flex;
align-items: center;
line-height: 28px;
@ -982,7 +991,11 @@ function emitUpdReaction(emoji: string, delta: number) {
padding: 8px 38px 24px;
}
.collapsedRenoteTargetAvatar {
.collapsedInReplyTo {
padding: 28px 44px 0;
}
.collapsedRenoteTargetAvatar, .collapsedInReplyToAvatar {
flex-shrink: 0;
display: inline-block;
width: 28px;
@ -990,7 +1003,7 @@ function emitUpdReaction(emoji: string, delta: number) {
margin: 0 8px 0 0;
}
.collapsedRenoteTargetText {
.collapsedRenoteTargetText, .collapsedInReplyToText {
overflow: hidden;
flex-shrink: 1;
text-overflow: ellipsis;
@ -1004,6 +1017,15 @@ function emitUpdReaction(emoji: string, delta: number) {
}
}
.collapsedInReplyToLine {
position: absolute;
left: calc(32px + .5 * var(--avatar));
// using solid instead of dotted, stylelistic choice
border-left: var(--thread-width) solid var(--thread);
top: calc(28px + 28px); // 28px of .root padding, plus 28px of avatar height (see SkNote)
height: 28px;
}
.article {
position: relative;
padding: 28px 32px;
@ -1182,6 +1204,14 @@ function emitUpdReaction(emoji: string, delta: number) {
padding: 8px 26px 24px;
}
.collapsedInReplyTo {
padding: 28px 35px 0;
}
.collapsedInReplyToLine {
left: calc(26px + .5 * var(--avatar));
}
.article {
padding: 24px 26px;
}
@ -1199,6 +1229,10 @@ function emitUpdReaction(emoji: string, delta: number) {
.footer {
margin-bottom: -8px;
}
.collapsedInReplyToLine {
left: calc(25px + .5 * var(--avatar));
}
}
@container (max-width: 500px) {
@ -1229,6 +1263,15 @@ function emitUpdReaction(emoji: string, delta: number) {
margin-top: 4px;
}
.collapsedInReplyTo {
padding: 22px 33px 0;
}
.collapsedInReplyToLine {
left: calc(24px + .5 * var(--avatar));
top: calc(22px + 28px); // 22px of .root padding, plus 28px of avatar height
}
.article {
padding: 22px 24px;
}

4
packages/frontend/src/pages/settings/general.vue
View file

@ -50,10 +50,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps_m">
<div class="_gaps_s">
<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch>
<MkSwitch v-model="collapseRenotes">
<template #label>{{ i18n.ts.collapseRenotes }}</template>
<template #caption>{{ i18n.ts.collapseRenotesDescription }}</template>
</MkSwitch>
<MkSwitch v-model="collapseNotesRepliedTo">{{ i18n.ts.collapseNotesRepliedTo }}</MkSwitch>
<MkSwitch v-model="collapseFiles">{{ i18n.ts.collapseFiles }}</MkSwitch>
<MkSwitch v-model="uncollapseCW">Uncollapse CWs on notes</MkSwitch>
<MkSwitch v-model="expandLongNote">Always expand long notes</MkSwitch>
@ -351,6 +354,7 @@ const showClipButtonInNoteFooter = computed(defaultStore.makeGetterSetter('showC
const reactionsDisplaySize = computed(defaultStore.makeGetterSetter('reactionsDisplaySize'));
const limitWidthOfReaction = computed(defaultStore.makeGetterSetter('limitWidthOfReaction'));
const collapseRenotes = computed(defaultStore.makeGetterSetter('collapseRenotes'));
const collapseNotesRepliedTo = computed(defaultStore.makeGetterSetter('collapseNotesRepliedTo'));
const clickToOpen = computed(defaultStore.makeGetterSetter('clickToOpen'));
// copied from src/pages/timeline.vue
const showBots = computed<boolean>({

1
packages/frontend/src/pages/settings/preferences-backups.vue
View file

@ -56,6 +56,7 @@ const { t, ts } = i18n;
const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
'collapseRenotes',
'collapseNotesRepliedTo',
'menu',
'visibility',
'localOnly',

4
packages/frontend/src/store.ts
View file

@ -89,6 +89,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'account',
default: false,
},
collapseNotesRepliedTo: {
where: 'account',
default: false,
},
collapseFiles: {
where: 'account',
default: false,