Merge pull request #116 from nextcloud-gmbh/illustrations-undraw

Add unDraw illustrations

README.md

@@ -15,6 +15,7 @@ Some requirements in this alpha stage are that your Nextcloud:
 - **📜 Profile info:** No need to fill out more profiles – your info from Nextcloud will be used and extended.
 - **👐 Own your posts:** Everything you post stays on your Nextcloud!
 - **🕸 Open standards:** We use the established [ActivityPub](https://en.wikipedia.org/wiki/ActivityPub) standard!
+- **🎨 Nice illustrations:** Made by [Katerina Limpitsouni of unDraw](https://undraw.co).
 
 
 ## Development setup

src/components/Composer.vue

@@ -33,7 +33,7 @@
 			<vue-tribute :options="tributeOptions">
 				<!-- eslint-disable-next-line vue/valid-v-model -->
 				<div v-contenteditable:post.dangerousHTML="canType" ref="composerInput" class="message"
-					placeholder="Share a thought…" @keyup.enter="keyup" />
+					placeholder="What would you like to share?" @keyup.enter="keyup" />
 			</vue-tribute>
 			<emoji-picker ref="emojiPicker" :search="search" class="emoji-picker-wrapper"
 				@emoji="insert">

src/components/EmptyContent.vue

@@ -0,0 +1,56 @@
+<!--
+  - @copyright Copyright (c) 2018 Jan-Christoph Borchardt (https://jancborchardt.net)
+  -
+  - @author Jan-Christoph Borchardt (https://jancborchardt.net)
+  -
+  - @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>
+	<div class="emptycontent">
+		<img :src="imageUrl" class="icon-illustration" alt="">
+		<h2>{{ item.title }}</h2>
+		<p>{{ item.description }}</p>
+	</div>
+</template>
+
+<script>
+
+export default {
+	name: 'EmptyContent',
+	props: {
+		item: { type: Object, default: () => {} }
+	},
+	computed: {
+		imageUrl() {
+			return OC.linkTo('social', this.item.image)
+		}
+	}
+}
+</script>
+<style scoped>
+	.emptycontent {
+		margin-top: 5vh;
+	}
+
+	.emptycontent .icon-illustration {
+		height: 256px;
+		width: 256px;
+		margin: 0;
+		opacity: 1;
+	}
+</style>

src/views/Timeline.vue

@@ -17,10 +17,7 @@
 				<div slot="spinner"><div class="icon-loading" /></div>
 				<div slot="no-more"><div class="list-end" /></div>
 				<div slot="no-results">
-					<div id="emptycontent">
-						<div class="icon-social" />
-						<h2>{{ t('social', 'No posts found.') }}</h2>
-					</div>
+					<empty-content :item="emptyContentData" />
 				</div>
 			</infinite-loading>
 		</div>
@@ -90,6 +87,7 @@ import InfiniteLoading from 'vue-infinite-loading'
 import TimelineEntry from './../components/TimelineEntry'
 import Composer from './../components/Composer'
 import CurrentUserMixin from './../mixins/currentUserMixin'
+import EmptyContent from './../components/EmptyContent'
 
 export default {
 	name: 'Timeline',
@@ -99,16 +97,45 @@ export default {
 		TimelineEntry,
 		Multiselect,
 		Composer,
-		InfiniteLoading
+		InfiniteLoading,
+		EmptyContent
 	},
 	mixins: [CurrentUserMixin],
 	data: function() {
 		return {
 			infoHidden: false,
-			state: []
+			state: [],
+			emptyContent: {
+				default: {
+					image: 'img/undraw/posts.svg',
+					title: t('social', 'No posts found'),
+					description: t('social', 'Posts from people you follow will show up here')
+				},
+				direct: {
+					image: 'img/undraw/direct.svg',
+					title: t('social', 'No direct messages found'),
+					description: t('social', 'Posts directed to you will show up here')
+				},
+				timeline: {
+					image: 'img/undraw/local.svg',
+					title: t('social', 'No local posts found'),
+					description: t('social', 'Posts from other people on this instance will show up here')
+				},
+				federated: {
+					image: 'img/undraw/global.svg',
+					title: t('social', 'No global posts found'),
+					description: t('social', 'Posts from federated instances will show up here')
+				}
+			}
 		}
 	},
 	computed: {
+		emptyContentData() {
+			if (typeof this.emptyContent[this.$route.params.type] !== 'undefined') {
+				return this.emptyContent[this.$route.params.type]
+			}
+			return this.emptyContent.default
+		},
 		type: function() {
 			if (this.$route.params.type) {
 				return this.$route.params.type