diff options
| -rw-r--r-- | src/console/components/Console.tsx | 47 | ||||
| -rw-r--r-- | src/console/components/console.scss | 103 | ||||
| -rw-r--r-- | src/console/components/console/CompletionItem.tsx | 63 | ||||
| -rw-r--r-- | src/console/components/console/CompletionTitle.tsx | 13 | ||||
| -rw-r--r-- | src/console/components/console/Input.tsx | 26 | ||||
| -rw-r--r-- | src/console/components/console/Message.tsx | 31 |
6 files changed, 133 insertions, 150 deletions
diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx index a0e22e4..a23c459 100644 --- a/src/console/components/Console.tsx +++ b/src/console/components/Console.tsx @@ -11,6 +11,13 @@ import CommandLineParser, { } from "../commandline/CommandLineParser"; import { Command } from "../../shared/Command"; import ColorScheme from "../../shared/ColorScheme"; +import { LightTheme, DarkTheme } from "./Theme"; +import styled from "./Theme"; +import { ThemeProvider } from "styled-components"; + +const ConsoleWrapper = styled.div` + border-top: 1px solid gray; +`; const COMPLETION_MAX_ITEMS = 33; @@ -143,28 +150,34 @@ class Console extends React.Component<Props> { case "command": case "find": return ( - <div data-theme={theme} className="vimvixen-console-command-wrapper"> - <Completion - size={COMPLETION_MAX_ITEMS} - completions={this.props.completions} - select={this.props.select} - /> - <Input - ref={this.input} - mode={this.props.mode} - onBlur={this.onBlur.bind(this)} - onKeyDown={this.onKeyDown.bind(this)} - onChange={this.onChange.bind(this)} - value={this.props.consoleText} - /> - </div> + <ThemeProvider + theme={theme === ColorScheme.Dark ? DarkTheme : LightTheme} + > + <ConsoleWrapper> + <Completion + size={COMPLETION_MAX_ITEMS} + completions={this.props.completions} + select={this.props.select} + /> + <Input + ref={this.input} + mode={this.props.mode} + onBlur={this.onBlur.bind(this)} + onKeyDown={this.onKeyDown.bind(this)} + onChange={this.onChange.bind(this)} + value={this.props.consoleText} + /> + </ConsoleWrapper> + </ThemeProvider> ); case "info": case "error": return ( - <div data-theme={theme}> + <ThemeProvider + theme={theme === ColorScheme.Dark ? DarkTheme : LightTheme} + > <Message mode={this.props.mode}>{this.props.messageText}</Message> - </div> + </ThemeProvider> ); default: return null; diff --git a/src/console/components/console.scss b/src/console/components/console.scss index ccb769b..c9ffae7 100644 --- a/src/console/components/console.scss +++ b/src/console/components/console.scss @@ -33,6 +33,18 @@ html, body, * { margin: 0; padding: 0; + + font-style: normal; + font-family: monospace; + font-size: 12px; + line-height: 16px; +} + +input { + font-style: normal; + font-family: monospace; + font-size: 12px; + line-height: 16px; } body { @@ -47,95 +59,4 @@ body { bottom: 0; margin: 0; padding: 0; - - @mixin console-font { - font-style: normal; - font-family: monospace; - font-size: 12px; - line-height: 16px; - } - - &-command-wrapper { - border-top: 1px solid gray; - } - - &-completion { - @include console-font; - - &-title { - background-color: var(--completion-title-background); - color: var(--completion-title-foreground); - font-weight: bold; - margin: 0; - padding: 0; - } - - &-item { - background-color: var(--completion-item-background); - color: var(--completion-item-foreground); - - padding-left: 1.5rem; - background-position: 0 center; - background-size: contain; - background-repeat: no-repeat; - white-space: pre; - - &.vimvixen-completion-selected { - background-color: var(--completion-selected-background); - color: var(--completion-selected-foreground); - } - - &-caption { - display: inline-block; - width: 40%; - text-overflow: ellipsis; - overflow: hidden; - } - - &-url { - display: inline-block; - color: var(--completion-item-description-foreground); - width: 60%; - text-overflow: ellipsis; - overflow: hidden; - } - } - } - - &-message { - @include console-font; - - border-top: 1px solid gray; - } - - &-error { - background-color: var(--console-error-background); - color: var(--console-error-foreground); - font-weight: bold; - } - - &-info { - background-color: var(--console-info-background); - color: var(--console-info-foreground); - font-weight: normal; - } - - &-command { - background-color: var(--command-background); - color: var(--command-foreground); - display: flex; - - &-prompt { - @include console-font; - } - - &-input { - border: none; - flex-grow: 1; - background-color: var(--command-background); - color: var(--command-foreground); - - @include console-font; - } - } } diff --git a/src/console/components/console/CompletionItem.tsx b/src/console/components/console/CompletionItem.tsx index 657f360..da07bf0 100644 --- a/src/console/components/console/CompletionItem.tsx +++ b/src/console/components/console/CompletionItem.tsx @@ -1,5 +1,37 @@ import React from "react"; -import PropTypes from "prop-types"; +import styled from "../Theme"; + +const Container = styled.li<{ icon: string; highlight: boolean }>` + backgroundimage: ${({ icon }) => "url(" + icon + ")"}; + background-color: ${({ highlight, theme }) => + highlight + ? theme.completionSelectedBackground + : theme.completionItemBackground}; + color: ${({ highlight, theme }) => + highlight + ? theme.completionSelectedForeground + : theme.completionItemForeground}; + padding-left: 1.5rem; + background-position: 0 center; + background-size: contain; + background-repeat: no-repeat; + white-space: pre; +`; + +const Caption = styled.span` + display: inline-block; + width: 40%; + text-overflow: ellipsis; + overflow: hidden; +`; + +const Description = styled.span` + display: inline-block; + color: ${({ theme }) => theme.completionItemDescriptionForeground}; + width: 60%; + text-overflow: ellipsis; + overflow: hidden; +`; interface Props { highlight: boolean; @@ -8,28 +40,11 @@ interface Props { icon?: string; } -const CompletionItem = (props: Props) => { - let className = "vimvixen-console-completion-item"; - if (props.highlight) { - className += " vimvixen-completion-selected"; - } - return ( - <li - className={className} - style={{ backgroundImage: "url(" + props.icon + ")" }} - > - <span className="vimvixen-console-completion-item-caption"> - {props.caption} - </span> - <span className="vimvixen-console-completion-item-url">{props.url}</span> - </li> - ); -}; - -CompletionItem.propTypes = { - highlight: PropTypes.bool, - caption: PropTypes.string, - url: PropTypes.string, -}; +const CompletionItem: React.FC<Props> = ({ highlight, caption, url, icon }) => ( + <Container icon={icon || ""} highlight={highlight}> + <Caption>{caption}</Caption> + <Description>{url}</Description> + </Container> +); export default CompletionItem; diff --git a/src/console/components/console/CompletionTitle.tsx b/src/console/components/console/CompletionTitle.tsx index 7257006..55c3c2e 100644 --- a/src/console/components/console/CompletionTitle.tsx +++ b/src/console/components/console/CompletionTitle.tsx @@ -1,11 +1,20 @@ import React from "react"; +import styled from "../Theme"; + +const Li = styled.li` + background-color: ${({ theme }) => theme.completionTitleBackground}; + color: ${({ theme }) => theme.completionTitleForeground}; + font-weight: bold; + margin: 0; + padding: 0; +`; interface Props { title: string; } -const CompletionTitle = (props: Props) => { - return <li className="vimvixen-console-completion-title">{props.title}</li>; +const CompletionTitle: React.FC<Props> = ({ title }) => { + return <Li>{title}</Li>; }; export default CompletionTitle; diff --git a/src/console/components/console/Input.tsx b/src/console/components/console/Input.tsx index e412a0c..61fbc46 100644 --- a/src/console/components/console/Input.tsx +++ b/src/console/components/console/Input.tsx @@ -1,4 +1,22 @@ import React from "react"; +import styled from "../Theme"; + +const Container = styled.div` + background-color: ${({ theme }) => theme.commandBackground}; + color: ${({ theme }) => theme.commandForeground}; + display: flex; +`; + +const Prompt = styled.i` + font-style: normal; +`; + +const InputInner = styled.input` + border: none; + flex-grow: 1; + background-color: ${({ theme }) => theme.commandBackground}; + color: ${({ theme }) => theme.commandForeground}; +`; interface Props { mode: string; @@ -32,9 +50,9 @@ class Input extends React.Component<Props> { } return ( - <div className="vimvixen-console-command"> - <i className="vimvixen-console-command-prompt">{prompt}</i> - <input + <Container> + <Prompt>{prompt}</Prompt> + <InputInner className="vimvixen-console-command-input" ref={this.input} onBlur={this.props.onBlur} @@ -42,7 +60,7 @@ class Input extends React.Component<Props> { onChange={this.props.onChange} value={this.props.value} /> - </div> + </Container> ); } } diff --git a/src/console/components/console/Message.tsx b/src/console/components/console/Message.tsx index fd1c9d7..e039020 100644 --- a/src/console/components/console/Message.tsx +++ b/src/console/components/console/Message.tsx @@ -1,24 +1,31 @@ import React from "react"; +import styled from "../Theme"; + +const Error = styled.p` + border-top: 1px solid gray; + background-color: ${({ theme }) => theme.consoleErrorBackground}; + color: ${({ theme }) => theme.consoleErrorForeground}; + font-weight: bold; +`; + +const Info = styled.p` + border-top: 1px solid gray; + background-color: ${({ theme }) => theme.consoleInfoBackground}; + color: ${({ theme }) => theme.consoleInfoForeground}; + font-weight: normal; +`; interface Props { mode: string; children: string; } -const Message = (props: Props) => { - switch (props.mode) { +const Message: React.FC<Props> = ({ mode, children }) => { + switch (mode) { case "error": - return ( - <p className="vimvixen-console-message vimvixen-console-error"> - {props.children} - </p> - ); + return <Error>{children}</Error>; case "info": - return ( - <p className="vimvixen-console-message vimvixen-console-info"> - {props.children} - </p> - ); + return <Info>{children}</Info>; } return null; }; |