1
0
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-15 13:55:35 +02:00
Files
misskey/packages/frontend/src/components/MkUserCardMini.vue
かっこかり 16ffd88ecc enhance: 誕生日のユーザーウィジェットで、今日だけに限らず、直近の誕生日ユーザーを表示できるように (#13637)
* enhance(frontend): 「今日誕生日のフォロー中ユーザー」ウィジェットをリファクタリング

(cherry picked from commit 24652b9364)

* fix(backend): 年越しの時期で誕生日検索クエリーが誤動作する問題を修正 (MisskeyIO#577)

(cherry picked from commit 38581006be)

* fix

* spdx

* delete birthday param on users/following api

* 名称を一本化

* Update Changelog

* Update Changelog

* fix(frontend/WidgetBirthdayFollowings): ユーザーの名前が長いと投稿ボタンがはみ出てしまう問題を修正 (MisskeyIO#582)

(cherry picked from commit fa47a545b1)

* use module css

* default 3day

* Revert "delete birthday param on users/following api"

This reverts commit a47456c1c4.

* Update Changelog

* 日付が1ヶ月ズレている問題を修正?

* fix: 日付関連のバグを修正

Co-authored-by: taiy <53635909+taiyme@users.noreply.github.com>

* build misskey-js types

* add comment

* Update CHANGELOG.md

* migrate

* change migration

* UPdate Changelog

* fix: revert unnecessary changes

* 🎨

* i18n

* fix

* update changelog

* 🎨

* fix lint

* refactor: remove unnecessary classes

* fix

* fix

---------

Co-authored-by: まっちゃとーにゅ <17376330+u1-liquid@users.noreply.github.com>
Co-authored-by: taiy <53635909+taiyme@users.noreply.github.com>
2025-12-31 22:33:26 +09:00

95 lines
2.1 KiB
Vue

<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div v-adaptive-bg :class="[$style.root]">
<MkAvatar :class="$style.avatar" :user="user" indicator/>
<div :class="$style.body">
<span :class="$style.name"><MkUserName :user="user"/></span>
<span :class="$style.sub"><slot name="sub"><span class="_monospace">@{{ acct(user) }}</span></slot></span>
</div>
<MkMiniChart v-if="chartValues" :class="$style.chart" :src="chartValues"/>
</div>
</template>
<script lang="ts" setup>
import * as Misskey from 'misskey-js';
import { onMounted, ref } from 'vue';
import MkMiniChart from '@/components/MkMiniChart.vue';
import { misskeyApiGet } from '@/utility/misskey-api.js';
import { acct } from '@/filters/user.js';
const props = withDefaults(defineProps<{
user: Misskey.entities.User;
withChart?: boolean;
}>(), {
withChart: true,
});
const chartValues = ref<number[] | null>(null);
onMounted(() => {
if (props.withChart) {
misskeyApiGet('charts/user/notes', { userId: props.user.id, limit: 16 + 1, span: 'day' }).then(res => {
// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
res.inc.splice(0, 1);
chartValues.value = res.inc;
});
}
});
</script>
<style lang="scss" module>
$bodyTitleHieght: 18px;
$bodyInfoHieght: 16px;
.root {
display: flex;
align-items: center;
padding: 16px;
background: var(--MI_THEME-panel);
border-radius: 8px;
}
.avatar {
display: block;
width: ($bodyTitleHieght + $bodyInfoHieght);
height: ($bodyTitleHieght + $bodyInfoHieght);
margin-right: 12px;
}
.body {
flex: 1;
overflow: hidden;
font-size: 0.9em;
color: var(--MI_THEME-fg);
padding-right: 8px;
}
.name {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: $bodyTitleHieght;
}
.sub {
display: block;
width: 100%;
font-size: 95%;
opacity: 0.7;
line-height: $bodyInfoHieght;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chart {
height: 30px;
}
</style>