perForumStats: add extension badge to section
This will prevent people from thinking the feature is part of the
vanilla Community Console and blame Google if it fails.
Bug: twpowertools:92
Change-Id: Iad3b3efbfd6680688d09d71373c5b3b26a518b90
diff --git a/src/contentScripts/communityConsole/utils/PerForumStatsSection.js b/src/contentScripts/communityConsole/utils/PerForumStatsSection.js
index 552dece..153cfb1 100644
--- a/src/contentScripts/communityConsole/utils/PerForumStatsSection.js
+++ b/src/contentScripts/communityConsole/utils/PerForumStatsSection.js
@@ -1,3 +1,7 @@
+import {MDCTooltip} from '@material/tooltip';
+
+import {createExtBadge} from './common.js';
+
// Each entry includes the following information in order:
// - ID
// - Codename
@@ -73,7 +77,12 @@
let title = document.createElement('h2');
title.classList.add('scTailwindSharedActivitycharttitle');
- title.textContent = chrome.i18n.getMessage('inject_perforumstats_heading');
+
+ const [badge, badgeTooltip] = createExtBadge();
+ let titleText = document.createElement('span');
+ titleText.textContent = chrome.i18n.getMessage('inject_perforumstats_heading');
+
+ title.append(badge, titleText);
let selector = this.createForumSelector();
@@ -84,6 +93,7 @@
root.append(title, selector, chartEl);
section.append(root);
existingChartSection.after(section);
+ new MDCTooltip(badgeTooltip);
}
getAplosData(forumId) {
diff --git a/src/static/css/extrainfo.css b/src/static/css/extrainfo.css
index 5737193..23b0afd 100644
--- a/src/static/css/extrainfo.css
+++ b/src/static/css/extrainfo.css
@@ -109,12 +109,21 @@
/* Per-forum stats section */
.TWPT-scTailwindSharedActivitychartroot .scTailwindSharedActivitychartchart {
- margin-top: 18px;
+ margin-top: 26px;
+}
+
+.TWPT-scTailwindSharedActivitychartroot .scTailwindSharedActivitycharttitle {
+ display: flex;
+ align-items: center;
+}
+
+.TWPT-scTailwindSharedActivitychartroot .scTailwindSharedActivitycharttitle .TWPT-badge {
+ margin-right: 6px;
}
.TWPT-scTailwindSharedActivitychartroot .TWPT-select-container {
position: absolute;
- top: 48px;
+ top: 56px;
z-index: 2;
}