imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Apply prettier formatting

Browse source
This commit is contained in:
Michael Weimann 2022-12-12 12:24:14 +01:00
parent 1cac306093
commit 526645c791
No known key found for this signature in database
GPG key ID: 53F535A266BB9584
1576 changed files with 65385 additions and 62478 deletions
Download patch file Download diff file Expand all files Collapse all files

95
src/components/views/settings/ThemeChoicePanel.tsx
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import React from "react";
import { logger } from "matrix-js-sdk/src/logger";
import { _t } from "../../../languageHandler";
@ -23,16 +23,15 @@ import { findHighContrastTheme, findNonHighContrastTheme, getOrderedThemes, isHi
import ThemeWatcher from "../../../settings/watchers/ThemeWatcher";
import AccessibleButton from "../elements/AccessibleButton";
import dis from "../../../dispatcher/dispatcher";
import { RecheckThemePayload } from '../../../dispatcher/payloads/RecheckThemePayload';
import { Action } from '../../../dispatcher/actions';
import StyledCheckbox from '../elements/StyledCheckbox';
import Field from '../elements/Field';
import { RecheckThemePayload } from "../../../dispatcher/payloads/RecheckThemePayload";
import { Action } from "../../../dispatcher/actions";
import StyledCheckbox from "../elements/StyledCheckbox";
import Field from "../elements/Field";
import StyledRadioGroup from "../elements/StyledRadioGroup";
import { SettingLevel } from "../../../settings/SettingLevel";
import PosthogTrackers from "../../../PosthogTrackers";
interface IProps {
}
interface IProps {}
interface IThemeState {
theme: string;
@ -68,9 +67,13 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
const themeChoice: string = SettingsStore.getValue("theme");
const systemThemeExplicit: boolean = SettingsStore.getValueAt(
SettingLevel.DEVICE, "use_system_theme", null, false, true);
const themeExplicit: string = SettingsStore.getValueAt(
SettingLevel.DEVICE, "theme", null, false, true);
SettingLevel.DEVICE,
"use_system_theme",
null,
false,
true,
);
const themeExplicit: string = SettingsStore.getValueAt(SettingLevel.DEVICE, "theme", null, false, true);
// If the user has enabled system theme matching, use that.
if (systemThemeExplicit) {
@ -102,7 +105,7 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
// 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');
const oldTheme: string = SettingsStore.getValue("theme");
SettingsStore.setValue("theme", null, SettingLevel.DEVICE, newTheme).catch(() => {
dis.dispatch<RecheckThemePayload>({ action: Action.RecheckTheme });
this.setState({ theme: oldTheme });
@ -126,7 +129,7 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
private onAddCustomTheme = async (): Promise<void> => {
let currentThemes: string[] = SettingsStore.getValue("custom_themes");
if (!currentThemes) currentThemes = [];
currentThemes = currentThemes.map(c => c); // cheap clone
currentThemes = currentThemes.map((c) => c); // cheap clone
if (this.themeTimer) {
clearTimeout(this.themeTimer);
@ -136,7 +139,7 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
const r = await fetch(this.state.customThemeUrl);
// XXX: need some schema for this
const themeInfo = await r.json();
if (!themeInfo || typeof(themeInfo['name']) !== 'string' || typeof(themeInfo['colors']) !== 'object') {
if (!themeInfo || typeof themeInfo["name"] !== "string" || typeof themeInfo["colors"] !== "object") {
this.setState({ customThemeMessage: { text: _t("Invalid theme schema."), isError: true } });
return;
}
@ -161,19 +164,19 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
private renderHighContrastCheckbox(): React.ReactElement<HTMLDivElement> {
if (
!this.state.useSystemTheme && (
findHighContrastTheme(this.state.theme) ||
isHighContrastTheme(this.state.theme)
)
!this.state.useSystemTheme &&
(findHighContrastTheme(this.state.theme) || isHighContrastTheme(this.state.theme))
) {
return <div>
<StyledCheckbox
checked={isHighContrastTheme(this.state.theme)}
onChange={(e) => this.highContrastThemeChanged(e.target.checked)}
>
{ _t("Use high contrast") }
</StyledCheckbox>
</div>;
return (
<div>
<StyledCheckbox
checked={isHighContrastTheme(this.state.theme)}
onChange={(e) => this.highContrastThemeChanged(e.target.checked)}
>
{_t("Use high contrast")}
</StyledCheckbox>
</div>
);
}
}
@ -193,14 +196,16 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
const themeWatcher = new ThemeWatcher();
let systemThemeSection: JSX.Element;
if (themeWatcher.isSystemThemeSupported()) {
systemThemeSection = <div>
<StyledCheckbox
checked={this.state.useSystemTheme}
onChange={(e) => this.onUseSystemThemeChanged(e.target.checked)}
>
{ SettingsStore.getDisplayName("use_system_theme") }
</StyledCheckbox>
</div>;
systemThemeSection = (
<div>
<StyledCheckbox
checked={this.state.useSystemTheme}
onChange={(e) => this.onUseSystemThemeChanged(e.target.checked)}
>
{SettingsStore.getDisplayName("use_system_theme")}
</StyledCheckbox>
</div>
);
}
let customThemeForm: JSX.Element;
@ -208,18 +213,18 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
let messageElement = null;
if (this.state.customThemeMessage.text) {
if (this.state.customThemeMessage.isError) {
messageElement = <div className='text-error'>{ this.state.customThemeMessage.text }</div>;
messageElement = <div className="text-error">{this.state.customThemeMessage.text}</div>;
} else {
messageElement = <div className='text-success'>{ this.state.customThemeMessage.text }</div>;
messageElement = <div className="text-success">{this.state.customThemeMessage.text}</div>;
}
}
customThemeForm = (
<div className='mx_SettingsTab_section'>
<div className="mx_SettingsTab_section">
<form onSubmit={this.onAddCustomTheme}>
<Field
label={_t("Custom theme URL")}
type='text'
id='mx_GeneralUserSettingsTab_customThemeInput'
type="text"
id="mx_GeneralUserSettingsTab_customThemeInput"
autoComplete="off"
onChange={this.onCustomThemeChange}
value={this.state.customThemeUrl}
@ -230,9 +235,9 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
kind="primary_sm"
disabled={!this.state.customThemeUrl.trim()}
>
{ _t("Add theme") }
{_t("Add theme")}
</AccessibleButton>
{ messageElement }
{messageElement}
</form>
</div>
);
@ -241,12 +246,12 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
const orderedThemes = getOrderedThemes();
return (
<div className="mx_SettingsTab_section mx_ThemeChoicePanel">
<span className="mx_SettingsTab_subheading">{ _t("Theme") }</span>
{ systemThemeSection }
<span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
{systemThemeSection}
<div className="mx_ThemeSelectors">
<StyledRadioGroup
name="theme"
definitions={orderedThemes.map(t => ({
definitions={orderedThemes.map((t) => ({
value: t.id,
label: t.name,
disabled: this.state.useSystemTheme,
@ -257,8 +262,8 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
outlined
/>
</div>
{ this.renderHighContrastCheckbox() }
{ customThemeForm }
{this.renderHighContrastCheckbox()}
{customThemeForm}
</div>
);
}