imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Break out font size settings to a separate component

Browse source
This commit is contained in:
Andy Balaam 2021-10-19 14:50:09 +01:00
parent d743e3d1d6
commit 4ad32b16ea
7 changed files with 601 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

307
test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap Normal file
View file

@ -0,0 +1,307 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FontScalingPanel renders the font scaling UI 1`] = `
<Wrapper>
<FontScalingPanel>
<div
className="mx_SettingsTab_section mx_FontScalingPanel"
>
<span
className="mx_SettingsTab_subheading"
>
Font size
</span>
<EventTilePreview
avatarUrl={null}
className="mx_FontScalingPanel_fontSlider_preview"
displayName={null}
layout="group"
message="Hey you. You're the best!"
userId={null}
>
<div
className="mx_FontScalingPanel_fontSlider_preview mx_GroupLayout mx_EventTilePreview_loader"
>
<Spinner
h={32}
w={32}
>
<div
className="mx_Spinner"
>
<div
aria-label="Loading..."
className="mx_Spinner_icon"
style={
Object {
"height": 32,
"width": 32,
}
}
/>
</div>
</Spinner>
</div>
</EventTilePreview>
<div
className="mx_FontScalingPanel_fontSlider"
>
<div
className="mx_FontScalingPanel_fontSlider_smallText"
>
Aa
</div>
<Slider
disabled={false}
displayFunc={[Function]}
onSelectionChange={[Function]}
value={15}
values={
Array [
13,
14,
15,
16,
18,
]
}
>
<div
className="mx_Slider"
>
<div>
<div
className="mx_Slider_bar"
>
<hr
onClick={[Function]}
/>
<div
className="mx_Slider_selection"
>
<div
className="mx_Slider_selectionDot"
style={
Object {
"left": "calc(-0.55em + 50%)",
}
}
/>
<hr
style={
Object {
"width": "50%",
}
}
/>
</div>
</div>
<div
className="mx_Slider_dotContainer"
>
<Dot
active={true}
disabled={false}
key="13"
label=""
onClick={[Function]}
>
<span
className="mx_Slider_dotValue"
onClick={[Function]}
>
<div
className="mx_Slider_dot mx_Slider_dotActive"
/>
<div
className="mx_Slider_labelContainer"
>
<div
className="mx_Slider_label"
/>
</div>
</span>
</Dot>
<Dot
active={true}
disabled={false}
key="14"
label=""
onClick={[Function]}
>
<span
className="mx_Slider_dotValue"
onClick={[Function]}
>
<div
className="mx_Slider_dot mx_Slider_dotActive"
/>
<div
className="mx_Slider_labelContainer"
>
<div
className="mx_Slider_label"
/>
</div>
</span>
</Dot>
<Dot
active={true}
disabled={false}
key="15"
label=""
onClick={[Function]}
>
<span
className="mx_Slider_dotValue"
onClick={[Function]}
>
<div
className="mx_Slider_dot mx_Slider_dotActive"
/>
<div
className="mx_Slider_labelContainer"
>
<div
className="mx_Slider_label"
/>
</div>
</span>
</Dot>
<Dot
active={false}
disabled={false}
key="16"
label=""
onClick={[Function]}
>
<span
className="mx_Slider_dotValue"
onClick={[Function]}
>
<div
className="mx_Slider_dot"
/>
<div
className="mx_Slider_labelContainer"
>
<div
className="mx_Slider_label"
/>
</div>
</span>
</Dot>
<Dot
active={false}
disabled={false}
key="18"
label=""
onClick={[Function]}
>
<span
className="mx_Slider_dotValue"
onClick={[Function]}
>
<div
className="mx_Slider_dot"
/>
<div
className="mx_Slider_labelContainer"
>
<div
className="mx_Slider_label"
/>
</div>
</span>
</Dot>
</div>
</div>
</div>
</Slider>
<div
className="mx_FontScalingPanel_fontSlider_largeText"
>
Aa
</div>
</div>
<SettingsFlag
level="account"
name="useCustomFontSize"
onChange={[Function]}
useCheckbox={true}
>
<StyledCheckbox
checked={false}
className=""
disabled={false}
onChange={[Function]}
>
<span
className="mx_Checkbox "
>
<input
checked={false}
disabled={false}
id="checkbox_abdefghi"
onChange={[Function]}
type="checkbox"
/>
<label
htmlFor="checkbox_abdefghi"
>
<div
className="mx_Checkbox_background"
>
<img
src="image-file-stub"
/>
</div>
<div>
Use custom size
</div>
</label>
</span>
</StyledCheckbox>
</SettingsFlag>
<Field
autoComplete="off"
className="mx_FontScalingPanel_customFontSizeField"
disabled={true}
element="input"
id="font_size_field"
label="Font size"
onChange={[Function]}
onValidate={[Function]}
placeholder="15"
type="number"
validateOnBlur={true}
validateOnChange={true}
validateOnFocus={true}
value="15"
>
<div
className="mx_Field mx_Field_input mx_FontScalingPanel_customFontSizeField"
>
<input
autoComplete="off"
disabled={true}
id="font_size_field"
label="Font size"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="15"
type="number"
value="15"
/>
<label
htmlFor="font_size_field"
>
Font size
</label>
</div>
</Field>
</div>
</FontScalingPanel>
</Wrapper>
`;