OpenSource/Sharkey
OpenSource/Sharkey
1
0
Fork 0
mirror of https://activitypub.software/TransFem-org/Sharkey.git synced 2024-12-29 13:59:26 +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"
ref="rootEl"
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'"
>
<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"
:class="$style.footerButton"
class="_button"
:style="renoted ? 'color: var(--accent) !important;' : ''"
:style="renoted ? 'color: var(--MI_THEME-accent) !important;' : ''"
@click.stop
@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 Misskey from 'misskey-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 SkNoteHeader from '@/components/SkNoteHeader.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 { claimAchievement } from '@/scripts/achievements.js';
import { getNoteSummary } from '@/scripts/get-note-summary.js';
import type { MenuItem } from '@/types/menu.js';
import MkRippleEffect from '@/components/MkRippleEffect.vue';
import { showMovedDialog } from '@/scripts/show-moved-dialog.js';
import { useRouter } from '@/router/supplier.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 { type Keymap } from '@/scripts/hotkey.js';
import { focusPrev, focusNext } from '@/scripts/focus.js';
@ -901,8 +901,8 @@ function emitUpdReaction(emoji: string, delta: number) {
margin: auto;
width: calc(100% - 8px);
height: calc(100% - 8px);
border: solid 2px var(--focus);
border-radius: var(--radius);
border: solid 2px var(--MI_THEME-focus);
border-radius: var(--MI-radius);
box-sizing: border-box;
}
}
@ -929,9 +929,9 @@ function emitUpdReaction(emoji: string, delta: number) {
right: 12px;
padding: 0 4px;
margin-bottom: 0 !important;
background: var(--popup);
background: var(--MI_THEME-popup);
border-radius: var(--radius-sm);
box-shadow: 0px 4px 32px var(--shadow);
box-shadow: 0px 4px 32px var(--MI_THEME-shadow);
}
.footerButton {
@ -950,6 +950,11 @@ function emitUpdReaction(emoji: string, delta: number) {
}
}
.skipRender {
content-visibility: auto;
contain-intrinsic-size: 0 150px;
}
.tip {
display: flex;
align-items: center;
@ -975,7 +980,7 @@ function emitUpdReaction(emoji: string, delta: number) {
padding: 24px 32px 0 calc(32px + var(--avatar) + 14px);
line-height: 28px;
white-space: pre;
color: var(--renote);
color: var(--MI_THEME-renote);
&::before {
content: '';
@ -983,7 +988,7 @@ function emitUpdReaction(emoji: string, delta: number) {
top: 0;
left: calc(32px + .5 * var(--avatar));
bottom: -8px;
border-left: var(--thread-width) solid var(--thread);
border-left: var(--thread-width) solid var(--MI_THEME-thread);
}
&:first-child {
@ -1074,7 +1079,7 @@ function emitUpdReaction(emoji: string, delta: number) {
position: absolute;
left: calc(32px + .5 * var(--avatar));
// 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)
height: 28px;
}
@ -1102,7 +1107,7 @@ function emitUpdReaction(emoji: string, delta: number) {
width: var(--avatar);
height: var(--avatar);
position: sticky !important;
top: calc(22px + var(--stickyTop, 0px));
top: calc(22px + var(--MI-stickyTop, 0px));
left: 0;
transition: top 0.5s;
@ -1133,7 +1138,7 @@ function emitUpdReaction(emoji: string, delta: number) {
.showLessLabel {
display: inline-block;
background: var(--popup);
background: var(--MI_THEME-popup);
padding: 6px 10px;
font-size: 0.8em;
border-radius: var(--radius-ellipse);
@ -1154,16 +1159,16 @@ function emitUpdReaction(emoji: string, delta: number) {
z-index: 2;
width: 100%;
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 {
background: var(--panelHighlight);
background: var(--MI_THEME-panelHighlight);
}
}
.collapsedLabel {
display: inline-block;
background: var(--panel);
background: var(--MI_THEME-panel);
padding: 6px 10px;
font-size: 0.8em;
border-radius: var(--radius-ellipse);
@ -1175,13 +1180,13 @@ function emitUpdReaction(emoji: string, delta: number) {
}
.replyIcon {
color: var(--accent);
color: var(--MI_THEME-accent);
margin-right: 0.5em;
}
.translation {
border: solid 0.5px var(--divider);
border-radius: var(--radius);
border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--MI-radius);
padding: 12px;
margin-top: 8px;
}
@ -1205,7 +1210,7 @@ function emitUpdReaction(emoji: string, delta: number) {
.quoteNote {
padding: 16px;
// Made border solid, stylistic choice
border: solid 1px var(--renote);
border: solid 1px var(--MI_THEME-renote);
border-radius: var(--radius-sm);
overflow: clip;
}
@ -1229,7 +1234,7 @@ function emitUpdReaction(emoji: string, delta: number) {
}
&: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"
class="_button"
:class="$style.noteFooterButton"
:style="renoted ? 'color: var(--accent) !important;' : ''"
:style="renoted ? 'color: var(--MI_THEME-accent) !important;' : ''"
@mousedown.prevent="renoted ? undoRenote() : boostVisibility()"
>
<i class="ti ti-repeat"></i>
@ -166,7 +166,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</button>
<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-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 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>
@ -877,8 +877,8 @@ onUnmounted(() => {
margin: auto;
width: calc(100% - 8px);
height: calc(100% - 8px);
border: dashed 2px var(--focus);
border-radius: var(--radius);
border: dashed 2px var(--MI_THEME-focus);
border-radius: var(--MI-radius);
box-sizing: border-box;
}
}
@ -904,7 +904,7 @@ onUnmounted(() => {
padding: 16px 32px 8px 32px;
line-height: 28px;
white-space: pre;
color: var(--renote);
color: var(--MI_THEME-renote);
}
.renoteAvatar {
@ -967,8 +967,8 @@ onUnmounted(() => {
margin: auto;
width: calc(100% - 8px);
height: calc(100% - 8px);
border: solid 1px var(--focus);
border-radius: var(--radius);
border: solid 1px var(--MI_THEME-focus);
border-radius: var(--MI-radius);
box-sizing: border-box;
}
}
@ -1009,7 +1009,7 @@ onUnmounted(() => {
padding: 4px 6px;
font-size: 80%;
line-height: 1;
border: solid 0.5px var(--divider);
border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius-xs);
}
@ -1049,19 +1049,19 @@ onUnmounted(() => {
}
.noteReplyTarget {
color: var(--accent);
color: var(--MI_THEME-accent);
margin-right: 0.5em;
}
.rn {
margin-left: 4px;
font-style: oblique;
color: var(--renote);
color: var(--MI_THEME-renote);
}
.translation {
border: solid 0.5px var(--divider);
border-radius: var(--radius);
border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--MI-radius);
padding: 12px;
margin-top: 8px;
}
@ -1076,7 +1076,7 @@ onUnmounted(() => {
.quoteNote {
padding: 16px;
border: solid 1px var(--renote);
border: solid 1px var(--MI_THEME-renote);
border-radius: var(--radius-sm);
overflow: clip;
}
@ -1102,7 +1102,7 @@ onUnmounted(() => {
}
&:hover {
color: var(--fgHighlighted);
color: var(--MI_THEME-fgHighlighted);
}
}
@ -1112,17 +1112,17 @@ onUnmounted(() => {
opacity: 0.7;
&.reacted {
color: var(--accent);
color: var(--MI_THEME-accent);
}
}
.reply:not(:first-child) {
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
}
.tabs {
border-top: solid 0.5px var(--divider);
border-bottom: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
border-bottom: solid 0.5px var(--MI_THEME-divider);
display: flex;
}
@ -1141,7 +1141,7 @@ onUnmounted(() => {
}
.tabActive {
border-bottom: solid 2px var(--accent);
border-bottom: solid 2px var(--MI_THEME-accent);
}
.tab_renotes {
@ -1161,12 +1161,12 @@ onUnmounted(() => {
.reactionTab {
padding: 4px 6px;
border: solid 1px var(--divider);
border: solid 1px var(--MI_THEME-divider);
border-radius: var(--radius-sm);
}
.reactionTabActive {
border-color: var(--accent);
border-color: var(--MI_THEME-accent);
}
@container (max-width: 500px) {

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

@ -161,7 +161,7 @@ const mock = inject<boolean>('mock', false);
}
&:hover {
color: var(--nameHover);
color: var(--MI_THEME-nameHover);
text-decoration: none;
}
}
@ -188,7 +188,7 @@ const mock = inject<boolean>('mock', false);
margin: 0 .5em 0 0;
padding: 1px 6px;
font-size: 80%;
border: solid 0.5px var(--divider);
border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius-xs);
}
@ -255,7 +255,7 @@ const mock = inject<boolean>('mock', false);
}
.danger {
color: var(--accent);
color: var(--MI_THEME-accent);
}
@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;
&:hover, &:focus-within {
background: var(--panelHighlight);
background: var(--MI_THEME-panelHighlight);
transition: background .2s;
}
}
@ -63,7 +63,7 @@ watch(() => props.expandAllCws, (expandAllCws) => {
height: 34px;
border-radius: var(--radius-sm);
position: sticky !important;
top: calc(16px + var(--stickyTop, 0px));
top: calc(16px + var(--MI-stickyTop, 0px));
left: 0;
}

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

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