Merge pull request #1021 from nextcloud/three-column-layout-rebased

nextcloud · May 5, 2023 · c9e478e · c9e478e
2 parents 391dae2 + 6e03368
commit c9e478e
Show file tree

Hide file tree

Showing 15 changed files with 564 additions and 318 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -11,11 +11,8 @@
 			</NcAppNavigationNew>
 
 			<template #list>
-				<NavigationList v-show="!loading.notes"
-					:filtered-notes="filteredNotes"
-					:category="filter.category"
-					@category-selected="onSelectCategory"
-					@note-deleted="onNoteDeleted"
+				<CategoriesList v-show="!loading.notes"
+					v-if="numNotes"
 				/>
 			</template>
 
@@ -39,7 +36,7 @@
 				<p>{{ t('notes', 'Please see Nextcloud server log for details.') }}</p>
 			</div>
 		</NcAppContent>
-		<router-view v-else />
+		<router-view v-else @note-deleted="onNoteDeleted" />
 
 		<router-view name="sidebar" />
 	</NcContent>
@@ -61,7 +58,7 @@ import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import CogIcon from 'vue-material-design-icons/Cog.vue'
 
 import AppSettings from './components/AppSettings.vue'
-import NavigationList from './components/NavigationList.vue'
+import CategoriesList from './components/CategoriesList.vue'
 import EditorHint from './components/Modal/EditorHint.vue'
 
 import { config } from './config.js'
@@ -73,14 +70,14 @@ export default {
 
 	components: {
 		AppSettings,
+		CategoriesList,
+		CogIcon,
 		EditorHint,
-		NavigationList,
 		NcAppContent,
 		NcAppNavigation,
 		NcAppNavigationNew,
 		NcAppNavigationItem,
 		NcContent,
-		CogIcon,
 		PlusIcon,
 	},
 
@@ -104,37 +101,16 @@ export default {
 	},
 
 	computed: {
+		numNotes() {
+			return store.getters.numNotes()
+		},
+
 		notes() {
 			return store.state.notes.notes
 		},
 
 		filteredNotes() {
-			const notes = this.notes.filter(note => {
-				if (this.filter.category !== null
-					&& this.filter.category !== note.category
-					&& !note.category.startsWith(this.filter.category + '/')) {
-					return false
-				}
-				return true
-			})
-
-			function cmpRecent(a, b) {
-				if (a.favorite && !b.favorite) return -1
-				if (!a.favorite && b.favorite) return 1
-				return b.modified - a.modified
-			}
-
-			function cmpCategory(a, b) {
-				const cmpCat = a.category.localeCompare(b.category)
-				if (cmpCat !== 0) return cmpCat
-				if (a.favorite && !b.favorite) return -1
-				if (!a.favorite && b.favorite) return 1
-				return a.title.localeCompare(b.title)
-			}
-
-			notes.sort(this.filter.category === null ? cmpRecent : cmpCategory)
-
-			return notes
+			return store.getters.getFilteredNotes()
 		},
 	},
 
@@ -255,7 +231,7 @@ export default {
 				return
 			}
 			this.loading.create = true
-			createNote(this.filter.category)
+			createNote(store.getters.getSelectedCategory())
 				.then(note => {
 					this.routeToNote(note.id, { new: null })
 				})
@@ -266,15 +242,6 @@ export default {
 				})
 		},
 
