blob: 39e831015c3565fb5999b59ee5a439049dddb12d [file] [log] [blame]
import '@material/web/button/tonal-button.js';
import './QuoteAuthor.js';
// Other components imported so they are also injected:
import './ReplyButton.js';
import {msg} from '@lit/localize';
import * as DOMPurify from 'dompurify';
import {css, html} from 'lit';
import {classMap} from 'lit/directives/class-map.js';
import {unsafeHTML} from 'lit/directives/unsafe-html.js';
import {I18nLitElement} from '../../../../common/litI18nUtils.js';
import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
export default class TwptFlattenThreadQuote extends I18nLitElement {
static properties = {
prevMessage: {type: Object},
_expanded: {type: Boolean},
};
static styles = [
SHARED_MD3_STYLES,
css`
:host {
display: block;
}
.quote-container {
position: relative;
background-color: var(--TWPT-secondary-background, rgba(242, 242, 242, 0.502));
margin-bottom: 16px;
padding: 0 12px 12px 12px;
border-radius: 12px;
}
.payload-container {
padding-top: 12px;
}
.quote-container:not(.quote-container--expanded) .payload-container {
max-height: 2.8rem;
overflow: hidden;
mask-image: linear-gradient(rgb(0, 0, 0) 76%, transparent);
-webkit-mask-image: linear-gradient(rgb(0, 0, 0) 76%, transparent);
}
.payload-container twpt-flatten-thread-quote-author {
float: right;
margin-left: 12px;
margin-top: -12px;
shape-outside: inset(0 10px 10px 0);
}
.payload {
display: inline;
}
.payload img {
max-width: 100%;
max-height: calc(100vh - 2*64px);
}
.payload blockquote {
border-left: 1px solid #757575;
margin: 0 0 0 4px;
padding: 0 0 0 4px;
}
.buttons-row {
position: absolute;
width: calc(100% - 24px);
display: flex;
flex-direction: row;
justify-content: center;
bottom: -20px;
transition: opacity .25s;
}
@media (hover: hover) {
@supports selector(:has(div)) {
.quote-container:not(:hover) .buttons-row:not(:focus-within) {
opacity: 0;
}
}
}
.buttons-row md-tonal-button {
--md-tonal-button-container-color: var(--TWPT-dark-flatten-replies-more-bg, rgba(222, 222, 222, 0.9));
--md-tonal-button-label-text-color: var(--TWPT-md-sys-color-on-surface);
--md-tonal-button-hover-label-text-color: var(--TWPT-md-sys-color-on-surface);
--md-tonal-button-focus-label-text-color: var(--TWPT-md-sys-color-on-surface);
--md-tonal-button-pressed-label-text-color: var(--TWPT-md-sys-color-on-surface);
--md-tonal-button-with-icon-icon-color: var(--TWPT-md-sys-color-on-surface);
--md-tonal-button-with-icon-hover-icon-color: var(--TWPT-md-sys-color-on-surface);
--md-tonal-button-with-icon-focus-icon-color: var(--TWPT-md-sys-color-on-surface);
--md-tonal-button-with-icon-pressed-icon-color: var(--TWPT-md-sys-color-on-surface);
}
`,
];
constructor() {
super();
this.prevMessage = {};
this._expanded = false;
}
getTrustedPayload() {
return DOMPurify.sanitize(this.prevMessage?.payload ?? '');
}
render() {
const containerClasses = classMap({
'quote-container': true,
'quote-container--expanded': this._expanded,
});
const lessMsg = msg('Less', {
desc: 'Button to collapse the quote message (used in the flatten threads feature).',
});
const moreMsg = msg('More', {
desc: 'Button to expand the quote message (used in the flatten threads feature).',
});
return html`
<div class=${containerClasses}>
<div class="payload-container">
<twpt-flatten-thread-quote-author
.prevMessage=${this.prevMessage}>
</twpt-flatten-thread-quote-author>
<div class="payload">
${unsafeHTML(this.getTrustedPayload())}
</div>
</div>
<div class="buttons-row">
<md-tonal-button
icon="${this._expanded ? 'expand_less' : 'expand_more'}"
label="${this._expanded ? lessMsg : moreMsg}"
@click=${this.toggleExpanded}>
</md-tonal-button>
</div>
</div>
`;
}
toggleExpanded() {
this._expanded = !this._expanded;
}
}
window.customElements.define(
'twpt-flatten-thread-quote', TwptFlattenThreadQuote);