Separate labs and betas more clearly (#8969)
* Separate labs and betas more clearly
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Fix tests
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Capitalize `L` in `Labs`
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Use `labsSections` instead of `SdkConfig.get("show_labs_settings")`
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Link to `betas.md` instead of `labs.md`
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Change labs label back to `Labs`
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Improve labs section copy
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Improve labs flags copy
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* i18n
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Fix cypress tests
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Reduce diff
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Remove empty line
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Fix comment
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Remove margin-bottom for the last child
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Improve code based on review
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Fix ts
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Improve ts
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Fix ts
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Improve code
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
* Improve TS
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner
GitHub
parent
5cbb748843
commit
b0dfb2262e
8 changed files with 128 additions and 70 deletions
|
|
@ -80,12 +80,13 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
|
|||
|
||||
if (!canChange && this.props.hideIfCannotSet) return null;
|
||||
|
||||
const label = this.props.label
|
||||
const label = (this.props.label
|
||||
? _t(this.props.label)
|
||||
: SettingsStore.getDisplayName(this.props.name, this.props.level);
|
||||
: SettingsStore.getDisplayName(this.props.name, this.props.level)) ?? undefined;
|
||||
const description = SettingsStore.getDescription(this.props.name);
|
||||
const shouldWarn = SettingsStore.shouldHaveWarning(this.props.name);
|
||||
|
||||
let disabledDescription: JSX.Element;
|
||||
let disabledDescription: JSX.Element | null = null;
|
||||
if (this.props.disabled && this.props.disabledDescription) {
|
||||
disabledDescription = <div className="mx_SettingsFlag_microcopy">
|
||||
{ this.props.disabledDescription }
|
||||
|
|
@ -106,7 +107,20 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
|
|||
<label className="mx_SettingsFlag_label">
|
||||
<span className="mx_SettingsFlag_labelText">{ label }</span>
|
||||
{ description && <div className="mx_SettingsFlag_microcopy">
|
||||
{ description }
|
||||
{ shouldWarn
|
||||
? _t(
|
||||
"<w>WARNING:</w> <description/>", {},
|
||||
{
|
||||
"w": (sub) => (
|
||||
<span className="mx_SettingsTab_microcopy_warning">
|
||||
{ sub }
|
||||
</span>
|
||||
),
|
||||
"description": description,
|
||||
},
|
||||
)
|
||||
: description
|
||||
}
|
||||
</div> }
|
||||
{ disabledDescription }
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ import { sortBy } from "lodash";
|
|||
|
||||
import { _t } from "../../../../../languageHandler";
|
||||
import SettingsStore from "../../../../../settings/SettingsStore";
|
||||
import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
|
||||
import { SettingLevel } from "../../../../../settings/SettingLevel";
|
||||
import SdkConfig from "../../../../../SdkConfig";
|
||||
import BetaCard from "../../../beta/BetaCard";
|
||||
|
|
@ -28,24 +27,6 @@ import { MatrixClientPeg } from '../../../../../MatrixClientPeg';
|
|||
import { LabGroup, labGroupNames } from "../../../../../settings/Settings";
|
||||
import { EnhancedMap } from "../../../../../utils/maps";
|
||||
|
||||
interface ILabsSettingToggleProps {
|
||||
featureId: string;
|
||||
}
|
||||
|
||||
export class LabsSettingToggle extends React.Component<ILabsSettingToggleProps> {
|
||||
private onChange = async (checked: boolean): Promise<void> => {
|
||||
await SettingsStore.setValue(this.props.featureId, null, SettingLevel.DEVICE, checked);
|
||||
this.forceUpdate();
|
||||
};
|
||||
|
||||
public render(): JSX.Element {
|
||||
const label = SettingsStore.getDisplayName(this.props.featureId);
|
||||
const value = SettingsStore.getValue(this.props.featureId);
|
||||
const canChange = SettingsStore.canSetValue(this.props.featureId, null, SettingLevel.DEVICE);
|
||||
return <LabelledToggleSwitch value={value} label={label} onChange={this.onChange} disabled={!canChange} />;
|
||||
}
|
||||
}
|
||||
|
||||
interface IState {
|
||||
showJumpToDate: boolean;
|
||||
showExploringPublicSpaces: boolean;
|
||||
|
|
@ -93,7 +74,7 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
|
|||
const groups = new EnhancedMap<LabGroup, JSX.Element[]>();
|
||||
labs.forEach(f => {
|
||||
groups.getOrCreate(SettingsStore.getLabGroup(f), []).push(
|
||||
<LabsSettingToggle featureId={f} key={f} />,
|
||||
<SettingsFlag level={SettingLevel.DEVICE} name={f} key={f} />,
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -154,24 +135,42 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
|
|||
|
||||
return (
|
||||
<div className="mx_SettingsTab mx_LabsUserSettingsTab">
|
||||
<div className="mx_SettingsTab_heading">{ _t("Labs") }</div>
|
||||
<div className="mx_SettingsTab_heading">{ _t("Upcoming features") }</div>
|
||||
<div className='mx_SettingsTab_subsectionText'>
|
||||
{
|
||||
_t('Feeling experimental? Labs are the best way to get things early, ' +
|
||||
'test out new features and help shape them before they actually launch. ' +
|
||||
'<a>Learn more</a>.', {}, {
|
||||
'a': (sub) => {
|
||||
return <a
|
||||
href="https://github.com/vector-im/element-web/blob/develop/docs/labs.md"
|
||||
rel='noreferrer noopener'
|
||||
target='_blank'
|
||||
>{ sub }</a>;
|
||||
},
|
||||
})
|
||||
_t(
|
||||
"What's next for %(brand)s? "
|
||||
+ "Labs are the best way to get things early, "
|
||||
+ "test out new features and help shape them before they actually launch.",
|
||||
{ brand: SdkConfig.get("brand") },
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{ betaSection }
|
||||
{ labsSections }
|
||||
{ labsSections && <>
|
||||
<div className="mx_SettingsTab_heading">{ _t("Early previews") }</div>
|
||||
<div className='mx_SettingsTab_subsectionText'>
|
||||
{
|
||||
_t(
|
||||
"Feeling experimental? "
|
||||
+ "Try out our latest ideas in development. "
|
||||
+ "These features are not finalised; "
|
||||
+ "they may be unstable, may change, or may be dropped altogether. "
|
||||
+ "<a>Learn more</a>.",
|
||||
{},
|
||||
{
|
||||
'a': (sub) => {
|
||||
return <a
|
||||
href="https://github.com/vector-im/element-web/blob/develop/docs/labs.md"
|
||||
rel='noreferrer noopener'
|
||||
target='_blank'
|
||||
>{ sub }</a>;
|
||||
},
|
||||
})
|
||||
}
|
||||
</div>
|
||||
{ labsSections }
|
||||
</> }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue