Fix opening messages on mobile

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>

5 files changed, 156 insertions, 15 deletions

diff --git a/src/components/AppDetailsToggle.vue b/src/components/AppDetailsToggle.vue
new file mode 100644
index 000000000..25713d286
--- /dev/null
+++ b/src/components/AppDetailsToggle.vue
@@ -0,0 +1,49 @@
+<!--
+  - @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+  -
+  - @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+  -
+  - @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 v-if="isMobile" class="toggle icon-confirm" tabindex="0" @click="$emit('close')"></div>
+</template>
+
+<script>
+import isMobile from 'nextcloud-vue/dist/Mixins/isMobile'
+
+export default {
+	name: 'AppDetailsToggle',
+	mixins: [isMobile],
+}
+</script>
+
+<style scoped>
+.toggle {
+	position: fixed;
+	display: inline-block;
+	left: 0;
+	width: 44px;
+	height: 44px;
+	z-index: 149;
+	background-color: var(--color-main-background-darker);
+	cursor: pointer;
+	opacity: 0.6;
+	transform: rotate(180deg);
+	margin-top: 44px; /* under the show navigation button */
+}
+</style>
diff --git a/src/components/EnvelopeList.vue b/src/components/EnvelopeList.vue
index 5a4938c99..4280cb91a 100644
--- a/src/components/EnvelopeList.vue
+++ b/src/components/EnvelopeList.vue
@@ -6,6 +6,7 @@
 		name="list"
 		tag="div"
 		class="app-content-list"
+		:class="{showdetails: !show}"
 		infinite-scroll-disabled="loading"
 		infinite-scroll-distance="30"
 		@shortkey.native="handleShortcut"
@@ -62,6 +63,10 @@ export default {
 			required: false,
 			default: undefined,
 		},
+		show: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {
diff --git a/src/components/FolderContent.vue b/src/components/FolderContent.vue
index ee5b57136..09cb7c5da 100644
--- a/src/components/FolderContent.vue
+++ b/src/components/FolderContent.vue
@@ -1,30 +1,46 @@
 <template>
-	<div id="app-content-wrapper">
-		<Loading v-if="loading" :hint="t('mail', 'Loading messages')" />
-		<template v-else>
-			<EnvelopeList :account="account" :folder="folder" :envelopes="envelopes" :search-query="searchQuery" />
-			<NewMessageDetail v-if="newMessage" />
-			<Message v-else-if="hasMessages" />
-		</template>
+	<div>
+		<AppDetailsToggle @close="hideMessage" />
+		<div id="app-content-wrapper">
+			<Loading v-if="loading" :hint="t('mail', 'Loading messages')" />
+			<template v-else>
+				<EnvelopeList
+					:account="account"
+					:folder="folder"
+					:envelopes="envelopes"
+					:search-query="searchQuery"
+					:show="!showMessage"
+				/>
+				<NewMessageDetail v-if="newMessage" />
+				<Message v-else-if="showMessage" />
+				<NoMessageSelected v-else-if="hasMessages" :mailbox="folder.name" />
+			</template>
+		</div>
 	</div>
 </template>
 
 <script>
 import _ from 'lodash'
+import isMobile from 'nextcloud-vue/dist/Mixins/isMobile'
 
-import Message from './Message'
+import AppDetailsToggle from './AppDetailsToggle'
 import EnvelopeList from './EnvelopeList'
-import NewMessageDetail from './NewMessageDetail'
 import Loading from './Loading'
+import Message from './Message'
+import NewMessageDetail from './NewMessageDetail'
+import NoMessageSelected from './NoMessageSelected'
 
 export default {
 	name: 'FolderContent',
 	components: {
+		AppDetailsToggle,
+		EnvelopeList,
 		Loading,
-		NewMessageDetail,
 		Message,
-		EnvelopeList,
+		NewMessageDetail,
+		NoMessageSelected,
 	},
+	mixins: [isMobile],
 	props: {
 		account: {
 			type: Object,
@@ -46,6 +62,9 @@ export default {
 		hasMessages() {
 			return this.$store.getters.getEnvelopes(this.account.id, this.folder.id).length > 0
 		},
+		showMessage() {
+			return this.hasMessages && this.$route.name === 'message'
+		},
 		newMessage() {
 			return this.$route.params.messageUid === 'new'
 		},
@@ -91,7 +110,7 @@ export default {
 
 					this.loading = false
 
-					if (this.$route.name !== 'message' && envelopes.length > 0) {
+					if (!this.isMobile && this.$route.name !== 'message' && envelopes.length > 0) {
 						// Show first message
 						let first = envelopes[0]
 
@@ -108,6 +127,15 @@ export default {
 					}
 				})
 		},
+		hideMessage() {
+			this.$router.replace({
+				name: 'folder',
+				params: {
+					accountId: this.account.id,
+					folderId: this.folder.id,
+				},
+			})
+		},
 		searchProxy(query) {
 			if (this.alive) {
 				this.search(query)
diff --git a/src/components/NoMessageSelected.vue b/src/components/NoMessageSelected.vue
new file mode 100644
index 000000000..f968ef8ba
--- /dev/null
+++ b/src/components/NoMessageSelected.vue
@@ -0,0 +1,61 @@
+<!--
+  - @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+  -
+  - @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+  -
+  - @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="app-content-details">
+		<div class="icon icon-mail"></div>
+		<h2>{{ mailbox }}</h2>
+		<p>{{ t('mail', 'No message selected') }}</p>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'NoMessageSelected',
+	props: {
+		mailbox: {
+			type: String,
+			required: true,
+		},
+	},
+}
+</script>
+
+<style scoped>
+.app-content-details {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.icon {
+	height: 64px;
+	width: 64px;
+	margin: 0 auto 15px;
+	background-size: 64px;
+	opacity: 0.4;
+}
+
+h2,
+p {
+	text-align: center;
+}
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 62de66566..e987878bc 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,9 +1,7 @@
 <template>
 	<AppContent v-shortkey.once="['c']" app-name="mail" @shortkey.native="onNewMessage">
 		<Navigation slot="navigation" />
-		<template slot="content">
-			<FolderContent v-if="activeAccount" :account="activeAccount" :folder="activeFolder" />
-		</template>
+		<FolderContent v-if="activeAccount" slot="content" :account="activeAccount" :folder="activeFolder" />
 	</AppContent>
 </template>