oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

perf(frontend/tabler-icons): アイコンの読み込みに異常に時間がかかる問題の緩和 (MisskeyIO#927)

Browse source
This commit is contained in:
あわわわとーにゅ 2025-02-02 01:03:42 +09:00 • committed by GitHub
parent ff40c4bfe2
commit 1d9a54e1ca
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 24 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/backend/src/server/web/views/base.pug
View file

@ -36,7 +36,7 @@ html
link(rel='prefetch' href=infoImageUrl)
link(rel='prefetch' href=notFoundImageUrl)
//- https://github.com/misskey-dev/misskey/issues/9842
link(rel='stylesheet' href=`/assets/tabler-icons.${version}/dist/tabler-icons.min.css`)
link(rel='stylesheet' href=`/assets/tabler-icons.${version}/dist/tabler-icons-outline.min.css`)
link(rel='modulepreload' href=`/vite/${clientEntry.file}`)
if !config.clientManifestExists

2
packages/frontend/.storybook/preview-head.html
View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<link rel="preload" href="https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true" as="image" type="image/png" crossorigin="anonymous">
<link rel="preload" href="https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true" as="image" type="image/jpeg" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/@tabler/icons-webfont@3.5.0/dist/tabler-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/@tabler/icons-webfont@latest/dist/tabler-icons-outline.min.css">
<link rel="stylesheet" href="https://unpkg.com/@fontsource/m-plus-rounded-1c/index.css">
<style>
html {

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

@ -48,8 +48,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</audio>
<div :class="[$style.controlsChild, $style.controlsLeft]">
<button class="_button" :class="$style.controlButton" @click.prevent.stop="togglePlayPause">
<i v-if="isPlaying" class="ti ti-player-pause-filled"></i>
<i v-else class="ti ti-player-play-filled"></i>
<i v-if="isPlaying" class="ti-filled ti-filled-player-pause"></i>
<i v-else class="ti-filled ti-filled-player-play"></i>
</button>
</div>
<div :class="[$style.controlsChild, $style.controlsRight]">

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

@ -62,7 +62,7 @@ SPDX-License-Identifier: AGPL-3.0-only
>
<source :src="video.url">
</video>
<button v-if="isReady && !isPlaying" class="_button" :class="$style.videoOverlayPlayButton" @click="togglePlayPause"><i class="ti ti-player-play-filled"></i></button>
<button v-if="isReady && !isPlaying" class="_button" :class="$style.videoOverlayPlayButton" @click="togglePlayPause"><i class="ti-filled ti-filled-player-play"></i></button>
<div v-else-if="!isActuallyPlaying" :class="$style.videoLoading">
<MkLoading/>
</div>
@ -75,8 +75,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="videoControls" :class="$style.videoControls" @click.self="togglePlayPause">
<div :class="[$style.controlsChild, $style.controlsLeft]">
<button class="_button" :class="$style.controlButton" @click.prevent.stop="togglePlayPause">
<i v-if="isPlaying" class="ti ti-player-pause-filled"></i>
<i v-else class="ti ti-player-play-filled"></i>
<i v-if="isPlaying" class="ti-filled ti-filled-player-pause"></i>
<i v-else class="ti-filled ti-filled-player-play"></i>
</button>
</div>
<div :class="[$style.controlsChild, $style.controlsRight]">

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

@ -119,7 +119,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ti ti-ban"></i>
</button>
<button ref="reactButton" :class="$style.footerButton" class="_button" @click="toggleReact()">
<i v-if=" (appearNote.reactionAcceptance === 'likeOnly' || !$i?.policies.canUseReaction) && appearNote.myReaction != null " class="ti ti-heart-filled" style="color: var(--eventReactionHeart);"></i>
<i v-if=" (appearNote.reactionAcceptance === 'likeOnly' || !$i?.policies.canUseReaction) && appearNote.myReaction != null " class="ti-filled ti-filled-heart" style="color: var(--eventReactionHeart);"></i>
<i v-else-if="appearNote.myReaction != null " class="ti ti-minus" style="color: var(--accent);"></i>
<i v-else-if="appearNote.reactionAcceptance === 'likeOnly' || $i && !$i.policies.canUseReaction" class="ti ti-heart"></i>
<i v-else class="ti ti-plus"></i>

2
packages/frontend/src/components/MkNoteDetailed.vue
View file

@ -127,7 +127,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ti ti-ban"></i>
</button>
<button ref="reactButton" :class="$style.noteFooterButton" class="_button" @click="toggleReact()">
<i v-if=" (appearNote.reactionAcceptance === 'likeOnly' || !$i?.policies.canUseReaction) && appearNote.myReaction != null " class="ti ti-heart-filled" style="color: var(--eventReactionHeart);"></i>
<i v-if=" (appearNote.reactionAcceptance === 'likeOnly' || !$i?.policies.canUseReaction) && appearNote.myReaction != null " class="ti-filled ti-filled-heart" style="color: var(--eventReactionHeart);"></i>
<i v-else-if="appearNote.myReaction != null " class="ti ti-minus" style="color: var(--accent);"></i>
<i v-else-if="appearNote.reactionAcceptance === 'likeOnly' || $i && !$i.policies.canUseReaction" class="ti ti-heart"></i>
<i v-else class="ti ti-plus"></i>

2
packages/frontend/src/pages/reversi/game.setting.vue
View file

@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="game.map == null"><i class="ti ti-dice"></i></div>
<div v-else :class="$style.board" :style="{ 'grid-template-rows': `repeat(${ game.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.map[0].length }, 1fr)` }">
<div v-for="(x, i) in game.map.join('')" :class="[$style.boardCell, { [$style.boardCellNone]: x == ' ' }]" @click="onMapCellClick(i, x)">
<i v-if="x === 'b' || x === 'w'" style="pointer-events: none; user-select: none;" :class="x === 'b' ? 'ti ti-circle-filled' : 'ti ti-circle'"></i>
<i v-if="x === 'b' || x === 'w'" style="pointer-events: none; user-select: none;" :class="x === 'b' ? 'ti-filled ti-filled-circle' : 'ti ti-circle'"></i>
</div>
</div>
</div>

14
packages/frontend/src/style.scss
View file

@ -6,6 +6,10 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
@use '@tabler/icons-webfont/dist/tabler-icons-filled' with (
$ti-prefix: 'ti-filled'
);
:root {
--radius: 12px;
--marginFull: 16px;
@ -153,6 +157,16 @@ rt {
}
}
.ti-filled {
width: 1.28em;
vertical-align: -12%;
line-height: 1em;
&:before {
font-size: 128%;
}
}
.ti-fw {
display: inline-block;
text-align: center;