Merge pull request #1075 from nextcloud/feature/vue-message-details

Add basic message details component

js/components/Address.vue

+<template>
+	<span :title="email"
+		  v-tooltip="tooltipData">{{ label }}</span>
+</template>
+
+<script>
+	export default {
+		name: "Address",
+		props: [
+			'email',
+			'label',
+		],
+		data () {
+			return {
+				tooltipData: {
+					placement: 'bottom',
+				}
+			};
+		}
+	}
+</script>

js/components/AddressList.vue

+<template>
+	<span>
+		<template v-for="(entry, idx) in entries">
+			<Address :key="entry.email"
+					 :email="entry.email"
+					 :label="entry.label"/><!--
+			--><span
+				v-if="idx+1 < entries.length">, </span>
+		</template>
+	</span>
+</template>
+
+<script>
+	import Address from "./Address";
+
+	export default {
+		name: "AddressList",
+		components: {Address},
+		props: [
+			'entries'
+		]
+	}
+</script>

js/components/FolderContent.vue

 <template>
 	<div id="app-content">
 		<div id="app-content-wrapper">
-			<MessageList />
-			<div class="app-content-detail">
-				todo: message details
-			</div>
+			<MessageList/>
+			<Message/>
 		</div>
 	</div>
 </template>
 
 <script>
+	import Message from "./Message";
 	import MessageList from "./MessageList";
+
 	export default {
 		name: "FolderContent",
-		components: {MessageList}
+		components: {
+			Message,
+			MessageList
+		}
 	}
 </script>

js/components/Message.vue

+<template>
+	<div class="app-content-detail">
+		<div id="mail-message-header" class="section">
+			<h2 :title="subject">{{subject}}</h2>
+			<p class="transparency">
+				<AddressList :entries="from"/>
+				to <!-- TODO: translate -->
+				<AddressList :entries="to"/>
+				<template v-if="cc.length">
+					(cc <!-- TODO: translate -->
+					<AddressList :entries="cc"/><!--
+					-->)
+				</template>
+			</p>
+		</div>
+		<div class="mail-message-body">
+			<div id="mail-content">
+				<MessageHTMLBody v-if="hasHtmlBody"/>
+				<MessagePlainTextBody v-else
+									  :body="body"
+									  :signature="signature"/>
+			</div>
+			<div class="mail-message-attachments"></div>
+			<div id="reply-composer"></div>
+			<input type="button" id="forward-button" value="Forward">
+		</div>
+	</div>
+</template>
+
+<script>
+	import AddressList from "./AddressList";
+	import MessageHTMLBody from "./MessageHTMLBody";
+	import MessagePlainTextBody from "./MessagePlainTextBody";
+
+	export default {
+		name: "Message",
+		components: {MessagePlainTextBody, MessageHTMLBody, AddressList},
+		data () {
+			return {
+				from: [
+					{
+						label: 'Backbone Marionette',
+						email: 'backbone.marionette@frameworks.js',
+					}
+				],
+				to: [
+					{
+						label: 'React',
+						email: 'react@frameworks.js',
+					},
+					{
+						label: 'Angular',
+						email: 'angular@frameworks.js',
+					}
+				],
+				cc: [
+					{
+						label: 'Underscore Jayes',
+						email: 'underscore@frameworks.js',
+					}
+				],
+				subject: 'Do you enjoy the Vue?',
+				hasHtmlBody: false,
+				body: 'Henlo!',
+				signature: 'Backbone Marionette',
+			};
+		}
+	}
+</script>

js/components/MessageHTMLBody.vue

+<template>
+	<div id="mail-content">
+		<div id="show-images-text">
+			<!--{{ t 'The images have been blocked to protect your privacy.' }}-->
+			<button id="show-images-button">
+				<!--{{ t 'Show images from this	sender' }}-->
+			</button>
+		</div>
+		<div class="icon-loading">
+			<iframe :srcdoc="body"
+					sandbox=""
+					seamless>
+			</iframe>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: "MessageHTMLBody",
+		props: [
+			'body',
+		]
+	};
+</script>

js/components/MessagePlainTextBody.vue

+<template>
+	<div>
+		<div id="mail-content">
+			{{ body }}
+		</div>
+		<div v-if="signature"
+			 class="mail-signature">
+			{{signature}}
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: "MessagePlainTextBody",
+		props: [
+			'body',
+			'signature',
+		]
+	};
+</script>

js/directives/tooltip.js

+export default function tooltip (el, binding) {
+	// TODO: get rid of global dependencies
+	$(el).tooltip(binding.value);
+};

js/main.js

@@ -25,6 +25,7 @@ import App from './App';
 import router from './router';
 import store from './store';
 import {sync} from 'vuex-router-sync';
+import tooltip from './directives/tooltip';
 
 sync(store, router);
 
@@ -33,6 +34,8 @@ Vue.prototype.n = n;
 Vue.prototype.OC = OC;
 Vue.prototype.OCA = OCA;
 
+Vue.directive('tooltip', tooltip);
+
 new Vue({
 	el: '#content',
 	router,