From 901657373609814804a1229bbeb62589722ce181 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?= <root@acid-chicken.com> Date: Sun, 7 May 2023 19:08:43 +0900 Subject: [PATCH] chore: min-scale for MkAcct --- .../components/global/MkAcct.stories.impl.ts | 20 +++++++++++++++++-- .../frontend/src/components/global/MkAcct.vue | 2 +- .../src/components/global/MkCondensedLine.vue | 13 ++++++++++-- 3 files changed, 30 insertions(+), 5 deletions(-) diff --git a/packages/frontend/src/components/global/MkAcct.stories.impl.ts b/packages/frontend/src/components/global/MkAcct.stories.impl.ts index 68202bb705..9d5fd3947d 100644 --- a/packages/frontend/src/components/global/MkAcct.stories.impl.ts +++ b/packages/frontend/src/components/global/MkAcct.stories.impl.ts @@ -47,8 +47,24 @@ export const Long = { ...Default.args, user: { ...userDetailed(), - username: '2c7cc62a697ea3a7826521f3fd34f0cb273693cbe5e9310f35449f43622a5cdc', - host: 'nostr.example', + username: 'the_quick_brown_fox_jumped_over_the_lazy_dog', + host: 'misskey.example', + }, + }, + decorators: [ + () => ({ + template: '<div style="width: 360px;"><story/></div>', + }), + ], +} satisfies StoryObj<typeof MkAcct>; +export const VeryLong = { + ...Default, + args: { + ...Default.args, + user: { + ...userDetailed(), + username: '2c7cc62a697ea3a7826521f3fd34f0cb273693cbe5e9310f35449f43622a5cdc', + host: 'the.quick.brown.fox.jumped.over.the.lazy.dog.very.long.hostname.nostr.example', }, }, decorators: [ diff --git a/packages/frontend/src/components/global/MkAcct.vue b/packages/frontend/src/components/global/MkAcct.vue index 3b0715a23c..59358aef70 100644 --- a/packages/frontend/src/components/global/MkAcct.vue +++ b/packages/frontend/src/components/global/MkAcct.vue @@ -1,5 +1,5 @@ <template> -<MkCondensedLine v-if="defaultStore.state.enableCondensedLineForAcct"> +<MkCondensedLine v-if="defaultStore.state.enableCondensedLineForAcct" :min-scale="2 / 3"> <span>@{{ user.username }}</span> <span v-if="user.host || detail || defaultStore.state.showFullAcct" style="opacity: 0.5;">@{{ user.host || host }}</span> </MkCondensedLine> diff --git a/packages/frontend/src/components/global/MkCondensedLine.vue b/packages/frontend/src/components/global/MkCondensedLine.vue index e3c0a866b7..40c7766a2a 100644 --- a/packages/frontend/src/components/global/MkCondensedLine.vue +++ b/packages/frontend/src/components/global/MkCondensedLine.vue @@ -7,14 +7,19 @@ </template> <script lang="ts"> +interface Props { + readonly minScale?: number; +} + const contentSymbol = Symbol(); const observer = new ResizeObserver((entries) => { for (const entry of entries) { const content = (entry.target[contentSymbol] ? entry.target : entry.target.firstElementChild) as HTMLSpanElement; + const props: Required<Props> = content[contentSymbol]; const container = content.parentElement as HTMLSpanElement; const contentWidth = content.getBoundingClientRect().width; const containerWidth = container.getBoundingClientRect().width; - container.style.transform = `scaleX(${Math.min(1, containerWidth / contentWidth)})`; + container.style.transform = `scaleX(${Math.max(props.minScale, Math.min(1, containerWidth / contentWidth))})`; } }); </script> @@ -22,6 +27,10 @@ const observer = new ResizeObserver((entries) => { <script setup lang="ts"> import { ref, watch } from 'vue'; +const props = withDefaults(defineProps<Props>(), { + minScale: 0, +}); + const content = ref<HTMLSpanElement>(); watch(content, (value, oldValue) => { @@ -33,7 +42,7 @@ watch(content, (value, oldValue) => { } } if (value) { - value[contentSymbol] = contentSymbol; + value[contentSymbol] = props; observer.observe(value); if (value.parentElement) { observer.observe(value.parentElement);