abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-09 10:15:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into cleanup

Browse Source
This commit is contained in:
bree
2021-07-04 21:06:30 -04:00
parent b341f5d166 3881c75779
commit e5d46cc34a
50 changed files with 686 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/pages/settings/panes/Appearance.tsx
View File

@@ -2,15 +2,18 @@ import { Text } from "preact-i18n";
import styles from "./Panes.module.scss";
import { debounce } from "../../../lib/debounce";
import Button from "../../../components/ui/Button";
import Checkbox from "../../../components/ui/Checkbox";
import ComboBox from "../../../components/ui/ComboBox";
import InputBox from "../../../components/ui/InputBox";
import { connectState } from "../../../redux/connector";
import { WithDispatcher } from "../../../redux/reducers";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import ColourSwatches from "../../../components/ui/ColourSwatches";
import { EmojiPacks, Settings } from "../../../redux/reducers/settings";
import { Theme, ThemeContext, ThemeOptions } from "../../../context/Theme";
import { useCallback, useContext, useEffect, useState } from "preact/hooks";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import CollapsibleSection from "../../../components/common/CollapsibleSection";
import { FONTS, FONT_KEYS, MONOSCAPE_FONTS, MONOSCAPE_FONT_KEYS, Theme, ThemeContext, ThemeOptions } from "../../../context/Theme";
// @ts-ignore
import pSBC from 'shade-blend-color';
@@ -129,6 +132,25 @@ export function Component(props: Props & WithDispatcher) {
</Radio>
</div>*/}
<h3>
<Text id="app.settings.pages.appearance.font" />
</h3>
<ComboBox value={theme.font} onChange={e => setTheme({ custom: { font: e.currentTarget.value as any } })}>
{
FONT_KEYS
.map(key =>
<option value={key}>{ FONTS[key as keyof typeof FONTS].name }</option>
)
}
</ComboBox>
<p>
<Checkbox checked={props.settings.theme?.ligatures === true}
onChange={() => setTheme({ ligatures: !props.settings.theme?.ligatures })}
description={<Text id="app.settings.pages.appearance.ligatures_desc" />}>
<Text id="app.settings.pages.appearance.ligatures" />
</Checkbox>
</p>
<h3>
<Text id="app.settings.pages.appearance.emoji_pack" />
</h3>
@@ -171,11 +193,7 @@ export function Component(props: Props & WithDispatcher) {
</div>
</div>
<details>
<summary>
<Text id="app.settings.pages.appearance.advanced" />
<div className={styles.divider}></div>
</summary>
<CollapsibleSection id="settings_advanced_appearance" defaultValue={false} summary={<Text id="app.settings.pages.appearance.advanced" />}>
<h3>
<Text id="app.settings.pages.appearance.overrides" />
</h3>
@@ -263,6 +281,19 @@ export function Component(props: Props & WithDispatcher) {
</div>
))}
</div>
<h3>
<Text id="app.settings.pages.appearance.mono_font" />
</h3>
<ComboBox value={theme.monoscapeFont} onChange={e => setTheme({ custom: { monoscapeFont: e.currentTarget.value as any } })}>
{
MONOSCAPE_FONT_KEYS
.map(key =>
<option value={key}>{ MONOSCAPE_FONTS[key as keyof typeof MONOSCAPE_FONTS].name }</option>
)
}
</ComboBox>
<h3>
<Text id="app.settings.pages.appearance.custom_css" />
</h3>
@@ -272,7 +303,7 @@ export function Component(props: Props & WithDispatcher) {
code
value={css}
onChange={ev => setCSS(ev.currentTarget.value)} />
</details>
</CollapsibleSection>
</div>
);
}