diff options
author | Shin'ya Ueoka <ueokande@i-beam.org> | 2020-05-04 16:18:12 +0900 |
---|---|---|
committer | Shin'ya Ueoka <ueokande@i-beam.org> | 2020-05-04 16:41:51 +0900 |
commit | 65fedca9dfc4b85acce85b9eb3272cfc76d112a7 (patch) | |
tree | 7a0d8a7fbb0a053fb39dc67ef78166ab3c252a98 | |
parent | 614778f6ad2633d90deffe6ef3d373c44967b10c (diff) |
Allow to change color scheme by "colorscheme" property
-rw-r--r-- | src/console/actions/console.ts | 11 | ||||
-rw-r--r-- | src/console/actions/index.ts | 10 | ||||
-rw-r--r-- | src/console/clients/SettingClient.ts | 13 | ||||
-rw-r--r-- | src/console/components/Console.tsx | 23 | ||||
-rw-r--r-- | src/console/index.html | 2 | ||||
-rw-r--r-- | src/console/reducers/index.ts | 8 | ||||
-rw-r--r-- | src/shared/ColorScheme.ts | 7 | ||||
-rw-r--r-- | src/shared/settings/Properties.ts | 6 | ||||
-rw-r--r-- | test/shared/SettingData.test.ts | 13 | ||||
-rw-r--r-- | test/shared/settings/Properties.test.ts | 4 | ||||
-rw-r--r-- | test/shared/settings/Settings.test.ts | 1 |
11 files changed, 86 insertions, 12 deletions
diff --git a/src/console/actions/console.ts b/src/console/actions/console.ts index 6282791..16d33b3 100644 --- a/src/console/actions/console.ts +++ b/src/console/actions/console.ts @@ -2,11 +2,13 @@ import * as messages from "../../shared/messages"; import * as actions from "./index"; import { Command } from "../../shared/Command"; import CompletionClient from "../clients/CompletionClient"; +import SettingClient from "../clients/SettingClient"; import CompletionType from "../../shared/CompletionType"; import Completions from "../Completions"; import TabFlag from "../../shared/TabFlag"; const completionClient = new CompletionClient(); +const settingClient = new SettingClient(); const commandDocs = { [Command.Set]: "Set a value of the property", @@ -272,6 +274,14 @@ const completionPrev = (): actions.CompletionPrevAction => { }; }; +const setColorScheme = async (): Promise<actions.SetColorSchemeAction> => { + const scheme = await settingClient.getColorScheme(); + return { + type: actions.CONSOLE_SET_COLORSCHEME, + colorscheme: scheme, + }; +}; + export { hide, showCommand, @@ -288,4 +298,5 @@ export { getPropertyCompletions, completionNext, completionPrev, + setColorScheme, }; diff --git a/src/console/actions/index.ts b/src/console/actions/index.ts index 308a093..6c1c759 100644 --- a/src/console/actions/index.ts +++ b/src/console/actions/index.ts @@ -1,5 +1,6 @@ import Completions from "../Completions"; import CompletionType from "../../shared/CompletionType"; +import ColorScheme from "../../shared/ColorScheme"; export const CONSOLE_HIDE = "console.hide"; export const CONSOLE_SHOW_COMMAND = "console.show.command"; @@ -11,6 +12,7 @@ export const CONSOLE_SET_COMPLETIONS = "console.set.completions"; export const CONSOLE_COMPLETION_NEXT = "console.completion.next"; export const CONSOLE_COMPLETION_PREV = "console.completion.prev"; export const CONSOLE_SHOW_FIND = "console.show.find"; +export const CONSOLE_SET_COLORSCHEME = "console.set.colorscheme"; export interface HideAction { type: typeof CONSOLE_HIDE; @@ -59,6 +61,11 @@ export interface CompletionPrevAction { type: typeof CONSOLE_COMPLETION_PREV; } +export interface SetColorSchemeAction { + type: typeof CONSOLE_SET_COLORSCHEME; + colorscheme: ColorScheme; +} + export type ConsoleAction = | HideAction | ShowCommand @@ -69,4 +76,5 @@ export type ConsoleAction = | SetConsoleTextAction | SetCompletionsAction | CompletionNextAction - | CompletionPrevAction; + | CompletionPrevAction + | SetColorSchemeAction; diff --git a/src/console/clients/SettingClient.ts b/src/console/clients/SettingClient.ts new file mode 100644 index 0000000..f75517a --- /dev/null +++ b/src/console/clients/SettingClient.ts @@ -0,0 +1,13 @@ +import Settings from "../../shared/settings/Settings"; +import * as messages from "../../shared/messages"; +import ColorScheme from "../../shared/ColorScheme"; + +export default class SettingClient { + async getColorScheme(): Promise<ColorScheme> { + const json = await browser.runtime.sendMessage({ + type: messages.SETTINGS_QUERY, + }); + const settings = Settings.fromJSON(json); + return settings.properties.colorscheme; + } +} diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx index d74040d..a0e22e4 100644 --- a/src/console/components/Console.tsx +++ b/src/console/components/Console.tsx @@ -10,6 +10,7 @@ import CommandLineParser, { InputPhase, } from "../commandline/CommandLineParser"; import { Command } from "../../shared/Command"; +import ColorScheme from "../../shared/ColorScheme"; const COMPLETION_MAX_ITEMS = 33; @@ -126,11 +127,23 @@ class Console extends React.Component<Props> { } render() { + let theme = this.props.colorscheme; + if (this.props.colorscheme === ColorScheme.System) { + if ( + window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches + ) { + theme = ColorScheme.Dark; + } else { + theme = ColorScheme.Light; + } + } + switch (this.props.mode) { case "command": case "find": return ( - <div className="vimvixen-console-command-wrapper"> + <div data-theme={theme} className="vimvixen-console-command-wrapper"> <Completion size={COMPLETION_MAX_ITEMS} completions={this.props.completions} @@ -149,14 +162,18 @@ class Console extends React.Component<Props> { case "info": case "error": return ( - <Message mode={this.props.mode}>{this.props.messageText}</Message> + <div data-theme={theme}> + <Message mode={this.props.mode}>{this.props.messageText}</Message> + </div> ); default: return null; } } - focus() { + async focus() { + this.props.dispatch(consoleActions.setColorScheme()); + window.focus(); if (this.input.current) { this.input.current.focus(); diff --git a/src/console/index.html b/src/console/index.html index 3704071..73e1e23 100644 --- a/src/console/index.html +++ b/src/console/index.html @@ -5,7 +5,7 @@ <title>VimVixen console</title> <script src='console.js'></script> </head> - <body data-theme="light"> + <body> <div id='vimvixen-console' class='vimvixen-console'></div> </body> </html> diff --git a/src/console/reducers/index.ts b/src/console/reducers/index.ts index f2ffed7..752dfd9 100644 --- a/src/console/reducers/index.ts +++ b/src/console/reducers/index.ts @@ -1,6 +1,7 @@ import * as actions from "../actions"; import Completions from "../Completions"; import CompletionType from "../../shared/CompletionType"; +import ColorScheme from "../../shared/ColorScheme"; export interface State { mode: string; @@ -11,6 +12,7 @@ export interface State { completions: Completions; select: number; viewIndex: number; + colorscheme: ColorScheme; } const defaultState = { @@ -22,6 +24,7 @@ const defaultState = { completions: [], select: -1, viewIndex: 0, + colorscheme: ColorScheme.System, }; const nextSelection = (state: State): number => { @@ -122,6 +125,11 @@ export default function reducer( ), }; } + case actions.CONSOLE_SET_COLORSCHEME: + return { + ...state, + colorscheme: action.colorscheme, + }; default: return state; } diff --git a/src/shared/ColorScheme.ts b/src/shared/ColorScheme.ts new file mode 100644 index 0000000..a7b874e --- /dev/null +++ b/src/shared/ColorScheme.ts @@ -0,0 +1,7 @@ +enum ColorScheme { + System = "system", + Light = "light", + Dark = "dark", +} + +export default ColorScheme; diff --git a/src/shared/settings/Properties.ts b/src/shared/settings/Properties.ts index 529ecfc..7540c8a 100644 --- a/src/shared/settings/Properties.ts +++ b/src/shared/settings/Properties.ts @@ -1,8 +1,4 @@ -enum ColorScheme { - System = "system", - Light = "light", - Dark = "dark", -} +import ColorScheme from "../ColorScheme"; export type PropertiesJSON = { hintchars?: string; diff --git a/test/shared/SettingData.test.ts b/test/shared/SettingData.test.ts index 283daa5..3cfd5c9 100644 --- a/test/shared/SettingData.test.ts +++ b/test/shared/SettingData.test.ts @@ -6,6 +6,7 @@ import SettingData, { import Settings from "../../src/shared/settings/Settings"; import { expect } from "chai"; import Keymaps from "../../src/shared/settings/Keymaps"; +import ColorScheme from "../../src/shared/ColorScheme"; describe("shared/SettingData", () => { describe("FormKeymaps", () => { @@ -54,7 +55,8 @@ describe("shared/SettingData", () => { "properties": { "hintchars": "abcdefghijklmnopqrstuvwxyz", "smoothscroll": false, - "complete": "sbh" + "complete": "sbh", + "colorscheme": "system" }, "blacklist": [] }`; @@ -104,6 +106,7 @@ describe("shared/SettingData", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: ColorScheme.System, }, blacklist: [], }; @@ -124,6 +127,7 @@ describe("shared/SettingData", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: "system", }, blacklist: [], }); @@ -147,6 +151,7 @@ describe("shared/SettingData", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: ColorScheme.System, }, blacklist: [], }); @@ -165,6 +170,7 @@ describe("shared/SettingData", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: "system", }, blacklist: [], }); @@ -188,7 +194,8 @@ describe("shared/SettingData", () => { "properties": { "hintchars": "abcdefghijklmnopqrstuvwxyz", "smoothscroll": false, - "complete": "sbh" + "complete": "sbh", + "colorscheme": "system" }, "blacklist": [] }`, @@ -212,6 +219,7 @@ describe("shared/SettingData", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: ColorScheme.System, }, blacklist: [], }, @@ -229,6 +237,7 @@ describe("shared/SettingData", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: "system", }, blacklist: [], }); diff --git a/test/shared/settings/Properties.test.ts b/test/shared/settings/Properties.test.ts index 6007e84..647cb1c 100644 --- a/test/shared/settings/Properties.test.ts +++ b/test/shared/settings/Properties.test.ts @@ -1,5 +1,6 @@ import Properties from "../../../src/shared/settings/Properties"; import { expect } from "chai"; +import ColorScheme from "../../../src/shared/ColorScheme"; describe("Properties", () => { describe("#propertiesValueOf", () => { @@ -9,6 +10,7 @@ describe("Properties", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: "system", }); }); @@ -17,12 +19,14 @@ describe("Properties", () => { hintchars: "abcdefgh", smoothscroll: false, complete: "sbh", + colorscheme: ColorScheme.System, }); expect(props).to.deep.equal({ hintchars: "abcdefgh", smoothscroll: false, complete: "sbh", + colorscheme: "system", }); }); }); diff --git a/test/shared/settings/Settings.test.ts b/test/shared/settings/Settings.test.ts index 4ecfe77..951c9cd 100644 --- a/test/shared/settings/Settings.test.ts +++ b/test/shared/settings/Settings.test.ts @@ -33,6 +33,7 @@ describe("Settings", () => { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: "system", }, blacklist: [], }); |