Adrià Vilanova Martínez | 115e3d8 | 2023-01-10 21:50:06 +0100 | [diff] [blame] | 1 | import '@material/web/button/tonal-button.js'; |
| 2 | |
| 3 | import './QuoteAuthor.js'; |
| 4 | |
| 5 | // Other components imported so they are also injected: |
| 6 | import './ReplyButton.js'; |
| 7 | |
| 8 | import * as DOMPurify from 'dompurify'; |
| 9 | import {css, html, LitElement} from 'lit'; |
| 10 | import {classMap} from 'lit/directives/class-map.js'; |
| 11 | import {unsafeHTML} from 'lit/directives/unsafe-html.js'; |
| 12 | |
| 13 | import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js'; |
| 14 | |
| 15 | export default class TwptFlattenThreadQuote extends LitElement { |
| 16 | static properties = { |
| 17 | prevMessage: {type: Object}, |
| 18 | _expanded: {type: Boolean}, |
| 19 | }; |
| 20 | |
| 21 | static styles = [ |
| 22 | SHARED_MD3_STYLES, |
| 23 | css` |
| 24 | :host { |
| 25 | display: block; |
| 26 | } |
| 27 | |
| 28 | .quote-container { |
| 29 | position: relative; |
| 30 | background-color: var(--TWPT-secondary-background, rgba(242, 242, 242, 0.502)); |
| 31 | margin-bottom: 16px; |
| 32 | padding: 0 12px 12px 12px; |
| 33 | border-radius: 12px; |
| 34 | } |
| 35 | |
| 36 | .payload-container { |
| 37 | padding-top: 12px; |
| 38 | } |
| 39 | |
| 40 | .quote-container:not(.quote-container--expanded) .payload-container { |
Adrià Vilanova Martínez | 90257dd | 2023-02-14 22:08:56 +0100 | [diff] [blame] | 41 | max-height: 2.8rem; |
Adrià Vilanova Martínez | 115e3d8 | 2023-01-10 21:50:06 +0100 | [diff] [blame] | 42 | overflow: hidden; |
Adrià Vilanova Martínez | 90257dd | 2023-02-14 22:08:56 +0100 | [diff] [blame] | 43 | mask-image: linear-gradient(rgb(0, 0, 0) 76%, transparent); |
| 44 | -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 76%, transparent); |
Adrià Vilanova Martínez | 115e3d8 | 2023-01-10 21:50:06 +0100 | [diff] [blame] | 45 | } |
| 46 | |
| 47 | .payload-container twpt-flatten-thread-quote-author { |
| 48 | float: right; |
| 49 | margin-left: 12px; |
| 50 | margin-top: -12px; |
| 51 | shape-outside: inset(0 10px 10px 0); |
| 52 | } |
| 53 | |
| 54 | .payload { |
| 55 | display: inline; |
| 56 | } |
| 57 | |
| 58 | .payload img { |
| 59 | max-width: 100%; |
| 60 | max-height: calc(100vh - 2*64px); |
| 61 | } |
| 62 | |
| 63 | .payload blockquote { |
| 64 | border-left: 1px solid #757575; |
| 65 | margin: 0 0 0 4px; |
| 66 | padding: 0 0 0 4px; |
| 67 | } |
| 68 | |
| 69 | .buttons-row { |
| 70 | position: absolute; |
| 71 | width: calc(100% - 24px); |
| 72 | display: flex; |
| 73 | flex-direction: row; |
| 74 | justify-content: center; |
| 75 | bottom: -20px; |
| 76 | transition: opacity .25s; |
| 77 | } |
| 78 | |
Adrià Vilanova Martínez | db38d7f | 2023-01-10 22:40:58 +0100 | [diff] [blame] | 79 | @media (hover: hover) { |
| 80 | @supports selector(:has(div)) { |
Adrià Vilanova Martínez | d583673 | 2023-03-03 21:33:16 +0100 | [diff] [blame] | 81 | .quote-container:not(:hover) .buttons-row:not(:focus-within) { |
Adrià Vilanova Martínez | db38d7f | 2023-01-10 22:40:58 +0100 | [diff] [blame] | 82 | opacity: 0; |
| 83 | } |
| 84 | } |
Adrià Vilanova Martínez | 115e3d8 | 2023-01-10 21:50:06 +0100 | [diff] [blame] | 85 | } |
| 86 | |
| 87 | .buttons-row md-tonal-button { |
| 88 | --md-tonal-button-container-color: var(--TWPT-dark-flatten-replies-more-bg, rgba(222, 222, 222, 0.9)); |
| 89 | --md-tonal-button-label-text-color: var(--TWPT-md-sys-color-on-surface); |
| 90 | --md-tonal-button-hover-label-text-color: var(--TWPT-md-sys-color-on-surface); |
| 91 | --md-tonal-button-focus-label-text-color: var(--TWPT-md-sys-color-on-surface); |
| 92 | --md-tonal-button-pressed-label-text-color: var(--TWPT-md-sys-color-on-surface); |
| 93 | --md-tonal-button-with-icon-icon-color: var(--TWPT-md-sys-color-on-surface); |
| 94 | --md-tonal-button-with-icon-hover-icon-color: var(--TWPT-md-sys-color-on-surface); |
| 95 | --md-tonal-button-with-icon-focus-icon-color: var(--TWPT-md-sys-color-on-surface); |
| 96 | --md-tonal-button-with-icon-pressed-icon-color: var(--TWPT-md-sys-color-on-surface); |
| 97 | } |
| 98 | `, |
| 99 | ]; |
| 100 | |
| 101 | constructor() { |
| 102 | super(); |
| 103 | this.prevMessage = {}; |
| 104 | this._expanded = false; |
| 105 | } |
| 106 | |
| 107 | getTrustedPayload() { |
| 108 | return DOMPurify.sanitize(this.prevMessage?.payload ?? ''); |
| 109 | } |
| 110 | |
| 111 | render() { |
| 112 | const containerClasses = classMap({ |
| 113 | 'quote-container': true, |
| 114 | 'quote-container--expanded': this._expanded, |
| 115 | }); |
| 116 | return html` |
| 117 | <div class=${containerClasses}> |
| 118 | <div class="payload-container"> |
| 119 | <twpt-flatten-thread-quote-author |
| 120 | .prevMessage=${this.prevMessage}> |
| 121 | </twpt-flatten-thread-quote-author> |
| 122 | <div class="payload"> |
| 123 | ${unsafeHTML(this.getTrustedPayload())} |
| 124 | </div> |
| 125 | </div> |
| 126 | <div class="buttons-row"> |
| 127 | <md-tonal-button |
| 128 | icon="${this._expanded ? 'expand_less' : 'expand_more'}" |
| 129 | label="${this._expanded ? 'Less' : 'More'}" |
| 130 | @click=${this.toggleExpanded}> |
| 131 | </md-tonal-button> |
| 132 | </div> |
| 133 | </div> |
| 134 | `; |
| 135 | } |
| 136 | |
| 137 | toggleExpanded() { |
| 138 | this._expanded = !this._expanded; |
| 139 | } |
| 140 | } |
| 141 | window.customElements.define( |
| 142 | 'twpt-flatten-thread-quote', TwptFlattenThreadQuote); |