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

enhance(frontend): ページのデザインを調整 (#13590)

Browse source 
* enhance(frontend): ページのデザインを調整

* 共有ボタンを直感的な導線に変更

* Update Changelog

* Update packages/frontend/src/components/page/page.image.vue

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
かっこかり 2024-03-18 18:21:27 +09:00 • committed by GitHub
parent a38646bd0f
commit 067cdf3ce4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 306 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

24
packages/frontend/src/components/page/page.image.vue
View file

@ -4,19 +4,15 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div>
<MediaImage
v-if="image"
:image="image"
:disableImageLink="true"
/>
<div :class="$style.root">
<MkMediaList v-if="image" :mediaList="[image]" :class="$style.mediaList"/>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import * as Misskey from 'misskey-js';
import MediaImage from '@/components/MkMediaImage.vue';
import MkMediaList from '@/components/MkMediaList.vue';
const props = defineProps<{
block: Misskey.entities.PageBlock,
@ -28,5 +24,17 @@ const image = ref<Misskey.entities.DriveFile | null>(null);
onMounted(() => {
image.value = props.page.attachedFiles.find(x => x.id === props.block.fileId) ?? null;
});
</script>
<style lang="scss" module>
.root {
border: 1px solid var(--divider);
border-radius: var(--radius);
overflow: hidden;
}
.mediaList {
// MkMediaList 内の上部マージン 4px
margin-top: -4px;
height: calc(100% + 4px);
}
</style>

13
packages/frontend/src/components/page/page.note.vue
View file

@ -4,9 +4,9 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div style="margin: 1em 0;">
<MkNote v-if="note && !block.detailed" :key="note.id + ':normal'" v-model:note="note"/>
<MkNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" v-model:note="note"/>
<div :class="$style.root">
<MkNote v-if="note && !block.detailed" :key="note.id + ':normal'" :note="note"/>
<MkNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" :note="note"/>
</div>
</template>
@ -32,3 +32,10 @@ onMounted(() => {
});
});
</script>
<style lang="scss" module>
.root {
border: 1px solid var(--divider);
border-radius: var(--radius);
}
</style>

8
packages/frontend/src/components/page/page.text.vue
View file

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps">
<div class="_gaps" :class="$style.textRoot">
<Mfm :text="block.text ?? ''" :isNote="false"/>
<MkUrlPreview v-for="url in urls" :key="url" :url="url"/>
</div>
@ -25,3 +25,9 @@ const props = defineProps<{
const urls = props.block.text ? extractUrlFromMfm(mfm.parse(props.block.text)) : [];
</script>
<style lang="scss" module>
.textRoot {
font-size: 1.1rem;
}
</style>

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

@ -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' }" class="_gaps">
<XBlock v-for="child in page.content" :key="child.id" :page="page" :block="child" :h="2"/>
</div>
</template>