mirror of
https://github.com/Kong/insomnia
synced 2024-11-07 22:30:15 +00:00
fonts settings UI changed (#4186)
* fonts settings UI changed * Update tooltip messaging * removed fontsMono and font-scanner dependency * remove font-scanner dep Co-authored-by: Opender Singh <opender.singh@konghq.com> Co-authored-by: Jack Kavanagh <jackkav@gmail.com>
This commit is contained in:
Sergiy
GitHub
parent
f3c6ae19a5
commit
1d3cbd3816
14
README.md
14
README.md
@ -64,10 +64,6 @@ sudo apt-get update
|
||||
|
||||
# Install font configuration library & support
|
||||
sudo apt-get install libfontconfig-dev
|
||||
sudo apt-get install font-manager
|
||||
|
||||
# Build capability for required font-scanner package
|
||||
sudo apt-get install build-essential
|
||||
```
|
||||
|
||||
</details>
|
||||
@ -76,16 +72,6 @@ sudo apt-get install build-essential
|
||||
<summary>Fedora</summary>
|
||||
|
||||
```shell
|
||||
# Enable FontManager Copr (https://github.com/FontManager/font-manager#fedora-copr)
|
||||
sudo dnf copr enable jerrycasiano/FontManager
|
||||
|
||||
# Install font configuration library & support
|
||||
sudo dnf install font-manager
|
||||
sudo dnf install fontconfig-devel
|
||||
|
||||
# Build capability for required font-scanner package
|
||||
sudo dnf install make automake gcc gcc-c++ kernel-devel
|
||||
|
||||
# Install libcurl for node-libcurl
|
||||
sudo dnf install libcurl-devel
|
||||
```
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { autoBindMethodsForReact } from 'class-autobind-decorator';
|
||||
import * as fontScanner from 'font-scanner';
|
||||
import { HttpVersion, HttpVersions } from 'insomnia-common';
|
||||
import React, { Fragment, PureComponent } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
@ -37,11 +36,6 @@ import { HelpTooltip } from '../help-tooltip';
|
||||
import { BooleanSetting } from './boolean-setting';
|
||||
import { MaskedSetting } from './masked-setting';
|
||||
|
||||
// Font family regex to match certain monospace fonts that don't get
|
||||
// recognized as monospace
|
||||
|
||||
const FORCED_MONO_FONT_REGEX = /^fixedsys /i;
|
||||
|
||||
interface Props {
|
||||
settings: Settings;
|
||||
hideModal: () => void;
|
||||
@ -49,39 +43,8 @@ interface Props {
|
||||
handleSetActiveActivity: (activity?: GlobalActivity) => void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
fonts: {
|
||||
family: string;
|
||||
monospace: boolean;
|
||||
}[] | null;
|
||||
fontsMono: {
|
||||
family: string;
|
||||
monospace: boolean;
|
||||
}[] | null;
|
||||
}
|
||||
|
||||
@autoBindMethodsForReact(AUTOBIND_CFG)
|
||||
class General extends PureComponent<Props, State> {
|
||||
state: State = {
|
||||
fonts: null,
|
||||
fontsMono: null,
|
||||
};
|
||||
|
||||
async componentDidMount() {
|
||||
const allFonts = await fontScanner.getAvailableFonts();
|
||||
// Find regular fonts
|
||||
const fonts = allFonts
|
||||
.filter(i => ['regular', 'book'].includes(i.style.toLowerCase()) && !i.italic)
|
||||
.sort((a, b) => (a.family > b.family ? 1 : -1));
|
||||
// Find monospaced fonts
|
||||
// NOTE: Also include some others:
|
||||
// - https://github.com/Kong/insomnia/issues/1835
|
||||
const fontsMono = fonts.filter(i => i.monospace || i.family.match(FORCED_MONO_FONT_REGEX));
|
||||
this.setState({
|
||||
fonts,
|
||||
fontsMono,
|
||||
});
|
||||
}
|
||||
class General extends PureComponent<Props> {
|
||||
|
||||
async _handleUpdateSetting(e: React.SyntheticEvent<HTMLInputElement>) {
|
||||
const el = e.currentTarget;
|
||||
@ -184,7 +147,6 @@ class General extends PureComponent<Props, State> {
|
||||
|
||||
render() {
|
||||
const { settings } = this.props;
|
||||
const { fonts, fontsMono } = this.state;
|
||||
return (
|
||||
<div className="pad-bottom">
|
||||
<div className="row-fill row-fill--top">
|
||||
@ -271,62 +233,34 @@ class General extends PureComponent<Props, State> {
|
||||
</div>
|
||||
|
||||
<div className="form-row pad-top-sm">
|
||||
<div className="form-control form-control--outlined">
|
||||
<label>
|
||||
Interface Font
|
||||
{fonts ? (
|
||||
<select
|
||||
name="fontInterface"
|
||||
value={settings.fontInterface || '__NULL__'}
|
||||
// @ts-expect-error -- TSCONVERSION
|
||||
onChange={this._handleFontChange}
|
||||
>
|
||||
<option value="__NULL__">-- System Default --</option>
|
||||
{fonts.map((item, index) => (
|
||||
<option key={index} value={item.family}>
|
||||
{item.family}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<select disabled>
|
||||
<option value="__NULL__">-- Unsupported Platform --</option>
|
||||
</select>
|
||||
<div className="form-row">
|
||||
{this.renderTextSetting(
|
||||
'Interface Font',
|
||||
'fontInterface',
|
||||
'Comma-separated list of fonts. If left empty, takes system defaults.',
|
||||
{
|
||||
placeholder: '-- System Default --',
|
||||
onChange: this._handleFontChange,
|
||||
},
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
{this.renderNumberSetting('Interface Font Size (px)', 'fontSize', '', {
|
||||
min: MIN_INTERFACE_FONT_SIZE,
|
||||
max: MAX_INTERFACE_FONT_SIZE,
|
||||
onBlur: this._handleFontChange,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-control form-control--outlined">
|
||||
<label>
|
||||
Text Editor Font
|
||||
{fontsMono ? (
|
||||
<select
|
||||
name="fontMonospace"
|
||||
value={settings.fontMonospace || '__NULL__'}
|
||||
// @ts-expect-error -- TSCONVERSION
|
||||
onChange={this._handleFontChange}
|
||||
>
|
||||
<option value="__NULL__">-- System Default --</option>
|
||||
{fontsMono.map((item, index) => (
|
||||
<option key={index} value={item.family}>
|
||||
{item.family}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<select disabled>
|
||||
<option value="__NULL__">-- Unsupported Platform --</option>
|
||||
</select>
|
||||
{this.renderTextSetting(
|
||||
'Text Editor Font',
|
||||
'fontMonospace',
|
||||
'Comma-separated list of monospace fonts. If left empty, takes system defaults.',
|
||||
{
|
||||
placeholder: '-- System Default --',
|
||||
onChange: this._handleFontChange,
|
||||
},
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
{this.renderNumberSetting('Editor Font Size (px)', 'editorFontSize', '', {
|
||||
min: MIN_EDITOR_FONT_SIZE,
|
||||
max: MAX_EDITOR_FONT_SIZE,
|
||||
|
||||
8
packages/insomnia-app/package-lock.json
generated
8
packages/insomnia-app/package-lock.json
generated
@ -11956,14 +11956,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"font-scanner": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/font-scanner/-/font-scanner-0.1.2.tgz",
|
||||
"integrity": "sha512-60XIPuzqeTey3P8wo/3t2mvKnjeeKl3O9QFzwk2cypQgJaqYF4Q/eOMSCro3YxCzTDzcGA5q5TtDRZXkI3tx0g==",
|
||||
"requires": {
|
||||
"nan": "^2.14.0"
|
||||
}
|
||||
},
|
||||
"for-in": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
|
||||
|
||||
@ -92,7 +92,6 @@
|
||||
"electron-context-menu": "^2.2.0",
|
||||
"electron-log": "^4.3.5",
|
||||
"electron-updater": "^4.3.9",
|
||||
"font-scanner": "^0.1.2",
|
||||
"framer-motion": "^1.11.1",
|
||||
"fs-extra": "^5.0.0",
|
||||
"fuzzysort": "^1.1.1",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user