Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit b1066a5

Browse files
author
Kerry
authored
Wrap inputs in fieldsets in Space visibility settings (#7350)
* use fieldset in space settings > visibility Signed-off-by: Kerry Archibald <kerrya@element.io> * add basic tests for space setttings visibility Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * fix toggle button placement Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * update settings separator color to quinary Signed-off-by: Kerry Archibald <kerrya@element.io>
1 parent 92ee02f commit b1066a5

File tree

10 files changed

+432
-55
lines changed

10 files changed

+432
-55
lines changed

‎res/css/views/dialogs/_SpaceSettingsDialog.scss‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ limitations under the License.
3838
}
3939

4040
& + .mx_SettingsTab_subheading {
41-
border-top: 1px solid $quinary-content;
41+
border-top: 1px solid $menu-border-color;
4242
margin-top: 0;
4343
padding-top: 24px;
4444
}
@@ -60,15 +60,6 @@ limitations under the License.
6060
margin-left: 26px;
6161
}
6262
}
63-
64-
.mx_SettingsTab_showAdvanced {
65-
margin: 16px 0;
66-
padding: 0;
67-
}
68-
69-
.mx_SettingsFlag {
70-
margin-top: 24px;
71-
}
7263
}
7364

7465
.mx_SpaceSettingsDialog_buttons {
@@ -86,6 +77,11 @@ limitations under the License.
8677

8778
.mx_AccessibleButton_hasKind {
8879
padding: 8px 22px;
80+
81+
&.mx_SettingsTab_showAdvanced {
82+
margin: 16px 0;
83+
padding: 0;
84+
}
8985
}
9086

9187
.mx_TabbedView_tabLabel {

‎res/css/views/settings/_JoinRuleSettings.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ limitations under the License.
7777
color: $secondary-content;
7878

7979
& + .mx_StyledRadioButton {
80-
border-top: 1px solid $menu-border-color;
80+
border-top: 1px solid $quinary-content;
8181
}
8282
}
8383
}

‎res/css/views/settings/_ProfileSettings.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ limitations under the License.
5454

5555
.mx_ProfileSettings_profileForm {
5656
@mixin mx_Settings_fullWidthField;
57-
border-bottom: 1px solid $menu-border-color;
5857
}
5958

