feat: unify header

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" />
@@ -118,6 +122,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 +138,7 @@ export default {
 		Reader: () => import(/* webpackChunkName: "editor" */'./Reader.vue'),
 		Status,
 		CollisionResolveDialog: () => import(/* webpackChunkName: "editor" */'./CollisionResolveDialog.vue'),
+		RightSideActions,
 	},
 	mixins: [
 		isMobile,
@@ -192,6 +198,10 @@ export default {
 			type: Number,
 			default: null,
 		},
+		basename: {
+			type: String,
+			default: null,
+		},
 		active: {
 			type: Boolean,
 			default: false,
@@ -885,4 +895,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">
+			<NcButton class="download__button"
+				type="primary">
+				Download
+			</NcButton>
+		</a>
+		<NcActions>
+			<NcActionButton icon="icon-edit"
+				:close-after-click="true"
+				@click="showSidebar">
+				Open sidebar
+			</NcActionButton>
+			<NcActionButton icon="icon-delete"
+				:close-after-click="true"
+				@click="onDelete">
+				Delete
+			</NcActionButton>
+		</NcActions>
+	</div>
+</template>
+
+<script>
+
+import axios from '@nextcloud/axios'
+import { getCurrentUser } from '@nextcloud/auth'
+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'
+
+export default {
+	name: 'RightSideActions',
+
+	components: {
+		NcActions,
+		NcActionButton,
+		NcButton,
+	},
+
+	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>
 
@@ -147,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;

src/components/Menu/ActionEntry.scss

@@ -8,13 +8,14 @@
 }
 
 .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: var(--color-main-text);
+		color: var(--text-menubar-action-white-color);
 		background-color: transparent;
 		vertical-align: top;
 		box-shadow: none;
@@ -67,7 +68,14 @@
 
 	.button-vue {
 		svg {
-			fill: var(--color-main-text);
+			fill: var(--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="../../../../../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,37 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 	.text-menubar {
+		--color-white: white;
 		--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);
+		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;
 		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 +293,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:  var(--color-white) !important;
+			}
 		}
 
 		.text-menubar__slot {
-			// width: 100%;
 			justify-content: flex-end;
 			display: flex;
+			.action-item svg {
+				fill: var(--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,