-		onSelectCategory(category) {
-			this.filter.category = category
-
-			const appNavigation = document.querySelector('#app-navigation > ul')
-			if (appNavigation) {
-				appNavigation.scrollTop = 0
-			}
-		},
-
 		onNoteDeleted(note) {
 			this.deletedNotes.push(note)
 			this.clearUndoTimer()

diff --git a/src/components/NavigationCategoriesItem.vue → src/components/CategoriesList.vue b/src/components/NavigationCategoriesItem.vue → src/components/CategoriesList.vue
@@ -1,15 +1,8 @@
 <template>
-	<NcAppNavigationItem
-		:title="title"
-		class="app-navigation-noclose separator-below"
-		:class="{ 'category-header': selectedCategory !== null }"
-		:open.sync="open"
-		:allow-collapse="true"
-		@click.prevent.stop="onToggleCategories"
-	>
-		<FolderIcon slot="icon" :size="20" />
+	<Fragment>
 		<NcAppNavigationItem
 			:title="t('notes', 'All notes')"
+			:class="{ active: selectedCategory === null }"
 			@click.prevent.stop="onSelectCategory(null)"
 		>
 			<HistoryIcon slot="icon" :size="20" />
@@ -18,9 +11,13 @@
 			</NcAppNavigationCounter>
 		</NcAppNavigationItem>
 
+		<NcAppNavigationCaption :title="t('notes', 'Categories')" />
+
 		<NcAppNavigationItem v-for="category in categories"
 			:key="category.name"
 			:title="categoryTitle(category.name)"
+			:icon="category.name === '' ? 'icon-emptyfolder' : 'icon-files'"
+			:class="{ active: category.name === selectedCategory }"
 			@click.prevent.stop="onSelectCategory(category.name)"
 		>
 			<FolderOutlineIcon v-if="category.name === ''" slot="icon" :size="20" />
@@ -29,14 +26,16 @@
 				{{ category.count }}
 			</NcAppNavigationCounter>
 		</NcAppNavigationItem>
-	</NcAppNavigationItem>
+	</Fragment>
 </template>
 
 <script>
 import {
 	NcAppNavigationItem,
+	NcAppNavigationCaption,
 	NcAppNavigationCounter,
 } from '@nextcloud/vue'
+import { Fragment } from 'vue-fragment'
 
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
 import FolderOutlineIcon from 'vue-material-design-icons/FolderOutline.vue'
@@ -47,27 +46,16 @@ import { categoryLabel } from '../Util.js'
 import store from '../store.js'
 
 export default {
-	name: 'NavigationCategoriesItem',
+	name: 'CategoriesList',
 
 	components: {
+		Fragment,
+		NcAppNavigationItem,
+		NcAppNavigationCaption,
+		NcAppNavigationCounter,
 		FolderIcon,
 		FolderOutlineIcon,
 		HistoryIcon,
-		NcAppNavigationItem,
-		NcAppNavigationCounter,
-	},
-
-	props: {
-		selectedCategory: {
-			type: String,
-			default: null,
-		},
-	},
-
-	data() {
-		return {
-			open: false,
-		}
 	},
 
 	computed: {
@@ -79,8 +67,8 @@ export default {
 			return getCategories(1, true)
 		},
 
-		title() {
-			return this.selectedCategory === null ? this.t('notes', 'Categories') : categoryLabel(this.selectedCategory)
+		selectedCategory() {
+			return store.getters.getSelectedCategory()
 		},
 	},
 
@@ -89,19 +77,14 @@ export default {
 			return categoryLabel(category)
 		},
 
-		onToggleCategories() {
-			this.open = !this.open
-		},
-
 		onSelectCategory(category) {
-			this.open = false
-			this.$emit('category-selected', category)
+			store.commit('setSelectedCategory', category)
 		},
 	},
 }
 </script>
 <style scoped>
-.separator-below {
-	border-bottom: 1px solid var(--color-border);
+.app-navigation-entry-wrapper.active:deep(.app-navigation-entry) {
+	background-color: var(--color-primary-light) !important;
 }
 </style>
diff --git a/src/components/EditorEasyMDE.vue b/src/components/EditorEasyMDE.vue
@@ -374,5 +374,6 @@ export default {
 	z-index: 10;
 	height: 40px;
 	margin-right: 5px;
+	top: 65px;
 }
 </style>
diff --git a/src/components/HelpMobile.vue b/src/components/HelpMobile.vue
@@ -4,8 +4,8 @@
 			{{ t('notes', 'Install the app for your mobile phone in order to access your notes from everywhere.') }}
 		</div>
 		<div class="badge-wrapper">
-			<a target="_blank" href="https://github.com/stefan-niedermann/nextcloud-notes">
-				{{ t('notes', 'Android app: {notes} by {company}', {notes: 'Nextcloud Notes', company: 'Niedermann IT-Dienstleistungen'}) }}
+			<a target="_blank" href="https://github.com/nextcloud/nextcloud-notes">
+				{{ t('notes', 'Android app: {notes}', {notes: 'Nextcloud Notes'}) }}
 			</a>
 			<div>
 				<div class="badge">
@@ -22,11 +22,11 @@
 		</div>
 		<div class="badge-wrapper">
 			<a target="_blank" href="https://github.com/phedlund/CloudNotes">
-				{{ t('notes', 'iOS app: {notes} by {company}', {notes: 'CloudNotes - Nextcloud Notes', company: 'Peter Hedlund'}) }}
+				{{ t('notes', 'iOS app: {notes}', {notes: 'Nextcloud Notes'}) }}
 			</a>
 			<div>
 				<div class="badge">
-					<a target="_blank" href="https://apps.apple.com/app/cloudnotes-owncloud-notes/id813973264">
+					<a target="_blank" href="https://apps.apple.com/app/nextcloud-notes/id813973264">
 						<img :src="getRoute('badge_applestore.svg')" class="appstore-badge badge-playstore-fix">
 					</a>
 				</div>