amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: min-scale for MkAcct

Browse Source
This commit is contained in:
Acid Chicken (硫酸鶏) 2023-05-07 19:08:43 +09:00
parent be7b11e1bb
commit 9016573736
No known key found for this signature in database
GPG Key ID: 3E87B98A3F6BAB99
3 changed files with 30 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/frontend/src/components/global/MkAcct.stories.impl.ts
View File

@ -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: [

2
packages/frontend/src/components/global/MkAcct.vue
View File

@ -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>

13
packages/frontend/src/components/global/MkCondensedLine.vue
View File

@ -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);