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

Wrap inputs in fieldsets in Space visibility settings #7350

Merged
merged 9 commits into from
Jan 6, 2022
Merged

Wrap inputs in fieldsets in Space visibility settings #7350

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0c32dc1
use fieldset in space settings > visibility
Dec 13, 2021
4f688d2
add basic tests for space setttings visibility
Dec 13, 2021
e2d58b0
i18n
Dec 13, 2021
6222e60
fix toggle button placement
Dec 14, 2021
4ad2ef9
i18n
Dec 14, 2021
e052056
Merge branch 'develop' into pse-118/fieldset-spaces
Jan 6, 2022
ce1234a
update settings separator color to quinary
Jan 6, 2022
e88d8f7
Merge branch 'develop' into pse-118/fieldset-spaces
Jan 6, 2022
35d1955
update tests for context dependency
Jan 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 6 additions & 10 deletions res/css/views/dialogs/_SpaceSettingsDialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ limitations under the License.
}

& + .mx_SettingsTab_subheading {
border-top: 1px solid $quinary-content;
border-top: 1px solid $menu-border-color;
margin-top: 0;
padding-top: 24px;
}
Expand All @@ -60,15 +60,6 @@ limitations under the License.
margin-left: 26px;
}
}

.mx_SettingsTab_showAdvanced {
margin: 16px 0;
padding: 0;
}

.mx_SettingsFlag {
margin-top: 24px;
}
}

