diff options
| -rw-r--r-- | CHANGELOG.md | 7 | ||||
| -rw-r--r-- | locales/ja-JP.yml | 1 | ||||
| -rw-r--r-- | packages/frontend/src/widgets/index.ts | 2 | ||||
| -rw-r--r-- | packages/frontend/src/widgets/instance-info.vue | 94 | ||||
| -rw-r--r-- | packages/frontend/src/widgets/profile.vue | 2 |
5 files changed, 102 insertions, 4 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index b1ac3211c6..3c1d99d831 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -66,7 +66,6 @@ You should also include the user name that made the change. - Server: delete outdated notes of antenna regularly to improve db performance @syuilo - Server: improve activitypub deliver performance @syuilo - Client: use tabler-icons instead of fontawesome to better design @syuilo -- Client: Add AiScript App widget - Client: Add new gabber kick sounds (thanks for noizenecio) - Client: Add link to user RSS feed in profile menu @ssmucny - Client: Compress non-animated PNG files @saschanaz @@ -74,16 +73,18 @@ You should also include the user name that made the change. - Client: enhance dashboard of control panel @syuilo - Client: Vite is upgraded to v4 @syuilo, @tamaina - Client: HMR is available while yarn dev @tamaina -- Client: Make widgets of universal/classic sync between devices @tamaina - Client: Implement the button to subscribe push notification @tamaina - Client: Implement the toggle to or not to close push notifications when notifications or messages are read @tamaina -- Client: Improve RSS widget @tamaina - Client: show Unicode emoji tooltip with its name in MkReactionsViewer.reaction @saschanaz - Client: OpenSearch support @SoniEx2 @chaoticryptidz - Client: Support remote objects in search @SoniEx2 - Client: user activity page @syuilo +- Client: Make widgets of universal/classic sync between devices @tamaina - Client: add user list widget @syuilo +- Client: Add AiScript App widget - Client: add profile widget @syuilo +- Client: add instance info widget @syuilo +- Client: Improve RSS widget @tamaina - 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 bdbd6efea5..aac89d8fe4 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1336,6 +1336,7 @@ _weekday: _widgets: profile: "プロフィール" + instanceInfo: "インスタンス情報" memo: "付箋" notifications: "通知" timeline: "タイムライン" diff --git a/packages/frontend/src/widgets/index.ts b/packages/frontend/src/widgets/index.ts index 0b81892419..10b8d94234 100644 --- a/packages/frontend/src/widgets/index.ts +++ b/packages/frontend/src/widgets/index.ts @@ -2,6 +2,7 @@ import { App, defineAsyncComponent } from 'vue'; export default function(app: App) { app.component('MkwProfile', defineAsyncComponent(() => import('./profile.vue'))); + app.component('MkwInstanceInfo', defineAsyncComponent(() => import('./instance-info.vue'))); app.component('MkwMemo', defineAsyncComponent(() => import('./memo.vue'))); app.component('MkwNotifications', defineAsyncComponent(() => import('./notifications.vue'))); app.component('MkwTimeline', defineAsyncComponent(() => import('./timeline.vue'))); @@ -31,6 +32,7 @@ export default function(app: App) { export const widgets = [ 'profile', + 'instanceInfo', 'memo', 'notifications', 'timeline', diff --git a/packages/frontend/src/widgets/instance-info.vue b/packages/frontend/src/widgets/instance-info.vue new file mode 100644 index 0000000000..990802d847 --- /dev/null +++ b/packages/frontend/src/widgets/instance-info.vue @@ -0,0 +1,94 @@ +<template> +<div class="_panel"> + <div :class="$style.container" :style="{ backgroundImage: $instance.bannerUrl ? `url(${ $instance.bannerUrl })` : null }"> + <div :class="$style.iconContainer"> + <img :src="$instance.iconUrl ?? $instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.icon"/> + </div> + <div :class="$style.bodyContainer"> + <div :class="$style.body"> + <MkA :class="$style.name" to="/about" behavior="window">{{ $instance.name }}</MkA> + <div :class="$style.host">{{ host }}</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 { host } from '@/config'; + +const name = 'instanceInfo'; + +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; +} + +.iconContainer { + display: inline-block; + text-align: center; + padding: 16px; +} + +.icon { + display: inline-block; + width: 60px; + height: 60px; + border-radius: 8px; + 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; +} + +.host { + color: #fff; + filter: drop-shadow(0 0 4px #000); +} +</style> diff --git a/packages/frontend/src/widgets/profile.vue b/packages/frontend/src/widgets/profile.vue index 3c70be12c3..c6e66c1df2 100644 --- a/packages/frontend/src/widgets/profile.vue +++ b/packages/frontend/src/widgets/profile.vue @@ -6,7 +6,7 @@ </div> <div :class="$style.bodyContainer"> <div :class="$style.body"> - <MkA v-once :class="$style.name" :to="userPage($i)"> + <MkA :class="$style.name" :to="userPage($i)"> <MkUserName :user="$i"/> </MkA> <div :class="$style.username"><MkAcct :user="$i" detail/></div> |