NotesView can change with; UI fixes

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
nextcloud · Mar 30, 2022 · 3859c00 · 3859c00
1 parent 359b3da
commit 3859c00
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 21 deletions.
diff --git a/l10n/de.js b/l10n/de.js
@@ -54,7 +54,7 @@ OC.L10N.register(
     "Full screen" : "Vollbild",
     "Note is read-only. You cannot change it." : "Notiz ist schreibgeschützt. Du kannst sie nicht ändern.",
     "Save failed. Click to retry." : "Speichern fehlgeschlagen. Klicken um es erneut zu versuchen.",
-    "Update conflict. Click for resolving manually." : "Aktualisierungskonflickt. Bitte klicken um den Konflikt manuell zu lösen.",
+    "Update conflict. Click for resolving manually." : "Aktualisierungskonflikt. Bitte klicken um den Konflikt manuell zu lösen.",
     "Error from Nextcloud server: {msg}" : "Fehler vom Nextcloud-Server: {msg}",
     "Set category" : "Kategorie ändern",
     "Category" : "Kategorie",

diff --git a/l10n/de.json b/l10n/de.json
@@ -52,7 +52,7 @@
     "Full screen" : "Vollbild",
     "Note is read-only. You cannot change it." : "Notiz ist schreibgeschützt. Du kannst sie nicht ändern.",
     "Save failed. Click to retry." : "Speichern fehlgeschlagen. Klicken um es erneut zu versuchen.",
-    "Update conflict. Click for resolving manually." : "Aktualisierungskonflickt. Bitte klicken um den Konflikt manuell zu lösen.",
+    "Update conflict. Click for resolving manually." : "Aktualisierungskonflikt. Bitte klicken um den Konflikt manuell zu lösen.",
     "Error from Nextcloud server: {msg}" : "Fehler vom Nextcloud-Server: {msg}",
     "Set category" : "Kategorie ändern",
     "Category" : "Kategorie",

diff --git a/l10n/de_DE.js b/l10n/de_DE.js
@@ -57,7 +57,7 @@ OC.L10N.register(
     "Full screen" : "Vollbild",
     "Note is read-only. You cannot change it." : "Notiz ist schreibgeschützt. Sie können sie nicht ändern.",
     "Save failed. Click to retry." : "Speichern fehlgeschlagen. Klicken um es erneut zu versuchen.",
-    "Update conflict. Click for resolving manually." : "Aktualisierungskonflickt. Bitte klicken um den Konflikt manuell zu lösen.",
+    "Update conflict. Click for resolving manually." : "Aktualisierungskonflikt. Bitte klicken um den Konflikt manuell zu lösen.",
     "Error from Nextcloud server: {msg}" : "Fehler vom Nextcloud-Server: {msg}",
     "Set category" : "Kategorie ändern",
     "Category" : "Kategorie",

diff --git a/l10n/de_DE.json b/l10n/de_DE.json
@@ -55,7 +55,7 @@
     "Full screen" : "Vollbild",
     "Note is read-only. You cannot change it." : "Notiz ist schreibgeschützt. Sie können sie nicht ändern.",
     "Save failed. Click to retry." : "Speichern fehlgeschlagen. Klicken um es erneut zu versuchen.",
-    "Update conflict. Click for resolving manually." : "Aktualisierungskonflickt. Bitte klicken um den Konflikt manuell zu lösen.",
+    "Update conflict. Click for resolving manually." : "Aktualisierungskonflikt. Bitte klicken um den Konflikt manuell zu lösen.",
     "Error from Nextcloud server: {msg}" : "Fehler vom Nextcloud-Server: {msg}",
     "Set category" : "Kategorie ändern",
     "Category" : "Kategorie",

diff --git a/src/components/Note.vue b/src/components/Note.vue
@@ -45,8 +45,8 @@
 					@input="onEdit"
 				/>
 			</div>
-			<span class="action-buttons">
-				<Actions container=".action-buttons" :primary="true">
+			<div class="action-buttons">
+				<Actions :primary="true">
 					<ActionButton
 						:icon="actionFavoriteIcon"
 						:close-after-click="true"
@@ -104,7 +104,7 @@
 						{{ t('notes', 'Update conflict. Click for resolving manually.') }}
 					</ActionButton>
 				</Actions>
-			</span>
+			</div>
 		</div>
 	</AppContent>
 </template>
@@ -531,10 +531,6 @@ export default {
 	top: 0px;
 }
 
-.action-buttons button {
-	padding: 15px;
-}
-
 /* Conflict Modal */
 .conflict-modal {
 	width: 70vw;

diff --git a/src/components/NotesGroup.vue → src/components/NotesCaption.vue b/src/components/NotesGroup.vue → src/components/NotesCaption.vue
@@ -6,7 +6,7 @@
 
 <script>
 export default {
-	name: 'NotesGroup',
+	name: 'NotesCaption',
 
 	components: {
 	},
@@ -26,5 +26,8 @@ export default {
 		font-weight: bold;
 		font-size: 1.2em;
 		padding-left: 10px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
 	}
 </style>
diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue
@@ -1,16 +1,23 @@
 <template>
-	<div class="notes-view">
-		<div class="spacer" />
+	<div class="notes-view" :class="{ collapsed: collapsed }">
+		<div class="header">
+			<Actions :class="{ flipped: collapsed }">
+				<ActionButton @click="collapsed=!collapsed">
+					<ArrowLeftThickIcon slot="icon" :size="24" fill-color="var(--color-main-text)" />
+					{{ t('notes', 'Note is read-only. You cannot change it.') }}
+				</ActionButton>
+			</Actions>
+		</div>
 		<div class="notes-list">
 			<NotesList v-if="groupedNotes.length === 1"
 				:notes="groupedNotes[0].notes"
 			/>
 			<template v-for="(group, idx) in groupedNotes" v-else>
-				<NotesGroup v-if="group.category && category!==group.category"
+				<NotesCaption v-if="group.category && category!==group.category"
 					:key="group.category"
 					:title="categoryToLabel(group.category)"
 				/>
-				<NotesGroup v-if="group.timeslot"
+				<NotesCaption v-if="group.timeslot"
 					:key="group.timeslot"
 					:title="group.timeslot"
 				/>
@@ -31,10 +38,15 @@
 </template>
 
 <script>
-/* eslint-disable no-console */
+
+import {
+	Actions,
+	ActionButton,
+} from '@nextcloud/vue'
+import ArrowLeftThickIcon from 'vue-material-design-icons/ArrowLeftThick'
 import { categoryLabel } from '../Util'
 import NotesList from './NotesList'
-import NotesGroup from './NotesGroup'
+import NotesCaption from './NotesCaption'
 import store from '../store'
 
 import { ObserveVisibility } from 'vue-observe-visibility'
@@ -44,7 +56,10 @@ export default {
 
 	components: {
 		NotesList,
-		NotesGroup,
+		NotesCaption,
+		Actions,
+		ActionButton,
+		ArrowLeftThickIcon,
 	},
 
 	directives: {
@@ -57,6 +72,7 @@ export default {
 			monthFormat: new Intl.DateTimeFormat(OC.getLanguage(), { month: 'long', year: 'numeric' }),
 			lastYear: new Date(new Date().getFullYear() - 1, 0),
 			showFirstNotesOnly: true,
+			collapsed: false,
 		}
 	},
 
@@ -160,16 +176,31 @@ export default {
 </script>
 <style scoped>
 	.notes-view {
-		min-width: 300px;
+		width: 300px;
 		position: sticky;
 		position: -webkit-sticky;
 		height: calc(100vh - 50px);
 		top: 50px;
 		border-right: 1px solid var(--color-border);
+		flex-grow: 0;
+		flex-shrink: 0;
+		transition-duration: var(--animation-quick);
+		transition-property: width;
+	}
+
+	.notes-view.collapsed {
+		width: 120px;
 	}
 
-	.spacer{
+	.header {
 		height: 50px;
+		text-align: right;
+		padding-right: 2px;
+		padding-top: 2px;
+	}
+
+	.flipped {
+		transform: scaleX(-1);
 	}
 
 	.notes-list {