PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix spacing regression in user settings - roles & permissions (#10993)

Browse source 
* add content container to settingsfieldset

* fix spacing
This commit is contained in:
Kerry 2023-05-29 10:20:44 +12:00 committed by GitHub
parent 9080f3dd55
commit 520659242b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 221 additions and 190 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
res/css/views/settings/_JoinRuleSettings.pcss
View file

@ -57,7 +57,6 @@ limitations under the License.
.mx_JoinRuleSettings_radioButton { .mx_JoinRuleSettings_radioButton {
padding-top: 16px; padding-top: 16px;
margin-bottom: 8px;
.mx_StyledRadioButton_content { .mx_StyledRadioButton_content {
margin-left: 14px; margin-left: 14px;

2
res/css/views/settings/_ProfileSettings.pcss
View file

@ -34,6 +34,8 @@ limitations under the License.
} }
.mx_ProfileSettings_profile_controls_topic { .mx_ProfileSettings_profile_controls_topic {
margin-top: $spacing-8;
& > textarea { & > textarea {
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;

6
res/css/views/settings/_SettingsFieldset.pcss
View file

@ -43,3 +43,9 @@ limitations under the License.
} }
} }
} }
.mx_SettingsFieldset_content {
display: flex;
flex-direction: column;
gap: $spacing-8;
}

2
src/components/views/settings/SettingsFieldset.tsx
View file

@ -31,7 +31,7 @@ const SettingsFieldset: React.FC<Props> = ({ legend, className, children, descri
<SettingsSubsectionText>{description}</SettingsSubsectionText> <SettingsSubsectionText>{description}</SettingsSubsectionText>
</div> </div>
)} )}
{children} <div className="mx_SettingsFieldset_content">{children}</div>
</fieldset> </fieldset>
); );

2
src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
View file

