diff --git a/_locales/en/messages.json b/_locales/en/messages.json index fa773b9b..9f0e6f8c 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -50,6 +50,9 @@ "options_hotkeys_link": { "message": "Edit shortcut keys" }, + "options_css_link": { + "message": "Edit custom CSS" + }, "options_save_button": { "message": "Save" }, diff --git a/css/options.css b/css/options.css index b886b0fc..09c30fd8 100644 --- a/css/options.css +++ b/css/options.css @@ -215,7 +215,8 @@ input[type=checkbox], input[type=radio] { display: none; } -#hotkeys-link { +#hotkeys-link, +#css-link { color: gray; cursor: pointer; text-decoration: underline; diff --git a/custom-css.html b/custom-css.html new file mode 100644 index 00000000..e9275e2f --- /dev/null +++ b/custom-css.html @@ -0,0 +1,45 @@ + + + + + + + + + + + + + +
+

Edit Custom CSS

+ +
+
+ Custom CSS in popup +
+
+
+
+ +
+
+ +
+
+
+
+ +
+ + diff --git a/js/custom-css.js b/js/custom-css.js new file mode 100644 index 00000000..1d2f1ccf --- /dev/null +++ b/js/custom-css.js @@ -0,0 +1,20 @@ + +$(function() { + getSettings(["customCss"]) + .then(function(items) { + let css = items.customCss || '' + const $element = $("#custom-css-code") + function update () { + $("#css-save-button").get(0).disabled = $element.val() === css; + } + $("#css-save-button").click(function () { + updateSettings({ customCss: (css = $element.val()) }); + update(); + }); + $element.val(css); + $element.keyup(function () { + update(); + }); + update(); + }) +}) diff --git a/js/options.js b/js/options.js index 23538260..ac2b8dd6 100644 --- a/js/options.js +++ b/js/options.js @@ -140,6 +140,11 @@ function initialize(allVoices, settings) { $("#hotkeys-link").click(function() { brapi.tabs.create({url: getHotkeySettingsUrl()}); }); + + //edit css link + $("#css-link").click(function() { + brapi.tabs.create({url: 'custom-css.html'}); + }); } diff --git a/js/popup.js b/js/popup.js index a99dc3cd..ce14ad97 100644 --- a/js/popup.js +++ b/js/popup.js @@ -23,6 +23,7 @@ $(function() { refreshSize(); checkAnnouncements(); + applyCustomCSS(); }); function handleError(err) { @@ -247,3 +248,11 @@ function showAnnouncement(ann) { updateSettings({announcement: ann}); }) } + +function applyCustomCSS() { + getSettings(["customCss"]) + .then(function(items) { + let css = items.customCss || '' + $("#custom-css").text(css) + }) +} \ No newline at end of file diff --git a/options.html b/options.html index 6a7c6e65..d1ba5a81 100644 --- a/options.html +++ b/options.html @@ -23,6 +23,8 @@

+ · +
diff --git a/popup.html b/popup.html index 06100b92..f0ecc4e3 100644 --- a/popup.html +++ b/popup.html @@ -12,6 +12,7 @@ +