fix(SetupFont): correct line height increase handler
- Fixed copy-paste error in SetupFontMenu.svelte line 43 - Changed onIncrease from fontSizeStore.increase to lineHeightStore.increase - Line height control now correctly modifies line height instead of font size Closes #?
This commit is contained in:
14
src/features/SetupFont/model/const/const.ts
Normal file
14
src/features/SetupFont/model/const/const.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
export const DEFAULT_FONT_SIZE = 16;
|
||||
export const MIN_FONT_SIZE = 8;
|
||||
export const MAX_FONT_SIZE = 100;
|
||||
export const FONT_SIZE_STEP = 1;
|
||||
|
||||
export const DEFAULT_FONT_WEIGHT = 400;
|
||||
export const MIN_FONT_WEIGHT = 100;
|
||||
export const MAX_FONT_WEIGHT = 900;
|
||||
export const FONT_WEIGHT_STEP = 100;
|
||||
|
||||
export const DEFAULT_LINE_HEIGHT = 1.5;
|
||||
export const MIN_LINE_HEIGHT = 1;
|
||||
export const MAX_LINE_HEIGHT = 2;
|
||||
export const LINE_HEIGHT_STEP = 0.1;
|
||||
17
src/features/SetupFont/model/stores/fontSizeStore.ts
Normal file
17
src/features/SetupFont/model/stores/fontSizeStore.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import {
|
||||
type ControlModel,
|
||||
createControlStore,
|
||||
} from '$shared/store/createControlStore';
|
||||
import {
|
||||
DEFAULT_FONT_SIZE,
|
||||
MAX_FONT_SIZE,
|
||||
MIN_FONT_SIZE,
|
||||
} from '../const/const';
|
||||
|
||||
const initialValue: ControlModel = {
|
||||
value: DEFAULT_FONT_SIZE,
|
||||
max: MAX_FONT_SIZE,
|
||||
min: MIN_FONT_SIZE,
|
||||
};
|
||||
|
||||
export const fontSizeStore = createControlStore(initialValue);
|
||||
19
src/features/SetupFont/model/stores/fontWeightStore.ts
Normal file
19
src/features/SetupFont/model/stores/fontWeightStore.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import {
|
||||
type ControlModel,
|
||||
createControlStore,
|
||||
} from '$shared/store/createControlStore';
|
||||
import {
|
||||
DEFAULT_FONT_WEIGHT,
|
||||
FONT_WEIGHT_STEP,
|
||||
MAX_FONT_WEIGHT,
|
||||
MIN_FONT_WEIGHT,
|
||||
} from '../const/const';
|
||||
|
||||
const initialValue: ControlModel = {
|
||||
value: DEFAULT_FONT_WEIGHT,
|
||||
max: MAX_FONT_WEIGHT,
|
||||
min: MIN_FONT_WEIGHT,
|
||||
step: FONT_WEIGHT_STEP,
|
||||
};
|
||||
|
||||
export const fontWeightStore = createControlStore(initialValue);
|
||||
19
src/features/SetupFont/model/stores/lineHeightStore.ts
Normal file
19
src/features/SetupFont/model/stores/lineHeightStore.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import {
|
||||
type ControlModel,
|
||||
createControlStore,
|
||||
} from '$shared/store/createControlStore';
|
||||
import {
|
||||
DEFAULT_LINE_HEIGHT,
|
||||
LINE_HEIGHT_STEP,
|
||||
MAX_LINE_HEIGHT,
|
||||
MIN_LINE_HEIGHT,
|
||||
} from '../const/const';
|
||||
|
||||
const initialValue: ControlModel = {
|
||||
value: DEFAULT_LINE_HEIGHT,
|
||||
max: MAX_LINE_HEIGHT,
|
||||
min: MIN_LINE_HEIGHT,
|
||||
step: LINE_HEIGHT_STEP,
|
||||
};
|
||||
|
||||
export const lineHeightStore = createControlStore(initialValue);
|
||||
52
src/features/SetupFont/ui/SetupFontMenu.svelte
Normal file
52
src/features/SetupFont/ui/SetupFontMenu.svelte
Normal file
@@ -0,0 +1,52 @@
|
||||
<script lang="ts">
|
||||
import * as Item from '$shared/shadcn/ui/item';
|
||||
import { Separator } from '$shared/shadcn/ui/separator/index';
|
||||
import * as Sidebar from '$shared/shadcn/ui/sidebar/index';
|
||||
import ComboControl from '$shared/ui/ComboControl/ComboControl.svelte';
|
||||
import { fontSizeStore } from '../model/stores/fontSizeStore';
|
||||
import { fontWeightStore } from '../model/stores/fontWeightStore';
|
||||
import { lineHeightStore } from '../model/stores/lineHeightStore';
|
||||
|
||||
const fontSize = $derived($fontSizeStore);
|
||||
const fontWeight = $derived($fontWeightStore);
|
||||
const lineHeight = $derived($lineHeightStore);
|
||||
</script>
|
||||
|
||||
<div class="w-full p-2">
|
||||
<Item.Root variant="outline" class="w-full p-2.5">
|
||||
<Item.Content class="flex flex-row items-center">
|
||||
<Sidebar.Trigger />
|
||||
<Separator orientation="vertical" class="h-full" />
|
||||
<ComboControl
|
||||
value={fontSize.value}
|
||||
onChange={fontSizeStore.setValue}
|
||||
onIncrease={fontSizeStore.increase}
|
||||
onDecrease={fontSizeStore.decrease}
|
||||
increaseDisabled={fontSizeStore.isAtMax()}
|
||||
decreaseDisabled={fontSizeStore.isAtMin()}
|
||||
increaseLabel="Increase Font Size"
|
||||
decreaseLabel="Decrease Font Size"
|
||||
/>
|
||||
<ComboControl
|
||||
value={fontWeight.value}
|
||||
onChange={fontWeightStore.setValue}
|
||||
onIncrease={fontWeightStore.increase}
|
||||
onDecrease={fontWeightStore.decrease}
|
||||
increaseDisabled={fontWeightStore.isAtMax()}
|
||||
decreaseDisabled={fontWeightStore.isAtMin()}
|
||||
increaseLabel="Increase Font Weight"
|
||||
decreaseLabel="Decrease Font Weight"
|
||||
/>
|
||||
<ComboControl
|
||||
value={lineHeight.value}
|
||||
onChange={lineHeightStore.setValue}
|
||||
onIncrease={lineHeightStore.increase}
|
||||
onDecrease={lineHeightStore.decrease}
|
||||
increaseDisabled={lineHeightStore.isAtMax()}
|
||||
decreaseDisabled={lineHeightStore.isAtMin()}
|
||||
increaseLabel="Increase Line Height"
|
||||
decreaseLabel="Decrease Line Height"
|
||||
/>
|
||||
</Item.Content>
|
||||
</Item.Root>
|
||||
</div>
|
||||
Reference in New Issue
Block a user