blob: 7f93e9a28412e74e1fe02d73df9ca0750abb6c70 [file] [log] [blame]
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +01001import '@material/web/icon/icon.js';
Renovate botaa5fb8e2024-02-25 18:10:09 +00002import '@material/web/iconbutton/icon-button.js';
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +01003
4import {css, html, LitElement} from 'lit';
5
6import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
7
8export default class TwptFlattenThreadQuoteAuthor extends LitElement {
9 static properties = {
10 prevMessage: {type: Object},
11 };
12
13 static styles = [
14 SHARED_MD3_STYLES,
15 css`
16 :host {
17 display: flex;
18 flex-direction: row;
19 align-items: center;
20 max-width: max(25%, 150px);
21 color: var(--TWPT-interop-secondary-text, #444746);
22 }
23
24 :host > *:not(:last-child) {
25 margin-right: 4px;
26 }
27
Adrià Vilanova Martínezd5836732023-03-03 21:33:16 +010028 .reply-icon {
29 font-size: 20px;
30 }
31
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +010032 .name {
33 overflow: hidden;
34 white-space: nowrap;
35 text-overflow: ellipsis;
Adrià Vilanova Martínezd5836732023-03-03 21:33:16 +010036 font-size: 15px;
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +010037 }
38 `,
39 ];
40
41 constructor() {
42 super();
43 this.prevMessage = {};
44 }
45
46 render() {
47 return html`
Adrià Vilanova Martínezd5836732023-03-03 21:33:16 +010048 <md-icon class="reply-icon">reply</md-icon>
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +010049 <span class="name">${this.prevMessage?.author?.[1]?.[1]}</span>
Renovate botaa5fb8e2024-02-25 18:10:09 +000050 <md-icon-button
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +010051 @click=${this.focusParent}>
Renovate botaa5fb8e2024-02-25 18:10:09 +000052 <md-icon>arrow_upward</md-icon>
53 </md-icon-button>
Adrià Vilanova Martínez115e3d82023-01-10 21:50:06 +010054 `;
55 }
56
57 focusParent() {
58 const parentNode = document.querySelector(
59 '[data-twpt-message-id="' + this.prevMessage?.id + '"]');
60 parentNode.focus({preventScroll: true});
61 parentNode.scrollIntoView({behavior: 'smooth', block: 'start'});
62 }
63}
64window.customElements.define(
65 'twpt-flatten-thread-quote-author', TwptFlattenThreadQuoteAuthor);