Iterate PR

This commit is contained in:
Michael Telatynski 2021-06-17 16:22:40 +01:00
parent 35e68b8aa5
commit 7d90612371
6 changed files with 107 additions and 74 deletions

View file

@ -83,32 +83,33 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
}
return <div className="mx_BetaCard">
<div>
<h3 className="mx_BetaCard_title">
{ titleOverride || _t(title) }
<BetaPill />
</h3>
<span className="mx_BetaCard_caption">{ _t(caption) }</span>
<div className="mx_BetaCard_buttons">
{ feedbackButton }
<AccessibleButton
onClick={() => SettingsStore.setValue(featureId, null, SettingLevel.DEVICE, !value)}
kind={feedbackButton ? "primary_outline" : "primary"}
>
{ value ? _t("Leave the beta") : _t("Join the beta") }
</AccessibleButton>
<div className="mx_BetaCard_columns">
<div>
<h3 className="mx_BetaCard_title">
{ titleOverride || _t(title) }
<BetaPill />
</h3>
<span className="mx_BetaCard_caption">{ _t(caption) }</span>
<div className="mx_BetaCard_buttons">
{ feedbackButton }
<AccessibleButton
onClick={() => SettingsStore.setValue(featureId, null, SettingLevel.DEVICE, !value)}
kind={feedbackButton ? "primary_outline" : "primary"}
>
{ value ? _t("Leave the beta") : _t("Join the beta") }
</AccessibleButton>
</div>
{ disclaimer && <div className="mx_BetaCard_disclaimer">
{ disclaimer(value) }
</div> }
</div>
{ disclaimer && <div className="mx_BetaCard_disclaimer">
{ disclaimer(value) }
</div> }
{ extraSettings && <details className="mx_BetaCard_relatedSettings">
<summary>{ _t("Experimental options") }</summary>
{ extraSettings.map(key => (
<SettingsFlag key={key} name={key} level={SettingLevel.DEVICE} />
)) }
</details> }
<img src={image} alt="" />
</div>
<img src={image} alt="" />
{ extraSettings && <div className="mx_BetaCard_relatedSettings">
{ extraSettings.map(key => (
<SettingsFlag key={key} name={key} level={SettingLevel.DEVICE} />
)) }
</div> }
</div>;
};

View file

@ -77,9 +77,10 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
public render() {
const canChange = SettingsStore.canSetValue(this.props.name, this.props.roomId, this.props.level);
let label = this.props.label;
if (!label) label = SettingsStore.getDisplayName(this.props.name, this.props.level);
else label = _t(label);
const label = this.props.label
? _t(this.props.label)
: SettingsStore.getDisplayName(this.props.name, this.props.level);
const description = SettingsStore.getDescription(this.props.name);
if (this.props.useCheckbox) {
return <StyledCheckbox
@ -99,6 +100,9 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
disabled={this.props.disabled || !canChange}
aria-label={label}
/>
{ description && <div className="mx_SettingsFlag_microcopy">
{ description }
</div> }
</div>
);
}