OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Implement font selection

pull/21833/head
Jorik Schellekens 2020-06-15 15:33:52 +01:00
parent 94f52c4ee2
commit edb6bbc6c0
11 changed files with 239 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,8 +15,7 @@ limitations under the License.
*/
.mx_AppearanceUserSettingsTab_fontSlider,
.mx_AppearanceUserSettingsTab_themeSection .mx_Field,
.mx_AppearanceUserSettingsTab_fontScaling .mx_Field {
.mx_AppearanceUserSettingsTab .mx_Field {
@mixin mx_Settings_fullWidthField;
}
@ -124,3 +123,14 @@ limitations under the License.
.mx_SettingsTab_customFontSizeField {
margin-left: calc($font-16px + 10px);
}
.mx_AppearanceUserSettingsTab_Advanced {
.mx_AppearanceUserSettingsTab_AdvancedToggle {
color: $accent-color;
margin-bottom: 16px;
}
.mx_AppearanceUserSettingsTab_systemFont {
margin-left: calc($font-16px + 10px);
}
}

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

@ -52,6 +52,9 @@ interface IState extends IThemeState {
customThemeUrl: string,
customThemeMessage: CustomThemeMessage,
useCustomFontSize: boolean,
useSystemFont: boolean,
systemFont: string,
showAdvanced: boolean,
}
export default class AppearanceUserSettingsTab extends React.Component<IProps, IState> {
@ -67,6 +70,9 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
customThemeUrl: "",
customThemeMessage: {isError: false, text: ""},
useCustomFontSize: SettingsStore.getValue("useCustomFontSize"),
useSystemFont: SettingsStore.getValue("useSystemFont"),
systemFont: SettingsStore.getValue("systemFont"),
showAdvanced: false,
};
}
@ -201,6 +207,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
const StyledCheckbox = sdk.getComponent("views.elements.StyledCheckbox");
const StyledRadioButton = sdk.getComponent("views.elements.StyledRadioButton");
const Field = sdk.getComponent("views.elements.Field");
const themeWatcher = new ThemeWatcher();
let systemThemeSection: JSX.Element;
@ -280,6 +287,8 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
private renderFontSection() {
const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
const Field = sdk.getComponent("views.elements.Field");
return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_fontScaling">
<span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
<div className="mx_AppearanceUserSettingsTab_fontSlider">
@ -314,6 +323,49 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
</div>;
}
private renderAdvancedSection() {
const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
const Field = sdk.getComponent("views.elements.Field");
const toggle = <div
className="mx_AppearanceUserSettingsTab_AdvancedToggle"
onClick={() => this.setState({showAdvanced: !this.state.showAdvanced})}
>
{this.state.showAdvanced ? "Hide advanced" : "Show advanced"}
</div>;
let advanced: React.ReactNode;
if (this.state.showAdvanced) {
advanced = <div>
<SettingsFlag
name="useSystemFont"
level={SettingLevel.DEVICE}
useCheckbox={true}
onChange={(checked) => this.setState({useSystemFont: checked})}
/>
<Field
className="mx_AppearanceUserSettingsTab_systemFont"
label={SettingsStore.getDisplayName("systemFont")}
onChange={(value) => {
this.setState({
systemFont: value.target.value,
})
SettingsStore.setValue("systemFont", null, SettingLevel.DEVICE, value.target.value);
}}
tooltipContent="Set the name of a font installed on your system & Riot will attempt to use it."
disabled={!this.state.useSystemFont}
value={this.state.systemFont}
/>
</div>;
}
return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Advanced">
{toggle}
{advanced}
</div>
}
render() {
return (
<div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
@ -323,6 +375,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
</div>
{this.renderThemeSection()}
{SettingsStore.isFeatureEnabled("feature_font_scaling") ? this.renderFontSection() : null}
{this.renderAdvancedSection()}
</div>
);
}

10
src/dispatcher/actions.ts
View File

@ -69,4 +69,14 @@ export enum Action {
* Opens the user menu (previously known as the top left menu). No additional payload information required.
*/
ToggleUserMenu = "toggle_user_menu",
/**
* Sets the apps root font size. Should be used with UpdateFontSizePayload
*/
UpdateFontSize = "update-font-size",
/**
* Sets a system font. Should be used with UpdateSystemFontPayload
*/
UpdateSystemFont = "update-system-font",
}

27
src/dispatcher/payloads/UpdateFontSizePayload.ts Normal file
View File

@ -0,0 +1,27 @@
/*
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 { ActionPayload } from "../payloads";
import { Action } from "../actions";
export interface UpdateFontSizePayload extends ActionPayload {
action: Action.UpdateFontSize,
/**
* The font size to set the root to
*/
size: number;
}

32
src/dispatcher/payloads/UpdateSystemFontPayload.ts Normal file
View File

@ -0,0 +1,32 @@
/*
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 { ActionPayload } from "../payloads";
import { Action } from "../actions";
export interface UpdateSystemFontPayload extends ActionPayload {
action: Action.UpdateSystemFont,
/**
* Specify whether to use a system font or the stylesheet font
*/
useSystemFont: boolean;
/**
* The system font to use
*/
font: string;
}

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

