Flatten threads: add UI components to messages
- A quote is added to messages to show which was the previous message in
the reply chain.
- A "reply" button is added to messages to allow users to compose a
comment which is added at the end of the reply chain.
- A bug is fixed in calculating the parent reply ID in the extra info
object. Now parent reply means the first message in a reply chain,
while previous reply means the previous message in the reply chain.
Bug: twpowertools:153
Change-Id: I699507ade52e80287dd634e61f835d53af6a904d
diff --git a/src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js b/src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js
new file mode 100644
index 0000000..2f1fb95
--- /dev/null
+++ b/src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js
@@ -0,0 +1,60 @@
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/standard-icon-button.js';
+
+import {css, html, LitElement} from 'lit';
+
+import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
+
+export default class TwptFlattenThreadQuoteAuthor extends LitElement {
+ static properties = {
+ prevMessage: {type: Object},
+ };
+
+ static styles = [
+ SHARED_MD3_STYLES,
+ css`
+ :host {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ max-width: max(25%, 150px);
+ color: var(--TWPT-interop-secondary-text, #444746);
+ }
+
+ :host > *:not(:last-child) {
+ margin-right: 4px;
+ }
+
+ .name {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ `,
+ ];
+
+ constructor() {
+ super();
+ this.prevMessage = {};
+ }
+
+ render() {
+ return html`
+ <md-icon>reply</md-icon>
+ <span class="name">${this.prevMessage?.author?.[1]?.[1]}</span>
+ <md-standard-icon-button
+ icon="arrow_upward"
+ @click=${this.focusParent}>
+ </md-standard-icon-button>
+ `;
+ }
+
+ focusParent() {
+ const parentNode = document.querySelector(
+ '[data-twpt-message-id="' + this.prevMessage?.id + '"]');
+ parentNode.focus({preventScroll: true});
+ parentNode.scrollIntoView({behavior: 'smooth', block: 'start'});
+ }
+}
+window.customElements.define(
+ 'twpt-flatten-thread-quote-author', TwptFlattenThreadQuoteAuthor);