Add MessageList component and DynamicScroller

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

css/icons.scss

@@ -0,0 +1 @@
+@include icon-black-white('reply', 'spreed', 1);

img/reply.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M15 15s-.4-7.8-7-10V1L1 8l7 7v-4c5.1 0 7 4 7 4z"/></svg>

src/App.vue

@@ -53,7 +53,6 @@
 						<ActionLink icon="icon-external" title="Link" href="https://nextcloud.com" />
 					</template>
 				</AppNavigationItem>
-
 			</ul>
 			<AppNavigationSettings>
 				Example settings
@@ -63,14 +62,7 @@
 			<!--<button @click="show = !show">
 				Toggle sidebar
 			</button>-->
-			<Message
-				v-for="message in messages"
-				:key="message.id"
-				v-bind="message">
-				<MessageBody v-bind="message">
-					<MessageBody v-if="message.parent" v-bind="messages[message.parent]" />
-				</MessageBody>
-			</Message>
+			<MessageList />
 		</AppContent>
 		<AppSidebar v-show="show" title="christmas-image-2018-12-25-00:01:12.jpg" subtitle="4,3 MB, last edited 41 days ago"
 			:actions="menu" :starred.sync="starred"
@@ -103,10 +95,9 @@ import AppNavigationSettings from 'nextcloud-vue/dist/Components/AppNavigationSe
 import AppSidebar from 'nextcloud-vue/dist/Components/AppSidebar'
 import AppSidebarTab from 'nextcloud-vue/dist/Components/AppSidebarTab'
 import AppNavigationCounter from 'nextcloud-vue/dist/Components/AppNavigationCounter'
-import Message from './components/Message/Message'
-import MessageBody from './components/Message/MessageBody'
 import ActionButton from 'nextcloud-vue/dist/Components/ActionButton'
 import Avatar from 'nextcloud-vue/dist/Components/Avatar'
