fix: merge conflicts

src/components/Editor.vue

@@ -118,6 +118,7 @@ import ContentContainer from './Editor/ContentContainer.vue'
 import Status from './Editor/Status.vue'
 import MainContainer from './Editor/MainContainer.vue'
 import Wrapper from './Editor/Wrapper.vue'
+import RightSideActions from './Editor/RightSideActions.vue'
 
 const EDITOR_PUSH_DEBOUNCE = 200
 
@@ -133,6 +134,7 @@ export default {
 		Reader: () => import(/* webpackChunkName: "editor" */'./Reader.vue'),
 		Status,
 		CollisionResolveDialog: () => import(/* webpackChunkName: "editor" */'./CollisionResolveDialog.vue'),
+		RightSideActions,
 	},
 	mixins: [
 		isMobile,
@@ -192,6 +194,10 @@ export default {
 			type: Number,
 			default: null,
 		},
+		basename: {
+			type: String,
+			default: null,
+		},
 		active: {
 			type: Boolean,
 			default: false,
@@ -885,4 +891,5 @@ export default {
 		0% { transform: rotate(0deg); }
 		100% { transform: rotate(360deg); }
 	}
+
 </style>

src/components/Editor/RightSideActions.vue

@@ -0,0 +1,126 @@
+<template>
+	<div class="right-side-actions">
+		<div class="user-avatar__icon user-avatar__icon--with-avatar"
+			:style="avatarUrl ? { backgroundImage: `url(${avatarUrl})` } : null">
+		</div>
+		<a :download="basename"
+			:href="fullPathToFile">
+			<Button class="download__button"
+				type="primary">
+				Download
+			</Button>
+		</a>
+		<Actions>
+			<ActionButton icon="icon-edit"
+				:close-after-click="true"
+				@click="showSidebar">
+				Open sidebar
+			</ActionButton>
+			<ActionButton icon="icon-delete"
+				:close-after-click="true"
+				@click="onDelete">
+				Delete
+			</ActionButton>
+		</Actions>
+	</div>
+</template>
+
+<script>
+
+import axios from '@nextcloud/axios'
+import { getCurrentUser } from '@nextcloud/auth'
+import Actions from '@nextcloud/vue/dist/Components/Actions'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import Button from '@nextcloud/vue/dist/Components/Button'
+import { getRootPath } from '../../helpers/files.js'
+import { getAvatarUrl } from '../../helpers'
+
+export default {
+	name: 'RightSideActions',
+
+	components: {
+		Actions,
+		ActionButton,
+		Button,
+	},
+
+	props: {
+		basename: {
+			type: String,
+			default: null,
+		},
+		relativePath: {
+			type: String,
+			default: '',
+		},
+	},
+
+	computed: {
+		avatarUrl() {
+			let currentUser = getCurrentUser() 
+			return currentUser ? getAvatarUrl(currentUser?.uid, 44) : null
+		},
+		fullPathToFile() {
+			return getRootPath() + this.relativePath
+		}
+	},
+
+	methods: {
+		async onDelete() {
+			try {
+				const url = this.fullPathToFile
+				await axios.delete(url)
+				this.closeEditor()
+			} catch (error) {
+				showError(error)
+			}
+		},
+		async showSidebar() {
+			// Open the sidebar sharing tab
+			if (OCA?.Files?.Sidebar) {
+				await OCA.Files.Sidebar.open(this.relativePath)
+			}
+		},
+	}
+}
+</script>
+
+<style scoped lang="scss">
+	$clickable-area: 35px;
+	$usericon-padding: 10px;
+
+	.right-side-actions {
+		display: flex;
+	}
+
+	.user-avatar__icon {
+		position: relative;
+		top: 5px;
+		width: $clickable-area;
+		min-width: $clickable-area;
+		height: $clickable-area;
+		margin: 0 5px !important;
+		border-radius: $clickable-area;
+		background-color: var(--color-background-darker);
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: $clickable-area - 2 * $usericon-padding;
+		&--with-avatar {
+			color: inherit;
+			background-size: cover;
+		}
+	}
+
+	.download__button {
+		border: 1px solid white !important;
+	}
+</style>
+
+<style lang="scss">
+	// It makes the app right sidebar appear under the Menubar instead
+	// of Hiding a part of it
+	// The value used is the max-length of the Menubar
+	#app-sidebar-vue {
+		top: 44px !important;
+	}
+</style>

src/components/Editor/SessionList.vue

@@ -151,7 +151,8 @@ export default {
 	}
 	.avatar-list {
 		border: none;
-		background-color: var(--color-main-background);
+		/* background-color: var(--color-main-background); */
+		background-color: unset;
 		padding: 0;
 		margin: 0;
 		padding-left: 3px;

src/components/Editor/Status.vue

@@ -26,12 +26,6 @@
 			<SavingIndicator :saving="saveStatusClass === 'saving'"
 				:error="saveStatusClass === 'error'" />
 		</div>
-		<SessionList :sessions="sessions">
-			<p slot="lastSaved" class="last-saved">
-				{{ t('text', 'Last saved') }}: {{ lastSavedString }}
-			</p>
-			<GuestNameDialog v-if="$isPublic && !currentSession.userId" :session="currentSession" />
-		</SessionList>
 	</div>
 </template>
 

src/components/Menu/ActionEntry.scss

@@ -1,3 +1,5 @@
+$text-menubar-action-white-color: white;
+
 %text__is-active-item-btn {
 	opacity: 1;
 	background-color: var(--color-primary-light);
@@ -14,7 +16,7 @@
 		border: 0;
 		// opacity: 0.5;
 		position: relative;
-		color: var(--color-main-text);
+		color: $text-menubar-action-white-color;
 		background-color: transparent;
 		vertical-align: top;
 		box-shadow: none;
@@ -67,7 +69,14 @@
 
 	.button-vue {
 		svg {
-			fill: var(--color-main-text);
+			fill: $text-menubar-action-white-color;
+		}
+		&:hover,
+		&:focus,
+		&:active {
+			svg {
+				fill: var(--color-main-text);
+			}
 		}
 	}
 

src/components/Menu/MenuBar.vue

@@ -34,6 +34,12 @@
 			'text-menubar--is-workspace': $isRichWorkspace
 		}">
 		<HelpModal v-if="displayHelp" @close="hideHelp" />
+		<div class="text-menubar--logo">
+			<a href="/">
+				<img src="http://nextcloud.local/core/img/logo/logo.svg">
+			</a>
+			<p>{{ fileName }}</p>
+		</div>
 
 		<div v-if="$isRichEditor"
 			ref="menubar"
@@ -108,6 +114,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		relativePath: {
+			type: String,
+			default: '',
+		},
 	},
 	data() {
 		return {
@@ -158,6 +168,9 @@ export default {
 				}),
 			}
 		},
