From 7f8155613c04628c2b1d6e5a42bbb42792f7ef05 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sun, 9 Jan 2022 21:31:05 +0000
Subject: [PATCH] Tweaked the message UI.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3749 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 apps/cory/index.json          |  2 +-
 apps/cory/index/tf-message.js | 23 ++++++++++++++++-------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/apps/cory/index.json b/apps/cory/index.json
index 05515c66..026d6b6d 100644
--- a/apps/cory/index.json
+++ b/apps/cory/index.json
@@ -1 +1 @@
-{"type":"tildefriends-app","files":{"app.js":"&+Q+L0IpjsqRhedfyBVkrZASqXtLArzn+/SwycrDaL60=.sha256","index.html":"&/CE4CuVKI56h5tfAHF0kzCXbLfhVjWzsM8aZAB9HpEM=.sha256","vue-material.js":"&K5cdLqXYCENPak/TCINHQhyJhpS4G9DlZHGwoh/LF2g=.sha256","tf-user.js":"&DdJwZYEo7AqFyutYMvEjykoVXxdHVog0UXye6Sbo0TU=.sha256","tf-message.js":"&eS1jLx23k9mytvuDdxHu/NPblvlmp8HY46uvCP7GtVY=.sha256","tf.js":"&k1spHFz1z0DroPr/95QBOjR3RVeCJi61TK4i2Xr37uE=.sha256","commonmark.min.js":"&5x6ek3tFrKTZX6hXNNyFsjmhvrjmWpUkwuuaiyVV1Us=.sha256","vue.js":"&g1wvA+yHl1sVC+eufTsg9If7ZeVyMTBU+h0tks7ZNzE=.sha256","vue-material-theme-default-dark.css":"&RP2nr+2CR18BpHHw5ST9a5GJUCOG9n0G2kuGkcQioWE=.sha256","vue-material.min.css":"&kGbUM2QgFSyHZRzqQb0b+0S3EVIlZ0AXpdiAVjIhou8=.sha256","roboto.css":"&jJv43Om673mQO5JK0jj7714s5E+5Yrf82H6LcDx7wUs=.sha256","material-icons.css":"&a28PdcVvgq/DxyIvJAx/e+ZOEtOuHnr3kjLWKyzH11M=.sha256"}}
\ No newline at end of file
+{"type":"tildefriends-app","files":{"app.js":"&+Q+L0IpjsqRhedfyBVkrZASqXtLArzn+/SwycrDaL60=.sha256","index.html":"&/CE4CuVKI56h5tfAHF0kzCXbLfhVjWzsM8aZAB9HpEM=.sha256","vue-material.js":"&K5cdLqXYCENPak/TCINHQhyJhpS4G9DlZHGwoh/LF2g=.sha256","tf-user.js":"&DdJwZYEo7AqFyutYMvEjykoVXxdHVog0UXye6Sbo0TU=.sha256","tf-message.js":"&/shEzHxwgMAgtiJE5QzpWayMvwHt/G0dhwgujwQHtn0=.sha256","tf.js":"&k1spHFz1z0DroPr/95QBOjR3RVeCJi61TK4i2Xr37uE=.sha256","commonmark.min.js":"&5x6ek3tFrKTZX6hXNNyFsjmhvrjmWpUkwuuaiyVV1Us=.sha256","vue.js":"&g1wvA+yHl1sVC+eufTsg9If7ZeVyMTBU+h0tks7ZNzE=.sha256","vue-material-theme-default-dark.css":"&RP2nr+2CR18BpHHw5ST9a5GJUCOG9n0G2kuGkcQioWE=.sha256","vue-material.min.css":"&kGbUM2QgFSyHZRzqQb0b+0S3EVIlZ0AXpdiAVjIhou8=.sha256","roboto.css":"&jJv43Om673mQO5JK0jj7714s5E+5Yrf82H6LcDx7wUs=.sha256","material-icons.css":"&a28PdcVvgq/DxyIvJAx/e+ZOEtOuHnr3kjLWKyzH11M=.sha256"}}
\ No newline at end of file
diff --git a/apps/cory/index/tf-message.js b/apps/cory/index/tf-message.js
index 54126c80..77744afa 100644
--- a/apps/cory/index/tf-message.js
+++ b/apps/cory/index/tf-message.js
@@ -10,6 +10,13 @@ Vue.component('tf-message', {
 				return undefined;
 			}
 		},
+		content_raw: function() {
+			try {
+				return JSON.stringify(JSON.parse(this.message.content), null, 2);
+			} catch {
+				return this.message.content;
+			}
+		}
 	},
 	methods: {
 		markdown: function(md) {
@@ -51,17 +58,16 @@ Vue.component('tf-message', {
 	</div>
 	<div class="md-toolbar-section-end">
 		<md-menu>
-			<md-button md-menu-trigger class="md-icon-button"><md-icon>more_vert</md-icon></md-button>
-			<md-menu-content>
-				<md-menu-item v-if="!showRaw" v-on:click="showRaw = true">View Raw</md-menu-item>
-				<md-menu-item v-else v-on:click="showRaw = false">View Message</md-menu-item>
-				<md-menu-item @click="set_reply()">Reply</md-menu-item>
-			</md-menu-content>
+			<md-switch v-model="showRaw"></md-switch>
+			<md-tooltip>Show Raw Message</md-tooltip>
 		</md-menu>
 	</div>
 </md-app-toolbar>
 <md-app-content>
-	<div v-if="showRaw">{{message.content}}</div>
+	<div v-if="showRaw">
+		<h1>{{message.id}}</h1>
+		<pre style="word-wrap: break-all; white-space: pre-wrap">{{content_raw}}</pre>
+	</div>
 	<div v-else>
 		<div v-if="content_json && content_json.type == 'post'">
 			<div v-html="this.markdown(content_json.text)"></div>
@@ -82,6 +88,9 @@ Vue.component('tf-message', {
 		{{vote + (votes[message.id][vote].length > 1 ? ' (' + votes[message.id][vote].length + ')' : '')}}
 	</md-chip>
 	<md-card-actions>
+		<md-button class="md-icon-button" @click="set_reply">
+			<md-icon>reply</md-icon>
+		</md-button>
 		<md-menu>
 			<md-menu-content>
 				<md-menu-item @click="vote">Like</md-menu-item>