replace reply with inReplyTo in in-reply-to collapse code
This commit is contained in:
parent
c9d0b81555
commit
c808147292
|
@ -1058,7 +1058,7 @@ thisPostIsMissingAltTextCancel: "Cancel"
|
||||||
thisPostIsMissingAltTextIgnore: "Post anyway"
|
thisPostIsMissingAltTextIgnore: "Post anyway"
|
||||||
thisPostIsMissingAltText: "One of the files attached to this post is missing alt text. Please ensure all the attachments have alt text."
|
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"
|
collapseRenotes: "Collapse boosts you've already seen"
|
||||||
collapseReplies: "Collapse replies"
|
collapseNotesRepliedTo: "Collapse notes replied to"
|
||||||
collapseFiles: "Collapse files"
|
collapseFiles: "Collapse files"
|
||||||
autoloadConversation: "Load conversation on replies"
|
autoloadConversation: "Load conversation on replies"
|
||||||
internalServerError: "Internal Server Error"
|
internalServerError: "Internal Server Error"
|
||||||
|
|
|
@ -12,11 +12,11 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]"
|
:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]"
|
||||||
:tabindex="!isDeleted ? '-1' : undefined"
|
:tabindex="!isDeleted ? '-1' : undefined"
|
||||||
>
|
>
|
||||||
<div v-if="appearNote.reply && replyCollapsed" :class="$style.collapsedReply">
|
<div v-if="appearNote.reply && inReplyToCollapsed" :class="$style.collapsedInReplyTo">
|
||||||
<MkAvatar :class="$style.collapsedReplyAvatar" :user="appearNote.reply.user" link preview/>
|
<MkAvatar :class="$style.collapsedInReplyToAvatar" :user="appearNote.reply.user" link preview/>
|
||||||
<Mfm :text="getNoteSummary(appearNote.reply)" :plain="true" :nowrap="true" :author="appearNote.reply.user" :nyaize="'respect'" :class="$style.collapsedReplyText" @click="replyCollapsed = false"/>
|
<Mfm :text="getNoteSummary(appearNote.reply)" :plain="true" :nowrap="true" :author="appearNote.reply.user" :nyaize="'respect'" :class="$style.collapsedInReplyToText" @click="inReplyToCollapsed = false"/>
|
||||||
</div>
|
</div>
|
||||||
<MkNoteSub v-if="appearNote.reply && !renoteCollapsed && !replyCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
|
<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="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._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>-->
|
<!--<div v-if="appearNote._featuredId_" class="tip"><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts.featured }}</div>-->
|
||||||
|
@ -314,7 +314,7 @@ const renoteCollapsed = ref(
|
||||||
(appearNote.value.myReaction != null)
|
(appearNote.value.myReaction != null)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
const replyCollapsed = ref(defaultStore.state.collapseReplies && !renoteCollapsed.value);
|
const inReplyToCollapsed = ref(defaultStore.state.collapseNotesRepliedTo && !renoteCollapsed.value);
|
||||||
const defaultLike = computed(() => defaultStore.state.like ? defaultStore.state.like : null);
|
const defaultLike = computed(() => defaultStore.state.like ? defaultStore.state.like : null);
|
||||||
const animated = computed(() => parsed.value ? checkAnimationFromMfm(parsed.value) : null);
|
const animated = computed(() => parsed.value ? checkAnimationFromMfm(parsed.value) : null);
|
||||||
const allowAnim = ref(defaultStore.state.advancedMfm && defaultStore.state.animatedMfm ? true : false);
|
const allowAnim = ref(defaultStore.state.advancedMfm && defaultStore.state.animatedMfm ? true : false);
|
||||||
|
@ -924,7 +924,7 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsedRenoteTarget, .collapsedReply {
|
.collapsedRenoteTarget, .collapsedInReplyTo {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
|
@ -932,12 +932,12 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||||
padding: 0 32px 18px;
|
padding: 0 32px 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsedReply {
|
.collapsedInReplyTo {
|
||||||
padding: 28px 32px 0;
|
padding: 28px 32px 0;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsedRenoteTargetAvatar, .collapsedReplyAvatar {
|
.collapsedRenoteTargetAvatar, .collapsedInReplyToAvatar {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 28px;
|
width: 28px;
|
||||||
|
@ -949,7 +949,7 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsedRenoteTargetText, .collapsedReplyText {
|
.collapsedRenoteTargetText, .collapsedInReplyToText {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
@ -1167,7 +1167,7 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsedReply {
|
.collapsedInReplyTo {
|
||||||
padding: 28px 16px 0;
|
padding: 28px 16px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -12,11 +12,11 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]"
|
:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]"
|
||||||
:tabindex="!isDeleted ? '-1' : undefined"
|
:tabindex="!isDeleted ? '-1' : undefined"
|
||||||
>
|
>
|
||||||
<SkNoteSub v-if="appearNote.reply && !renoteCollapsed && !replyCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
|
<SkNoteSub v-if="appearNote.reply && !renoteCollapsed && !inReplyToCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
|
||||||
<div v-if="appearNote.reply && replyCollapsed && !renoteCollapsed" :class="$style.collapsedReply">
|
<div v-if="appearNote.reply && inReplyToCollapsed && !renoteCollapsed" :class="$style.collapsedInReplyTo">
|
||||||
<div :class="$style.collapsedReplyLine"></div>
|
<div :class="$style.collapsedInReplyToLine"></div>
|
||||||
<MkAvatar :class="$style.collapsedReplyAvatar" :user="appearNote.reply.user" link preview/>
|
<MkAvatar :class="$style.collapsedInReplyToAvatar" :user="appearNote.reply.user" link preview/>
|
||||||
<Mfm :text="getNoteSummary(appearNote.reply)" :plain="true" :nowrap="true" :author="appearNote.reply.user" :nyaize="'respect'" :class="$style.collapsedReplyText" @click="replyCollapsed = false"/>
|
<Mfm :text="getNoteSummary(appearNote.reply)" :plain="true" :nowrap="true" :author="appearNote.reply.user" :nyaize="'respect'" :class="$style.collapsedInReplyToText" @click="inReplyToCollapsed = false"/>
|
||||||
</div>
|
</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="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._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>-->
|
||||||
|
@ -314,7 +314,7 @@ const renoteCollapsed = ref(
|
||||||
(appearNote.value.myReaction != null)
|
(appearNote.value.myReaction != null)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
const replyCollapsed = ref(defaultStore.state.collapseReplies && !renoteCollapsed.value);
|
const inReplyToCollapsed = ref(defaultStore.state.collapseNotesRepliedTo && !renoteCollapsed.value);
|
||||||
const defaultLike = computed(() => defaultStore.state.like ? defaultStore.state.like : null);
|
const defaultLike = computed(() => defaultStore.state.like ? defaultStore.state.like : null);
|
||||||
const animated = computed(() => parsed.value ? checkAnimationFromMfm(parsed.value) : null);
|
const animated = computed(() => parsed.value ? checkAnimationFromMfm(parsed.value) : null);
|
||||||
const allowAnim = ref(defaultStore.state.advancedMfm && defaultStore.state.animatedMfm ? true : false);
|
const allowAnim = ref(defaultStore.state.advancedMfm && defaultStore.state.animatedMfm ? true : false);
|
||||||
|
@ -940,7 +940,7 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsedRenoteTarget, .collapsedReply {
|
.collapsedRenoteTarget, .collapsedInReplyTo {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
|
@ -948,11 +948,11 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||||
padding: 8px 38px 24px;
|
padding: 8px 38px 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsedReply {
|
.collapsedInReplyTo {
|
||||||
padding: 28px 44px 0;
|
padding: 28px 44px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsedRenoteTargetAvatar, .collapsedReplyAvatar {
|
.collapsedRenoteTargetAvatar, .collapsedInReplyToAvatar {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 28px;
|
width: 28px;
|
||||||
|
@ -960,7 +960,7 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||||
margin: 0 8px 0 0;
|
margin: 0 8px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsedRenoteTargetText, .collapsedReplyText {
|
.collapsedRenoteTargetText, .collapsedInReplyToText {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
@ -974,7 +974,7 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsedReplyLine {
|
.collapsedInReplyToLine {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 56px;
|
left: 56px;
|
||||||
// using solid instead of dotted, stylelistic choice
|
// using solid instead of dotted, stylelistic choice
|
||||||
|
@ -1161,11 +1161,11 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||||
padding: 8px 26px 24px;
|
padding: 8px 26px 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsedReply {
|
.collapsedInReplyTo {
|
||||||
padding: 28px 35px 0;
|
padding: 28px 35px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsedReplyLine {
|
.collapsedInReplyToLine {
|
||||||
left: 47px;
|
left: 47px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1216,11 +1216,11 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsedReply {
|
.collapsedInReplyTo {
|
||||||
padding: 28px 33px 0;
|
padding: 28px 33px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsedReplyLine {
|
.collapsedInReplyToLine {
|
||||||
left: 45px;
|
left: 45px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -53,7 +53,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
|
<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
|
||||||
<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch>
|
<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch>
|
||||||
<MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch>
|
<MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch>
|
||||||
<MkSwitch v-model="collapseReplies">{{ i18n.ts.collapseReplies }}</MkSwitch>
|
<MkSwitch v-model="collapseNotesRepliedTo">{{ i18n.ts.collapseNotesRepliedTo }}</MkSwitch>
|
||||||
<MkSwitch v-model="collapseFiles">{{ i18n.ts.collapseFiles }}</MkSwitch>
|
<MkSwitch v-model="collapseFiles">{{ i18n.ts.collapseFiles }}</MkSwitch>
|
||||||
<MkSwitch v-model="uncollapseCW">Uncollapse CWs on notes</MkSwitch>
|
<MkSwitch v-model="uncollapseCW">Uncollapse CWs on notes</MkSwitch>
|
||||||
<MkSwitch v-model="autoloadConversation">{{ i18n.ts.autoloadConversation }}</MkSwitch>
|
<MkSwitch v-model="autoloadConversation">{{ i18n.ts.autoloadConversation }}</MkSwitch>
|
||||||
|
@ -322,7 +322,7 @@ const showClipButtonInNoteFooter = computed(defaultStore.makeGetterSetter('showC
|
||||||
const reactionsDisplaySize = computed(defaultStore.makeGetterSetter('reactionsDisplaySize'));
|
const reactionsDisplaySize = computed(defaultStore.makeGetterSetter('reactionsDisplaySize'));
|
||||||
const limitWidthOfReaction = computed(defaultStore.makeGetterSetter('limitWidthOfReaction'));
|
const limitWidthOfReaction = computed(defaultStore.makeGetterSetter('limitWidthOfReaction'));
|
||||||
const collapseRenotes = computed(defaultStore.makeGetterSetter('collapseRenotes'));
|
const collapseRenotes = computed(defaultStore.makeGetterSetter('collapseRenotes'));
|
||||||
const collapseReplies = computed(defaultStore.makeGetterSetter('collapseReplies'));
|
const collapseNotesRepliedTo = computed(defaultStore.makeGetterSetter('collapseNotesRepliedTo'));
|
||||||
const clickToOpen = computed(defaultStore.makeGetterSetter('clickToOpen'));
|
const clickToOpen = computed(defaultStore.makeGetterSetter('clickToOpen'));
|
||||||
// copied from src/pages/timeline.vue
|
// copied from src/pages/timeline.vue
|
||||||
const showBots = computed<boolean>({
|
const showBots = computed<boolean>({
|
||||||
|
|
|
@ -56,7 +56,7 @@ const { t, ts } = i18n;
|
||||||
|
|
||||||
const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
|
const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
|
||||||
'collapseRenotes',
|
'collapseRenotes',
|
||||||
'collapseReplies',
|
'collapseNotesRepliedTo',
|
||||||
'menu',
|
'menu',
|
||||||
'visibility',
|
'visibility',
|
||||||
'localOnly',
|
'localOnly',
|
||||||
|
|
|
@ -89,7 +89,7 @@ export const defaultStore = markRaw(new Storage('base', {
|
||||||
where: 'account',
|
where: 'account',
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
collapseReplies: {
|
collapseNotesRepliedTo: {
|
||||||
where: 'account',
|
where: 'account',
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue