diff --git a/README.md b/README.md index 25fe305..2beaec9 100644 --- a/README.md +++ b/README.md @@ -166,12 +166,14 @@ Using the `Custom store locations` setting in the browser extension options, you The list of available options: -| Name | Description | -| ----------------------------------------------------------- | ------------------------------------------------------------ | -| Automatically submit forms after filling (aka `autoSubmit`) | Make Browserpass automatically submit the login form for you | -| Default username (aka `username`) | Username to use when it's not defined in the password file | -| Custom gpg binary (aka `gpgPath`) | Path to a custom `gpg` binary to use | -| Custom store locations | List of password stores to use | +| Name | Description | +| --------------------------------------------------------------- | ------------------------------------------------------------ | +| Automatically submit forms after filling (aka `autoSubmit`) | Make Browserpass automatically submit the login form for you | +| Default username (aka `username`) | Username to use when it's not defined in the password file | +| Custom gpg binary (aka `gpgPath`) | Path to a custom `gpg` binary to use | +| Custom store locations | List of password stores to use | +| Custom store locations - badge background color (aka `bgColor`) | Badge background color for a given password store in popup | +| Custom store locations - badge text color (aka `color`) | Badge text color for a given password store in popup | Browserpass allows configuring certain settings in different places places using the following priority, highest first: @@ -181,11 +183,15 @@ Browserpass allows configuring certain settings in different places places using - `autoSubmit` - `gpgPath` - `username` + - `bgColor` + - `color` 1. Options defined in browser extension options: - Automatically submit forms after filling (aka `autoSubmit`) - Default username (aka `username`) - Custom gpg binary (aka `gpgPath`) - Custom store locations + - Custom store locations - badge background color (aka `bgColor`) + - Custom store locations - badge text color (aka `color`) ## Security diff --git a/src/options/interface.js b/src/options/interface.js index 18c478a..9719bb3 100644 --- a/src/options/interface.js +++ b/src/options/interface.js @@ -180,6 +180,24 @@ function createCustomStore(storeId) { this.saveEnabled = true; } }), + m("input[type=text].bgColor", { + title: "Badge background color", + value: store.bgColor, + placeholder: "#626262", + onchange: e => { + store.bgColor = e.target.value; + this.saveEnabled = true; + } + }), + m("input[type=text].color", { + title: "Badge text color", + value: store.color, + placeholder: "#c4c4c4", + onchange: e => { + store.color = e.target.value; + this.saveEnabled = true; + } + }), m( "a.remove", { diff --git a/src/options/options.less b/src/options/options.less index f80096c..cbe9de8 100644 --- a/src/options/options.less +++ b/src/options/options.less @@ -68,13 +68,12 @@ h3:first-child { } .option.custom-store input[type="text"] { - margin: -4px 0 0 0; - width: 25%; + margin: -4px 6px 0 0; + width: 16%; } .option.custom-store input[type="text"].path { - margin-left: 6px; - width: calc(100% - 25% - 48px); + width: calc(100% - 16% * 3 - 6px * 3 - 16px); } .option.custom-store a.remove { @@ -82,7 +81,7 @@ h3:first-child { display: block; height: 16px; line-height: 16px; - margin: 0 0 0 6px; + margin: 0; padding: 0; text-decoration: none; width: 16px; diff --git a/src/popup/interface.js b/src/popup/interface.js index ab1a070..c9c377b 100644 --- a/src/popup/interface.js +++ b/src/popup/interface.js @@ -62,6 +62,9 @@ function view(ctl, params) { m( "div.logins", this.results.map(function(result) { + const storeBgColor = result.store.bgColor || result.store.settings.bgColor; + const storeColor = result.store.color || result.store.settings.color; + return m( "div.part.login", { @@ -80,7 +83,14 @@ function view(ctl, params) { [ m("div.name", [ m("div.line1", [ - m("div.store.badge", result.store.name), + m( + "div.store.badge", + { + style: `background-color: ${storeBgColor}; + color: ${storeColor}` + }, + result.store.name + ), m("div.path", [m.trust(result.path)]), result.recent.when > 0 ? m("div.recent", {