Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: unify header #2808

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions src/components/Editor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down Expand Up @@ -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

Expand All @@ -133,6 +138,7 @@ export default {
Reader: () => import(/* webpackChunkName: "editor" */'./Reader.vue'),
Status,
CollisionResolveDialog: () => import(/* webpackChunkName: "editor" */'./CollisionResolveDialog.vue'),
RightSideActions,
},
mixins: [
isMobile,
Expand Down Expand Up @@ -192,6 +198,10 @@ export default {
type: Number,
default: null,
},
basename: {
type: String,
default: null,
},
active: {
type: Boolean,
default: false,
Expand Down Expand Up @@ -885,4 +895,5 @@ export default {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

</style>
126 changes: 126 additions & 0 deletions src/components/Editor/RightSideActions.vue
Original file line number Diff line number Diff line change
@@ -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 {
luka-nextcloud marked this conversation as resolved.
Show resolved Hide resolved
top: 44px !important;
}
</style>
3 changes: 2 additions & 1 deletion src/components/Editor/SessionList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
28 changes: 20 additions & 8 deletions src/components/Editor/Status.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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;
Expand Down
12 changes: 10 additions & 2 deletions src/components/Menu/ActionEntry.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
}
}

Expand Down
52 changes: 42 additions & 10 deletions src/components/Menu/MenuBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -108,6 +114,10 @@ export default {
type: Boolean,
default: false,
},
relativePath: {
type: String,
default: '',
},
},
data() {
return {
Expand Down Expand Up @@ -158,6 +168,9 @@ export default {
}),
}
},
fileName() {
return this.relativePath.substring(this.relativePath.lastIndexOf('/') + 1)
},
luka-nextcloud marked this conversation as resolved.
Show resolved Hide resolved
},
mounted() {
window.addEventListener('resize', this.getWindowWidth)
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down
5 changes: 5 additions & 0 deletions src/components/ViewerComponent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
<template>
<Editor :file-id="fileid"
:relative-path="filename"
:basename="basename"
:active="active"
:autofocus="autofocus"
:share-token="shareToken"
Expand All @@ -43,6 +44,10 @@ export default {
type: String,
default: null,
},
basename: {
type: String,
default: null,
},
fileid: {
type: Number,
default: null,
Expand Down
Loading