Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 13:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4731 from matrix-org/joriks/radio-buttons

Browse Source 
Change theme selector to use new styled radio buttons
This commit is contained in:
Jorik Schellekens 2020-06-15 12:51:02 +01:00 committed by GitHub
commit 94f52c4ee2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 124 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
res/css/views/elements/_StyledCheckbox.scss
View File

@ -25,6 +25,8 @@ limitations under the License.
input[type=checkbox] {
appearance: none;
margin: 0;
padding: 0;
& + label {
display: flex;

77
res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
View File

@ -44,6 +44,83 @@ limitations under the License.
padding-right: 5px;
}
.mx_AppearanceUserSettingsTab {
> .mx_SettingsTab_SubHeading {
margin-bottom: 32px;
}
}
.mx_AppearanceUserSettingsTab_themeSection {
$radio-bg-color: $input-darker-bg-color;
color: $primary-fg-color;
> .mx_ThemeSelectors {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 4px;
margin-bottom: 30px;
> .mx_RadioButton {
padding: $font-16px;
box-sizing: border-box;
border-radius: 10px;
width: 180px;
background: $radio-bg-color;
opacity: 0.4;
flex-shrink: 1;
flex-grow: 0;
margin-right: 15px;
margin-top: 10px;
font-weight: 600;
color: $muted-fg-color;
> span {
justify-content: center;
}
}
> .mx_RadioButton_enabled {
opacity: 1;
// These colors need to be hardcoded because they don't change with the theme
&.mx_ThemeSelector_light {
background-color: #f3f8fd;
color: #2e2f32;
}
&.mx_ThemeSelector_dark {
background-color: #181b21;
color: #f3f8fd;
> input > div {
border-color: $input-darker-bg-color;
> div {
border-color: $input-darker-bg-color;
}
}
}
&.mx_ThemeSelector_black {
background-color: #000000;
color: #f3f8fd;
> input > div {
border-color: $input-darker-bg-color;
> div {
border-color: $input-darker-bg-color;
}
}
}
}
}
}
.mx_SettingsTab_customFontSizeField {
margin-left: calc($font-16px + 10px);
}

13
src/components/views/elements/StyledRadioButton.tsx
View File

@ -29,9 +29,16 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
}
public render() {
const { children, className, ...otherProps } = this.props;
return <label className={classnames('mx_RadioButton', className)}>
<input type='radio' {...otherProps} />
const { children, className, disabled, ...otherProps } = this.props;
const _className = classnames(
'mx_RadioButton',
className,
{
"mx_RadioButton_disabled": disabled,
"mx_RadioButton_enabled": !disabled,
});
return <label className={_className}>
<input type='radio' disabled={disabled} {...otherProps} />
{/* Used to render the radio button circle */}
<div><div></div></div>
<span>{children}</span>

46
src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
View File

@ -103,14 +103,14 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
};
}
private onThemeChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>): void => {
private onThemeChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
const newTheme = e.target.value;
if (this.state.theme === newTheme) return;
// doing getValue in the .catch will still return the value we failed to set,
// so remember what the value was before we tried to set it so we can revert
const oldTheme: string = SettingsStore.getValue('theme');
SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme).catch(() => {
SettingsStore.setValue("theme", null, SettingLevel.DEVICE, newTheme).catch(() => {
dis.dispatch<RecheckThemePayload>({action: Action.RecheckTheme});
this.setState({theme: oldTheme});
});
@ -199,17 +199,19 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
private renderThemeSection() {
const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
const LabelledToggleSwitch = sdk.getComponent("views.elements.LabelledToggleSwitch");
const StyledCheckbox = sdk.getComponent("views.elements.StyledCheckbox");
const StyledRadioButton = sdk.getComponent("views.elements.StyledRadioButton");
const themeWatcher = new ThemeWatcher();
let systemThemeSection: JSX.Element;
if (themeWatcher.isSystemThemeSupported()) {
systemThemeSection = <div>
<LabelledToggleSwitch
value={this.state.useSystemTheme}
label={SettingsStore.getDisplayName("use_system_theme")}
onChange={this.onUseSystemThemeChanged}
/>
<StyledCheckbox
checked={this.state.useSystemTheme}
onChange={(e) => this.onUseSystemThemeChanged(e.target.checked)}
>
{SettingsStore.getDisplayName("use_system_theme")}
</StyledCheckbox>
</div>;
}
@ -256,17 +258,22 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
<div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_themeSection">
<span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
{systemThemeSection}
<Field
id="theme" label={_t("Theme")} element="select"
value={this.state.theme} onChange={this.onThemeChange}
disabled={this.state.useSystemTheme}
>
<div className="mx_ThemeSelectors" onChange={this.onThemeChange}>
{orderedThemes.map(theme => {
return <option key={theme.id} value={theme.id}>{theme.name}</option>;
return <StyledRadioButton
key={theme.id}
value={theme.id}
name={"theme"}
disabled={this.state.useSystemTheme}
checked={!this.state.useSystemTheme && theme.id === this.state.theme}
className={"mx_ThemeSelector_" + theme.id}
>
{theme.name}
</StyledRadioButton>;
})}
</Field>
</div>
{customThemeForm}
<SettingsFlag name="useCompactLayout" level={SettingLevel.ACCOUNT} />
<SettingsFlag name="useCompactLayout" level={SettingLevel.ACCOUNT} useCheckbox={true} />
</div>
);
}
@ -309,8 +316,11 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
render() {
return (
<div className="mx_SettingsTab">
<div className="mx_SettingsTab_heading">{_t("Appearance")}</div>
<div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
<div className="mx_SettingsTab_heading">{_t("Customise your appearance")}</div>
<div className="mx_SettingsTab_SubHeading">
{_t("Appearance Settings only affect this Riot session.")}
</div>
{this.renderThemeSection()}
{SettingsStore.isFeatureEnabled("feature_font_scaling") ? this.renderFontSection() : null}
</div>

8
src/i18n/strings/en_EN.json
View File

@ -298,8 +298,8 @@
"%(senderName)s changed a rule that was banning rooms matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s changed a rule that was banning rooms matching %(oldGlob)s to matching %(newGlob)s for %(reason)s",
"%(senderName)s changed a rule that was banning servers matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s changed a rule that was banning servers matching %(oldGlob)s to matching %(newGlob)s for %(reason)s",
"%(senderName)s updated a ban rule that was matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s updated a ban rule that was matching %(oldGlob)s to matching %(newGlob)s for %(reason)s",
"Light theme": "Light theme",
"Dark theme": "Dark theme",
"Light": "Light",
"Dark": "Dark",
"You signed in to a new session without verifying it:": "You signed in to a new session without verifying it:",
"Verify your other session using one of the options below.": "Verify your other session using one of the options below.",
"%(name)s (%(userId)s) signed in to a new session without verifying it:": "%(name)s (%(userId)s) signed in to a new session without verifying it:",
@ -779,7 +779,8 @@
"Custom theme URL": "Custom theme URL",
"Add theme": "Add theme",
"Theme": "Theme",
"Appearance": "Appearance",
"Customise your appearance": "Customise your appearance",
"Appearance Settings only affect this Riot session.": "Appearance Settings only affect this Riot session.",
"Flair": "Flair",
"Failed to change password. Is your password correct?": "Failed to change password. Is your password correct?",
"Success": "Success",
@ -1769,6 +1770,7 @@
"Upload %(count)s other files|one": "Upload %(count)s other file",
"Cancel All": "Cancel All",
"Upload Error": "Upload Error",
"Appearance": "Appearance",
"Verify other session": "Verify other session",
"Verification Request": "Verification Request",
"A widget would like to verify your identity": "A widget would like to verify your identity",

4
src/theme.js
View File

@ -24,8 +24,8 @@ import ThemeWatcher from "./settings/watchers/ThemeWatcher";
export function enumerateThemes() {
const BUILTIN_THEMES = {
"light": _t("Light theme"),
"dark": _t("Dark theme"),
"light": _t("Light"),
"dark": _t("Dark"),
};
const customThemes = SettingsStore.getValue("custom_themes");
const customThemeNames = {};