mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-10-30 23:01:48 +09:00
chore: min-scale for MkAcct
This commit is contained in:
parent
be7b11e1bb
commit
9016573736
@ -47,8 +47,24 @@ export const Long = {
|
|||||||
...Default.args,
|
...Default.args,
|
||||||
user: {
|
user: {
|
||||||
...userDetailed(),
|
...userDetailed(),
|
||||||
username: '2c7cc62a697ea3a7826521f3fd34f0cb273693cbe5e9310f35449f43622a5cdc',
|
username: 'the_quick_brown_fox_jumped_over_the_lazy_dog',
|
||||||
host: 'nostr.example',
|
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: [
|
decorators: [
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<MkCondensedLine v-if="defaultStore.state.enableCondensedLineForAcct">
|
<MkCondensedLine v-if="defaultStore.state.enableCondensedLineForAcct" :min-scale="2 / 3">
|
||||||
<span>@{{ user.username }}</span>
|
<span>@{{ user.username }}</span>
|
||||||
<span v-if="user.host || detail || defaultStore.state.showFullAcct" style="opacity: 0.5;">@{{ user.host || host }}</span>
|
<span v-if="user.host || detail || defaultStore.state.showFullAcct" style="opacity: 0.5;">@{{ user.host || host }}</span>
|
||||||
</MkCondensedLine>
|
</MkCondensedLine>
|
||||||
|
@ -7,14 +7,19 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
readonly minScale?: number;
|
||||||
|
}
|
||||||
|
|
||||||
const contentSymbol = Symbol();
|
const contentSymbol = Symbol();
|
||||||
const observer = new ResizeObserver((entries) => {
|
const observer = new ResizeObserver((entries) => {
|
||||||
for (const entry of entries) {
|
for (const entry of entries) {
|
||||||
const content = (entry.target[contentSymbol] ? entry.target : entry.target.firstElementChild) as HTMLSpanElement;
|
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 container = content.parentElement as HTMLSpanElement;
|
||||||
const contentWidth = content.getBoundingClientRect().width;
|
const contentWidth = content.getBoundingClientRect().width;
|
||||||
const containerWidth = container.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>
|
</script>
|
||||||
@ -22,6 +27,10 @@ const observer = new ResizeObserver((entries) => {
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, watch } from 'vue';
|
import { ref, watch } from 'vue';
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
minScale: 0,
|
||||||
|
});
|
||||||
|
|
||||||
const content = ref<HTMLSpanElement>();
|
const content = ref<HTMLSpanElement>();
|
||||||
|
|
||||||
watch(content, (value, oldValue) => {
|
watch(content, (value, oldValue) => {
|
||||||
@ -33,7 +42,7 @@ watch(content, (value, oldValue) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (value) {
|
if (value) {
|
||||||
value[contentSymbol] = contentSymbol;
|
value[contentSymbol] = props;
|
||||||
observer.observe(value);
|
observer.observe(value);
|
||||||
if (value.parentElement) {
|
if (value.parentElement) {
|
||||||
observer.observe(value.parentElement);
|
observer.observe(value.parentElement);
|
||||||
|
Loading…
Reference in New Issue
Block a user