6059
.mx_ProfileSettings_buttons {

‎res/css/views/settings/tabs/_SettingsTab.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,3 +98,7 @@ limitations under the License.
9898
.mx_SettingsTab a {
9999
color: $accent-alt;
100100
}
101+
102+
.mx_SettingsTab_toggleWithDescription {
103+
margin-top: 24px;
104+
}

‎src/components/views/room_settings/AliasSettings.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -384,6 +384,7 @@ export default class AliasSettings extends React.Component<IProps, IState> {
384384
return (
385385
<div className='mx_AliasSettings'>
386386
<SettingsFieldset
387+
data-test-id='published-address-fieldset'
387388
legend={_t("Published Addresses")}
388389
description={<>
389390
{ isSpaceRoom
@@ -429,7 +430,9 @@ export default class AliasSettings extends React.Component<IProps, IState> {
429430
placeholder={_t('New published address (e.g. #alias:server)')}
430431
/>
431432
</SettingsFieldset>
432-
<SettingsFieldset legend={_t("Local Addresses")}
433+
<SettingsFieldset
434+
data-test-id='local-address-fieldset'
435+
legend={_t("Local Addresses")}
433436
description={isSpaceRoom
434437
? _t("Set addresses for this space so users can find this space " +
435438
"through your homeserver (%(localDomain)s)", { localDomain })

‎src/components/views/spaces/SpaceSettingsVisibilityTab.tsx‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
2828
import { useLocalEcho } from "../../../hooks/useLocalEcho";
2929
import JoinRuleSettings from "../settings/JoinRuleSettings";
3030
import { useRoomState } from "../../../hooks/useRoomState";
31+
import SettingsFieldset from "../settings/SettingsFieldset";
3132

3233
interface IProps {
3334
matrixClient: MatrixClient;
@@ -67,12 +68,16 @@ const SpaceSettingsVisibilityTab = ({ matrixClient: cli, space, closeSettingsFn
6768

6869
let advancedSection;
6970
if (joinRule === JoinRule.Public) {
70-
if (showAdvancedSection) {
71-
advancedSection = <>
72-
<AccessibleButton onClick={toggleAdvancedSection} kind="link" className="mx_SettingsTab_showAdvanced">
73-
{ _t("Hide advanced") }
74-
</AccessibleButton>
75-
71+
advancedSection = <div>
72+
<AccessibleButton
73+
data-test-id='toggle-guest-access-btn'
74+
onClick={toggleAdvancedSection}
75+
kind="link"
76+
className="mx_SettingsTab_showAdvanced">
77+
{ showAdvancedSection ? _t("Hide advanced") : _t("Show advanced") }
78+
</AccessibleButton>
79+
80+
{ showAdvancedSection && <div className="mx_SettingsTab_toggleWithDescription">
7681
<LabelledToggleSwitch
7782
value={guestAccessEnabled}
7883
onChange={setGuestAccessEnabled}
@@ -84,14 +89,9 @@ const SpaceSettingsVisibilityTab = ({ matrixClient: cli, space, closeSettingsFn
8489
<br />
8590
{ _t("This may be useful for public spaces.") }
8691
</p>
87-
</>;
88-
} else {
89-
advancedSection = <>
90-
<AccessibleButton onClick={toggleAdvancedSection} kind="link" className="mx_SettingsTab_showAdvanced">
91-
{ _t("Show advanced") }
92-
</AccessibleButton>
93-
</>;
94-
}
92+
</div>
93+
}
94+
</div>;
9595
}
9696

9797
let addressesSection;
@@ -111,34 +111,34 @@ const SpaceSettingsVisibilityTab = ({ matrixClient: cli, space, closeSettingsFn
111111
return <div className="mx_SettingsTab">
112112
<div className="mx_SettingsTab_heading">{ _t("Visibility") }</div>
113113

114-
{ error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
115-
116-
<div className="mx_SettingsTab_section">
117-
<div className="mx_SettingsTab_section_caption">
118-
{ _t("Decide who can view and join %(spaceName)s.", { spaceName: space.name }) }
119-
</div>
120-
121-
<div>
122-
<JoinRuleSettings
123-
room={space}
124-
onError={() => setError(_t("Failed to update the visibility of this space"))}
125-
closeSettingsFn={closeSettingsFn}
114+
{ error && <div data-test-id='space-settings-error' className="mx_SpaceRoomView_errorText">{ error }</div> }
115+
116+
<SettingsFieldset
117+
data-test-id='access-fieldset'
118+
legend={_t("Access")}
119+
description={_t("Decide who can view and join %(spaceName)s.", { spaceName: space.name })}
120+
>
121+
<JoinRuleSettings
122+
room={space}
123+
onError={() => setError(_t("Failed to update the visibility of this space"))}
124+
closeSettingsFn={closeSettingsFn}
125+
/>
126+
{ advancedSection }
127+
<div className="mx_SettingsTab_toggleWithDescription">
128+
<LabelledToggleSwitch
129+
value={historyVisibility === HistoryVisibility.WorldReadable}
130+
onChange={(checked: boolean) => {
131+
setHistoryVisibility(checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared);
132+
}}
133+
disabled={!canSetHistoryVisibility}
134+
label={_t("Preview Space")}
126135
/>
136+
<p>
137+
{ _t("Allow people to preview your space before they join.") }<br />
138+
<b>{ _t("Recommended for public spaces.") }</b>
139+
</p>
127140
</div>
128-
129-
{ advancedSection }
130-
131-
<LabelledToggleSwitch
132-
value={historyVisibility === HistoryVisibility.WorldReadable}
133-
onChange={(checked: boolean) => {
134-
setHistoryVisibility(checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared);
135-
}}
136-
disabled={!canSetHistoryVisibility}
137-
label={_t("Preview Space")}
138-
/>
139-
<div>{ _t("Allow people to preview your space before they join.") }</div>
140-
<b>{ _t("Recommended for public spaces.") }</b>
141-
</div>
141+
</SettingsFieldset>
142142

143143
{ addressesSection }
144144
</div>;

‎src/i18n/strings/en_EN.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1143,11 +1143,12 @@
11431143
"Failed to update the guest access of this space": "Failed to update the guest access of this space",
11441144
"Failed to update the history visibility of this space": "Failed to update the history visibility of this space",
11451145
"Hide advanced": "Hide advanced",
1146+
"Show advanced": "Show advanced",
11461147
"Enable guest access": "Enable guest access",
11471148
"Guests can join a space without having an account.": "Guests can join a space without having an account.",
11481149
"This may be useful for public spaces.": "This may be useful for public spaces.",
1149-
"Show advanced": "Show advanced",
11501150
"Visibility": "Visibility",
1151+
"Access": "Access",
11511152
"Decide who can view and join %(spaceName)s.": "Decide who can view and join %(spaceName)s.",
11521153
"Failed to update the visibility of this space": "Failed to update the visibility of this space",
11531154
"Preview Space": "Preview Space",
@@ -1580,7 +1581,6 @@
15801581
"Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly. <a>Learn more about encryption.</a>": "Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly. <a>Learn more about encryption.</a>",
15811582
"To link to this room, please add an address.": "To link to this room, please add an address.",
15821583
"Decide who can join %(roomName)s.": "Decide who can join %(roomName)s.",
1583-
"Access": "Access",
15841584
"Failed to update the join rules": "Failed to update the join rules",
15851585
"Unknown failure": "Unknown failure",
15861586
"Are you sure you want to make this encrypted room public?": "Are you sure you want to make this encrypted room public?",

0 commit comments

Comments
 (0)