From 36ba30de1d0d97209db6df4083beed3993e61195 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 4 May 2020 14:56:25 +0900 Subject: Add colorscheme property --- src/shared/settings/Properties.ts | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) (limited to 'src/shared/settings/Properties.ts') diff --git a/src/shared/settings/Properties.ts b/src/shared/settings/Properties.ts index cf10d61..38f1d3b 100644 --- a/src/shared/settings/Properties.ts +++ b/src/shared/settings/Properties.ts @@ -1,16 +1,24 @@ +enum ColorScheme { + System = "system", + Light = "light", + Dark = "dark", +} + export type PropertiesJSON = { hintchars?: string; smoothscroll?: boolean; complete?: string; + colorscheme?: ColorScheme; }; export type PropertyTypes = { hintchars: string; smoothscroll: string; complete: string; + colorscheme: string; }; -type PropertyName = "hintchars" | "smoothscroll" | "complete"; +type PropertyName = "hintchars" | "smoothscroll" | "complete" | "colorscheme"; type PropertyDef = { name: PropertyName; @@ -38,12 +46,19 @@ const defs: PropertyDef[] = [ defaultValue: "sbh", type: "string", }, + { + name: "colorscheme", + description: "color scheme of the console", + defaultValue: ColorScheme.System, + type: "string", + }, ]; const defaultValues = { hintchars: "abcdefghijklmnopqrstuvwxyz", smoothscroll: false, complete: "sbh", + colorscheme: ColorScheme.System, }; export default class Properties { @@ -53,18 +68,23 @@ export default class Properties { public complete: string; + public colorscheme: ColorScheme; + constructor({ hintchars, smoothscroll, complete, + colorscheme, }: { hintchars?: string; smoothscroll?: boolean; complete?: string; + colorscheme?: ColorScheme; } = {}) { this.hintchars = hintchars || defaultValues.hintchars; this.smoothscroll = smoothscroll || defaultValues.smoothscroll; this.complete = complete || defaultValues.complete; + this.colorscheme = colorscheme || defaultValues.colorscheme; } static fromJSON(json: PropertiesJSON): Properties { @@ -76,6 +96,7 @@ export default class Properties { hintchars: "string", smoothscroll: "boolean", complete: "string", + colorscheme: "string", }; } @@ -92,6 +113,7 @@ export default class Properties { hintchars: this.hintchars, smoothscroll: this.smoothscroll, complete: this.complete, + colorscheme: this.colorscheme, }; } } -- cgit v1.2.3 From a6b8c8a1c2fe955343a420c814978822803d6933 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 4 May 2020 15:10:57 +0900 Subject: Remove unused description in background script --- src/shared/settings/Properties.ts | 5 ----- 1 file changed, 5 deletions(-) (limited to 'src/shared/settings/Properties.ts') diff --git a/src/shared/settings/Properties.ts b/src/shared/settings/Properties.ts index 38f1d3b..529ecfc 100644 --- a/src/shared/settings/Properties.ts +++ b/src/shared/settings/Properties.ts @@ -22,7 +22,6 @@ type PropertyName = "hintchars" | "smoothscroll" | "complete" | "colorscheme"; type PropertyDef = { name: PropertyName; - description: string; defaultValue: string | number | boolean; type: "string" | "number" | "boolean"; }; @@ -30,25 +29,21 @@ type PropertyDef = { const defs: PropertyDef[] = [ { name: "hintchars", - description: "hint characters on follow mode", defaultValue: "abcdefghijklmnopqrstuvwxyz", type: "string", }, { name: "smoothscroll", - description: "smooth scroll", defaultValue: false, type: "boolean", }, { name: "complete", - description: "which are completed at the open page", defaultValue: "sbh", type: "string", }, { name: "colorscheme", - description: "color scheme of the console", defaultValue: ColorScheme.System, type: "string", }, -- cgit v1.2.3 From 65fedca9dfc4b85acce85b9eb3272cfc76d112a7 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 4 May 2020 16:18:12 +0900 Subject: Allow to change color scheme by "colorscheme" property --- src/console/actions/console.ts | 11 +++++++++++ src/console/actions/index.ts | 10 +++++++++- src/console/clients/SettingClient.ts | 13 +++++++++++++ src/console/components/Console.tsx | 23 ++++++++++++++++++++--- src/console/index.html | 2 +- src/console/reducers/index.ts | 8 ++++++++ src/shared/ColorScheme.ts | 7 +++++++ src/shared/settings/Properties.ts | 6 +----- test/shared/SettingData.test.ts | 13 +++++++++++-- test/shared/settings/Properties.test.ts | 4 ++++ test/shared/settings/Settings.test.ts | 1 + 11 files changed, 86 insertions(+), 12 deletions(-) create mode 100644 src/console/clients/SettingClient.ts create mode 100644 src/shared/ColorScheme.ts (limited to 'src/shared/settings/Properties.ts') 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 => { + 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 { + 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 { } 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 ( -
+
{ case "info": case "error": return ( - {this.props.messageText} +
+ {this.props.messageText} +
); 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 @@ VimVixen console - +
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: [], }); -- cgit v1.2.3