+import MessageList from './components/MessageList/MessageList'
 
 export default {
 	name: 'App',
@@ -119,11 +110,10 @@ export default {
 		AppNavigationSettings,
 		AppSidebar,
 		AppSidebarTab,
-		Message,
-		MessageBody,
 		AppNavigationCounter,
 		ActionButton,
-		Avatar
+		Avatar,
+		MessageList
 	},
 	data: function() {
 		return {
@@ -131,106 +121,7 @@ export default {
 			date: Date.now() + 86400000 * 3,
 			date2: Date.now() + 86400000 * 3 + Math.floor(Math.random() * 86400000 / 2),
 			show: true,
-			starred: false,
-			messages: {
-				1: {
-					id: 1,
-					userName: 'Marco',
-					messageText: 'Hello everyone',
-					messageTime: '14:35',
-					isFirstMessage: true
-
-				},
-				2: {
-					id: 2,
-					userName: 'Joas',
-					messageText: 'Please anwser to this message!!!',
-					messageTime: '14:35',
-					isFirstMessage: true
-				},
-				3: {
-					id: 3,
-					userName: 'Barth',
-					messageText: 'Here\'s your answer!',
-					messageTime: '14:35',
-					parent: 2,
-					isFirstMessage: true
-				},
-				4: {
-					id: 4,
-					userName: 'Marco',
-					messageText: 'Hayy buddaaayy',
-					messageTime: '14:35',
-					isFirstMessage: true
-				},
-				5: {
-					id: 5,
-					userName: 'Marco',
-					messageText: 'this is a second message from marco and it\'s going to be very very very very very very very very very very very very very very very very very very very very very veryvery very very very very very very very very very very very long very very very very very very very very very very very very very very very very very very very very very veryvery very very very very very very very very very very very long :)',
-					messageTime: '14:35',
-					isFirstMessage: false
-
-				},
-				6: {
-					id: 6,
-					userName: 'Joas',
-					messageText: 'Please anwser to this message!!!',
-					messageTime: '14:35',
-					isFirstMessage: true
-				},
-				7: {
-					id: 7,
-					userName: 'Barth',
-					messageText: 'Here\'s your answer!',
-					messageTime: '14:35',
-					parent: 456,
-					isFirstMessage: true
-				},
-				8: {
-					id: 8,
-					userName: 'sertdyu',
-					messageText: 'buddaaayy',
-					messageTime: '14:35',
-					isFirstMessage: true
-				},
-				9: {
-					id: 9,
-					userName: 'sertdyu',
-					messageText: 'buddaaayy',
-					messageTime: '14:35',
-					isFirstMessage: true
-				},
-				10: {
-					id: 10,
-					userName: 'Marco',
-					messageText: 'Hello everyone',
-					messageTime: '14:35',
-					isFirstMessage: true
-
-				},
-				11: {
-					id: 11,
-					userName: 'Joas',
-					messageText: 'Please anwser to this message!!!',
-					messageTime: '14:35',
-					isFirstMessage: true
-				},
-				12: {
-					id: 12,
-					userName: 'Barth',
-					messageText: 'Here\'s your answer!',
-					messageTime: '14:35',
-					parent: 456,
-					isFirstMessage: true
-				},
-				13: {
-					id: 13,
-					userName: 'sertdyu',
-					messageText: 'buddaaayy',
-					messageTime: '14:35',
-					isFirstMessage: true
-				}
-			}
+			starred: false
 		}
 	},
 	computed: {

src/components/Message/Message.vue

@@ -32,7 +32,7 @@
 			<div class="message-right">
 				<h6>{{ messageTime }}</h6>
 				<Actions v-if="hover" class="actions">
-					<ActionButton icon="icon-edit" @click="alert('Edit')">
+					<ActionButton icon="icon-folder" @click="alert('Edit')">
 						Reply
 					</ActionButton>
 				</Actions>

src/components/MessageList/MessageList.vue

@@ -0,0 +1,167 @@
+<!--
+  - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @author Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<DynamicScroller
+		:items="messages"
+		:min-item-size="60"
+		class="scroller">
+		<template v-slot="{ item, index, active }">
+			<DynamicScrollerItem
+				:item="item"
+				:active="active"
+				:size-dependencies="[
+					item.messageText,
+				]"
+				:data-index="item.id">
+				<Message v-bind="item">
+					<MessageBody v-bind="item">
+						<MessageBody v-if="item.parent" v-bind="messages[item.parent]" />
+					</MessageBody>
+				</Message>
+			</DynamicScrollerItem>
+		</template>
+	</DynamicScroller>
+</template>
+
+<script>
+import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller/dist/vue-virtual-scroller.umd.js'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import Message from '../Message/Message'
+import MessageBody from '../Message/MessageBody'
+
+export default {
+	name: 'MessageList',
+	components: {
+		DynamicScroller,
+		DynamicScrollerItem,
+		Message,
+		MessageBody
+	},
+	data: function() {
+		return {
+			messages: [
+				{
+					id: 1,
+					userName: 'Marco',
+					messageText: 'Hello everyone',
+					messageTime: '14:35',
+					isFirstMessage: true
+
+				},
+				{
+					id: 2,
+					userName: 'Joas',
+					messageText: 'Please anwser to this message!!!',
+					messageTime: '14:35',
+					isFirstMessage: true
+				},
+				{
+					id: 3,
+					userName: 'Barth',
+					messageText: 'Here\'s your answer!',
+					messageTime: '14:35',
+					parent: 2,
+					isFirstMessage: true
+				},
+				{
+					id: 4,
+					userName: 'Marco',
+					messageText: 'Hayy buddaaayy',
+					messageTime: '14:35',
+					isFirstMessage: true
+				},
+				{
+					id: 5,
+					userName: 'Marco',
+					messageText: 'this is a second message from marco and it\'s going to be very very very very very very very very very very very very very very very very very very very very very veryvery very very very very very very very very very very very long very very very very very very very very very very very very very very very very very very very very very veryvery very very very very very very very very very very very long :)',
+					messageTime: '14:35',
+					isFirstMessage: false
+
+				},
+				{
+					id: 6,
+					userName: 'Joas',
+					messageText: 'Please anwser to this message!!!',
+					messageTime: '14:35',
+					isFirstMessage: true
+				},
+				{
+					id: 7,
+					userName: 'Barth',
+					messageText: 'Here\'s your answer!',
+					messageTime: '14:35',
+					parent: 456,
+					isFirstMessage: true
+				},
+				{
+					id: 8,
+					userName: 'sertdyu',
+					messageText: 'buddaaayy',
+					messageTime: '14:35',
+					isFirstMessage: true
+				},
+				{
+					id: 9,
+					userName: 'sertdyu',
+					messageText: 'buddaaayy',
+					messageTime: '14:35',
+					isFirstMessage: true
+				},
+				{
+					id: 10,
+					userName: 'Marco',
+					messageText: 'Hello everyone',
+					messageTime: '14:35',
+					isFirstMessage: true
+
+				},
+				{
+					id: 11,
+					userName: 'Joas',
+					messageText: 'Please anwser to this message!!!',
+					messageTime: '14:35',
+					isFirstMessage: true
+				},
+				{
+					id: 12,
+					userName: 'Barth',
+					messageText: 'Here\'s your answer!',
+					messageTime: '14:35',
+					parent: 456,
+					isFirstMessage: true
+				},
+				{
+					id: 13,
+					userName: 'sertdyu',
+					messageText: 'buddaaayy',
+					messageTime: '14:35',
+					isFirstMessage: true
+				}
+			]
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>