add help popup, improve i18n, change name to Adaptive Theme Creator

aminought · Jul 31, 2024 · a473e5b · a473e5b
1 parent ec0ebd1
commit a473e5b
Show file tree

Hide file tree

Showing 14 changed files with 232 additions and 45 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -1,9 +1,9 @@
 {
     "avoidBlack": {
-        "message": "Avoid black"
+        "message": "Avoid Black"
     },
     "avoidWhite": {
-        "message": "Avoid white"
+        "message": "Avoid White"
     },
     "brightness": {
         "message": "Brightness"
@@ -15,10 +15,10 @@
         "message": "Darkness"
     },
     "extensionDescription": {
-        "message": "Calculates the most popular color from the favicon and builds the entire theme based on it."
+        "message": "WebExtension that allows you to create your own custom theme based on the color of site's favicon, the background color of a page, or any other color you choose."
     },
     "extensionName": {
-        "message": "Favicon Color"
+        "message": "Adaptive Theme Creator"
     },
     "favicon": {
         "message": "Favicon"
@@ -32,23 +32,41 @@
     "frame_inactive": {
         "message": "Frame Inactive"
     },
+    "help": {
+        "message": "Help"
+    },
+    "help1Greetings": {
+        "message": "Welcome to <b>Adaptive Theme Creator</b>."
+    },
+    "help2Intro": {
+        "message": "It all started with a simple extension called <b>Favicon Color</b>, but over time, it has evolved into something much more. Now, it's a full-fledged theme creator that allows you to use the color of website's <b>favicon</b> and <b>page</b>, as well as your <b>own</b> colors and apply them to almost any part of the browser."
+    },
+    "help3Description": {
+        "message": "The settings consist of <b>global</b> options and options for specific <b>parts of the browser</b>. You see a schematic image of the browser in front of you.<br><br>To turn on or off the coloring of a specific <b>part of the browser</b>, just click on it with the <b>left mouse button</b>.<br><br><b>Right-clicking</b> opens the context menu for the selected <b>part of the browser</b>, as well as the <b>connected</b> with it.<br><br>By clicking on the context menu header, you can select the <b>connected part of the browser</b> and configure it by changing <b>inheritance</b> or other options."
+    },
+    "help4Conclusion": {
+        "message": "Good luck in creating a unique theme."
+    },
+    "help5Contacts": {
+        "message": "<a href=\"https://github.com/aminought/firefox-favicon-color\">Github</a>"
+    },
     "inherit_global": {
         "message": "Global"
     },
     "inheritance_off": {
         "message": "Off"
     },
     "inheritFrom": {
-        "message": "Inherit from"
+        "message": "Inherit From"
     },
     "own_color": {
-        "message": "Own color"
+        "message": "Own Color"
     },
     "page": {
         "message": "Page"
     },
     "pageCaptureHeight": {
-        "message": "Capture height"
+        "message": "Capture Height in Pixels"
     },
     "pageOptions": {
         "message": "PAGE COLOR OPTIONS"
@@ -63,7 +81,7 @@
         "message": "Reset"
     },
     "saturationLimit": {
-        "message": "Saturation limit"
+        "message": "Saturation Limit"
     },
     "sidebar": {
         "message": "Sidebar"
@@ -72,10 +90,7 @@
         "message": "Sidebar Border"
     },
     "source": {
-        "message": "Color source"
-    },
-    "specialSettings": {
-        "message": "Special settings"
+        "message": "Color Source"
     },
     "tab_selected": {
         "message": "Selected Tab"

diff --git a/_locales/ru/messages.json b/_locales/ru/messages.json
@@ -1,9 +1,9 @@
 {
     "avoidBlack": {
-        "message": "Избегать черного"
+        "message": "Избегать Чёрного"
     },
     "avoidWhite": {
-        "message": "Избегать белого"
+        "message": "Избегать Белого"
     },
     "brightness": {
         "message": "Яркость"
@@ -15,13 +15,13 @@
         "message": "Затемнение"
     },
     "extensionDescription": {
-        "message": "Вычисляет самый популярный цвет из иконки сайта и строит всю тему на его основе."
+        "message": "Расширение для построения темы на основе цвета иконки сайта, страницы или собственных цветов."
     },
     "extensionName": {
-        "message": "Favicon Color"
+        "message": "Adaptive Theme Creator"
     },
     "favicon": {
-        "message": "Иконка сайта"
+        "message": "Иконка Сайта"
     },
     "faviconOptions": {
         "message": "НАСТРОЙКИ ЦВЕТА СТРАНИЦЫ"
@@ -32,32 +32,50 @@
     "frame_inactive": {
         "message": "Неактивная Рамка"
     },
+    "help": {
+        "message": "Помощь"
+    },
+    "help1Greetings": {
+        "message": "Добро пожаловать в <b>Adaptive Theme Creator</b>."
+    },
+    "help2Intro": {
+        "message": "Всё началось с простого расширения под названием <b>Favicon Color</b>, но со временем оно эволюционировало в нечто большее: теперь это настоящий конструктор темы. Можно использовать цвет не только <b>иконки</b> сайта, но и <b>страницы</b>, а также задать <b>собственный</b>, и применить его к практически любой <b>части браузера</b>."
+    },
+    "help3Description": {
+        "message": "Настройки состоят из <b>глобальных</b> опций и опций для конкретной <b>части браузера</b>. Перед собой вы видите схематичное изображение браузера.<br><br>Для включения или выключения окрашивания конкретной <b>части браузера</b> достаточно кликнуть по ней <b>левой кнопкой мыши</b>.<br><br>Нажатие <b>правой кнопкой мыши</b> откроет контекстное меню для выбранной <b>части браузера</b>, а также <b>связанных</b> с ней.<br><br>Кликнув по заголовку контекстного меню, можно выбрать <b>связанную часть браузера</b> и настроить ее, изменив <b>наследование</b> или другие опции."
+    },
+    "help4Conclusion": {
+        "message": "Удачи в создании уникальной темы."
+    },
+    "help5Contacts": {
+        "message": "<a href=\"https://github.com/aminought/firefox-favicon-color\">Github</a>"
+    },
     "inherit_global": {
         "message": "Глобальные"
     },
     "inheritance_off": {
         "message": "Выкл"
     },
     "inheritFrom": {
-        "message": "Наследовать от"
+        "message": "Наследовать От"
     },
     "own_color": {
-        "message": "Own color"
+        "message": "Свой Цвет"
     },
     "page": {
         "message": "Страница"
     },
     "pageCaptureHeight": {
-        "message": "Высота снимка"
+        "message": "Высота Снимка в Пикселях"
     },
     "pageOptions": {
         "message": "НАСТРОЙКИ ЦВЕТА ИКОНКИ"
     },
     "popup": {
-        "message": "Всплывающее окно"
+        "message": "Всплывающее Окно"
     },
     "popup_border": {
-        "message": "Рамка всплывающего окна"
+        "message": "Рамка"
     },
     "reset": {
         "message": "Сбросить"
@@ -66,34 +84,31 @@
         "message": "Насыщенность"
     },
     "sidebar": {
-        "message": "Боковая панель"
+        "message": "Боковая Панель"
     },
     "sidebar_border": {
-        "message": "Разделитель боковой панели"
+        "message": "Разделитель"
     },
     "source": {
-        "message": "Источник цвета"
-    },
-    "specialSettings": {
-        "message": "Отдельная настройка"
+        "message": "Источник Цвета"
     },
     "tab_selected": {
-        "message": "Активная вкладка"
+        "message": "Активная Вкладка"
     },
     "toolbar": {
-        "message": "Панель инструментов"
+        "message": "Панель Инструментов"
     },
     "toolbar_bottom_separator": {
-        "message": "Нижний разделитель панели инструментов"
+        "message": "Нижний Разделитель"
     },
     "toolbar_field": {
-        "message": "Поле панели инструментов"
+        "message": "Поле Ввода"
     },
     "toolbar_field_border": {
-        "message": "Рамка поля панели инструментов"
+        "message": "Рамка"
     },
     "toolbar_field_focus": {
-        "message": "Фокус поля панели инструментов"
+        "message": "Фокус"
     },
     "warning": {
         "message": "Текущая тема несовместима с данным расширением. Пожалуйста, установите тему, отличную от системной."

diff --git a/manifest.json b/manifest.json
@@ -31,7 +31,7 @@
 
   "browser_action": {
     "default_icon": "icons/icon.svg",
-    "default_title": "Favicon Color",
+    "default_title": "__MSG_extensionName__",
     "default_popup": "options_ui/page.html"
   },
 

diff --git a/options_ui/css/color_picker.css b/options_ui/css/color_picker.css
@@ -1,7 +1,11 @@
+.color_picker_wrapper {
+  border: 1px solid var(--color);
+  border-radius: var(--radius);
+  box-shadow: 0px 0px 24px 4px var(--color);
+}
+
 .picker_wrapper {
   background-color: var(--background-color) !important;
-  border: 1px solid var(--color) !important;
-  border-radius: var(--radius) !important;
 }
 
 .picker_arrow {

diff --git a/options_ui/css/context_menu.css b/options_ui/css/context_menu.css
@@ -21,11 +21,13 @@
   border: 1px solid var(--color);
   font-weight: bold;
   width: fit-content;
+  box-shadow: 0px 0px 8px 1px var(--color);
 }
 
 .context_menu_options .option {
   background-color: var(--background-color);
   color: var(--color);
+  box-shadow: 0px 0px 8px 1px var(--color);
 }
 
 .context_menu:not(:has(select[data-value="inheritance_off"]))

diff --git a/options_ui/css/help.css b/options_ui/css/help.css
@@ -0,0 +1,38 @@
+.help_popup {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 300px;
+  height: 300px;
+  overflow-y: scroll;
+  background-color: var(--background-color);
+  color: var(--color);
+  border: 1px solid;
+  border-radius: var(--radius);
+  padding: 4px;
+  box-shadow: 0px 0px 24px 4px var(--color);
+}
+
+.help_popup > p {
+  margin: 0;
+  border: 1px solid;
+  border-radius: var(--radius);
+  padding: 8px;
+}
+
+/* #help {
+  border: 1px solid;
+  border-radius: var(--radius);
+  padding: 16px;
+  background-color: color-mix(
+    in srgb,
+    var(--background-color) 90%,
+    transparent
+  );
+  width: fit-content;
+  height: fit-content;
+  max-width: 70%;
+  font-size: 0.9em;
+  align-self: center;
+} */
diff --git a/options_ui/css/page.css b/options_ui/css/page.css
@@ -77,6 +77,7 @@ body {
 .buttons_row {
   display: flex;
   justify-content: flex-end;
+  gap: 4px;
 }
 
 .buttons_row button {

diff --git a/options_ui/js/color_picker.js b/options_ui/js/color_picker.js
@@ -16,6 +16,7 @@ export class ColorPicker {
 
   static createWrapper() {
     const wrapper = document.createElement("div");
+    wrapper.className = "color_picker_wrapper";
     wrapper.style.position = "absolute";
     return wrapper;
   }

diff --git a/options_ui/js/form.js b/options_ui/js/form.js
@@ -1,5 +1,6 @@
 import { addNumberOptions, addStringOptions } from "./utils/html.js";
 import { ColorPicker } from "./color_picker.js";
+import { HelpPopup } from "./help_popup.js";
 import { Options } from "../../shared/options.js";
 import { PopupController } from "./popup_controller.js";
 
@@ -16,6 +17,7 @@ export class Form {
   static pageCaptureHeight = document.getElementById("page_capture_height");
   static pageAvoidWhite = document.getElementById("page_avoid_white");
   static pageAvoidBlack = document.getElementById("page_avoid_black");
+  static helpButton = document.getElementById("help_button");
   static resetButton = document.getElementById("reset_button");
 
   /**
@@ -104,6 +106,7 @@ export class Form {
       this.saveChecked(e, "page.avoid_black");
 
     Form.resetButton.onclick = (e) => this.reset(e);
+    Form.helpButton.onclick = (e) => Form.showHelp(e);
   }
 
   /**
@@ -117,10 +120,7 @@ export class Form {
     const colorPicker = new ColorPicker(
       Form.body,
       Form.colorPreview.style.backgroundColor,
-      (color) => {
-        Form.colorPreview.style.backgroundColor = color.rgbaString;
-        this.saveBackgroundColor(color, key);
-      }
+      (color) => this.saveBackgroundColor(Form.colorPreview, color, key)
     );
 
     PopupController.push(colorPicker, event.clientX, event.clientY);
@@ -148,11 +148,13 @@ export class Form {
 
   /**
    *
-   * @param {object} color
+   * @param {HTMLElement} element
+   * @param {Event} color
    * @param {string} key
    */
-  async saveBackgroundColor(color, key) {
-    event.target.setAttribute("data-value", event.target.value);
+  async saveBackgroundColor(element, color, key) {
+    element.style.backgroundColor = color.rgbaString;
+    element.setAttribute("data-value", color.rgbaString);
     await this.options.setGlobalOption(key, color.rgbaString);
   }
 
@@ -165,4 +167,15 @@ export class Form {
     await this.options.reset();
     this.loadFromOptions();
   }
+
+  /**
+   *
+   * @param {MouseEvent} event
+   */
+  static showHelp(event) {
+    event.stopPropagation();
+    PopupController.clear();
+    const helpPopup = new HelpPopup(this.body);
+    PopupController.push(helpPopup, event.target);
+  }
 }