From e1e7c2d4d86d7aeb40357add27c76a99a18350e7 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Mon, 21 Sep 2020 21:15:46 +0900
Subject: Introduce styled-components on top of form
---
.../components/form/PartialBlacklistForm.tsx | 9 +-
src/settings/components/form/SearchForm.tsx | 9 +-
src/settings/components/index.tsx | 96 +++++++++++++---------
src/settings/components/site.scss | 21 -----
4 files changed, 72 insertions(+), 63 deletions(-)
delete mode 100644 src/settings/components/site.scss
(limited to 'src/settings')
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;
- }
- }
-}
--
cgit v1.2.3