From c179d6f7354b7814a0215cf8a83c00c9ddbc2dfa Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Mon, 9 Jan 2023 20:23:06 +0900 Subject: [PATCH] feat(client): add profile widget Resolve #7722 --- CHANGELOG.md | 1 + locales/ja-JP.yml | 1 + packages/frontend/src/widgets/index.ts | 2 + packages/frontend/src/widgets/profile.vue | 96 +++++++++++++++++++++++ 4 files changed, 100 insertions(+) create mode 100644 packages/frontend/src/widgets/profile.vue diff --git a/CHANGELOG.md b/CHANGELOG.md index 5247f5b05c..b1ac3211c6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -83,6 +83,7 @@ You should also include the user name that made the change. - Client: Support remote objects in search @SoniEx2 - Client: user activity page @syuilo - Client: add user list widget @syuilo +- Client: add profile widget @syuilo - Client: add heatmap of daily active users to about page @syuilo - Client: introduce fluent emoji @syuilo - Client: add new theme @syuilo diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index e42f9babe1..bdbd6efea5 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1335,6 +1335,7 @@ _weekday: saturday: "土曜日" _widgets: + profile: "プロフィール" memo: "付箋" notifications: "通知" timeline: "タイムライン" diff --git a/packages/frontend/src/widgets/index.ts b/packages/frontend/src/widgets/index.ts index eba4abd2f7..0b81892419 100644 --- a/packages/frontend/src/widgets/index.ts +++ b/packages/frontend/src/widgets/index.ts @@ -1,6 +1,7 @@ import { App, defineAsyncComponent } from 'vue'; export default function(app: App) { + app.component('MkwProfile', defineAsyncComponent(() => import('./profile.vue'))); app.component('MkwMemo', defineAsyncComponent(() => import('./memo.vue'))); app.component('MkwNotifications', defineAsyncComponent(() => import('./notifications.vue'))); app.component('MkwTimeline', defineAsyncComponent(() => import('./timeline.vue'))); @@ -29,6 +30,7 @@ export default function(app: App) { } export const widgets = [ + 'profile', 'memo', 'notifications', 'timeline', diff --git a/packages/frontend/src/widgets/profile.vue b/packages/frontend/src/widgets/profile.vue new file mode 100644 index 0000000000..3c70be12c3 --- /dev/null +++ b/packages/frontend/src/widgets/profile.vue @@ -0,0 +1,96 @@ +<template> +<div class="_panel"> + <div :class="$style.container" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }"> + <div :class="$style.avatarContainer"> + <MkAvatar :class="$style.avatar" :user="$i" :disable-link="true" :disable-preview="true"/> + </div> + <div :class="$style.bodyContainer"> + <div :class="$style.body"> + <MkA v-once :class="$style.name" :to="userPage($i)"> + <MkUserName :user="$i"/> + </MkA> + <div :class="$style.username"><MkAcct :user="$i" detail/></div> + </div> + </div> + </div> +</div> +</template> + +<script lang="ts" setup> +import { onMounted, onUnmounted, Ref, ref, watch } from 'vue'; +import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget'; +import { GetFormResultType } from '@/scripts/form'; +import { $i } from '@/account'; +import { userPage } from '@/filters/user'; + +const name = 'profile'; + +const widgetPropsDef = { +}; + +type WidgetProps = GetFormResultType<typeof widgetPropsDef>; + +// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない +//const props = defineProps<WidgetComponentProps<WidgetProps>>(); +//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); +const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); +const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>(); + +const { widgetProps, configure } = useWidgetPropsManager(name, + widgetPropsDef, + props, + emit, +); + +defineExpose<WidgetComponentExpose>({ + name, + configure, + id: props.widget ? props.widget.id : null, +}); +</script> + +<style lang="scss" module> +.container { + position: relative; + background-size: cover; + background-position: center; + display: flex; +} + +.avatarContainer { + display: inline-block; + text-align: center; + padding: 16px; +} + +.avatar { + display: inline-block; + width: 60px; + height: 60px; + box-sizing: border-box; + border: solid 3px #fff; +} + +.bodyContainer { + display: flex; + align-items: center; + min-width: 0; + padding: 0 16px 0 0; +} + +.body { + text-overflow: ellipsis; + overflow: clip; +} + +.name { + color: #fff; + filter: drop-shadow(0 0 4px #000); + font-weight: bold; +} + +.username { + color: #fff; + filter: drop-shadow(0 0 4px #000); +} +</style>