@ -459,6 +459,8 @@
"Mirror local video feed": "Mirror local video feed",
"Enable Community Filter Panel": "Enable Community Filter Panel",
"Match system theme": "Match system theme",
"Use a system font": "Use a system font",
"System font name": "System font name",
"Allow Peer-to-Peer for 1:1 calls": "Allow Peer-to-Peer for 1:1 calls",
"Send analytics data": "Send analytics data",
"Never send encrypted messages to unverified sessions from this session": "Never send encrypted messages to unverified sessions from this session",

14
src/settings/Settings.js
View File

@ -30,6 +30,8 @@ import PushToMatrixClientController from './controllers/PushToMatrixClientContro
import ReloadOnChangeController from "./controllers/ReloadOnChangeController";
import {RIGHT_PANEL_PHASES} from "../stores/RightPanelStorePhases";
import FontSizeController from './controllers/FontSizeController';
import SystemFontController from './controllers/SystemFontController';
import UseSystemFontController from './controllers/UseSystemFontController';
// These are just a bunch of helper arrays to avoid copy/pasting a bunch of times
const LEVELS_ROOM_SETTINGS = ['device', 'room-device', 'room-account', 'account', 'config'];
@ -313,6 +315,18 @@ export const SETTINGS = {
default: true,
displayName: _td("Match system theme"),
},
"useSystemFont": {
supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
default: false,
displayName: _td("Use a system font"),
controller: new UseSystemFontController(),
},
"systemFont": {
supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
default: "",
displayName: _td("System font name"),
controller: new SystemFontController(),
},
"webRtcAllowPeerToPeer": {
supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
displayName: _td('Allow Peer-to-Peer for 1:1 calls'),

6
src/settings/controllers/FontSizeController.js → src/settings/controllers/FontSizeController.ts
View File

@ -16,6 +16,8 @@ limitations under the License.
import SettingController from "./SettingController";
import dis from "../../dispatcher/dispatcher";
import { UpdateFontSizePayload } from "../../dispatcher/payloads/UpdateFontSizePayload";
import { Action } from "../../dispatcher/actions";
export default class FontSizeController extends SettingController {
constructor() {
@ -24,8 +26,8 @@ export default class FontSizeController extends SettingController {
onChange(level, roomId, newValue) {
// Dispatch font size change so that everything open responds to the change.
dis.dispatch({
action: "update-font-size",
dis.dispatch<UpdateFontSizePayload>({
action: Action.UpdateFontSize,
size: newValue,
});
}

36
src/settings/controllers/SystemFontController.ts Normal file
View File

@ -0,0 +1,36 @@
/*
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 SettingController from "./SettingController";
import SettingsStore from "../SettingsStore";
import dis from "../../dispatcher/dispatcher";
import { UpdateSystemFontPayload } from "../../dispatcher/payloads/UpdateSystemFontPayload";
import { Action } from "../../dispatcher/actions";
export default class SystemFontController extends SettingController {
constructor() {
super();
}
onChange(level, roomId, newValue) {
// Dispatch font size change so that everything open responds to the change.
dis.dispatch<UpdateSystemFontPayload>({
action: Action.UpdateSystemFont,
useSystemFont: SettingsStore.getValue("useSystemFont"),
font: newValue,
});
}
}

36
src/settings/controllers/UseSystemFontController.ts Normal file
View File

@ -0,0 +1,36 @@
/*
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 SettingController from "./SettingController";
import SettingsStore from "../SettingsStore";
import dis from "../../dispatcher/dispatcher";
import { UpdateSystemFontPayload } from "../../dispatcher/payloads/UpdateSystemFontPayload";
import { Action } from "../../dispatcher/actions";
export default class UseSystemFontController extends SettingController {
constructor() {
super();
}
onChange(level, roomId, newValue) {
// Dispatch font size change so that everything open responds to the change.
dis.dispatch<UpdateSystemFontPayload>({
action: Action.UpdateSystemFont,
useSystemFont: newValue,
font: SettingsStore.getValue("systemFont"),
});
}
}

14
src/settings/watchers/FontWatcher.ts
View File

@ -18,6 +18,8 @@ import dis from '../../dispatcher/dispatcher';
import SettingsStore, {SettingLevel} from '../SettingsStore';
import IWatcher from "./Watcher";
import { toPx } from '../../utils/units';
import { Action } from '../../dispatcher/actions';
import { UpdateSystemFontPayload } from '../../dispatcher/payloads/UpdateSystemFontPayload';
export class FontWatcher implements IWatcher {
public static readonly MIN_SIZE = 8;
@ -33,6 +35,10 @@ export class FontWatcher implements IWatcher {
public start() {
this.setRootFontSize(SettingsStore.getValue("baseFontSize"));
this.setSystemFont({
useSystemFont: SettingsStore.getValue("useSystemFont"),
font: SettingsStore.getValue("systemFont"),
})
this.dispatcherRef = dis.register(this.onAction);
}
@ -41,8 +47,10 @@ export class FontWatcher implements IWatcher {
}
private onAction = (payload) => {
if (payload.action === 'update-font-size') {
if (payload.action === Action.UpdateFontSize) {
this.setRootFontSize(payload.size);
} else if (payload.action === Action.UpdateSystemFont) {
this.setSystemFont(payload)
}
};
@ -54,4 +62,8 @@ export class FontWatcher implements IWatcher {
}
(<HTMLElement>document.querySelector(":root")).style.fontSize = toPx(fontSize);
};
private setSystemFont = ({useSystemFont, font}) => {
document.body.style.fontFamily = useSystemFont ? font : "";
}
}