mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-15 14:31:34 +03:00
96bd052ecf
* Improve visibility of font size chooser * Move slider dot sizes into variables * Use a standard font size instead of percentage in Slider * Use shorthand for padding in FontScalingPanel * Change Slider text pos to px to be consistent when font changes * Cleaner dot size for Slider selection
313 lines
8.4 KiB
Text
313 lines
8.4 KiB
Text
// 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(-1.195em + 50%)",
|
|
}
|
|
}
|
|
>
|
|
<div
|
|
className="mx_Slider_selectionText"
|
|
>
|
|
15
|
|
</div>
|
|
</div>
|
|
<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>
|
|
`;
|