aboutsummaryrefslogtreecommitdiff
path: root/src/settings/components/form
diff options
context:
space:
mode:
Diffstat (limited to 'src/settings/components/form')
-rw-r--r--src/settings/components/form/BlacklistForm.scss9
-rw-r--r--src/settings/components/form/BlacklistForm.tsx83
-rw-r--r--src/settings/components/form/KeymapsForm.scss11
-rw-r--r--src/settings/components/form/KeymapsForm.tsx27
-rw-r--r--src/settings/components/form/PartialBlacklistForm.scss28
-rw-r--r--src/settings/components/form/PartialBlacklistForm.tsx126
-rw-r--r--src/settings/components/form/PropertiesForm.scss12
-rw-r--r--src/settings/components/form/PropertiesForm.tsx33
-rw-r--r--src/settings/components/form/SearchForm.scss28
-rw-r--r--src/settings/components/form/SearchForm.tsx137
10 files changed, 273 insertions, 221 deletions
diff --git a/src/settings/components/form/BlacklistForm.scss b/src/settings/components/form/BlacklistForm.scss
deleted file mode 100644
index a230d0d..0000000
--- a/src/settings/components/form/BlacklistForm.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.form-blacklist-form {
- &-row {
- display: flex;
-
- .column-url {
- flex: 1;
- }
- }
-}
diff --git a/src/settings/components/form/BlacklistForm.tsx b/src/settings/components/form/BlacklistForm.tsx
index 859cb9f..6fb9eca 100644
--- a/src/settings/components/form/BlacklistForm.tsx
+++ b/src/settings/components/form/BlacklistForm.tsx
@@ -1,9 +1,29 @@
-import "./BlacklistForm.scss";
+import styled from "styled-components";
import AddButton from "../ui/AddButton";
import DeleteButton from "../ui/DeleteButton";
import React from "react";
import Blacklist, { BlacklistItem } from "../../../shared/settings/Blacklist";
+const Grid = styled.div``;
+
+const GridRow = styled.div`
+ display: flex;
+`;
+
+const GridCell = styled.div<{ grow?: number }>`
+ &:nth-child(1) {
+ flex-grow: 1;
+ }
+ &:nth-child(2) {
+ flex-shrink: 1;
+ }
+`;
+
+const Input = styled.input`
+ width: 100%;
+ box-sizing: border-box;
+`;
+
interface Props {
value: Blacklist;
onChange: (value: Blacklist) => void;
@@ -19,37 +39,46 @@ class BlacklistForm extends React.Component<Props> {
render() {
return (
- <div className="form-blacklist-form">
- {this.props.value.items.map((item, index) => {
- if (item.partial) {
- return null;
- }
- return (
- <div key={index} className="form-blacklist-form-row">
- <input
- data-index={index}
- type="text"
- name="url"
- className="column-url"
- value={item.pattern}
- onChange={this.bindValue.bind(this)}
- onBlur={this.props.onBlur}
- />
- <DeleteButton
- data-index={index}
- name="delete"
- onClick={this.bindValue.bind(this)}
- onBlur={this.props.onBlur}
- />
- </div>
- );
- })}
+ <>
+ <Grid role="list">
+ {this.props.value.items.map((item, index) => {
+ if (item.partial) {
+ return null;
+ }
+ return (
+ <GridRow role="listitem" key={index}>
+ <GridCell>
+ <Input
+ data-index={index}
+ type="text"
+ name="url"
+ aria-label="URL"
+ value={item.pattern}
+ placeholder="example.com/mail/*"
+ onChange={this.bindValue.bind(this)}
+ onBlur={this.props.onBlur}
+ />
+ </GridCell>
+ <GridCell>
+ <DeleteButton
+ data-index={index}
+ name="delete"
+ onClick={this.bindValue.bind(this)}
+ onBlur={this.props.onBlur}
+ aria-label="Delete"
+ />
+ </GridCell>
+ </GridRow>
+ );
+ })}
+ </Grid>
<AddButton
name="add"
+ aria-label="Add"
style={{ float: "right" }}
onClick={this.bindValue.bind(this)}
/>
- </div>
+ </>
);
}
diff --git a/src/settings/components/form/KeymapsForm.scss b/src/settings/components/form/KeymapsForm.scss
deleted file mode 100644
index 1a4e5cd..0000000
--- a/src/settings/components/form/KeymapsForm.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.form-keymaps-form {
- column-count: 3;
-
- &-field-group {
- margin-top: 24px;
- }
-
- &-field-group:first-of-type {
- margin-top: 24px;
- }
-}
diff --git a/src/settings/components/form/KeymapsForm.tsx b/src/settings/components/form/KeymapsForm.tsx
index b9af0df..6582529 100644
--- a/src/settings/components/form/KeymapsForm.tsx
+++ b/src/settings/components/form/KeymapsForm.tsx
@@ -1,9 +1,21 @@
-import "./KeymapsForm.scss";
import React from "react";
-import Input from "../ui/Input";
+import styled from "styled-components";
+import Text from "../ui/Text";
import keymaps from "../../keymaps";
import { FormKeymaps } from "../../../shared/SettingData";
+const Grid = styled.div`
+ column-count: 3;
+`;
+
+const FieldGroup = styled.div`
+ margin-top: 24px;
+
+ &:first-of-type {
+ margin-top: 24px;
+ }
+`;
+
interface Props {
value: FormKeymaps;
onChange: (e: FormKeymaps) => void;
@@ -20,15 +32,14 @@ class KeymapsForm extends React.Component<Props> {
render() {
const values = this.props.value.toJSON();
return (
- <div className="form-keymaps-form">
+ <Grid>
{keymaps.fields.map((group, index) => {
return (
- <div key={index} className="form-keymaps-form-field-group">
+ <FieldGroup key={index}>
{group.map(([name, label]) => {
const value = values[name] || "";
return (
- <Input
- type="text"
+ <Text
id={name}
name={name}
key={name}
@@ -39,10 +50,10 @@ class KeymapsForm extends React.Component<Props> {
/>
);
})}
- </div>
+ </FieldGroup>
);
})}
- </div>
+ </Grid>
);
}
diff --git a/src/settings/components/form/PartialBlacklistForm.scss b/src/settings/components/form/PartialBlacklistForm.scss
deleted file mode 100644
index caf6f93..0000000
--- a/src/settings/components/form/PartialBlacklistForm.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.form-partial-blacklist-form {
- @mixin row-base {
- display: flex;
-
- .column-url {
- flex: 5;
- min-width: 0;
- }
- .column-keys {
- flex: 1;
- min-width: 0;
- }
- .column-delete {
- flex: 1;
- min-width: 0;
- }
- }
-
- &-header {
- @include row-base;
-
- font-weight: bold;
- }
-
- &-row {
- @include row-base;
- }
-}
diff --git a/src/settings/components/form/PartialBlacklistForm.tsx b/src/settings/components/form/PartialBlacklistForm.tsx
index 95beee8..b2da2bb 100644
--- a/src/settings/components/form/PartialBlacklistForm.tsx
+++ b/src/settings/components/form/PartialBlacklistForm.tsx
@@ -1,9 +1,41 @@
-import "./PartialBlacklistForm.scss";
+import React from "react";
+import styled from "styled-components";
import AddButton from "../ui/AddButton";
import DeleteButton from "../ui/DeleteButton";
-import React from "react";
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;
+`;
+
+const GridCell = styled.div<{ grow?: number }>`
+ &:nth-child(1) {
+ flex-grow: 5;
+ }
+
+ &:nth-child(2) {
+ flex-shrink: 1;
+ min-width: 20%;
+ max-width: 20%;
+ }
+
+ &:nth-child(3) {
+ flex-shrink: 1;
+ }
+`;
+
+const Input = styled.input`
+ width: 100%;
+ box-sizing: border-box;
+`;
+
interface Props {
value: Blacklist;
onChange: (value: Blacklist) => void;
@@ -19,50 +51,62 @@ class PartialBlacklistForm extends React.Component<Props> {
render() {
return (
- <div className="form-partial-blacklist-form">
- <div className="form-partial-blacklist-form-header">
- <div className="column-url">URL</div>
- <div className="column-keys">Keys</div>
- </div>
- {this.props.value.items.map((item, index) => {
- if (!item.partial) {
- return null;
- }
- return (
- <div key={index} className="form-partial-blacklist-form-row">
- <input
- data-index={index}
- type="text"
- name="url"
- className="column-url"
- value={item.pattern}
- onChange={this.bindValue.bind(this)}
- onBlur={this.props.onBlur}
- />
- <input
- data-index={index}
- type="text"
- name="keys"
- className="column-keys"
- value={item.keys.join(",")}
- onChange={this.bindValue.bind(this)}
- onBlur={this.props.onBlur}
- />
- <DeleteButton
- data-index={index}
- name="delete"
- onClick={this.bindValue.bind(this)}
- onBlur={this.props.onBlur}
- />
- </div>
- );
- })}
+ <>
+ <Grid role="list">
+ <GridHeader>
+ <GridCell>URL</GridCell>
+ <GridCell>Keys</GridCell>
+ </GridHeader>
+ {this.props.value.items.map((item, index) => {
+ if (!item.partial) {
+ return null;
+ }
+ return (
+ <GridRow key={index} role="listitem">
+ <GridCell>
+ <Input
+ data-index={index}
+ type="text"
+ name="url"
+ aria-label="URL"
+ value={item.pattern}
+ placeholder="example.com/mail/*"
+ onChange={this.bindValue.bind(this)}
+ onBlur={this.props.onBlur}
+ />
+ </GridCell>
+ <GridCell>
+ <Input
+ data-index={index}
+ type="text"
+ name="keys"
+ aria-label="Keys"
+ value={item.keys.join(",")}
+ placeholder="j,k,<C-d>,<C-u>"
+ onChange={this.bindValue.bind(this)}
+ onBlur={this.props.onBlur}
+ />
+ </GridCell>
+ <GridCell>
+ <DeleteButton
+ data-index={index}
+ name="delete"
+ aria-label="Delete"
+ onClick={this.bindValue.bind(this)}
+ onBlur={this.props.onBlur}
+ />
+ </GridCell>
+ </GridRow>
+ );
+ })}
+ </Grid>
<AddButton
name="add"
+ aria-label="Add"
style={{ float: "right" }}
onClick={this.bindValue.bind(this)}
/>
- </div>
+ </>
);
}
diff --git a/src/settings/components/form/PropertiesForm.scss b/src/settings/components/form/PropertiesForm.scss
deleted file mode 100644
index 7c9e167..0000000
--- a/src/settings/components/form/PropertiesForm.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.form-properties-form {
- &-row {
- .column-name {
- display: inline-block;
- min-width: 5rem;
- font-weight: bold;
- }
- .column-input {
- line-height: 2.2rem;
- }
- }
-}
diff --git a/src/settings/components/form/PropertiesForm.tsx b/src/settings/components/form/PropertiesForm.tsx
index aebd9b1..53ebf03 100644
--- a/src/settings/components/form/PropertiesForm.tsx
+++ b/src/settings/components/form/PropertiesForm.tsx
@@ -1,6 +1,20 @@
-import "./PropertiesForm.scss";
+import styled from "styled-components";
import React from "react";
+const Form = styled.div``;
+
+const Row = styled.div``;
+
+const Label = styled.label`
+ display: inline-block;
+ min-width: 5rem;
+ font-weight: bold;
+`;
+
+const Input = styled.input`
+ line-height: 2.2rem;
+`;
+
interface Props {
types: { [key: string]: string };
value: { [key: string]: any };
@@ -21,7 +35,7 @@ class PropertiesForm extends React.Component<Props> {
const values = this.props.value;
return (
- <div className="form-properties-form">
+ <Form>
{Object.keys(types).map((name) => {
const type = types[name];
let inputType = "";
@@ -42,23 +56,22 @@ class PropertiesForm extends React.Component<Props> {
return null;
}
return (
- <div key={name} className="form-properties-form-row">
- <label>
- <span className="column-name">{name}</span>
- <input
+ <Row key={name}>
+ <Label>
+ <span>{name}</span>
+ <Input
type={inputType}
name={name}
- className="column-input"
value={values[name] ? values[name] : ""}
onChange={onChange}
onBlur={this.props.onBlur}
checked={values[name]}
/>
- </label>
- </div>
+ </Label>
+ </Row>
);
})}
- </div>
+ </Form>
);
}
diff --git a/src/settings/components/form/SearchForm.scss b/src/settings/components/form/SearchForm.scss
deleted file mode 100644
index 26b2f44..0000000
--- a/src/settings/components/form/SearchForm.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.form-search-form {
- @mixin row-base {
- display: flex;
-
- .column-name {
- flex: 1;
- min-width: 0;
- }
- .column-url {
- flex: 5;
- min-width: 0;
- }
- .column-option {
- text-align: right;
- flex-basis: 5rem;
- }
- }
-
- &-header {
- @include row-base;
-
- font-weight: bold;
- }
-
- &-row {
- @include row-base;
- }
-}
diff --git a/src/settings/components/form/SearchForm.tsx b/src/settings/components/form/SearchForm.tsx
index a4d923d..4bf0e02 100644
--- a/src/settings/components/form/SearchForm.tsx
+++ b/src/settings/components/form/SearchForm.tsx
@@ -1,9 +1,42 @@
-import "./SearchForm.scss";
import React from "react";
+import styled from "styled-components";
import AddButton from "../ui/AddButton";
import DeleteButton from "../ui/DeleteButton";
import { FormSearch } from "../../../shared/SettingData";
+const Grid = styled.div``;
+
+const GridHeader = styled.div`
+ display: flex;
+ font-weight: bold;
+`;
+
+const GridRow = styled.div`
+ display: flex;
+`;
+
+const GridCell = styled.div<{ grow?: number }>`
+ &:nth-child(1) {
+ flex-grow: 0;
+ min-width: 10%;
+ max-width: 10%;
+ }
+
+ &:nth-child(2) {
+ flex-grow: 2;
+ }
+
+ &:nth-child(3) {
+ flex-grow: 0;
+ flex-shrink: 1;
+ }
+`;
+
+const Input = styled.input`
+ width: 100%;
+ box-sizing: border-box;
+`;
+
interface Props {
value: FormSearch;
onChange: (value: FormSearch) => void;
@@ -20,57 +53,67 @@ class SearchForm extends React.Component<Props> {
render() {
const value = this.props.value.toJSON();
return (
- <div className="form-search-form">
- <div className="form-search-form-header">
- <div className="column-name">Name</div>
- <div className="column-url">URL</div>
- <div className="column-option">Default</div>
- </div>
- {value.engines.map((engine, index) => {
- return (
- <div key={index} className="form-search-form-row">
- <input
- data-index={index}
- type="text"
- name="name"
- className="column-name"
- value={engine[0]}
- onChange={this.bindValue.bind(this)}
- onBlur={this.props.onBlur}
- />
- <input
- data-index={index}
- type="text"
- name="url"
- placeholder="http://example.com/?q={}"
- className="column-url"
- value={engine[1]}
- onChange={this.bindValue.bind(this)}
- onBlur={this.props.onBlur}
- />
- <div className="column-option">
- <input
- data-index={index}
- type="radio"
- name="default"
- checked={value.default === engine[0]}
- onChange={this.bindValue.bind(this)}
- />
- <DeleteButton
- data-index={index}
- name="delete"
- onClick={this.bindValue.bind(this)}
- />
- </div>
- </div>
- );
- })}
+ <>
+ <Grid role="list">
+ <GridHeader>
+ <GridCell>Name</GridCell>
+ <GridCell>URL</GridCell>
+ <GridCell>Default</GridCell>
+ </GridHeader>
+ {value.engines.map((engine, index) => {
+ return (
+ <GridRow key={index} role="listitem">
+ <GridCell>
+ <Input
+ data-index={index}
+ type="text"
+ name="name"
+ aria-label="Name"
+ value={engine[0]}
+ onChange={this.bindValue.bind(this)}
+ onBlur={this.props.onBlur}
+ />
+ </GridCell>
+ <GridCell>
+ <Input
+ data-index={index}
+ type="text"
+ name="url"
+ aria-label="URL"
+ placeholder="http://example.com/?q={}"
+ value={engine[1]}
+ onChange={this.bindValue.bind(this)}
+ onBlur={this.props.onBlur}
+ />
+ </GridCell>
+ <GridCell>
+ <input
+ data-index={index}
+ type="radio"
+ name="default"
+ aria-label="Default"
+ checked={value.default === engine[0]}
+ onChange={this.bindValue.bind(this)}
+ />
+ a
+ <DeleteButton
+ data-index={index}
+ aria-label="Delete"
+ name="delete"
+ onClick={this.bindValue.bind(this)}
+ />
+ </GridCell>
+ </GridRow>
+ );
+ })}
+ </Grid>
<AddButton
name="add"
+ aria-label="Add"
style={{ float: "right" }}
onClick={this.bindValue.bind(this)}
/>
- </div>
+ </>
);
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-16 11:02:01 +0000