+		fileName() {
+			return this.relativePath.substring(this.relativePath.lastIndexOf('/') + 1)
+		},
 	},
 	mounted() {
 		window.addEventListener('resize', this.getWindowWidth)
@@ -231,23 +244,34 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
+	$color-white: white;
 	.text-menubar {
 		--background-blur: blur(10px);
-		position: sticky;
+		position: fixed;
 		top: 0;
 		z-index: 10021; // above modal-header so menubar is always on top
 		background-color: var(--color-main-background-translucent);
 		backdrop-filter: var(--background-blur);
 		max-height: 44px; // important for mobile so that the buttons are always inside the container
 		padding-top:3px;
 		padding-bottom: 3px;
-
 		visibility: hidden;
 
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
+		.text-menubar--logo {
+			display: flex;
+			align-items: center;
+			min-width: 200px;
+			color: white;
+			font-weight: bold;
+
+			img {
+				width: 62px;
+				height: 48px;
+				margin-right: 10px;
+				margin-left: 10px;
+			}
+		}
 
 		&.text-menubar--ready:not(.text-menubar--autohide) {
 			visibility: visible;
@@ -266,13 +290,18 @@ export default {
 		.text-menubar__entries {
 			display: flex;
 			flex-grow: 1;
-			margin-left: calc((100% - var(--text-editor-max-width)) / 2);
+			margin-left: calc((100% - var(--text-editor-max-width) - 25%) / 2);
+			button, .icon, .entry-action {
+				color: $color-white !important;
+			}
 		}
 
 		.text-menubar__slot {
-			// width: 100%;
 			justify-content: flex-end;
 			display: flex;
+			.action-item svg {
+				fill: $color-white;
+			}
 		}
 
 		&.text-menubar--is-workspace {

src/components/ViewerComponent.vue

@@ -23,6 +23,7 @@
 <template>
 	<Editor :file-id="fileid"
 		:relative-path="filename"
+		:basename="basename"
 		:active="active"
 		:autofocus="autofocus"
 		:share-token="shareToken"
@@ -43,6 +44,10 @@ export default {
 			type: String,
 			default: null,
 		},
+		basename: {
+			type: String,
+			default: null,
+		},
 		fileid: {
 			type: Number,
 			default: null,

src/helpers/files.js

@@ -25,7 +25,8 @@ import { subscribe } from '@nextcloud/event-bus'
 import { openMimetypes } from './mime.js'
 import { getSharingToken } from './token.js'
 import RichWorkspace from '../views/RichWorkspace.vue'
-import { imagePath } from '@nextcloud/router'
+import { imagePath, generateRemoteUrl } from '@nextcloud/router'
+import { getCurrentUser } from '@nextcloud/auth'
 import store from '../store/index.js'
 
 const FILE_ACTION_IDENTIFIER = 'Edit with text app'
@@ -49,6 +50,14 @@ const optimalPath = function(from, to) {
 		: to
 }
 
+const getRootPath = function() {
+	if (getCurrentUser()) {
+		return generateRemoteUrl(`dav/files/${getCurrentUser().uid}`)
+	} else {
+		return generateRemoteUrl('webdav').replace('/remote.php', '/public.php')
+	}
+}
+
 const registerFileCreate = () => {
 	const newFileMenuPlugin = {
 		attach(menu) {
@@ -192,6 +201,7 @@ const FilesWorkspacePlugin = {
 }
 
 export {
+	getRootPath,
 	optimalPath,
 	registerFileActionFallback,
 	registerFileCreate,

src/helpers/index.js

@@ -44,7 +44,15 @@ const endpointUrl = (endpoint, isPublic = false) => {
 	return `${_baseUrl}/${endpoint}`
 }
 
+const getAvatarUrl = (user, size) => {
+	return generateUrl('/avatar/{user}/{size}', {
+		user,
+		size,
+	})
+}
+
 export {
 	documentReady,
 	endpointUrl,
+	getAvatarUrl,
 }