Show content warnings.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4052 ed5197a5-7fde-0310-b194-c3ffbd925b24

apps/cory/ssblit/tf-message.js

@@ -13,6 +13,7 @@ class TfMessageElement extends LitElement {
 			reply: {type: Boolean},
 			raw: {type: Boolean},
 			collapsed: {type: Boolean},
+			content_warning_expanded: {type: Boolean},
 		}
 	}
 
@@ -238,6 +239,23 @@ class TfMessageElement extends LitElement {
 				let body = this.raw ?
 					this.render_raw() :
 					unsafeHTML(tfutils.markdown(content.text));
+				let content_warning = html`
+					<div style="border: 1px solid #fff; border-radius: 1em; padding: 8px; margin: 4px" @click=${x => self.content_warning_expanded = !self.content_warning_expanded}>${content.contentWarning}</div>
+					`;
+				let content_html =
+					html`
+						<div @click=${this.body_click}>${body}</div>
+						${this.render_mentions()}
+					`;
+				let payload =
+					content.contentWarning ?
+						self.content_warning_expanded ?
+							html`
+								${content_warning}
+								${content_html}
+							` :
+							content_warning :
+						content_html;
 				return html`
 					<style>
 						code {
@@ -260,8 +278,7 @@ class TfMessageElement extends LitElement {
 							<span style="padding-right: 8px"><a target="_top" href=${'#' + self.message.id}>%</a> ${new Date(this.message.timestamp).toLocaleString()}</span>
 							<span>${raw_button}</span>
 						</div>
-						<div @click=${this.body_click}>${body}</div>
-						${this.render_mentions()}
+						${payload}
 						${this.render_votes()}
 						<div>
 							${reply}