mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-16 13:14:58 +08:00
Use styled radio buttons for theme selection
This commit is contained in:
parent
d6a532040e
commit
a10e71edcf
@ -115,6 +115,7 @@
|
||||
@import "./views/elements/_Slider.scss";
|
||||
@import "./views/elements/_Spinner.scss";
|
||||
@import "./views/elements/_StyledCheckbox.scss";
|
||||
@import "./views/elements/_StyledRadioButton.scss";
|
||||
@import "./views/elements/_SyntaxHighlight.scss";
|
||||
@import "./views/elements/_TextWithTooltip.scss";
|
||||
@import "./views/elements/_ToggleSwitch.scss";
|
||||
|
88
res/css/views/elements/_StyledRadioButton.scss
Normal file
88
res/css/views/elements/_StyledRadioButton.scss
Normal file
@ -0,0 +1,88 @@
|
||||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
/**
|
||||
* This component expects the parent to specify a positive padding and
|
||||
* width
|
||||
*/
|
||||
|
||||
.mx_RadioButton {
|
||||
|
||||
$radio-circle-color: $muted-fg-color;
|
||||
$active-radio-circle-color: $accent-color;
|
||||
// We need to make this element positioned
|
||||
// so that the radio circle can be absolute
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
> span {
|
||||
flex-grow: 1;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
> input[type=radio] {
|
||||
// Remove the OS's representation
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: none;
|
||||
|
||||
+ div {
|
||||
// Necessary to center the following span
|
||||
position: absolute;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
box-sizing: border-box;
|
||||
height: $font-16px;
|
||||
width: $font-16px;
|
||||
|
||||
border: $font-1-5px solid $radio-circle-color;
|
||||
border-radius: $font-16px;
|
||||
|
||||
> div {
|
||||
box-sizing: border-box;
|
||||
|
||||
height: $font-8px;
|
||||
width: $font-8px;
|
||||
|
||||
border-radius: $font-8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> input[type=radio]:checked {
|
||||
+ div {
|
||||
> div {
|
||||
background: $radio-circle-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> input[type=radio]:disabled {
|
||||
+ div {
|
||||
> div {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -43,3 +43,58 @@ limitations under the License.
|
||||
padding-left: 20px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_themeSection {
|
||||
$radio-bg-color: $input-darker-bg-color;
|
||||
|
||||
> .mx_ThemeSelectors {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
margin-top: 23px;
|
||||
|
||||
> .mx_RadioButton {
|
||||
padding: $font-16px;
|
||||
border-radius: 10px;
|
||||
background: rgba($radio-bg-color, 0.2);
|
||||
width: 180px;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 0;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
> .mx_RadioButton:not([disabled]) {
|
||||
// These 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;
|
||||
|
||||
> input > div {
|
||||
border-color: $input-darker-bg-color;
|
||||
> div {
|
||||
border-color: $input-darker-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_ThemeSelector_black {
|
||||
background-color: #000000;
|
||||
|
||||
> input > div {
|
||||
border-color: $input-darker-bg-color;
|
||||
> div {
|
||||
border-color: $input-darker-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SettingsTab_customFontSizeField {
|
||||
margin-left: calc($font-16px + 10px);
|
||||
}
|
||||
|
41
src/components/views/elements/StyledRadioButton.tsx
Normal file
41
src/components/views/elements/StyledRadioButton.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import classnames from 'classnames';
|
||||
|
||||
interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
||||
}
|
||||
|
||||
interface IState {
|
||||
}
|
||||
|
||||
export default class StyledRadioButton extends React.PureComponent<IProps, IState> {
|
||||
|
||||
public static readonly defaultProps = {
|
||||
className: '',
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { children, className, ...otherProps } = this.props;
|
||||
return <label className={classnames('mx_RadioButton', className)}>
|
||||
<input type='radio' {...otherProps} />
|
||||
{/* Used to render the radio button circle */}
|
||||
<div><div></div></div>
|
||||
<span>{children}</span>
|
||||
</label>
|
||||
}
|
||||
}
|
@ -103,7 +103,7 @@ 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;
|
||||
|
||||
@ -193,17 +193,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>;
|
||||
}
|
||||
|
||||
@ -250,15 +252,19 @@ 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
|
||||
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} />
|
||||
</div>
|
||||
@ -302,7 +308,10 @@ 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_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>
|
||||
|
@ -777,7 +777,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",
|
||||
@ -1753,6 +1754,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",
|
||||
|
Loading…
Reference in New Issue
Block a user