.mx_SpaceSettingsDialog_buttons {
Expand All @@ -86,6 +77,11 @@ limitations under the License.

.mx_AccessibleButton_hasKind {
padding: 8px 22px;

&.mx_SettingsTab_showAdvanced {
margin: 16px 0;
padding: 0;
}
}

.mx_TabbedView_tabLabel {
Expand Down
1 change: 0 additions & 1 deletion res/css/views/settings/_ProfileSettings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ limitations under the License.

.mx_ProfileSettings_profileForm {
@mixin mx_Settings_fullWidthField;
border-bottom: 1px solid $menu-border-color;
}

.mx_ProfileSettings_buttons {
Expand Down
4 changes: 4 additions & 0 deletions res/css/views/settings/tabs/_SettingsTab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,3 +98,7 @@ limitations under the License.
.mx_SettingsTab a {
color: $accent-alt;
}

.mx_SettingsTab_toggleWithDescription {
margin-top: 24px;
}
5 changes: 4 additions & 1 deletion src/components/views/room_settings/AliasSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,6 +381,7 @@ export default class AliasSettings extends React.Component<IProps, IState> {
return (
<div className='mx_AliasSettings'>
<SettingsFieldset
data-test-id='published-address-fieldset'
legend={_t("Published Addresses")}
description={<>
{ isSpaceRoom
Expand Down Expand Up @@ -426,7 +427,9 @@ export default class AliasSettings extends React.Component<IProps, IState> {
placeholder={_t('New published address (e.g. #alias:server)')}
/>
</SettingsFieldset>
<SettingsFieldset legend={_t("Local Addresses")}
<SettingsFieldset
data-test-id='local-address-fieldset'
legend={_t("Local Addresses")}
description={isSpaceRoom
? _t("Set addresses for this space so users can find this space " +
"through your homeserver (%(localDomain)s)", { localDomain })
Expand Down
80 changes: 40 additions & 40 deletions src/components/views/spaces/SpaceSettingsVisibilityTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
import { useLocalEcho } from "../../../hooks/useLocalEcho";
import JoinRuleSettings from "../settings/JoinRuleSettings";
import { useRoomState } from "../../../hooks/useRoomState";
import SettingsFieldset from "../settings/SettingsFieldset";

interface IProps {
matrixClient: MatrixClient;
Expand Down Expand Up @@ -67,12 +68,16 @@ const SpaceSettingsVisibilityTab = ({ matrixClient: cli, space, closeSettingsFn

let advancedSection;
if (joinRule === JoinRule.Public) {
if (showAdvancedSection) {
advancedSection = <>
<AccessibleButton onClick={toggleAdvancedSection} kind="link" className="mx_SettingsTab_showAdvanced">
{ _t("Hide advanced") }
</AccessibleButton>

advancedSection = <div>
<AccessibleButton
data-test-id='toggle-guest-access-btn'
onClick={toggleAdvancedSection}
kind="link"
className="mx_SettingsTab_showAdvanced">
{ showAdvancedSection ? _t("Hide advanced") : _t("Show advanced") }
</AccessibleButton>

{ showAdvancedSection && <div className="mx_SettingsTab_toggleWithDescription">
<LabelledToggleSwitch
value={guestAccessEnabled}
onChange={setGuestAccessEnabled}
Expand All @@ -84,14 +89,9 @@ const SpaceSettingsVisibilityTab = ({ matrixClient: cli, space, closeSettingsFn
<br />
{ _t("This may be useful for public spaces.") }
</p>
</>;
} else {
advancedSection = <>
<AccessibleButton onClick={toggleAdvancedSection} kind="link" className="mx_SettingsTab_showAdvanced">
{ _t("Show advanced") }
</AccessibleButton>
</>;
}
</div>
}
Comment on lines +92 to +93
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The offset looks a bit awkward here:

Suggested change
</div>
}
</div> }

</div>;
}

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

{ error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }

<div className="mx_SettingsTab_section">
<div className="mx_SettingsTab_section_caption">
{ _t("Decide who can view and join %(spaceName)s.", { spaceName: space.name }) }
</div>

<div>
<JoinRuleSettings
room={space}
onError={() => setError(_t("Failed to update the visibility of this space"))}
closeSettingsFn={closeSettingsFn}
{ error && <div data-test-id='space-settings-error' className="mx_SpaceRoomView_errorText">{ error }</div> }

<SettingsFieldset
data-test-id='access-fieldset'
legend={_t("Access")}
description={_t("Decide who can view and join %(spaceName)s.", { spaceName: space.name })}
>
<JoinRuleSettings
room={space}
onError={() => setError(_t("Failed to update the visibility of this space"))}
closeSettingsFn={closeSettingsFn}
/>
{ advancedSection }
<div className="mx_SettingsTab_toggleWithDescription">
<LabelledToggleSwitch
value={historyVisibility === HistoryVisibility.WorldReadable}
onChange={(checked: boolean) => {
setHistoryVisibility(checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared);
}}
disabled={!canSetHistoryVisibility}
label={_t("Preview Space")}
/>
<p>
{ _t("Allow people to preview your space before they join.") }<br />
<b>{ _t("Recommended for public spaces.") }</b>
</p>
</div>

{ advancedSection }

<LabelledToggleSwitch
value={historyVisibility === HistoryVisibility.WorldReadable}
onChange={(checked: boolean) => {
setHistoryVisibility(checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared);
}}
disabled={!canSetHistoryVisibility}
label={_t("Preview Space")}
/>
<div>{ _t("Allow people to preview your space before they join.") }</div>
<b>{ _t("Recommended for public spaces.") }</b>
</div>
</SettingsFieldset>

{ addressesSection }
</div>;
Expand Down
4 changes: 2 additions & 2 deletions src/i18n/strings/en_EN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1118,11 +1118,12 @@
"Failed to update the guest access of this space": "Failed to update the guest access of this space",
"Failed to update the history visibility of this space": "Failed to update the history visibility of this space",
"Hide advanced": "Hide advanced",
"Show advanced": "Show advanced",
"Enable guest access": "Enable guest access",
"Guests can join a space without having an account.": "Guests can join a space without having an account.",
"This may be useful for public spaces.": "This may be useful for public spaces.",
"Show advanced": "Show advanced",
"Visibility": "Visibility",
"Access": "Access",
"Decide who can view and join %(spaceName)s.": "Decide who can view and join %(spaceName)s.",
"Failed to update the visibility of this space": "Failed to update the visibility of this space",
"Preview Space": "Preview Space",
Expand Down Expand Up @@ -1556,7 +1557,6 @@
"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>",
"To link to this room, please add an address.": "To link to this room, please add an address.",
"Decide who can join %(roomName)s.": "Decide who can join %(roomName)s.",
"Access": "Access",
"Failed to update the join rules": "Failed to update the join rules",
"Unknown failure": "Unknown failure",
"Are you sure you want to make this encrypted room public?": "Are you sure you want to make this encrypted room public?",
Expand Down
Loading