@ -466,7 +466,7 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
label = _t("Send %(eventType)s events", { eventType }); label = _t("Send %(eventType)s events", { eventType });
} }
return ( return (
<div className="" key={eventType}> <div key={eventType}>
<PowerSelector <PowerSelector
label={label} label={label}
value={eventsLevels[eventType]} value={eventsLevels[eventType]}

24
test/components/views/settings/__snapshots__/SettingsFieldset-test.tsx.snap
View file

@ -20,8 +20,12 @@ exports[`<SettingsFieldset /> renders fieldset with plain text description 1`] =
Changes to who can read history. Changes to who can read history.
</div> </div>
</div> </div>
<div> <div
test class="mx_SettingsFieldset_content"
>
<div>
test
</div>
</div> </div>
</fieldset> </fieldset>
</DocumentFragment> </DocumentFragment>
@ -54,8 +58,12 @@ exports[`<SettingsFieldset /> renders fieldset with react description 1`] = `
</a> </a>
</div> </div>
</div> </div>
<div> <div
test class="mx_SettingsFieldset_content"
>
<div>
test
</div>
</div> </div>
</fieldset> </fieldset>
</DocumentFragment> </DocumentFragment>
@ -72,8 +80,12 @@ exports[`<SettingsFieldset /> renders fieldset without description 1`] = `
> >
Who can read history? Who can read history?
</legend> </legend>
<div> <div
test class="mx_SettingsFieldset_content"
>
<div>
test
</div>
</div> </div>
</fieldset> </fieldset>
</DocumentFragment> </DocumentFragment>

32
test/components/views/settings/tabs/room/__snapshots__/RolesRoomSettingsTab-test.tsx.snap
View file

@ -9,20 +9,24 @@ exports[`RolesRoomSettingsTab Banned users renders banned users 1`] = `
> >
Banned users Banned users
</legend> </legend>
<ul <div
class="mx_RolesRoomSettingsTab_bannedList" class="mx_SettingsFieldset_content"
> >
<li> <ul
<span class="mx_RolesRoomSettingsTab_bannedList"
title="Banned by @alice:server.org" >
> <li>
<strong> <span
@bob:server.org title="Banned by @alice:server.org"
</strong> >
<strong>
Reason: just testing @bob:server.org
</span> </strong>
</li>
</ul> Reason: just testing
</span>
</li>
</ul>
</div>
</fieldset> </fieldset>
`; `;

164
test/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap
View file

@ -18,91 +18,95 @@ exports[`<SecurityRoomSettingsTab /> history visibility uses shared as default h
Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged. Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.
</div> </div>
</div> </div>
<label <div
class="mx_StyledRadioButton mx_StyledRadioButton_enabled" class="mx_SettingsFieldset_content"
> >
<input <label
id="historyVis-world_readable" class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
name="historyVis"
type="radio"
value="world_readable"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
> >
Anyone <input
</div> id="historyVis-world_readable"
<div name="historyVis"
class="mx_StyledRadioButton_spacer" type="radio"
/> value="world_readable"
</label> />
<label <div>
class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked" <div />
> </div>
<input <div
checked="" class="mx_StyledRadioButton_content"
id="historyVis-shared" >
name="historyVis" Anyone
type="radio" </div>
value="shared" <div
/> class="mx_StyledRadioButton_spacer"
<div> />
<div /> </label>
</div> <label
<div class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
class="mx_StyledRadioButton_content"
> >
Members only (since the point in time of selecting this option) <input
</div> checked=""
<div id="historyVis-shared"
class="mx_StyledRadioButton_spacer" name="historyVis"
/> type="radio"
</label> value="shared"
<label />
class="mx_StyledRadioButton mx_StyledRadioButton_enabled" <div>
> <div />
<input </div>
id="historyVis-invited" <div
name="historyVis" class="mx_StyledRadioButton_content"
type="radio" >
value="invited" Members only (since the point in time of selecting this option)
/> </div>
<div> <div
<div /> class="mx_StyledRadioButton_spacer"
</div> />
<div </label>
class="mx_StyledRadioButton_content" <label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
> >
Members only (since they were invited) <input
</div> id="historyVis-invited"
<div name="historyVis"
class="mx_StyledRadioButton_spacer" type="radio"
/> value="invited"
</label> />
<label <div>
class="mx_StyledRadioButton mx_StyledRadioButton_enabled" <div />
> </div>
<input <div
id="historyVis-joined" class="mx_StyledRadioButton_content"
name="historyVis" >
type="radio" Members only (since they were invited)
value="joined" </div>
/> <div
<div> class="mx_StyledRadioButton_spacer"
<div /> />
</div> </label>
<div <label
class="mx_StyledRadioButton_content" class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
> >
Members only (since they joined) <input
</div> id="historyVis-joined"
<div name="historyVis"
class="mx_StyledRadioButton_spacer" type="radio"
/> value="joined"
</label> />
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Members only (since they joined)
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
</div>
</fieldset> </fieldset>
`; `;

178
test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
View file

@ -52,98 +52,102 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
Decide who can view and join mock-space. Decide who can view and join mock-space.
</div> </div>
</div> </div>
<label
class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled mx_StyledRadioButton_checked"
>
<input
aria-describedby="joinRule-invite-description"
checked=""
disabled=""
id="joinRule-invite"
name="joinRule"
type="radio"
value="invite"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Private (invite only)
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<span
id="joinRule-invite-description"
>
Only invited people can join.
</span>
<label
class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled"
>
<input
aria-describedby="joinRule-public-description"
disabled=""
id="joinRule-public"
name="joinRule"
type="radio"
value="public"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Public
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<span
id="joinRule-public-description"
>
Anyone can find and join.
</span>
<div <div
class="mx_SettingsTab_toggleWithDescription" class="mx_SettingsFieldset_content"
> >
<div <label
class="mx_SettingsFlag" class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled mx_StyledRadioButton_checked"
> >
<span <input
class="mx_SettingsFlag_label" aria-describedby="joinRule-invite-description"
> checked=""
<div disabled=""
id="mx_LabelledToggleSwitch_testid_0" id="joinRule-invite"
> name="joinRule"
Preview Space type="radio"
</div> value="invite"
</span> />
<div <div>
aria-checked="true" <div />
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_testid_0"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div> </div>
<div
class="mx_StyledRadioButton_content"
>
Private (invite only)
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<span
id="joinRule-invite-description"
>
Only invited people can join.
</span>
<label
class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled"
>
<input
aria-describedby="joinRule-public-description"
disabled=""
id="joinRule-public"
name="joinRule"
type="radio"
value="public"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Public
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<span
id="joinRule-public-description"
>
Anyone can find and join.
</span>
<div
class="mx_SettingsTab_toggleWithDescription"
>
<div
class="mx_SettingsFlag"
>
<span
class="mx_SettingsFlag_label"
>
<div
id="mx_LabelledToggleSwitch_testid_0"
>
Preview Space
</div>
</span>
<div
aria-checked="true"
aria-disabled="false"
aria-labelledby="mx_LabelledToggleSwitch_testid_0"
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
role="switch"
tabindex="0"
>
<div
class="mx_ToggleSwitch_ball"
/>
</div>
</div>
<p>
Allow people to preview your space before they join.
<br />
<b>
Recommended for public spaces.
</b>
</p>
</div> </div>
<p>
Allow people to preview your space before they join.
<br />
<b>
Recommended for public spaces.
</b>
</p>
</div> </div>
</fieldset> </fieldset>
</div> </div>