Skip to content

Commit

Permalink
Fix spacing regression in user settings - roles & permissions (#10993)
Browse files Browse the repository at this point in the history 
* add content container to settingsfieldset

* fix spacing
  • Loading branch information
Kerry committed May 28, 2023
1 parent 9080f3d commit 5206592
Show file tree
Hide file tree
Showing 9 changed files with 215 additions and 184 deletions.
1 change: 0 additions & 1 deletion res/css/views/settings/_JoinRuleSettings.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ limitations under the License.

.mx_JoinRuleSettings_radioButton {
padding-top: 16px;
margin-bottom: 8px;

.mx_StyledRadioButton_content {
margin-left: 14px;
Expand Down
2 changes: 2 additions & 0 deletions res/css/views/settings/_ProfileSettings.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ limitations under the License.
}

.mx_ProfileSettings_profile_controls_topic {
margin-top: $spacing-8;

& > textarea {
font-family: inherit;
resize: vertical;
Expand Down
6 changes: 6 additions & 0 deletions res/css/views/settings/_SettingsFieldset.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,9 @@ limitations under the License.
}
}
}

.mx_SettingsFieldset_content {
display: flex;
flex-direction: column;
gap: $spacing-8;
}
2 changes: 1 addition & 1 deletion src/components/views/settings/SettingsFieldset.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const SettingsFieldset: React.FC<Props> = ({ legend, className, children, descri
<SettingsSubsectionText>{description}</SettingsSubsectionText>
</div>
)}
{children}
<div className="mx_SettingsFieldset_content">{children}</div>
</fieldset>
);

Expand Down
2 changes: 1 addition & 1 deletion src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -466,7 +466,7 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
label = _t("Send %(eventType)s events", { eventType });
}
return (
<div className="" key={eventType}>
<div key={eventType}>
<PowerSelector
label={label}
value={eventsLevels[eventType]}
Expand Down
24 changes: 18 additions & 6 deletions test/components/views/settings/__snapshots__/SettingsFieldset-test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,12 @@ exports[`<SettingsFieldset /> renders fieldset with plain text description 1`] =
Changes to who can read history.
</div>
</div>
<div>
test
<div
class="mx_SettingsFieldset_content"
>
<div>
test
</div>
</div>
</fieldset>
</DocumentFragment>
Expand Down Expand Up @@ -54,8 +58,12 @@ exports[`<SettingsFieldset /> renders fieldset with react description 1`] = `
</a>
</div>
</div>
<div>
test
<div
class="mx_SettingsFieldset_content"
>
<div>
test
</div>
</div>
</fieldset>
</DocumentFragment>
Expand All @@ -72,8 +80,12 @@ exports[`<SettingsFieldset /> renders fieldset without description 1`] = `
>
Who can read history?
</legend>
<div>
test
<div
class="mx_SettingsFieldset_content"
>
<div>
test
</div>
</div>
</fieldset>
</DocumentFragment>
Expand Down
32 changes: 18 additions & 14 deletions test/components/views/settings/tabs/room/__snapshots__/RolesRoomSettingsTab-test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,24 @@ exports[`RolesRoomSettingsTab Banned users renders banned users 1`] = `
>
Banned users
</legend>
<ul
class="mx_RolesRoomSettingsTab_bannedList"
<div
class="mx_SettingsFieldset_content"
>
<li>
<span
title="Banned by @alice:server.org"
>
<strong>
@bob:server.org
</strong>
Reason: just testing
</span>
</li>
</ul>
<ul
class="mx_RolesRoomSettingsTab_bannedList"
>
<li>
<span
title="Banned by @alice:server.org"
>
<strong>
@bob:server.org
</strong>
Reason: just testing
</span>
</li>
</ul>
</div>
</fieldset>
`;
164 changes: 84 additions & 80 deletions test/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
</div>
</div>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
<div
class="mx_SettingsFieldset_content"
>
<input
id="historyVis-world_readable"
name="historyVis"
type="radio"
value="world_readable"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
>
Anyone
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
>
<input
checked=""
id="historyVis-shared"
name="historyVis"
type="radio"
value="shared"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
<input
id="historyVis-world_readable"
name="historyVis"
type="radio"
value="world_readable"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Anyone
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
>
Members only (since the point in time of selecting this option)
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
>
<input
id="historyVis-invited"
name="historyVis"
type="radio"
value="invited"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
<input
checked=""
id="historyVis-shared"
name="historyVis"
type="radio"
value="shared"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Members only (since the point in time of selecting this option)
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
>
Members only (since they were invited)
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
>
<input
id="historyVis-joined"
name="historyVis"
type="radio"
value="joined"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
<input
id="historyVis-invited"
name="historyVis"
type="radio"
value="invited"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Members only (since they were invited)
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<label
class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
>
Members only (since they joined)
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
<input
id="historyVis-joined"
name="historyVis"
type="radio"
value="joined"
/>
<div>
<div />
</div>
<div
class="mx_StyledRadioButton_content"
>
Members only (since they joined)
</div>
<div
class="mx_StyledRadioButton_spacer"
/>
</label>
</div>
</fieldset>
`;

Expand Down
Loading

0 comments on commit 5206592

Please sign in to comment.