merge: ui tweaks
This commit is contained in:
commit
a8e46163a5
11 changed files with 23 additions and 8 deletions
|
@ -178,6 +178,8 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-separated-list-nogap {
|
.date-separated-list-nogap {
|
||||||
|
border-radius: var(--radius);
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
|
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div ref="root">
|
<div ref="root" :class="$style.root">
|
||||||
<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
|
<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
|
||||||
<div v-if="mediaList.filter(media => previewable(media)).length > 0" :class="$style.container">
|
<div v-if="mediaList.filter(media => previewable(media)).length > 0" :class="$style.container">
|
||||||
<div
|
<div
|
||||||
|
@ -260,6 +260,10 @@ const previewable = (file: Misskey.entities.DriveFile): boolean => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" module>
|
<style lang="scss" module>
|
||||||
|
.root {
|
||||||
|
cursor: auto; /* not clickToOpen-able */
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
@ -49,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
|
<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
|
||||||
<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
|
<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
|
||||||
<MkAvatar :class="$style.avatar" :user="appearNote.user" link preview/>
|
<MkAvatar :class="$style.avatar" :user="appearNote.user" link preview/>
|
||||||
<div :class="$style.main" @click="defaultStore.state.clickToOpen ? noteclick(appearNote.id) : undefined">
|
<div :class="[$style.main, { [$style.clickToOpen]: defaultStore.state.clickToOpen }]" @click="defaultStore.state.clickToOpen ? noteclick(appearNote.id) : undefined">
|
||||||
<MkNoteHeader :note="appearNote" :mini="true" v-on:click.stop/>
|
<MkNoteHeader :note="appearNote" :mini="true" v-on:click.stop/>
|
||||||
<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
|
<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
|
||||||
<div style="container-type: inline-size;">
|
<div style="container-type: inline-size;">
|
||||||
|
@ -852,7 +852,6 @@ function readPromo() {
|
||||||
}
|
}
|
||||||
|
|
||||||
.cw {
|
.cw {
|
||||||
cursor: default;
|
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -1096,4 +1095,8 @@ function readPromo() {
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.clickToOpen {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -56,6 +56,7 @@ async function menuVersions(viaKeyboard = false): Promise<void> {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
cursor: auto; /* not clickToOpen-able */
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
|
|
|
@ -73,7 +73,6 @@ watch(() => props.expandAllCws, (expandAllCws) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.cw {
|
.cw {
|
||||||
cursor: default;
|
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
|
@ -478,7 +478,6 @@ if (props.detail) {
|
||||||
}
|
}
|
||||||
|
|
||||||
.cw {
|
.cw {
|
||||||
cursor: default;
|
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
|
@ -55,6 +55,8 @@ defineExpose({
|
||||||
<style lang="scss" module>
|
<style lang="scss" module>
|
||||||
.root {
|
.root {
|
||||||
&.noGap {
|
&.noGap {
|
||||||
|
border-radius: var(--radius);
|
||||||
|
|
||||||
> .notes {
|
> .notes {
|
||||||
background: color-mix(in srgb, var(--panel) 65%, transparent);
|
background: color-mix(in srgb, var(--panel) 65%, transparent);
|
||||||
}
|
}
|
||||||
|
|
|
@ -86,6 +86,7 @@ watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumbe
|
||||||
|
|
||||||
.root {
|
.root {
|
||||||
margin: 4px -2px 0 -2px;
|
margin: 4px -2px 0 -2px;
|
||||||
|
cursor: auto; /* not clickToOpen-able */
|
||||||
|
|
||||||
&:empty {
|
&:empty {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div :class="[$style.root, { [$style.collapsed]: collapsed }]">
|
<div :class="[$style.root, { [$style.collapsed]: collapsed }]">
|
||||||
<div @click="defaultStore.state.clickToOpen ? noteclick(note.id) : undefined">
|
<div :class="{ [$style.clickToOpen]: defaultStore.state.clickToOpen }" @click="defaultStore.state.clickToOpen ? noteclick(note.id) : undefined">
|
||||||
<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
|
<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
|
||||||
<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
|
<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
|
||||||
<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`" v-on:click.stop><i class="ph-arrow-bend-left-up ph-bold pg-lg"></i></MkA>
|
<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`" v-on:click.stop><i class="ph-arrow-bend-left-up ph-bold pg-lg"></i></MkA>
|
||||||
|
@ -134,4 +134,8 @@ const collapsed = $ref(isLong);
|
||||||
border-radius: var(--radius-ellipse);
|
border-radius: var(--radius-ellipse);
|
||||||
box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
|
box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.clickToOpen {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -169,7 +169,7 @@ watch(() => props.user.avatarBlurhash, () => {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
border-radius: var(--radius-full);
|
border-radius: 100%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
|
|
@ -520,7 +520,7 @@ onUnmounted(() => {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
width: 120px;
|
width: 120px;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
box-shadow: 1px 1px 3px rgba(#000, 0.2);
|
filter: drop-shadow(1px 1px 3px rgba(#000, 0.2));
|
||||||
}
|
}
|
||||||
|
|
||||||
> .roles {
|
> .roles {
|
||||||
|
|
Loading…
Reference in a new issue