oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues 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
Download patch file Download diff file Expand all files Collapse all files

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

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