Add enhanced announcements notification dot feature
This change adds a new option which consists of the injection of custom
CSS code to enhance the announcements notification dot shown in the
hamburger icon in the Community Console.
Change-Id: I6963017d25ba99f82ccabfde8eae45fa3280c4ec
diff --git a/docs/features.es.md b/docs/features.es.md
index a1762a9..f1c3bb0 100644
--- a/docs/features.es.md
+++ b/docs/features.es.md
@@ -126,6 +126,17 @@
+### Indicador de anuncios nuevos más prominente
+> **Option name:** _Muestra el punto que notifica que hay anuncios sin leer de
+manera más prominente en la Consola de la Comunidad._.
+
+Cuando esta opción está activada, el banner "Alpha" que aparece en la esquina
+superior izquierda de la Consola de la Comunidad se oculta, y el punto de
+notificación que aparece en el menú de hamburguesa cuando hay un nuevo anuncio
+se hace más grande y animado para que lo veas mejor.
+
+
+
### Punto indicador
> **Opciones:** _Muestra si el autor del hilo ha participado en otros hilos_,
_Muestra el número de preguntas y respuestas escritas por el autor del hilo
diff --git a/docs/features.md b/docs/features.md
index c7a5a38..50ae1fc 100644
--- a/docs/features.md
+++ b/docs/features.md
@@ -119,6 +119,17 @@
+### More prominent announcements dot
+> **Option name:** _Show the announcements notification dot more prominently in
+the Community Console_.
+
+When this option is enabled, the "Alpha" banner in the upper-left corner of the
+Community Console is removed, and the notification dot which appears in the
+hamburguer menu when there's a new announcement is enlarged and animated so you
+don't miss it.
+
+
+
### Indicator dot
> **Option names:** _Show whether the OP has participated in other threads_,
_Show the number of questions and replies written by the OP within the last `n`
diff --git a/docs/resources/announcement_dot.gif b/docs/resources/announcement_dot.gif
new file mode 100644
index 0000000..19b248c
--- /dev/null
+++ b/docs/resources/announcement_dot.gif
Binary files differ
diff --git a/src/_locales/ca/messages.json b/src/_locales/ca/messages.json
index 87fda39..746ac61 100644
--- a/src/_locales/ca/messages.json
+++ b/src/_locales/ca/messages.json
@@ -91,6 +91,10 @@
"message": "Activa l'experiment <code class=\"help\" title=\"Aquest experiment et permet ordenar la llista de fils de la Consola de la Comunitat en ordre ascendent o descendent.\">SMEI_SORT_DIRECTION</code>.",
"description": "Feature checkbox in the options page"
},
+ "options_enhancedannouncementsdot": {
+ "message": "Mostra el punt que notifica que hi ha anuncis sense llegir d'una manera més prominent a la Consola de la Comunitat.",
+ "description": "Feature checkbox in the options page"
+ },
"options_profileindicator_header": {
"message": "Punt indicador",
"description": "Heading for the profile indicator feature options"
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 65b2640..407ba5c 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -95,6 +95,10 @@
"message": "Enable the <code class=\"help\" title=\"This experiment lets you sort the Community Console thread list in ascending or descending order.\">SMEI_SORT_DIRECTION</code> experiment.",
"description": "Feature checkbox in the options page"
},
+ "options_enhancedannouncementsdot": {
+ "message": "Show the announcements notification dot more prominently in the Community Console.",
+ "description": "Feature checkbox in the options page"
+ },
"options_profileindicator_header": {
"message": "Indicator dot",
"description": "Heading for the profile indicator feature options"
diff --git a/src/_locales/es/messages.json b/src/_locales/es/messages.json
index 0e5b0a6..96b6fd9 100644
--- a/src/_locales/es/messages.json
+++ b/src/_locales/es/messages.json
@@ -91,6 +91,10 @@
"message": "Activa el experimento <code class=\"help\" title=\"Este experimento te permite ordenar la lista de hilos de la Consola de la Comunidad en orden ascendente o descendente.\">SMEI_SORT_DIRECTION</code>.",
"description": "Feature checkbox in the options page"
},
+ "options_enhancedannouncementsdot": {
+ "message": "Muestra el punto que notifica que hay anuncios sin leer de manera más prominente en la Consola de la Comunidad.",
+ "description": "Feature checkbox in the options page"
+ },
"options_profileindicator_header": {
"message": "Punto indicador",
"description": "Heading for the profile indicator feature options"
diff --git a/src/common/common.js b/src/common/common.js
index 28a86fd..663ca28 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -21,6 +21,7 @@
'ccdragndropfix': false,
'batchlock': false,
'smei_sortdirection': false,
+ 'enhancedannouncementsdot': false,
};
const specialOptions = [
diff --git a/src/content_scripts/console_inject.js b/src/content_scripts/console_inject.js
index 538e576..67bd409 100644
--- a/src/content_scripts/console_inject.js
+++ b/src/content_scripts/console_inject.js
@@ -397,6 +397,11 @@
'material-drawer .main-header{background: var(--TWPT-drawer-background, #fff)!important; position: sticky; top: 0; z-index: 1;}');
}
+ if (options.enhancedannouncementsdot) {
+ injectStylesheet(
+ chrome.runtime.getURL('injections/enhanced_announcements_dot.css'));
+ }
+
if (options.ccforcehidedrawer) {
var drawer = document.querySelector('material-drawer');
if (drawer !== null && drawer.classList.contains('mat-drawer-expanded')) {
diff --git a/src/injections/enhanced_announcements_dot.css b/src/injections/enhanced_announcements_dot.css
new file mode 100644
index 0000000..e2b5e67
--- /dev/null
+++ b/src/injections/enhanced_announcements_dot.css
@@ -0,0 +1,21 @@
+@keyframes TWPTAnnouncementDot {
+ from {
+ background-color: #d93025;
+ bottom: 8px;
+ }
+
+ to {
+ background-color: #e2b3b0;
+ bottom: 0px;
+ }
+}
+
+header .left-control .material-drawer-button.has-updates::after {
+ height: 10px;
+ width: 10px;
+ animation: .5s infinite alternate ease-in TWPTAnnouncementDot;
+}
+
+header .sash {
+ display: none;
+}
diff --git a/src/options/options.html b/src/options/options.html
index 15716da..62fce67 100644
--- a/src/options/options.html
+++ b/src/options/options.html
@@ -33,6 +33,7 @@
<div id="dragndrop-wrapper" class="option" hidden><input type="checkbox" id="ccdragndropfix"> <label for="ccdragndropfix" data-i18n="ccdragndropfix"></label></div>
<div class="option"><input type="checkbox" id="batchlock"> <label for="batchlock" data-i18n="batchlock"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
<div class="option"><input type="checkbox" id="smei_sortdirection"> <label for="smei_sortdirection" data-i18n="smei_sortdirection"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
+ <div class="option"><input type="checkbox" id="enhancedannouncementsdot"> <label for="enhancedannouncementsdot" data-i18n="enhancedannouncementsdot"></label></div>
<h4 data-i18n="profileindicator_header"></h4>
<div class="option"><input type="checkbox" id="profileindicator"> <label for="profileindicator" data-i18n="profileindicator"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
<div class="option"><input type="checkbox" id="profileindicatoralt"> <label for="profileindicatoralt" data-i18n="profileindicatoralt"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
diff --git a/templates/manifest.gjson b/templates/manifest.gjson
index 3ee5587..72126b9 100644
--- a/templates/manifest.gjson
+++ b/templates/manifest.gjson
@@ -70,7 +70,8 @@
"injections/profileindicator_inject.js",
"injections/profileindicator_inject.css",
"injections/ccdarktheme.css",
- "injections/batchlock_inject.js"
+ "injections/batchlock_inject.js",
+ "injections/enhanced_announcements_dot.css"
#if defined(CHROMIUM_MV3)
],
"matches": [
