diff options
Diffstat (limited to 'src/settings/components')
| -rw-r--r-- | src/settings/components/form/PartialBlacklistForm.tsx | 9 | ||||
| -rw-r--r-- | src/settings/components/form/SearchForm.tsx | 9 | ||||
| -rw-r--r-- | src/settings/components/index.tsx | 96 | ||||
| -rw-r--r-- | src/settings/components/site.scss | 21 |
4 files changed, 72 insertions, 63 deletions
diff --git a/src/settings/components/form/PartialBlacklistForm.tsx b/src/settings/components/form/PartialBlacklistForm.tsx index 4c6bd35..dcdd00c 100644 --- a/src/settings/components/form/PartialBlacklistForm.tsx +++ b/src/settings/components/form/PartialBlacklistForm.tsx @@ -6,6 +6,11 @@ import Blacklist, { BlacklistItem } from "../../../shared/settings/Blacklist"; const Grid = styled.div``; +const GridHeader = styled.div` + display: flex; + font-weight: bold; +`; + const GridRow = styled.div` display: flex; `; @@ -48,10 +53,10 @@ class PartialBlacklistForm extends React.Component<Props> { return ( <> <Grid> - <GridRow> + <GridHeader> <GridCell>URL</GridCell> <GridCell>Keys</GridCell> - </GridRow> + </GridHeader> {this.props.value.items.map((item, index) => { if (!item.partial) { return null; diff --git a/src/settings/components/form/SearchForm.tsx b/src/settings/components/form/SearchForm.tsx index 3ba0299..cc7061a 100644 --- a/src/settings/components/form/SearchForm.tsx +++ b/src/settings/components/form/SearchForm.tsx @@ -6,6 +6,11 @@ import { FormSearch } from "../../../shared/SettingData"; const Grid = styled.div``; +const GridHeader = styled.div` + display: flex; + font-weight: bold; +`; + const GridRow = styled.div` display: flex; `; @@ -50,11 +55,11 @@ class SearchForm extends React.Component<Props> { return ( <> <Grid> - <GridRow> + <GridHeader> <GridCell>Name</GridCell> <GridCell>URL</GridCell> <GridCell>Default</GridCell> - </GridRow> + </GridHeader> {value.engines.map((engine, index) => { return ( <GridRow key={index}> diff --git a/src/settings/components/index.tsx b/src/settings/components/index.tsx index d204210..2e2ff52 100644 --- a/src/settings/components/index.tsx +++ b/src/settings/components/index.tsx @@ -1,6 +1,6 @@ -import "./site.scss"; import React from "react"; import { connect } from "react-redux"; +import styled from "styled-components"; import TextArea from "./ui/TextArea"; import Radio from "./ui/Radio"; import SearchForm from "./form/SearchForm"; @@ -19,6 +19,28 @@ import { State as AppState } from "../reducers/setting"; import Properties from "../../shared/settings/Properties"; import Blacklist from "../../shared/settings/Blacklist"; +const Container = styled.form` + padding: 2px; + font-family: system-ui; +`; + +const Fieldset = styled.fieldset` + margin: 0; + padding: 0; + border: none; + margin-top: 1rem; + + &:first-of-type { + margin-top: 1rem; + } +`; + +const Legend = styled.legend` + font-size: 1.5rem; + padding: 0.5rem 0; + font-weight: bold; +`; + const DO_YOU_WANT_TO_CONTINUE = "Some settings in JSON can be lost when migrating. " + "Do you want to continue?"; @@ -41,47 +63,47 @@ class SettingsComponent extends React.Component<Props> { renderFormFields(form: FormSettings) { return ( <div> - <fieldset> - <legend>Keybindings</legend> + <Fieldset> + <Legend>Keybindings</Legend> <KeymapsForm value={form.keymaps} onChange={this.bindKeymapsForm.bind(this)} onBlur={this.save.bind(this)} /> - </fieldset> - <fieldset> - <legend>Search Engines</legend> + </Fieldset> + <Fieldset> + <Legend>Search Engines</Legend> <SearchForm value={form.search} onChange={this.bindSearchForm.bind(this)} onBlur={this.save.bind(this)} /> - </fieldset> - <fieldset> - <legend>Blacklist</legend> + </Fieldset> + <Fieldset> + <Legend>Blacklist</Legend> <BlacklistForm value={form.blacklist} onChange={this.bindBlacklistForm.bind(this)} onBlur={this.save.bind(this)} /> - </fieldset> - <fieldset> - <legend>Partial blacklist</legend> + </Fieldset> + <Fieldset> + <Legend>Partial blacklist</Legend> <PartialBlacklistForm value={form.blacklist} onChange={this.bindBlacklistForm.bind(this)} onBlur={this.save.bind(this)} /> - </fieldset> - <fieldset> - <legend>Properties</legend> + </Fieldset> + <Fieldset> + <Legend>Properties</Legend> <PropertiesForm types={Properties.types()} value={form.properties.toJSON()} onChange={this.bindPropertiesForm.bind(this)} onBlur={this.save.bind(this)} /> - </fieldset> + </Fieldset> </div> ); } @@ -111,30 +133,28 @@ class SettingsComponent extends React.Component<Props> { fields = this.renderJsonFields(this.props.json!, this.props.error); } return ( - <div> + <Container> <h1>Configure Vim-Vixen</h1> - <form className="vimvixen-settings-form"> - <Radio - id="setting-source-form" - name="source" - label="Use form" - checked={this.props.source === "form"} - value="form" - onValueChange={this.bindSource.bind(this)} - disabled={disabled} - /> + <Radio + id="setting-source-form" + name="source" + label="Use form" + checked={this.props.source === "form"} + value="form" + onValueChange={this.bindSource.bind(this)} + disabled={disabled} + /> - <Radio - name="source" - label="Use plain JSON" - checked={this.props.source === "json"} - value="json" - onValueChange={this.bindSource.bind(this)} - disabled={disabled} - /> - {fields} - </form> - </div> + <Radio + name="source" + label="Use plain JSON" + checked={this.props.source === "json"} + value="json" + onValueChange={this.bindSource.bind(this)} + disabled={disabled} + /> + {fields} + </Container> ); } diff --git a/src/settings/components/site.scss b/src/settings/components/site.scss deleted file mode 100644 index e8415e8..0000000 --- a/src/settings/components/site.scss +++ /dev/null @@ -1,21 +0,0 @@ -.vimvixen-settings-form { - padding: 2px; - font-family: system-ui; - - fieldset { - margin: 0; - padding: 0; - border: none; - margin-top: 1rem; - - fieldset:first-of-type { - margin-top: 1rem; - } - - legend { - font-size: 1.5rem; - padding: .5rem 0; - font-weight: bold; - } - } -} |