From cd7ab326cd2cf6df6890997c1dd168fbc94fbc4e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 8 Sep 2023 14:15:35 +0900
Subject: [PATCH] =?UTF-8?q?Revert=20"enhance(frontend):=20=E3=83=87?=
=?UTF-8?q?=E3=83=BC=E3=82=BF=E3=82=BB=E3=83=BC=E3=83=90=E3=83=BC=E3=83=A2?=
=?UTF-8?q?=E3=83=BC=E3=83=89=E3=81=A7=E9=9A=A0=E3=82=8C=E3=82=8B=E7=94=BB?=
=?UTF-8?q?=E5=83=8F=E3=82=92=E5=A2=97=E3=82=84=E3=81=99=E7=AD=89=20(#1177?=
=?UTF-8?q?9)"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
This reverts commit 22d966e92dabffba23178a4afb5853882ba7249e.
---
CHANGELOG.md | 1 -
.../frontend/src/components/MkMediaImage.vue | 40 ++++++-----------
.../frontend/src/components/MkPagePreview.vue | 43 +++++++++----------
.../frontend/src/components/MkUrlPreview.vue | 3 +-
.../src/components/page/page.image.vue | 12 ++----
.../frontend/src/components/page/page.vue | 2 +-
packages/frontend/src/pages/page.vue | 16 ++-----
7 files changed, 42 insertions(+), 75 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 75929033b5..1edb9cad0e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -37,7 +37,6 @@
- Enhance: ノート検索にローカルのみ検索可能なオプションの追加
- Enhance: AiScriptで`LOCALE`として現在の設定言語を取得できるように
- Enhance: Renote自体を通報できるように
-- Enhance: データセーバーモードの強化
- Enhance: Renoteを管理者権限で削除可能に
- `$[rainbow ]`記法が、動きのあるMFMが無効になっていても使用できるようになりました
- Playの操作を行うAPI TokenをAPIコンソールから発行できるように
diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index fbdf8777cc..edfd6a72e8 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -4,41 +4,34 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
-<div :class="hide ? $style.hidden : $style.visible" :style="darkMode ? '--c: rgb(255 255 255 / 2%);' : '--c: rgb(0 0 0 / 2%);'" @click.stop="onclick">
- <component
- :is="disableImageLink ? 'div' : 'a'"
- v-bind="disableImageLink ? {
- title: image.name,
- class: $style.imageContainer,
- } : {
- title: image.name,
- class: $style.imageContainer,
- href: image.url,
- style: 'cursor: zoom-in;'
- }"
+<div :class="hide ? $style.hidden : $style.visible" :style="darkMode ? '--c: rgb(255 255 255 / 2%);' : '--c: rgb(0 0 0 / 2%);'" @click="onclick">
+ <a
+ :class="$style.imageContainer"
+ :href="image.url"
+ :title="image.name"
>
<ImgWithBlurhash
:hash="image.blurhash"
:src="(defaultStore.state.enableDataSaverMode && hide) ? null : url"
:forceBlurhash="hide"
- :cover="hide || cover"
+ :cover="hide"
:alt="image.comment || image.name"
:title="image.comment || image.name"
:width="image.properties.width"
:height="image.properties.height"
:style="hide ? 'filter: brightness(0.5);' : null"
/>
- </component>
+ </a>
<template v-if="hide">
<div :class="$style.hiddenText">
<div :class="$style.hiddenTextWrapper">
<b v-if="image.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.enableDataSaverMode ? ` (${i18n.ts.image}${image.size ? ' ' + bytes(image.size) : ''})` : '' }}</b>
<b v-else style="display: block;"><i class="ti ti-photo"></i> {{ defaultStore.state.enableDataSaverMode && image.size ? bytes(image.size) : i18n.ts.image }}</b>
- <span v-if="controls" style="display: block;">{{ i18n.ts.clickToShow }}</span>
+ <span style="display: block;">{{ i18n.ts.clickToShow }}</span>
</div>
</div>
</template>
- <template v-else-if="controls">
+ <template v-else>
<div :class="$style.indicators">
<div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div>
<div v-if="image.comment" :class="$style.indicator">ALT</div>
@@ -61,17 +54,10 @@ import { i18n } from '@/i18n';
import * as os from '@/os';
import { iAmModerator } from '@/account';
-const props = withDefaults(defineProps<{
+const props = defineProps<{
image: Misskey.entities.DriveFile;
raw?: boolean;
- cover?: boolean;
- disableImageLink?: boolean;
- controls?: boolean;
-}>(), {
- cover: false,
- disableImageLink: false,
- controls: true,
-});
+}>();
let hide = $ref(true);
let darkMode: boolean = $ref(defaultStore.state.darkMode);
@@ -84,9 +70,6 @@ const url = $computed(() => (props.raw || defaultStore.state.loadRawImages)
);
function onclick() {
- if (!props.controls) {
- return;
- }
if (hide) {
hide = false;
}
@@ -184,6 +167,7 @@ function showMenu(ev: MouseEvent) {
.imageContainer {
display: block;
+ cursor: zoom-in;
overflow: hidden;
width: 100%;
height: 100%;
diff --git a/packages/frontend/src/components/MkPagePreview.vue b/packages/frontend/src/components/MkPagePreview.vue
index 65464956be..53920da50d 100644
--- a/packages/frontend/src/components/MkPagePreview.vue
+++ b/packages/frontend/src/components/MkPagePreview.vue
@@ -5,15 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj" tabindex="-1">
- <div v-if="page.eyeCatchingImage" class="thumbnail">
- <MediaImage
- :image="page.eyeCatchingImage"
- :disableImageLink="true"
- :controls="false"
- :cover="true"
- :class="$style.eyeCatchingImageRoot"
- />
- </div>
+ <div v-if="page.eyeCatchingImage" class="thumbnail" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
<article>
<header>
<h1 :title="page.title">{{ page.title }}</h1>
@@ -31,22 +23,12 @@ SPDX-License-Identifier: AGPL-3.0-only
import { } from 'vue';
import * as Misskey from 'misskey-js';
import { userName } from '@/filters/user';
-import MediaImage from '@/components/MkMediaImage.vue';
const props = defineProps<{
page: Misskey.entities.Page;
}>();
</script>
-<style module>
-.eyeCatchingImageRoot {
- width: 100%;
- height: 200px;
- border-radius: var(--radius) var(--radius) 0 0;
- overflow: hidden;
-}
-</style>
-
<style lang="scss" scoped>
.vhpxefrj {
display: block;
@@ -57,15 +39,32 @@ const props = defineProps<{
}
> .thumbnail {
+ width: 100%;
+ height: 200px;
+ background-position: center;
+ background-size: cover;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ > button {
+ font-size: 3.5em;
+ opacity: 0.7;
+
+ &:hover {
+ font-size: 4em;
+ opacity: 0.9;
+ }
+ }
+
& + article {
- border-radius: 0 0 var(--radius) var(--radius);
+ left: 100px;
+ width: calc(100% - 100px);
}
}
> article {
- background-color: var(--panel);
padding: 16px;
- border-radius: var(--radius);
> header {
margin-bottom: 8px;
diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index 77c62ae0b9..bac7f1e310 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<div v-else>
<component :is="self ? 'MkA' : 'a'" :class="[$style.link, { [$style.compact]: compact }]" :[attr]="self ? url.substring(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
- <div v-if="thumbnail" :class="$style.thumbnail" :style="defaultStore.state.enableDataSaverMode ? '' : `background-image: url('${thumbnail}')`">
+ <div v-if="thumbnail" :class="$style.thumbnail" :style="`background-image: url('${thumbnail}')`">
</div>
<article :class="$style.body">
<header :class="$style.header">
@@ -260,7 +260,6 @@ onUnmounted(() => {
height: 100%;
background-position: center;
background-size: cover;
- background-color: var(--bg);
display: flex;
justify-content: center;
align-items: center;
diff --git a/packages/frontend/src/components/page/page.image.vue b/packages/frontend/src/components/page/page.image.vue
index 80a75f02a5..3d64171451 100644
--- a/packages/frontend/src/components/page/page.image.vue
+++ b/packages/frontend/src/components/page/page.image.vue
@@ -5,24 +5,20 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div>
- <MediaImage
- v-if="image"
- :image="image"
- :disableImageLink="true"
- />
+ <ImgWithBlurhash v-if="image" style="max-width: 100%;" :hash="image.blurhash" :src="image.url" :alt="image.comment" :title="image.comment" :width="image.properties.width" :height="image.properties.height" :cover="false"/>
</div>
</template>
<script lang="ts" setup>
-import { ref } from 'vue';
+import { } from 'vue';
import * as Misskey from 'misskey-js';
import { ImageBlock } from './block.type';
-import MediaImage from '@/components/MkMediaImage.vue';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
const props = defineProps<{
block: ImageBlock,
page: Misskey.entities.Page,
}>();
-const image = ref<Misskey.entities.DriveFile>(props.page.attachedFiles.find(x => x.id === props.block.fileId));
+const image = props.page.attachedFiles.find(x => x.id === props.block.fileId);
</script>
diff --git a/packages/frontend/src/components/page/page.vue b/packages/frontend/src/components/page/page.vue
index ab37ca69ad..265ee7146d 100644
--- a/packages/frontend/src/components/page/page.vue
+++ b/packages/frontend/src/components/page/page.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
-<div :class="{ [$style.center]: page.alignCenter, [$style.serif]: page.font === 'serif' }" class="_gaps_s">
+<div :class="{ [$style.center]: page.alignCenter, [$style.serif]: page.font === 'serif' }">
<XBlock v-for="child in page.content" :key="child.id" :page="page" :block="child" :h="2"/>
</div>
</template>
diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue
index c20bbb4793..efd63bafce 100644
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@@ -16,13 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
-->
<div class="banner">
- <MkMediaImage
- v-if="page.eyeCatchingImageId"
- :image="page.eyeCatchingImage"
- :cover="true"
- :disableImageLink="true"
- class="thumbnail"
- />
+ <img v-if="page.eyeCatchingImageId" :src="page.eyeCatchingImage.url"/>
</div>
<div class="content">
<XPage :page="page"/>
@@ -80,7 +74,6 @@ import XPage from '@/components/page/page.vue';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os';
import { url } from '@/config';
-import MkMediaImage from '@/components/MkMediaImage.vue';
import MkFollowButton from '@/components/MkFollowButton.vue';
import MkContainer from '@/components/MkContainer.vue';
import MkPagination from '@/components/MkPagination.vue';
@@ -211,14 +204,11 @@ definePageMetadata(computed(() => page ? {
}
> .banner {
- > .thumbnail {
+ > img {
// TODO: 良い感じのアスペクト比で表示
display: block;
width: 100%;
- height: auto;
- aspect-ratio: 3/1;
- border-radius: var(--radius);
- overflow: hidden;
+ height: 150px;
object-fit: cover;
}
}