Add extension icon badge to injected components
Fixes: #8
Change-Id: Id1d0ae4a3da057fb06f5137be2271e293d8f0cd4
diff --git a/src/_locales/ca/messages.json b/src/_locales/ca/messages.json
index d76a7cb..911bb44 100644
--- a/src/_locales/ca/messages.json
+++ b/src/_locales/ca/messages.json
@@ -142,5 +142,9 @@
"inject_ccdarkmode_helper": {
"message": "Canviar tema",
"description": "Tooltip for the dark mode switch."
+ },
+ "inject_extension_badge_helper": {
+ "message": "Afegit per $1",
+ "description": "Tooltip for the extension badge, which appears next to components injected by the extension."
}
}
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index de6f351..d542386 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -142,5 +142,9 @@
"inject_ccdarktheme_helper": {
"message": "Switch theme",
"description": "Tooltip for the dark mode switch."
+ },
+ "inject_extension_badge_helper": {
+ "message": "Added by $1",
+ "description": "Tooltip for the extension badge, which appears next to components injected by the extension."
}
}
diff --git a/src/_locales/es/messages.json b/src/_locales/es/messages.json
index bdb20af..00d4a60 100644
--- a/src/_locales/es/messages.json
+++ b/src/_locales/es/messages.json
@@ -142,5 +142,9 @@
"inject_ccdarktheme_helper": {
"message": "Cambiar tema",
"description": "Tooltip for the dark mode switch."
+ },
+ "inject_extension_badge_helper": {
+ "message": "Añadido por $1",
+ "description": "Tooltip for the extension badge, which appears next to components injected by the extension."
}
}
diff --git a/src/common/console.css b/src/common/console.css
new file mode 100644
index 0000000..7e11247
--- /dev/null
+++ b/src/common/console.css
@@ -0,0 +1,33 @@
+.TWPT-badge {
+ width: calc(18/13*var(--icon-size, 16px));
+ height: calc(18/13*var(--icon-size, 16px));
+ border-radius: 50%;
+
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: center;
+ align-items: center;
+
+ background-color: #009688;
+ color: #fff;
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.22), 0 2px 2px 0 rgba(0, 0, 0, 0.12);
+
+ user-select: none;
+}
+
+.TWPT-badge .material-icon-i {
+ font-size: var(--icon-size, 16px);
+}
+
+.TWPT-previous-posts {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+.TWPT-previous-posts .TWPT-badge {
+ --icon-size: 18px;
+ margin-right: 8px;
+}
diff --git a/src/common/forum.css b/src/common/forum.css
new file mode 100644
index 0000000..7e862fd
--- /dev/null
+++ b/src/common/forum.css
@@ -0,0 +1,28 @@
+.TWPT-badge {
+ width: calc(18/13*var(--icon-size, 16px));
+ height: calc(18/13*var(--icon-size, 16px));
+ border-radius: 50%;
+ margin: 4px;
+
+ display: inline-flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-content: center;
+ align-items: center;
+
+ background-color: #009688;
+ color: #fff;
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.22), 0 2px 2px 0 rgba(0, 0, 0, 0.12);
+
+ user-select: none;
+}
+
+.TWPT-badge img {
+ height: var(--icon-size, 16px);
+ filter: invert(1);
+}
+
+.user-profile__user-link.TWPT-user-link > * {
+ vertical-align: middle;
+}
diff --git a/src/content_scripts/console_inject.js b/src/content_scripts/console_inject.js
index f25fe4b..6a73bdc 100644
--- a/src/content_scripts/console_inject.js
+++ b/src/content_scripts/console_inject.js
@@ -25,7 +25,7 @@
link.innerText = chrome.i18n.getMessage('inject_previousposts_' + type);
container.appendChild(link);
- node.querySelector('.main-card-content').appendChild(container);
+ node.appendChild(container);
}
function mutationCallback(mutationList, observer) {
@@ -58,8 +58,35 @@
var query2 = encodeURIComponent(
'(creator:"' + name + '" | replier:"' + name +
'") forum:any');
- addProfileHistoryLink(node, 'forum', query1);
- addProfileHistoryLink(node, 'all', query2);
+
+ var container = document.createElement('div');
+ container.classList.add('TWPT-previous-posts');
+
+ var badge = document.createElement('div');
+ badge.classList.add('TWPT-badge');
+ badge.setAttribute(
+ 'title',
+ chrome.i18n.getMessage(
+ 'inject_extension_badge_helper',
+ [chrome.i18n.getMessage('appName')]));
+
+ var badgeI = document.createElement('i');
+ badgeI.classList.add(
+ 'material-icon-i', 'material-icons-extended');
+ badgeI.textContent = 'repeat';
+
+ badge.appendChild(badgeI);
+ container.appendChild(badge);
+
+ var linkContainer = document.createElement('div');
+ linkContainer.classList.add('TWPT-previous-posts--links');
+
+ addProfileHistoryLink(linkContainer, 'forum', query1);
+ addProfileHistoryLink(linkContainer, 'all', query2);
+
+ container.appendChild(linkContainer);
+
+ node.querySelector('.main-card-content').appendChild(container);
}
}
}
@@ -146,6 +173,20 @@
switchContent.appendChild(icon);
darkThemeSwitch.appendChild(switchContent);
+ var badgeContent = document.createElement('div');
+ badgeContent.classList.add('TWPT-badge');
+ badgeContent.setAttribute(
+ 'title', chrome.i18n.getMessage('inject_extension_badge_helper', [
+ chrome.i18n.getMessage('appName')
+ ]));
+
+ var badgeI = document.createElement('i');
+ badgeI.classList.add('material-icon-i', 'material-icons-extended');
+ badgeI.textContent = 'repeat';
+
+ badgeContent.appendChild(badgeI);
+ darkThemeSwitch.appendChild(badgeContent);
+
var rightControl = document.querySelector('header .right-control');
rightControl.style.width =
(parseInt(window.getComputedStyle(rightControl).width) + 58) + 'px';
diff --git a/src/content_scripts/profile_inject.js b/src/content_scripts/profile_inject.js
index 2ad5002..869d8b6 100644
--- a/src/content_scripts/profile_inject.js
+++ b/src/content_scripts/profile_inject.js
@@ -23,12 +23,29 @@
li.classList.add('user-profile__user-link');
var a = document.createElement('a');
- a.classList.add('user-profile__user-link');
+ a.classList.add('user-profile__user-link', 'TWPT-user-link');
a.href = url;
a.setAttribute(
'data-stats-id', 'user-posts-link--tw-power-tools-by-avm99963');
- a.textContent = chrome.i18n.getMessage('inject_previousposts');
+ var badge = document.createElement('span');
+ badge.classList.add('TWPT-badge');
+ badge.setAttribute(
+ 'title', chrome.i18n.getMessage('inject_extension_badge_helper', [
+ chrome.i18n.getMessage('appName')
+ ]));
+
+ var badgeImg = document.createElement('img');
+ badgeImg.src =
+ 'https://fonts.gstatic.com/s/i/materialicons/repeat/v6/24px.svg';
+
+ badge.appendChild(badgeImg);
+ a.appendChild(badge);
+
+ var span = document.createElement('span');
+ span.textContent = chrome.i18n.getMessage('inject_previousposts');
+
+ a.appendChild(span);
li.appendChild(a);
ul.appendChild(li);
links.appendChild(ul);
diff --git a/src/injections/ccdarktheme.css b/src/injections/ccdarktheme.css
index 8208f05..6c15b0d 100644
--- a/src/injections/ccdarktheme.css
+++ b/src/injections/ccdarktheme.css
@@ -8,7 +8,7 @@
--TWPT-card-border: #5f6368;
--TWPT-subtle-border: #383735;
--TWPT-link: #8ab4f8;
- --TWPT-thread-read-background: rgba(255, 255, 255, 0.08);
+ --TWPT-thread-read-background: rgba(255, 255, 255, .08);
--TWPT-drawer-background: #2d2e30;
}
diff --git a/src/injections/ccdarktheme_switch.css b/src/injections/ccdarktheme_switch.css
index c0d94f5..e42342d 100644
--- a/src/injections/ccdarktheme_switch.css
+++ b/src/injections/ccdarktheme_switch.css
@@ -1,4 +1,5 @@
.TWPT-dark-theme {
+ position: relative;
padding: 4px 8px;
cursor: pointer;
}
@@ -6,3 +7,10 @@
.TWPT-dark-theme .content {
padding: 8px;
}
+
+.TWPT-dark-theme .TWPT-badge {
+ --icon-size: 13px;
+ position: absolute;
+ bottom: 6px;
+ right: 5px;
+}