47 lines
1.3 KiB
Svelte
47 lines
1.3 KiB
Svelte
<!--
|
|
Component: SetupFontMenu
|
|
Contains controls for setting up font properties.
|
|
-->
|
|
<script lang="ts">
|
|
import type { ResponsiveManager } from '$shared/lib';
|
|
import { ComboControl } from '$shared/ui';
|
|
import { getContext } from 'svelte';
|
|
import { controlManager } from '../model';
|
|
const responsive = getContext<ResponsiveManager>('responsive');
|
|
|
|
$effect(() => {
|
|
if (!responsive) {
|
|
return;
|
|
}
|
|
|
|
switch (true) {
|
|
case responsive.isMobile:
|
|
controlManager.multiplier = 0.5;
|
|
break;
|
|
case responsive.isTablet:
|
|
controlManager.multiplier = 0.75;
|
|
break;
|
|
case responsive.isDesktop:
|
|
controlManager.multiplier = 1;
|
|
break;
|
|
default:
|
|
controlManager.multiplier = 1;
|
|
break;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="sm:py-2 sm:px-10 flex flex-row items-center gap-2">
|
|
<div class="flex flex-row gap-3">
|
|
{#each controlManager.controls as control (control.id)}
|
|
<ComboControl
|
|
control={control.instance}
|
|
increaseLabel={control.increaseLabel}
|
|
decreaseLabel={control.decreaseLabel}
|
|
controlLabel={control.controlLabel}
|
|
reduced={responsive.isMobile}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
</div>
|