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/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>