diff options
| -rw-r--r-- | css/icons.scss | 1 | ||||
| -rw-r--r-- | img/reply.svg | 1 | ||||
| -rw-r--r-- | src/App.vue | 119 | ||||
| -rw-r--r-- | src/components/Message/Message.vue | 2 | ||||
| -rw-r--r-- | src/components/MessageList/MessageList.vue | 167 |
5 files changed, 175 insertions, 115 deletions
diff --git a/css/icons.scss b/css/icons.scss new file mode 100644 index 000000000..4a95c0445 --- /dev/null +++ b/css/icons.scss @@ -0,0 +1 @@ +@include icon-black-white('reply', 'spreed', 1);
\ No newline at end of file diff --git a/img/reply.svg b/img/reply.svg new file mode 100644 index 000000000..a198103b8 --- /dev/null +++ b/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>
\ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 3513cdbb7..97679e8dc 100644 --- a/src/App.vue +++ b/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: { diff --git a/src/components/Message/Message.vue b/src/components/Message/Message.vue index f6a60b341..bd3c2939b 100644 --- a/src/components/Message/Message.vue +++ b/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> diff --git a/src/components/MessageList/MessageList.vue b/src/components/MessageList/MessageList.vue new file mode 100644 index 000000000..f980f6864 --- /dev/null +++ b/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> |
