chore: tweak MkEvent

This commit is contained in:
Acid Chicken (硫酸鶏) 2023-05-18 23:47:17 +09:00
parent e97e620ffb
commit c4b31525b3
No known key found for this signature in database
GPG Key ID: 3E87B98A3F6BAB99
4 changed files with 101 additions and 10 deletions

View File

@ -1037,7 +1037,9 @@ _serverRules:
description: "新規登録前に表示する、サーバーの簡潔なルールを設定します。内容は利用規約の要約とすることを推奨します。"
_event:
title: "題"
title: "題名"
startDateTime: "開始日時"
endDateTime: "終了日時"
startDate: "開始日"
endDate: "終了日"
startTime: "開始時刻"

View File

@ -397,6 +397,7 @@ function toStories(component: string): string {
Promise.all([
glob('src/components/global/*.vue'),
glob('src/components/Mk{A,B}*.vue'),
glob('src/components/MkEvent.vue'),
glob('src/components/MkGalleryPostPreview.vue'),
glob('src/components/MkSignupServerRules.vue'),
glob('src/pages/user/home.vue'),

View File

@ -0,0 +1,44 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { StoryObj } from '@storybook/vue3';
import MkEvent from './MkEvent.vue';
export const Default = {
render(args) {
return {
components: {
MkEvent,
},
setup() {
return {
args,
};
},
beforeMount () {
document.body.style.background = 'var(--panel)';
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkEvent v-bind="props" />',
};
},
args: {
note: {
event: {
title: 'Come on a Tea Party!',
start: '2017-10-25T15:00:00+0900',
end: '2017-10-25T18:00:00+0900',
detail: {
location: 'Kawasaki, Japan',
description: 'Let\'s have a tea party!',
},
},
},
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkEvent>;

View File

@ -1,22 +1,66 @@
<template>
<div><span class="mfm-x2">{{ note.event!.title }}</span></div>
<div>Start: {{ (new Date(note.event!.start)).toLocaleString() }}</div>
<div v-if="!!note.event!.end">End: {{ (new Date(note.event!.end)).toLocaleString() }}</div>
<ul>
<li v-for="k in Object.keys(note.event!.metadata)" :key="k">
{{ k }}: {{ note.event!.metadata[k] }}
</li>
</ul>
<div :class="$style.container">
<div :class="$style.title">
<i class="ti ti-calendar-event icon"></i>
{{ note.event!.title }}
</div>
<dl :class="$style.details">
<dt :class="$style.key">{{ i18n.ts._event.startDateTime }}</dt>
<dd :class="$style.value">
<MkTime :time="note.event!.start" mode="detail"/>
</dd>
<template v-if="note.event!.end">
<dt :class="$style.key">{{ i18n.ts._event.endDateTime }}</dt>
<dd :class="$style.value">
<MkTime :time="note.event!.end" mode="detail"/>
</dd>
</template>
<template v-for="[key, value] of Object.entries(note.event!.detail)" :key="key">
<dt :class="$style.key">{{ key }}</dt>
<dd :class="$style.value">{{ value }}</dd>
</template>
</dl>
</div>
</template>
<script lang="ts" setup>
import * as misskey from 'misskey-js';
import { i18n } from '@/i18n';
const props = defineProps<{
note: misskey.entities.Note
}>();
</script>
<style lang="scss" module>
.container {
background: var(--bg);
border-radius: var(--radius);
padding: 1rem;
}
.title {
font-size: 1.6rem;
line-height: 1.25;
font-weight: bold;
padding-bottom: 1rem;
border-bottom: .5px solid var(--divider);
}
.details {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 1rem;
padding-top: 1rem;
margin: 0;
}
.key {
opacity: 0.75;
}
.value {
margin: 0;
opacity: 0.75;
}
</style>