OpenSource/Sharkey
OpenSource/Sharkey
1
0
Fork 0
mirror of https://activitypub.software/TransFem-org/Sharkey.git synced 2025-03-22 13:25:37 +01:00
Code Issues Projects Releases Packages Wiki Activity

copy changes from MkNote* to SkNote*

Browse source
This commit is contained in:
dakkar 2024-11-08 16:04:32 +00:00
parent ffebe778d4
commit 2ca1cbe51b
5 changed files with 66 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-show="!isDeleted" v-show="!isDeleted"
ref="rootEl" ref="rootEl"
v-hotkey="keymap" v-hotkey="keymap"
:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]" :class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover, [$style.skipRender]: defaultStore.state.skipNoteRender }]"
:tabindex="isDeleted ? '-1' : '0'" :tabindex="isDeleted ? '-1' : '0'"
> >
<SkNoteSub v-if="appearNote.reply && !renoteCollapsed && !inReplyToCollapsed" :note="appearNote.reply" :class="$style.replyTo"/> <SkNoteSub v-if="appearNote.reply && !renoteCollapsed && !inReplyToCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
@ -133,7 +133,7 @@ SPDX-License-Identifier: AGPL-3.0-only
ref="renoteButton" ref="renoteButton"
:class="$style.footerButton" :class="$style.footerButton"
class="_button" class="_button"
:style="renoted ? 'color: var(--accent) !important;' : ''" :style="renoted ? 'color: var(--MI_THEME-accent) !important;' : ''"
@click.stop @click.stop
@mousedown.prevent="renoted ? undoRenote(appearNote) : boostVisibility()" @mousedown.prevent="renoted ? undoRenote(appearNote) : boostVisibility()"
> >
@ -202,6 +202,9 @@ import { computed, inject, onMounted, ref, shallowRef, Ref, watch, provide } fro
import * as mfm from '@transfem-org/sfm-js'; import * as mfm from '@transfem-org/sfm-js';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import { isLink } from '@@/js/is-link.js'; import { isLink } from '@@/js/is-link.js';
import { shouldCollapsed } from '@@/js/collapsed.js';
import { host } from '@@/js/config.js';
import type { MenuItem } from '@/types/menu.js';
import SkNoteSub from '@/components/SkNoteSub.vue'; import SkNoteSub from '@/components/SkNoteSub.vue';
import SkNoteHeader from '@/components/SkNoteHeader.vue'; import SkNoteHeader from '@/components/SkNoteHeader.vue';
import SkNoteSimple from '@/components/SkNoteSimple.vue'; import SkNoteSimple from '@/components/SkNoteSimple.vue';
@ -233,13 +236,10 @@ import { deepClone } from '@/scripts/clone.js';
import { useTooltip } from '@/scripts/use-tooltip.js'; import { useTooltip } from '@/scripts/use-tooltip.js';
import { claimAchievement } from '@/scripts/achievements.js'; import { claimAchievement } from '@/scripts/achievements.js';
import { getNoteSummary } from '@/scripts/get-note-summary.js'; import { getNoteSummary } from '@/scripts/get-note-summary.js';
import type { MenuItem } from '@/types/menu.js';
import MkRippleEffect from '@/components/MkRippleEffect.vue'; import MkRippleEffect from '@/components/MkRippleEffect.vue';
import { showMovedDialog } from '@/scripts/show-moved-dialog.js'; import { showMovedDialog } from '@/scripts/show-moved-dialog.js';
import { useRouter } from '@/router/supplier.js'; import { useRouter } from '@/router/supplier.js';
import { boostMenuItems, type Visibility } from '@/scripts/boost-quote.js'; import { boostMenuItems, type Visibility } from '@/scripts/boost-quote.js';
import { shouldCollapsed } from '@@/js/collapsed.js';
import { host } from '@@/js/config.js';
import { isEnabledUrlPreview } from '@/instance.js'; import { isEnabledUrlPreview } from '@/instance.js';
import { type Keymap } from '@/scripts/hotkey.js'; import { type Keymap } from '@/scripts/hotkey.js';
import { focusPrev, focusNext } from '@/scripts/focus.js'; import { focusPrev, focusNext } from '@/scripts/focus.js';
@ -901,8 +901,8 @@ function emitUpdReaction(emoji: string, delta: number) {
margin: auto; margin: auto;
width: calc(100% - 8px); width: calc(100% - 8px);
height: calc(100% - 8px); height: calc(100% - 8px);
border: solid 2px var(--focus); border: solid 2px var(--MI_THEME-focus);
border-radius: var(--radius); border-radius: var(--MI-radius);
box-sizing: border-box; box-sizing: border-box;
} }
} }
@ -929,9 +929,9 @@ function emitUpdReaction(emoji: string, delta: number) {
right: 12px; right: 12px;
padding: 0 4px; padding: 0 4px;
margin-bottom: 0 !important; margin-bottom: 0 !important;
background: var(--popup); background: var(--MI_THEME-popup);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
box-shadow: 0px 4px 32px var(--shadow); box-shadow: 0px 4px 32px var(--MI_THEME-shadow);
} }
.footerButton { .footerButton {
@ -950,6 +950,11 @@ function emitUpdReaction(emoji: string, delta: number) {
} }
} }
.skipRender {
content-visibility: auto;
contain-intrinsic-size: 0 150px;
}
.tip { .tip {
display: flex; display: flex;
align-items: center; align-items: center;
@ -975,7 +980,7 @@ function emitUpdReaction(emoji: string, delta: number) {
padding: 24px 32px 0 calc(32px + var(--avatar) + 14px); padding: 24px 32px 0 calc(32px + var(--avatar) + 14px);
line-height: 28px; line-height: 28px;
white-space: pre; white-space: pre;
color: var(--renote); color: var(--MI_THEME-renote);
&::before { &::before {
content: ''; content: '';
@ -983,7 +988,7 @@ function emitUpdReaction(emoji: string, delta: number) {
top: 0; top: 0;
left: calc(32px + .5 * var(--avatar)); left: calc(32px + .5 * var(--avatar));
bottom: -8px; bottom: -8px;
border-left: var(--thread-width) solid var(--thread); border-left: var(--thread-width) solid var(--MI_THEME-thread);
} }
&:first-child { &:first-child {
@ -1074,7 +1079,7 @@ function emitUpdReaction(emoji: string, delta: number) {
position: absolute; position: absolute;
left: calc(32px + .5 * var(--avatar)); left: calc(32px + .5 * var(--avatar));
// using solid instead of dotted, stylelistic choice // using solid instead of dotted, stylelistic choice
border-left: var(--thread-width) solid var(--thread); border-left: var(--thread-width) solid var(--MI_THEME-thread);
top: calc(28px + 28px); // 28px of .root padding, plus 28px of avatar height (see SkNote) top: calc(28px + 28px); // 28px of .root padding, plus 28px of avatar height (see SkNote)
height: 28px; height: 28px;
} }
@ -1102,7 +1107,7 @@ function emitUpdReaction(emoji: string, delta: number) {
width: var(--avatar); width: var(--avatar);
height: var(--avatar); height: var(--avatar);
position: sticky !important; position: sticky !important;
top: calc(22px + var(--stickyTop, 0px)); top: calc(22px + var(--MI-stickyTop, 0px));
left: 0; left: 0;
transition: top 0.5s; transition: top 0.5s;
@ -1133,7 +1138,7 @@ function emitUpdReaction(emoji: string, delta: number) {
.showLessLabel { .showLessLabel {
display: inline-block; display: inline-block;
background: var(--popup); background: var(--MI_THEME-popup);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; font-size: 0.8em;
border-radius: var(--radius-ellipse); border-radius: var(--radius-ellipse);
@ -1154,16 +1159,16 @@ function emitUpdReaction(emoji: string, delta: number) {
z-index: 2; z-index: 2;
width: 100%; width: 100%;
height: 64px; height: 64px;
//background: linear-gradient(0deg, var(--panel), color(from var(--panel) srgb r g b / 0)); //background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
&:hover > .collapsedLabel { &:hover > .collapsedLabel {
background: var(--panelHighlight); background: var(--MI_THEME-panelHighlight);
} }
} }
.collapsedLabel { .collapsedLabel {
display: inline-block; display: inline-block;
background: var(--panel); background: var(--MI_THEME-panel);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; font-size: 0.8em;
border-radius: var(--radius-ellipse); border-radius: var(--radius-ellipse);
@ -1175,13 +1180,13 @@ function emitUpdReaction(emoji: string, delta: number) {
} }
.replyIcon { .replyIcon {
color: var(--accent); color: var(--MI_THEME-accent);
margin-right: 0.5em; margin-right: 0.5em;
} }
.translation { .translation {
border: solid 0.5px var(--divider); border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius); border-radius: var(--MI-radius);
padding: 12px; padding: 12px;
margin-top: 8px; margin-top: 8px;
} }
@ -1205,7 +1210,7 @@ function emitUpdReaction(emoji: string, delta: number) {
.quoteNote { .quoteNote {
padding: 16px; padding: 16px;
// Made border solid, stylistic choice // Made border solid, stylistic choice
border: solid 1px var(--renote); border: solid 1px var(--MI_THEME-renote);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
overflow: clip; overflow: clip;
} }
@ -1229,7 +1234,7 @@ function emitUpdReaction(emoji: string, delta: number) {
} }
&:hover { &:hover {
color: var(--fgHighlighted); color: var(--MI_THEME-fgHighlighted);
} }
} }

42
packages/frontend/src/components/SkNoteDetailed.vue
View file

@ -143,7 +143,7 @@ SPDX-License-Identifier: AGPL-3.0-only
ref="renoteButton" ref="renoteButton"
class="_button" class="_button"
:class="$style.noteFooterButton" :class="$style.noteFooterButton"
:style="renoted ? 'color: var(--accent) !important;' : ''" :style="renoted ? 'color: var(--MI_THEME-accent) !important;' : ''"
@mousedown.prevent="renoted ? undoRenote() : boostVisibility()" @mousedown.prevent="renoted ? undoRenote() : boostVisibility()"
> >
<i class="ti ti-repeat"></i> <i class="ti ti-repeat"></i>
@ -166,7 +166,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</button> </button>
<button ref="reactButton" :class="$style.noteFooterButton" class="_button" @click="toggleReact()"> <button ref="reactButton" :class="$style.noteFooterButton" class="_button" @click="toggleReact()">
<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--love);"></i> <i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--love);"></i>
<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--accent);"></i> <i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i> <i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
<i v-else class="ph-smiley ph-bold ph-lg"></i> <i v-else class="ph-smiley ph-bold ph-lg"></i>
<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.reactionCount) }}</p> <p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.reactionCount) }}</p>
@ -877,8 +877,8 @@ onUnmounted(() => {
margin: auto; margin: auto;
width: calc(100% - 8px); width: calc(100% - 8px);
height: calc(100% - 8px); height: calc(100% - 8px);
border: dashed 2px var(--focus); border: dashed 2px var(--MI_THEME-focus);
border-radius: var(--radius); border-radius: var(--MI-radius);
box-sizing: border-box; box-sizing: border-box;
} }
} }
@ -904,7 +904,7 @@ onUnmounted(() => {
padding: 16px 32px 8px 32px; padding: 16px 32px 8px 32px;
line-height: 28px; line-height: 28px;
white-space: pre; white-space: pre;
color: var(--renote); color: var(--MI_THEME-renote);
} }
.renoteAvatar { .renoteAvatar {
@ -967,8 +967,8 @@ onUnmounted(() => {
margin: auto; margin: auto;
width: calc(100% - 8px); width: calc(100% - 8px);
height: calc(100% - 8px); height: calc(100% - 8px);
border: solid 1px var(--focus); border: solid 1px var(--MI_THEME-focus);
border-radius: var(--radius); border-radius: var(--MI-radius);
box-sizing: border-box; box-sizing: border-box;
} }
} }
@ -1009,7 +1009,7 @@ onUnmounted(() => {
padding: 4px 6px; padding: 4px 6px;
font-size: 80%; font-size: 80%;
line-height: 1; line-height: 1;
border: solid 0.5px var(--divider); border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius-xs); border-radius: var(--radius-xs);
} }
@ -1049,19 +1049,19 @@ onUnmounted(() => {
} }
.noteReplyTarget { .noteReplyTarget {
color: var(--accent); color: var(--MI_THEME-accent);
margin-right: 0.5em; margin-right: 0.5em;
} }
.rn { .rn {
margin-left: 4px; margin-left: 4px;
font-style: oblique; font-style: oblique;
color: var(--renote); color: var(--MI_THEME-renote);
} }
.translation { .translation {
border: solid 0.5px var(--divider); border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius); border-radius: var(--MI-radius);
padding: 12px; padding: 12px;
margin-top: 8px; margin-top: 8px;
} }
@ -1076,7 +1076,7 @@ onUnmounted(() => {
.quoteNote { .quoteNote {
padding: 16px; padding: 16px;
border: solid 1px var(--renote); border: solid 1px var(--MI_THEME-renote);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
overflow: clip; overflow: clip;
} }
@ -1102,7 +1102,7 @@ onUnmounted(() => {
} }
&:hover { &:hover {
color: var(--fgHighlighted); color: var(--MI_THEME-fgHighlighted);
} }
} }
@ -1112,17 +1112,17 @@ onUnmounted(() => {
opacity: 0.7; opacity: 0.7;
&.reacted { &.reacted {
color: var(--accent); color: var(--MI_THEME-accent);
} }
} }
.reply:not(:first-child) { .reply:not(:first-child) {
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--MI_THEME-divider);
} }
.tabs { .tabs {
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--MI_THEME-divider);
border-bottom: solid 0.5px var(--divider); border-bottom: solid 0.5px var(--MI_THEME-divider);
display: flex; display: flex;
} }
@ -1141,7 +1141,7 @@ onUnmounted(() => {
} }
.tabActive { .tabActive {
border-bottom: solid 2px var(--accent); border-bottom: solid 2px var(--MI_THEME-accent);
} }
.tab_renotes { .tab_renotes {
@ -1161,12 +1161,12 @@ onUnmounted(() => {
.reactionTab { .reactionTab {
padding: 4px 6px; padding: 4px 6px;
border: solid 1px var(--divider); border: solid 1px var(--MI_THEME-divider);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
} }
.reactionTabActive { .reactionTabActive {
border-color: var(--accent); border-color: var(--MI_THEME-accent);
} }
@container (max-width: 500px) { @container (max-width: 500px) {

6
packages/frontend/src/components/SkNoteHeader.vue
View file

@ -161,7 +161,7 @@ const mock = inject<boolean>('mock', false);
} }
&:hover { &:hover {
color: var(--nameHover); color: var(--MI_THEME-nameHover);
text-decoration: none; text-decoration: none;
} }
} }
@ -188,7 +188,7 @@ const mock = inject<boolean>('mock', false);
margin: 0 .5em 0 0; margin: 0 .5em 0 0;
padding: 1px 6px; padding: 1px 6px;
font-size: 80%; font-size: 80%;
border: solid 0.5px var(--divider); border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius-xs); border-radius: var(--radius-xs);
} }
@ -255,7 +255,7 @@ const mock = inject<boolean>('mock', false);
} }
.danger { .danger {
color: var(--accent); color: var(--MI_THEME-accent);
} }
@container (max-width: 500px) { @container (max-width: 500px) {

4
packages/frontend/src/components/SkNoteSimple.vue
View file

@ -50,7 +50,7 @@ watch(() => props.expandAllCws, (expandAllCws) => {
font-size: 0.95em; font-size: 0.95em;
&:hover, &:focus-within { &:hover, &:focus-within {
background: var(--panelHighlight); background: var(--MI_THEME-panelHighlight);
transition: background .2s; transition: background .2s;
} }
} }
@ -63,7 +63,7 @@ watch(() => props.expandAllCws, (expandAllCws) => {
height: 34px; height: 34px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
position: sticky !important; position: sticky !important;
top: calc(16px + var(--stickyTop, 0px)); top: calc(16px + var(--MI-stickyTop, 0px));
left: 0; left: 0;
} }

26
packages/frontend/src/components/SkNoteSub.vue
View file

@ -38,7 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-only
ref="renoteButton" ref="renoteButton"
class="_button" class="_button"
:class="$style.noteFooterButton" :class="$style.noteFooterButton"
:style="renoted ? 'color: var(--accent) !important;' : ''" :style="renoted ? 'color: var(--MI_THEME-accent) !important;' : ''"
@mousedown="renoted ? undoRenote() : boostVisibility()" @mousedown="renoted ? undoRenote() : boostVisibility()"
> >
<i class="ph-rocket-launch ph-bold ph-lg"></i> <i class="ph-rocket-launch ph-bold ph-lg"></i>
@ -442,7 +442,7 @@ if (props.detail) {
position: absolute; position: absolute;
left: calc(32px + .5 * var(--avatar)); left: calc(32px + .5 * var(--avatar));
// using solid instead of dotted, stylelistic choice // using solid instead of dotted, stylelistic choice
border-left: var(--thread-width) solid var(--thread); border-left: var(--thread-width) solid var(--MI_THEME-thread);
top: calc(28px + var(--avatar)); // 28px of .root padding, plus 58px of avatar height (see SkNote) top: calc(28px + var(--avatar)); // 28px of .root padding, plus 58px of avatar height (see SkNote)
bottom: -28px; bottom: -28px;
} }
@ -468,8 +468,8 @@ if (props.detail) {
right: -12px; right: -12px;
left: -12px; left: -12px;
bottom: -12px; bottom: -12px;
background: var(--panelHighlight); background: var(--MI_THEME-panelHighlight);
border-radius: var(--radius); border-radius: var(--MI-radius);
opacity: 0; opacity: 0;
transition: opacity .2s, background .2s; transition: opacity .2s, background .2s;
z-index: -1; z-index: -1;
@ -525,12 +525,12 @@ if (props.detail) {
opacity: 0.7; opacity: 0.7;
&:hover { &:hover {
color: var(--fgHighlighted); color: var(--MI_THEME-fgHighlighted);
} }
} }
// Responsible for Reply borders 448 and 508 // Responsible for Reply borders 448 and 508
.reply, .more { .reply, .more {
//border-left: solid 0.5px var(--divider); //border-left: solid 0.5px var(--MI_THEME-divider);
margin-top: 10px; margin-top: 10px;
} }
@ -574,7 +574,7 @@ if (props.detail) {
opacity: 0.7; opacity: 0.7;
&.reacted { &.reacted {
color: var(--accent); color: var(--MI_THEME-accent);
} }
} }
@ -591,7 +591,7 @@ if (props.detail) {
} }
.reply, .more { .reply, .more {
//border-left: solid 0.5px var(--divider); //border-left: solid 0.5px var(--MI_THEME-divider);
margin-top: 10px; margin-top: 10px;
} }
@ -619,7 +619,7 @@ if (props.detail) {
.muted { .muted {
text-align: center; text-align: center;
padding: 8px !important; padding: 8px !important;
border: 1px solid var(--divider); border: 1px solid var(--MI_THEME-divider);
margin: 8px 8px 0 8px; margin: 8px 8px 0 8px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
} }
@ -633,7 +633,7 @@ if (props.detail) {
.threadLine { .threadLine {
width: 0; width: 0;
flex-grow: 1; flex-grow: 1;
border-left: var(--thread-width) solid var(--thread); border-left: var(--thread-width) solid var(--MI_THEME-thread);
margin-left: var(--reply-indent); margin-left: var(--reply-indent);
} }
@ -642,7 +642,7 @@ if (props.detail) {
} }
.reply:not(:last-child) { .reply:not(:last-child) {
border-left: var(--thread-width) solid var(--thread); border-left: var(--thread-width) solid var(--MI_THEME-thread);
&::before { &::before {
left: calc(-1 * var(--thread-width)); left: calc(-1 * var(--thread-width));
@ -656,8 +656,8 @@ if (props.detail) {
top: -10px; top: -10px;
height: calc(10px + 10px + .5 * var(--avatar)); height: calc(10px + 10px + .5 * var(--avatar));
width: 15px; width: 15px;
border-left: var(--thread-width) solid var(--thread); border-left: var(--thread-width) solid var(--MI_THEME-thread);
border-bottom: var(--thread-width) solid var(--thread); border-bottom: var(--thread-width) solid var(--MI_THEME-thread);
border-bottom-left-radius: 15px; border-bottom-left-radius: 15px;
} }