natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

new media list layout

This commit is contained in:
Freeplay 2023-05-27 23:24:38 -04:00
parent 9b0b8a4180
commit 8ef68f559c
4 changed files with 116 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/client/src/components/MkImgWithBlurhash.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<div class="xubzgfgb" :class="{ cover }" :title="title">
<canvas <canvas
v-if="!loaded" v-if="!loaded"
ref="canvas" ref="canvas"
@ -13,9 +12,11 @@
:title="title" :title="title"
:type="type" :type="type"
:alt="alt" :alt="alt"
:class="{ cover }"
:style="{ 'object-fit': cover ? 'cover' : null }"
loading="lazy"
@load="onLoad" @load="onLoad"
/> />
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -64,31 +65,20 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.xubzgfgb { canvas,
position: relative; img {
width: 100%;
height: 100%;
> canvas,
> img {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
> canvas { canvas {
position: absolute; position: absolute;
inset: 0;
object-fit: cover; object-fit: cover;
} }
> img { img {
object-fit: contain; object-fit: contain;
}
&.cover {
> img {
object-fit: cover;
}
}
} }
</style> </style>

13
packages/client/src/components/MkMediaImage.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<button v-if="hide" class="qjewsnkg" @click="hide = false"> <button v-if="hide" class="qjewsnkg" @click="hide = false">
<ImgWithBlurhash <ImgWithBlurhash
class="bg"
:hash="image.blurhash" :hash="image.blurhash"
:title="image.comment" :title="image.comment"
:alt="image.comment" :alt="image.comment"
@ -82,20 +81,17 @@ watch(
all: unset; all: unset;
position: relative; position: relative;
> .bg {
filter: brightness(0.5);
}
> .text { > .text {
position: absolute; position: relative;
left: 0;
top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1; z-index: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 30px;
box-sizing: border-box;
background: rgba(0,0,0,0.5);
> .wrapper { > .wrapper {
display: table-cell; display: table-cell;
@ -112,7 +108,6 @@ watch(
.gqnyydlz { .gqnyydlz {
position: relative; position: relative;
//box-shadow: 0 0 0 1px var(--divider) inset;
background: var(--bg); background: var(--bg);
> .hide { > .hide {

65
packages/client/src/components/MkMediaList.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="hoawjimk"> <div class="hoawjimk files">
<XBanner <XBanner
v-for="media in mediaList.filter((media) => !previewable(media))" v-for="media in mediaList.filter((media) => !previewable(media))"
:key="media.id" :key="media.id"
@ -7,14 +7,16 @@
/> />
<div <div
v-if="mediaList.filter((media) => previewable(media)).length > 0" v-if="mediaList.filter((media) => previewable(media)).length > 0"
class="gird-container" class="grid-container"
:data-count="
mediaList.filter((media) => previewable(media)).length < 5
? mediaList.filter((media) => previewable(media)).length
: null
"
:class="{ dmWidth: inDm }" :class="{ dmWidth: inDm }"
> >
<div <div
ref="gallery" ref="gallery"
:data-count="
mediaList.filter((media) => previewable(media)).length
"
@click.stop @click.stop
> >
<template <template
@ -200,7 +202,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
max-width: 40rem; max-width: 40rem;
} }
> .gird-container { > .grid-container {
position: relative; position: relative;
width: 100%; width: 100%;
margin-top: 4px; margin-top: 4px;
@ -208,37 +210,24 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
&:before { &[data-count] {
content: "";
display: block;
padding-top: 56.25%; // 16:9; padding-top: 56.25%; // 16:9;
}
> div { > div {
position: absolute; position: absolute;
top: 0; inset: 0;
right: 0; }
bottom: 0;
left: 0;
display: grid;
grid-gap: 8px;
> * {
overflow: hidden;
border-radius: 6px;
pointer-events: all;
} }
&[data-count="1"] { &[data-count="1"] > div {
grid-template-rows: 1fr; grid-template-rows: 1fr;
} }
&[data-count="2"] { &[data-count="2"] > div {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr; grid-template-rows: 1fr;
} }
&[data-count="3"] { &[data-count="3"] > div {
grid-template-columns: 1fr 0.5fr; grid-template-columns: 1fr 0.5fr;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
@ -252,27 +241,43 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
} }
} }
&[data-count="4"] { &[data-count="4"] > div {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
} }
> *:nth-child(1) { &:not([data-count]) > div > div {
max-height: 300px;
}
> div {
display: grid;
grid-gap: 8px;
> div, > button {
overflow: hidden;
border-radius: 6px;
pointer-events: all;
min-height: 50px;
}
> :nth-child(1) {
grid-column: 1 / 2; grid-column: 1 / 2;
grid-row: 1 / 2; grid-row: 1 / 2;
} }
> *:nth-child(2) { > :nth-child(2) {
grid-column: 2 / 3; grid-column: 2 / 3;
grid-row: 1 / 2; grid-row: 1 / 2;
} }
> *:nth-child(3) { > :nth-child(3) {
grid-column: 1 / 2; grid-column: 1 / 2;
grid-row: 2 / 3; grid-row: 2 / 3;
} }
> *:nth-child(4) { > :nth-child(4) {
grid-column: 2 / 3; grid-column: 2 / 3;
grid-row: 2 / 3; grid-row: 2 / 3;
} }

29
packages/client/src/components/MkSubNoteContent.vue
View File

@ -34,6 +34,7 @@
:class="{ :class="{
collapsed, collapsed,
isLong, isLong,
manyImages: note.files.length > 4,
showContent: note.cw && !showContent, showContent: note.cw && !showContent,
disableAnim: disableMfm, disableAnim: disableMfm,
}" }"
@ -96,9 +97,7 @@
:to="`/notes/${note.renoteId}`" :to="`/notes/${note.renoteId}`"
>{{ i18n.ts.quoteAttached }}: ...</MkA >{{ i18n.ts.quoteAttached }}: ...</MkA
> >
<div v-if="note.files.length > 0" class="files"> <XMediaList v-if="note.files.length > 0" :media-list="note.files" />
<XMediaList :media-list="note.files" />
</div>
<XPoll v-if="note.poll" :note="note" class="poll" /> <XPoll v-if="note.poll" :note="note" class="poll" />
<template v-if="detailed"> <template v-if="detailed">
<MkUrlPreview <MkUrlPreview
@ -188,11 +187,14 @@ const emit = defineEmits<{
const cwButton = ref<HTMLElement>(); const cwButton = ref<HTMLElement>();
const showMoreButton = ref<HTMLElement>(); const showMoreButton = ref<HTMLElement>();
const isLong = const isLong = !props.detailedView
!props.detailedView && && ( props.note.cw == null
props.note.cw == null && && (props.note.text != null
props.note.text != null && && (props.note.text.split("\n").length > 9 || props.note.text.length > 500)
(props.note.text.split("\n").length > 9 || props.note.text.length > 500); )
|| props.note.files.length > 4
);
const collapsed = $ref(props.note.cw == null && isLong); const collapsed = $ref(props.note.cw == null && isLong);
const urls = props.note.text const urls = props.note.text
@ -285,7 +287,7 @@ function focusFooter(ev) {
background: var(--buttonHoverBg); background: var(--buttonHoverBg);
} }
} }
> .files { > :deep(.files) {
margin-top: 0.4em; margin-top: 0.4em;
margin-bottom: 0.4em; margin-bottom: 0.4em;
} }
@ -332,9 +334,15 @@ function focusFooter(ev) {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
} }
&.collapsed > .body { }
&.collapsed {
&.manyImages {
max-height: calc(9em + 200px);
}
> .body {
box-sizing: border-box; box-sizing: border-box;
} }
}
&.showContent { &.showContent {
> .body { > .body {
min-height: 2em; min-height: 2em;
@ -353,7 +361,6 @@ function focusFooter(ev) {
top: 40px; top: 40px;
} }
} }
}
&.disableAnim :deep(span) { &.disableAnim :deep(span) {
animation: none !important; animation: none !important;