fix: code review

Signed-off-by: Luka Trovic <luka@nextcloud.com>

Author: luka-nextcloud

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" />

src/components/Editor/RightSideActions.vue

@@ -5,43 +5,43 @@
 		</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>
 
 <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 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: {
-		Actions,
-		ActionButton,
-		Button,
+		NcActions,
+		NcActionButton,
+		NcButton,
 	},
 
 	props: {

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;

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,

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,15 +295,15 @@ 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;
 			}
 		}
 
 		.text-menubar__slot {
 			justify-content: flex-end;
 			display: flex;
 			.action-item svg {
-				fill: $color-white;
+				fill: var(--color-white);
 			}
 		}
 

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 = () => {