53ea045c54
* deps: update `@vector-im/compound-web` * feat: use new EditInPlace * e2e: update snapshots
702 lines
18 KiB
Text
702 lines
18 KiB
Text
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
|
|
<DocumentFragment>
|
|
<div
|
|
class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
|
|
data-testid="themePanel"
|
|
>
|
|
<div
|
|
class="mx_SettingsSubsectionHeading"
|
|
>
|
|
<h3
|
|
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
|
|
>
|
|
Theme
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
|
|
>
|
|
<form
|
|
class="_root_dgy0u_24"
|
|
>
|
|
<div
|
|
class="_inline-field_dgy0u_40"
|
|
>
|
|
<div
|
|
class="_inline-field-control_dgy0u_52"
|
|
>
|
|
<div
|
|
class="_container_qnvru_18"
|
|
>
|
|
<input
|
|
class="_input_qnvru_32"
|
|
id="radix-48"
|
|
name="systemTheme"
|
|
title=""
|
|
type="checkbox"
|
|
/>
|
|
<div
|
|
class="_ui_qnvru_42"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_dgy0u_46"
|
|
>
|
|
<label
|
|
class="_label_dgy0u_67"
|
|
for="radix-48"
|
|
>
|
|
Match system theme
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<form
|
|
class="_root_dgy0u_24 mx_ThemeChoicePanel_ThemeSelectors"
|
|
>
|
|
<div
|
|
class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
|
|
>
|
|
<div
|
|
class="_inline-field-control_dgy0u_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
checked=""
|
|
class="_input_1vw5h_26"
|
|
id="radix-49"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="light"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_dgy0u_46"
|
|
>
|
|
<label
|
|
class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-49"
|
|
>
|
|
Light
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
|
|
>
|
|
<div
|
|
class="_inline-field-control_dgy0u_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
class="_input_1vw5h_26"
|
|
id="radix-50"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="dark"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_dgy0u_46"
|
|
>
|
|
<label
|
|
class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-50"
|
|
>
|
|
Dark
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
|
|
>
|
|
<div
|
|
class="_inline-field-control_dgy0u_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
class="_input_1vw5h_26"
|
|
id="radix-51"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="light-high-contrast"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_dgy0u_46"
|
|
>
|
|
<label
|
|
class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-51"
|
|
>
|
|
High contrast
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
|
|
>
|
|
<div
|
|
class="_inline-field-control_dgy0u_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
class="_input_1vw5h_26"
|
|
id="radix-52"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="custom-Alice theme"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_dgy0u_46"
|
|
>
|
|
<label
|
|
class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-52"
|
|
>
|
|
Alice theme
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div
|
|
class="mx_ThemeChoicePanel_CustomTheme"
|
|
>
|
|
<form
|
|
class="_root_dgy0u_24 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
|
|
>
|
|
<div
|
|
class="_field_dgy0u_34"
|
|
>
|
|
<label
|
|
class="_label_dgy0u_67"
|
|
for="radix-54"
|
|
>
|
|
Add custom theme
|
|
</label>
|
|
<div
|
|
class="_controls_1h4nb_17"
|
|
>
|
|
<input
|
|
aria-describedby="radix-53"
|
|
class="_control_9gon8_18"
|
|
id="radix-54"
|
|
name="input"
|
|
title=""
|
|
value=""
|
|
/>
|
|
</div>
|
|
<span
|
|
class="_message_dgy0u_98 _help-message_dgy0u_104"
|
|
id="radix-53"
|
|
>
|
|
Enter the URL of a custom theme you want to apply.
|
|
</span>
|
|
</div>
|
|
</form>
|
|
<ul
|
|
class="mx_ThemeChoicePanel_CustomThemeList"
|
|
>
|
|
<li
|
|
aria-label="Alice theme"
|
|
class="mx_ThemeChoicePanel_CustomThemeList_theme"
|
|
>
|
|
<span
|
|
class="mx_ThemeChoicePanel_CustomThemeList_name"
|
|
>
|
|
Alice theme
|
|
</span>
|
|
<button
|
|
aria-label="Delete"
|
|
class="_icon-button_rijzz_17 _destructive_rijzz_78"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_separator_144s5_17"
|
|
data-kind="primary"
|
|
data-orientation="horizontal"
|
|
role="separator"
|
|
/>
|
|
</div>
|
|
</DocumentFragment>
|
|
`;
|
|
|
|
exports[`<ThemeChoicePanel /> custom theme should render the custom theme section 1`] = `
|
|
<DocumentFragment>
|
|
<div
|
|
class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
|
|
data-testid="themePanel"
|
|
>
|
|
<div
|
|
class="mx_SettingsSubsectionHeading"
|
|
>
|
|
<h3
|
|
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
|
|
>
|
|
Theme
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
|
|
>
|
|
<form
|
|
class="_root_dgy0u_24"
|
|
>
|
|
<div
|
|
class="_inline-field_dgy0u_40"
|
|
>
|
|
<div
|
|
class="_inline-field-control_dgy0u_52"
|
|
>
|
|
<div
|
|
class="_container_qnvru_18"
|
|
>
|
|
<input
|
|
class="_input_qnvru_32"
|
|
id="radix-32"
|
|
name="systemTheme"
|
|
title=""
|
|
type="checkbox"
|
|
/>
|
|
<div
|
|
class="_ui_qnvru_42"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_dgy0u_46"
|
|
>
|
|
<label
|
|
class="_label_dgy0u_67"
|
|
for="radix-32"
|
|
>
|
|
Match system theme
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<form
|
|
class="_root_dgy0u_24 mx_ThemeChoicePanel_ThemeSelectors"
|
|
>
|
|
<div
|
|
class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
|
|
>
|
|
<div
|
|
class="_inline-field-control_dgy0u_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
checked=""
|
|
class="_input_1vw5h_26"
|
|
id="radix-33"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="light"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_dgy0u_46"
|
|
>
|
|
<label
|
|
class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-33"
|
|
>
|
|
Light
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
|
|
>
|
|
<div
|
|
class="_inline-field-control_dgy0u_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
class="_input_1vw5h_26"
|
|
id="radix-34"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="dark"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_dgy0u_46"
|
|
>
|
|
<label
|
|
class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-34"
|
|
>
|
|
Dark
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
|
|
>
|
|
<div
|
|
class="_inline-field-control_dgy0u_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
class="_input_1vw5h_26"
|
|
id="radix-35"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="light-high-contrast"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_dgy0u_46"
|
|
>
|
|
<label
|
|
class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-35"
|
|
>
|
|
High contrast
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
|
|
>
|
|
<div
|
|
class="_inline-field-control_dgy0u_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
class="_input_1vw5h_26"
|
|
id="radix-36"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="custom-Alice theme"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_dgy0u_46"
|
|
>
|
|
<label
|
|
class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-36"
|
|
>
|
|
Alice theme
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div
|
|
class="mx_ThemeChoicePanel_CustomTheme"
|
|
>
|
|
<form
|
|
class="_root_dgy0u_24 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
|
|
>
|
|
<div
|
|
class="_field_dgy0u_34"
|
|
>
|
|
<label
|
|
class="_label_dgy0u_67"
|
|
for="radix-38"
|
|
>
|
|
Add custom theme
|
|
</label>
|
|
<div
|
|
class="_controls_1h4nb_17"
|
|
>
|
|
<input
|
|
aria-describedby="radix-37"
|
|
class="_control_9gon8_18"
|
|
id="radix-38"
|
|
name="input"
|
|
title=""
|
|
value=""
|
|
/>
|
|
</div>
|
|
<span
|
|
class="_message_dgy0u_98 _help-message_dgy0u_104"
|
|
id="radix-37"
|
|
>
|
|
Enter the URL of a custom theme you want to apply.
|
|
</span>
|
|
</div>
|
|
</form>
|
|
<ul
|
|
class="mx_ThemeChoicePanel_CustomThemeList"
|
|
>
|
|
<li
|
|
aria-label="Alice theme"
|
|
class="mx_ThemeChoicePanel_CustomThemeList_theme"
|
|
>
|
|
<span
|
|
class="mx_ThemeChoicePanel_CustomThemeList_name"
|
|
>
|
|
Alice theme
|
|
</span>
|
|
<button
|
|
aria-label="Delete"
|
|
class="_icon-button_rijzz_17 _destructive_rijzz_78"
|
|
role="button"
|
|
style="--cpd-icon-button-size: 32px;"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="_indicator-icon_133tf_26"
|
|
style="--cpd-icon-button-size: 100%;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_separator_144s5_17"
|
|
data-kind="primary"
|
|
data-orientation="horizontal"
|
|
role="separator"
|
|
/>
|
|
</div>
|
|
</DocumentFragment>
|
|
`;
|
|
|
|
exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
|
|
<DocumentFragment>
|
|
<div
|
|
class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
|
|
data-testid="themePanel"
|
|
>
|
|
<div
|
|
class="mx_SettingsSubsectionHeading"
|
|
>
|
|
<h3
|
|
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
|
|
>
|
|
Theme
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
|
|
>
|
|
<form
|
|
class="_root_dgy0u_24"
|
|
>
|
|
<div
|
|
class="_inline-field_dgy0u_40"
|
|
>
|
|
<div
|
|
class="_inline-field-control_dgy0u_52"
|
|
>
|
|
<div
|
|
class="_container_qnvru_18"
|
|
>
|
|
<input
|
|
class="_input_qnvru_32"
|
|
id="radix-0"
|
|
name="systemTheme"
|
|
title=""
|
|
type="checkbox"
|
|
/>
|
|
<div
|
|
class="_ui_qnvru_42"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_dgy0u_46"
|
|
>
|
|
<label
|
|
class="_label_dgy0u_67"
|
|
for="radix-0"
|
|
>
|
|
Match system theme
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<form
|
|
class="_root_dgy0u_24 mx_ThemeChoicePanel_ThemeSelectors"
|
|
>
|
|
<div
|
|
class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
|
|
>
|
|
<div
|
|
class="_inline-field-control_dgy0u_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
checked=""
|
|
class="_input_1vw5h_26"
|
|
id="radix-1"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="light"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_dgy0u_46"
|
|
>
|
|
<label
|
|
class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-1"
|
|
>
|
|
Light
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
|
|
>
|
|
<div
|
|
class="_inline-field-control_dgy0u_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
class="_input_1vw5h_26"
|
|
id="radix-2"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="dark"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_dgy0u_46"
|
|
>
|
|
<label
|
|
class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-2"
|
|
>
|
|
Dark
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
|
|
>
|
|
<div
|
|
class="_inline-field-control_dgy0u_52"
|
|
>
|
|
<div
|
|
class="_container_1vw5h_18"
|
|
>
|
|
<input
|
|
class="_input_1vw5h_26"
|
|
id="radix-3"
|
|
name="themeSelector"
|
|
title=""
|
|
type="radio"
|
|
value="light-high-contrast"
|
|
/>
|
|
<div
|
|
class="_ui_1vw5h_27"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="_inline-field-body_dgy0u_46"
|
|
>
|
|
<label
|
|
class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
|
|
for="radix-3"
|
|
>
|
|
High contrast
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div
|
|
class="_separator_144s5_17"
|
|
data-kind="primary"
|
|
data-orientation="horizontal"
|
|
role="separator"
|
|
/>
|
|
</div>
|
|
</DocumentFragment>
|
|
`;
|