mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-15 19:21:44 +03:00
71244f3b3c
Add a "kind" param for StyledCheckbox, allowing designers to choose different styles of checkbox as needed. In addition to the preexisting default kind (now called Solid), there's an Outline kind with a green checkmark and a transparent fill. This is used in the device trust view, since the default checkbox style looks too much like the green "verified" shield and it's awkward to have those next to each other.
313 lines
8.5 KiB
Text
313 lines
8.5 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 mx_Checkbox_hasKind mx_Checkbox_kind_solid"
|
|
>
|
|
<input
|
|
checked={false}
|
|
disabled={false}
|
|
id="checkbox_abdefghi"
|
|
onChange={[Function]}
|
|
type="checkbox"
|
|
/>
|
|
<label
|
|
htmlFor="checkbox_abdefghi"
|
|
>
|
|
<div
|
|
className="mx_Checkbox_background"
|
|
>
|
|
<div
|
|
className="mx_Checkbox_checkmark"
|
|
/>
|
|
</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>
|
|
`;
|