chore: min-scale for MkAcct
This commit is contained in:
parent
be7b11e1bb
commit
9016573736
3 changed files with 30 additions and 5 deletions
|
@ -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: [
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue