perf(frontend/tabler-icons): アイコンの読み込みに異常に時間がかかる問題の緩和 (MisskeyIO#927)
This commit is contained in:
parent
ff40c4bfe2
commit
1d9a54e1ca
8 changed files with 24 additions and 10 deletions
|
@ -36,7 +36,7 @@ html
|
||||||
link(rel='prefetch' href=infoImageUrl)
|
link(rel='prefetch' href=infoImageUrl)
|
||||||
link(rel='prefetch' href=notFoundImageUrl)
|
link(rel='prefetch' href=notFoundImageUrl)
|
||||||
//- https://github.com/misskey-dev/misskey/issues/9842
|
//- 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}`)
|
link(rel='modulepreload' href=`/vite/${clientEntry.file}`)
|
||||||
|
|
||||||
if !config.clientManifestExists
|
if !config.clientManifestExists
|
||||||
|
|
|
@ -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/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="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">
|
<link rel="stylesheet" href="https://unpkg.com/@fontsource/m-plus-rounded-1c/index.css">
|
||||||
<style>
|
<style>
|
||||||
html {
|
html {
|
||||||
|
|
|
@ -48,8 +48,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</audio>
|
</audio>
|
||||||
<div :class="[$style.controlsChild, $style.controlsLeft]">
|
<div :class="[$style.controlsChild, $style.controlsLeft]">
|
||||||
<button class="_button" :class="$style.controlButton" @click.prevent.stop="togglePlayPause">
|
<button class="_button" :class="$style.controlButton" @click.prevent.stop="togglePlayPause">
|
||||||
<i v-if="isPlaying" class="ti ti-player-pause-filled"></i>
|
<i v-if="isPlaying" class="ti-filled ti-filled-player-pause"></i>
|
||||||
<i v-else class="ti ti-player-play-filled"></i>
|
<i v-else class="ti-filled ti-filled-player-play"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div :class="[$style.controlsChild, $style.controlsRight]">
|
<div :class="[$style.controlsChild, $style.controlsRight]">
|
||||||
|
|
|
@ -62,7 +62,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
>
|
>
|
||||||
<source :src="video.url">
|
<source :src="video.url">
|
||||||
</video>
|
</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">
|
<div v-else-if="!isActuallyPlaying" :class="$style.videoLoading">
|
||||||
<MkLoading/>
|
<MkLoading/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -75,8 +75,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<div v-if="videoControls" :class="$style.videoControls" @click.self="togglePlayPause">
|
<div v-if="videoControls" :class="$style.videoControls" @click.self="togglePlayPause">
|
||||||
<div :class="[$style.controlsChild, $style.controlsLeft]">
|
<div :class="[$style.controlsChild, $style.controlsLeft]">
|
||||||
<button class="_button" :class="$style.controlButton" @click.prevent.stop="togglePlayPause">
|
<button class="_button" :class="$style.controlButton" @click.prevent.stop="togglePlayPause">
|
||||||
<i v-if="isPlaying" class="ti ti-player-pause-filled"></i>
|
<i v-if="isPlaying" class="ti-filled ti-filled-player-pause"></i>
|
||||||
<i v-else class="ti ti-player-play-filled"></i>
|
<i v-else class="ti-filled ti-filled-player-play"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div :class="[$style.controlsChild, $style.controlsRight]">
|
<div :class="[$style.controlsChild, $style.controlsRight]">
|
||||||
|
|
|
@ -119,7 +119,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<i class="ti ti-ban"></i>
|
<i class="ti ti-ban"></i>
|
||||||
</button>
|
</button>
|
||||||
<button ref="reactButton" :class="$style.footerButton" class="_button" @click="toggleReact()">
|
<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.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-if="appearNote.reactionAcceptance === 'likeOnly' || $i && !$i.policies.canUseReaction" class="ti ti-heart"></i>
|
||||||
<i v-else class="ti ti-plus"></i>
|
<i v-else class="ti ti-plus"></i>
|
||||||
|
|
|
@ -127,7 +127,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<i class="ti ti-ban"></i>
|
<i class="ti ti-ban"></i>
|
||||||
</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' || !$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.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-if="appearNote.reactionAcceptance === 'likeOnly' || $i && !$i.policies.canUseReaction" class="ti ti-heart"></i>
|
||||||
<i v-else class="ti ti-plus"></i>
|
<i v-else class="ti ti-plus"></i>
|
||||||
|
|
|
@ -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-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-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)">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,6 +6,10 @@
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only
|
* SPDX-License-Identifier: AGPL-3.0-only
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
@use '@tabler/icons-webfont/dist/tabler-icons-filled' with (
|
||||||
|
$ti-prefix: 'ti-filled'
|
||||||
|
);
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--radius: 12px;
|
--radius: 12px;
|
||||||
--marginFull: 16px;
|
--marginFull: 16px;
|
||||||
|
@ -153,6 +157,16 @@ rt {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ti-filled {
|
||||||
|
width: 1.28em;
|
||||||
|
vertical-align: -12%;
|
||||||
|
line-height: 1em;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
font-size: 128%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.ti-fw {
|
.ti-fw {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue