Merge pull request #1004 from JonnyTischbein/remove-sidebar

Sidebar: removed

Author: juliusknorr

package-lock.json

@@ -25,7 +25,7 @@
     "markdown-it": "^13.0.2",
     "markdown-it-task-checkbox": "^1.0.6",
     "vue": "^2.7.15",
-    "vue-fragment": "1.6.0",
+    "vue-fragment": "^1.5.1",
     "vue-material-design-icons": "^5.2.0",
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.5.3",
@@ -46,4 +46,4 @@
     "extends @nextcloud/browserslist-config"
   ],
   "version": "4.8.1"
-}
+}

package.json

@@ -37,8 +37,6 @@
 			</div>
 		</NcAppContent>
 		<router-view v-else @note-deleted="onNoteDeleted" />
-
-		<router-view name="sidebar" />
 	</NcContent>
 </template>
 

src/App.vue

@@ -3,6 +3,7 @@
 		:title="title"
 		:active="isSelected"
 		:to="{ name: 'note', params: { noteId: note.id.toString() } }"
+		@update:menuOpen="onMenuChange"
 		@click="onNoteSelected(note.id)"
 	>
 		<template #subtitle>
@@ -29,42 +30,80 @@
 			<NcActionButton :icon="actionFavoriteIcon" @click="onToggleFavorite">
 				{{ actionFavoriteText }}
 			</NcActionButton>
-			<NcActionButton @click="onToggleSidebar">
-				<SidebarIcon slot="icon" :size="20" />
-				{{ t('notes', 'Details') }}
+
+			<NcActionButton v-if="!showCategorySelect" @click="showCategorySelect = true">
+				<template #icon>
+					<FolderIcon :size="20" />
+				</template>
+				{{ categoryTitle }}
 			</NcActionButton>
-			<NcActionButton v-if="!note.readonly" :icon="actionDeleteIcon" @click="onDeleteNote">
-				{{ t('notes', 'Delete note') }}
+			<NcActionInput
+				v-else
+				:value="note.category"
+				type="multiselect"
+				label="label"
+				track-by="id"
+				:multiple="false"
+				:options="categories"
+				:disabled="loading.category"
+				:taggable="true"
+				@input="onCategoryChange"
+				@search-change="onCategoryChange"
+			>
+				<template #icon>
+					<FolderIcon :size="20" />
+				</template>
+				{{ t('notes', 'Change category') }}
+			</NcActionInput>
+
+			<NcActionButton v-if="!renaming" @click="startRenaming">
+				<PencilIcon slot="icon" :size="20" />
+				{{ t('notes', 'Rename') }}
 			</NcActionButton>
+			<NcActionInput v-else
+				v-model.trim="newTitle"
+				:disabled="!renaming"
+				:placeholder="t('notes', 'Rename note')"
+				:show-trailing-button="true"
+				@input="onInputChange($event)"
+				@submit="onRename"
+			>
+				<PencilIcon slot="icon" :size="20" />
+			</NcActionInput>
+
 			<NcActionSeparator />
-			<NcActionButton icon="icon-files-dark" @click="onCategorySelected">
-				{{ actionCategoryText }}
+
+			<NcActionButton v-if="!note.readonly" :icon="actionDeleteIcon" @click="onDeleteNote">
+				{{ t('notes', 'Delete note') }}
 			</NcActionButton>
 		</template>
 	</NcListItem>
 </template>
 
 <script>
-import { NcListItem, NcActionButton } from '@nextcloud/vue'
+import { NcListItem, NcActionButton, NcActionSeparator, NcActionInput } from '@nextcloud/vue'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon.vue'
 import FileDocumentOutlineIcon from 'vue-material-design-icons/FileDocumentOutline.vue'
+import FolderIcon from 'vue-material-design-icons/Folder.vue'
+import PencilIcon from 'vue-material-design-icons/Pencil.vue'
 import StarIcon from 'vue-material-design-icons/Star.vue'
-import SidebarIcon from 'vue-material-design-icons/PageLayoutSidebarRight.vue'
 import { categoryLabel, routeIsNewNote } from '../Util.js'
 import { showError } from '@nextcloud/dialogs'
-import store from '../store.js'
-import { setFavorite, setTitle, fetchNote, deleteNote } from '../NotesService.js'
+import { setFavorite, setTitle, fetchNote, deleteNote, setCategory } from '../NotesService.js'
 
 export default {
 	name: 'NoteItem',
 
 	components: {
 		AlertOctagonIcon,
 		FileDocumentOutlineIcon,
+		FolderIcon,
 		NcActionButton,
 		NcListItem,
-		SidebarIcon,
 		StarIcon,
+		NcActionSeparator,
+		NcActionInput,
+		PencilIcon,
 	},
 
 	props: {
@@ -78,7 +117,11 @@ export default {
 		return {
 			loading: {
 				note: false,
+				category: false,
 			},
+			newTitle: '',
+			renaming: false,
+			showCategorySelect: false,
 		}
 	},
 
@@ -111,9 +154,24 @@ export default {
 		actionDeleteIcon() {
 			return 'icon-delete' + (this.loading.delete ? ' loading' : '')
 		},
+		categories() {
+			return [
+				{
+					id: '',
+					label: categoryLabel(''),
+				},
+				...this.$store.getters.getCategories(0, false).map((category) => ({
+					id: category,
+					label: categoryLabel(category),
+				})),
+			]
+		},
 	},
-
 	methods: {
+		onMenuChange(state) {
+			this.actionsOpen = state
+			this.showCategorySelect = false
+		},
 		onNoteSelected(noteId) {
 			this.$emit('note-selected', noteId)
 		},
@@ -131,24 +189,49 @@ export default {
 			this.actionsOpen = false
 			this.$emit('category-selected', this.note.category)
 		},
-		onToggleSidebar() {
-			this.actionsOpen = false
-			store.commit('setSidebarOpen', !store.state.app.sidebarOpen)
+		startRenaming() {
+			this.renaming = true
+			this.newTitle = this.note.title
+			this.$emit('start-renaming', this.note.id)
+		},
+		onInputChange(event) {
+			this.newTitle = event.target.value.toString()
 		},
-		onRename(newTitle) {
+		async onCategoryChange(result) {
+			this.showCategorySelect = false
+			const category = result?.id ?? result?.label ?? null
+			if (category !== null && this.note.category !== category) {
+				this.loading.category = true
+				await setCategory(this.note.id, category)
+				this.loading.category = false
+			}
+		},
+		async onRename() {
+			const newTitle = this.newTitle.toString()
+			if (!newTitle) {
+				return
+			}
 			this.loading.note = true
 			setTitle(this.note.id, newTitle)
-				.catch(() => {
+				.then(() => {
+					this.newTitle = ''
+				})
+				.catch((e) => {
+					console.error('Failed to rename note', e)
+					showError(this.t('notes', 'Error while renaming note.'))
 				})
 				.finally(() => {
 					this.loading.note = false
 				})
+
 			if (routeIsNewNote(this.$route)) {
 				this.$router.replace({
 					name: 'note',
 					params: { noteId: this.note.id.toString() },
 				})
 			}
+			this.renaming = false
+
 		},
 		async onDeleteNote() {
 			this.loading.delete = true

src/components/NoteItem.vue

@@ -1,5 +1,5 @@
 <template>
-	<NcAppContent :class="{ loading: loading || isManualSave, 'icon-error': !loading && (!note || note.error), 'sidebar-open': sidebarOpen }">
+	<NcAppContent :class="{ loading: loading || isManualSave, 'icon-error': !loading && (!note || note.error)}">
 		<div v-if="!loading && note && !note.error && !note.deleting"
 			id="note-container"
 			class="note-container"
@@ -47,13 +47,6 @@
 			</div>
 			<span class="action-buttons">
 				<NcActions :open.sync="actionsOpen" container=".action-buttons" menu-align="right">
-					<NcActionButton v-show="!sidebarOpen && !fullscreen"
-						icon="icon-details"
-						@click="onToggleSidebar"
-					>
-						<SidebarIcon slot="icon" :size="20" />
-						{{ t('notes', 'Details') }}
-					</NcActionButton>
 					<NcActionButton
 						v-tooltip.left="t('notes', 'CTRL + /')"
 						@click="onTogglePreview"
@@ -109,7 +102,6 @@ import EditIcon from 'vue-material-design-icons/LeadPencil.vue'
 import EyeIcon from 'vue-material-design-icons/Eye.vue'
 import FullscreenIcon from 'vue-material-design-icons/Fullscreen.vue'
 import NoEditIcon from 'vue-material-design-icons/PencilOff.vue'
-import SidebarIcon from 'vue-material-design-icons/PageLayoutSidebarRight.vue'
 import SyncAlertIcon from 'vue-material-design-icons/SyncAlert.vue'
 
 import { config } from '../config.js'
@@ -133,7 +125,6 @@ export default {
 		NcAppContent,
 		NcModal,
 		NoEditIcon,
-		SidebarIcon,
 		SyncAlertIcon,
 		TheEditor,
 		ThePreview,
@@ -179,9 +170,6 @@ export default {
 		isManualSave() {
 			return store.state.app.isManualSave
 		},
-		sidebarOpen() {
-			return store.state.app.sidebarOpen
-		},
 	},
 
 	watch: {
@@ -293,11 +281,6 @@ export default {
 			this.actionsOpen = false
 		},
 
-		onToggleSidebar() {
-			store.commit('setSidebarOpen', !store.state.app.sidebarOpen)
-			this.actionsOpen = false
-		},
-
 		onVisibilityChange() {
 			if (document.visibilityState === 'visible') {
 				this.stopRefreshTimer()
@@ -436,9 +419,6 @@ export default {
 		transition-duration: var(--animation-quick);
 		transition-property: padding-right;
 	}
-	.sidebar-open .note-container {
-		padding-right: 0px;
-	}
 }
 
 /* distraction free styles */

src/components/NotePlain.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="text-editor-wrapper" :class="{ loading: loading, 'icon-error': !loading && (!note || note.error), 'sidebar-open': sidebarOpen, 'is-mobile': isMobile }">
+	<div class="text-editor-wrapper" :class="{ loading: loading, 'icon-error': !loading && (!note || note.error), 'is-mobile': isMobile }">
 		<div v-show="!loading" ref="editor" class="text-editor" />
 	</div>
 </template>
@@ -41,9 +41,6 @@ export default {
 		isNewNote() {
 			return routeIsNewNote(this.$route)
 		},
-		sidebarOpen() {
-			return store.state.app.sidebarOpen
-		},
 	},
 
 	watch: {

src/components/NoteRich.vue

@@ -3,7 +3,9 @@
 		<NoteItem v-for="note in notes"
 			:key="note.id"
 			:note="note"
+			:renaming="isRenaming(note.id)"
 			@note-selected="onNoteSelected"
+			@start-renaming="onStartRenaming"
 		/>
 	</ul>
 </template>
@@ -24,11 +26,22 @@ export default {
 			required: true,
 		},
 	},
-
+	data() {
+		return {
+			renamingNotes: [],
+		}
+	},
 	methods: {
 		onNoteSelected(noteId) {
 			this.$emit('note-selected', noteId)
 		},
+		onStartRenaming(noteId) {
+			this.renamingNotes.push(noteId)
+		},
+		isRenaming(noteId) {
+			return this.renamingNotes.includes(noteId)
+		},
+
 	},
 }
 </script>