From fdc4c1bc28d53fee4a97c9019dafdf5e3a916108 Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Tue, 10 Jan 2023 21:59:23 +0100
Subject: [PATCH 1/2] fix: merge conflicts

---
 src/components/Editor.vue                  |   7 ++
 src/components/Editor/RightSideActions.vue | 126 +++++++++++++++++++++
 src/components/Editor/SessionList.vue      |   3 +-
 src/components/Editor/Status.vue           |   6 -
 src/components/Menu/ActionEntry.scss       |  13 ++-
 src/components/Menu/MenuBar.vue            |  45 ++++++--
 src/components/ViewerComponent.vue         |   5 +
 src/helpers/files.js                       |  12 +-
 src/helpers/index.js                       |   8 ++
 9 files changed, 207 insertions(+), 18 deletions(-)
 create mode 100644 src/components/Editor/RightSideActions.vue

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 8a742cabba4..32c2fd03330 100644
--- a/src/components/Editor.vue
+++ b/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>
diff --git a/src/components/Editor/RightSideActions.vue b/src/components/Editor/RightSideActions.vue
new file mode 100644
index 00000000000..9144e642ec9
--- /dev/null
+++ b/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>
diff --git a/src/components/Editor/SessionList.vue b/src/components/Editor/SessionList.vue
index 82835706ed8..55ff0638857 100644
--- a/src/components/Editor/SessionList.vue
+++ b/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;
diff --git a/src/components/Editor/Status.vue b/src/components/Editor/Status.vue
index 526356abecb..e97138d6bdf 100644
--- a/src/components/Editor/Status.vue
+++ b/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>
 
diff --git a/src/components/Menu/ActionEntry.scss b/src/components/Menu/ActionEntry.scss
index ece97514ec0..6bb7010bf42 100644
--- a/src/components/Menu/ActionEntry.scss
+++ b/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);
+			}
 		}
 	}
 
diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
index 371bab8af75..edf9353c997 100644
--- a/src/components/Menu/MenuBar.vue
+++ b/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,10 +244,11 @@ 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);
@@ -242,12 +256,22 @@ export default {
 		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 {
diff --git a/src/components/ViewerComponent.vue b/src/components/ViewerComponent.vue
index 222653b028b..d6de46e9307 100644
--- a/src/components/ViewerComponent.vue
+++ b/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,
diff --git a/src/helpers/files.js b/src/helpers/files.js
index b95f06bcf4b..0393c59b0ba 100644
--- a/src/helpers/files.js
+++ b/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,
diff --git a/src/helpers/index.js b/src/helpers/index.js
index 93608fb032e..c37a0d290c0 100644
--- a/src/helpers/index.js
+++ b/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,
 }

From a81c8c3d10674350392488c22b17906ef863f84b Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Wed, 11 Jan 2023 15:53:00 +0100
Subject: [PATCH 2/2] fix: code review

Signed-off-by: Luka Trovic <luka@nextcloud.com>
---
 src/components/Editor.vue                  |  8 +++++--
 src/components/Editor/RightSideActions.vue | 28 +++++++++++-----------
 src/components/Editor/Status.vue           | 22 +++++++++++++++--
 src/components/Menu/ActionEntry.scss       |  7 +++---
 src/components/Menu/MenuBar.vue            | 15 +++++++-----
 src/helpers/files.js                       | 11 +++++----
 6 files changed, 58 insertions(+), 33 deletions(-)

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 32c2fd03330..f5a2d2db77d 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -54,12 +54,16 @@
 					<MenuBar v-if="renderMenus"
 						ref="menubar"
 						:autohide="autohide"
-						:loaded.sync="menubarLoaded">
+						:loaded.sync="menubarLoaded"
+						:relative-path="relativePath">
 						<Status :document="document"
 							:dirty="dirty"
 							:sessions="filteredSessions"
 							:sync-error="syncError"
-							:has-connection-issue="hasConnectionIssue" />
+							:has-connection-issue="hasConnectionIssue"
+							:last-saved-string="lastSavedString" />
+						<RightSideActions :relative-path="relativePath"
+							:basename="basename" />
 						<slot name="header" />
 					</MenuBar>
 					<div v-else class="menubar-placeholder" />
diff --git a/src/components/Editor/RightSideActions.vue b/src/components/Editor/RightSideActions.vue
index 9144e642ec9..d8e752586c8 100644
--- a/src/components/Editor/RightSideActions.vue
+++ b/src/components/Editor/RightSideActions.vue
@@ -5,23 +5,23 @@
 		</div>
 		<a :download="basename"
 			:href="fullPathToFile">
-			<Button class="download__button"
+			<NcButton class="download__button"
 				type="primary">
 				Download
-			</Button>
+			</NcButton>
 		</a>
-		<Actions>
-			<ActionButton icon="icon-edit"
+		<NcActions>
+			<NcActionButton icon="icon-edit"
 				:close-after-click="true"
 				@click="showSidebar">
 				Open sidebar
-			</ActionButton>
-			<ActionButton icon="icon-delete"
+			</NcActionButton>
+			<NcActionButton icon="icon-delete"
 				:close-after-click="true"
 				@click="onDelete">
 				Delete
-			</ActionButton>
-		</Actions>
+			</NcActionButton>
+		</NcActions>
 	</div>
 </template>
 
@@ -29,9 +29,9 @@
 
 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 NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
 import { getRootPath } from '../../helpers/files.js'
 import { getAvatarUrl } from '../../helpers'
 
@@ -39,9 +39,9 @@ export default {
 	name: 'RightSideActions',
 
 	components: {
-		Actions,
-		ActionButton,
-		Button,
+		NcActions,
+		NcActionButton,
+		NcButton,
 	},
 
 	props: {
diff --git a/src/components/Editor/Status.vue b/src/components/Editor/Status.vue
index e97138d6bdf..7bcaa04c3d8 100644
--- a/src/components/Editor/Status.vue
+++ b/src/components/Editor/Status.vue
@@ -141,8 +141,26 @@ export default {
 	}
 
 	.save-status {
-		border-radius: 50%;
-		color: var(--color-text-lighter);
+		--color-text-white: white;
+		display: inline-flex;
+		padding: 0;
+		text-overflow: ellipsis;
+		color: var(--color-text-white);
+		position: relative;
+		top: 9px;
+		min-width: 85px;
+		max-height: 36px;
+
+		&.error {
+			background-color: var(--color-error);
+			color: var(--color-main-background);
+			border-radius: 3px;
+		}
+	}
+</style>
+
+<style lang="scss">
+	.saved-status,.saving-status {
 		display: inline-flex;
 		justify-content: center;
 		padding: 0;
diff --git a/src/components/Menu/ActionEntry.scss b/src/components/Menu/ActionEntry.scss
index 6bb7010bf42..bfff23da640 100644
--- a/src/components/Menu/ActionEntry.scss
+++ b/src/components/Menu/ActionEntry.scss
@@ -1,5 +1,3 @@
-$text-menubar-action-white-color: white;
-
 %text__is-active-item-btn {
 	opacity: 1;
 	background-color: var(--color-primary-light);
@@ -10,13 +8,14 @@ $text-menubar-action-white-color: white;
 }
 
 .text-menubar, .v-popper__inner {
+	--text-menubar-action-white-color: white;
 	button.entry-action__button {
 		height: 44px;
 		margin: 0;
 		border: 0;
 		// opacity: 0.5;
 		position: relative;
-		color: $text-menubar-action-white-color;
+		color: var(--text-menubar-action-white-color);
 		background-color: transparent;
 		vertical-align: top;
 		box-shadow: none;
@@ -69,7 +68,7 @@ $text-menubar-action-white-color: white;
 
 	.button-vue {
 		svg {
-			fill: $text-menubar-action-white-color;
+			fill: var(--text-menubar-action-white-color);
 		}
 		&:hover,
 		&:focus,
diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
index edf9353c997..02b8b4a1b71 100644
--- a/src/components/Menu/MenuBar.vue
+++ b/src/components/Menu/MenuBar.vue
@@ -36,7 +36,7 @@
 		<HelpModal v-if="displayHelp" @close="hideHelp" />
 		<div class="text-menubar--logo">
 			<a href="/">
-				<img src="http://nextcloud.local/core/img/logo/logo.svg">
+				<img src="../../../../../core/img/logo/logo.svg">
 			</a>
 			<p>{{ fileName }}</p>
 		</div>
@@ -245,13 +245,16 @@ export default {
 </script>
 
 <style lang="scss">
-	$color-white: white;
 	.text-menubar {
+		--color-white: white;
 		--background-blur: blur(10px);
 		position: fixed;
 		top: 0;
-		z-index: 10021; // above modal-header so menubar is always on top
-		background-color: var(--color-main-background-translucent);
+		width: 100%;
+		display: flex;
+		justify-content: flex-end;
+		background-color: var(--color-primary);
+		z-index: 10021; // above modal-header and menububble so menubar is always on top
 		backdrop-filter: var(--background-blur);
 		max-height: 44px; // important for mobile so that the buttons are always inside the container
 		padding-top:3px;
@@ -292,7 +295,7 @@ export default {
 			flex-grow: 1;
 			margin-left: calc((100% - var(--text-editor-max-width) - 25%) / 2);
 			button, .icon, .entry-action {
-				color: $color-white !important;
+				color:  var(--color-white) !important;
 			}
 		}
 
@@ -300,7 +303,7 @@ export default {
 			justify-content: flex-end;
 			display: flex;
 			.action-item svg {
-				fill: $color-white;
+				fill: var(--color-white);
 			}
 		}
 
diff --git a/src/helpers/files.js b/src/helpers/files.js
index 0393c59b0ba..667dc37c3c9 100644
--- a/src/helpers/files.js
+++ b/src/helpers/files.js
@@ -50,12 +50,13 @@ 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 getRootPath = () => {
+    const user = getCurrentUser()
+	if (user) {
+		return generateRemoteUrl(`dav/files/${user.uid}`)
 	}
+	
+	return generateRemoteUrl('webdav').replace('/remote.php', '/public.php')
 }
 
 const registerFileCreate = () => {