mirror of
https://github.com/nextcloud/server.git
synced 2026-02-18 18:28:50 -05:00
refactor(files): re-position "new"-menu and make it primary
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen
parent
4ca9fb836d
commit
d8b05ec6c3
4 changed files with 44 additions and 22 deletions
|
|
@ -349,8 +349,7 @@ export default defineComponent({
|
|||
flex: 1 1 100% !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-block: 0;
|
||||
margin-inline: 10px;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
|
||||
:deep() {
|
||||
|
|
|
|||
|
|
@ -5,27 +5,33 @@
|
|||
<template>
|
||||
<NcAppContent :page-heading="pageHeading" data-cy-files-content>
|
||||
<div class="files-list__header" :class="{ 'files-list__header--public': isPublic }">
|
||||
<!-- Uploader -->
|
||||
<component :is="isNarrow ? 'Teleport' : 'div'" :to="isNarrow ? 'body' : undefined">
|
||||
<UploadPicker
|
||||
v-if="canUpload && !isQuotaExceeded && currentFolder"
|
||||
allow-folders
|
||||
:no-label="isNarrow"
|
||||
class="files-list__header-upload-button"
|
||||
:class="{ 'files-list__header-upload-button--narrow': isNarrow }"
|
||||
:content="getContent"
|
||||
:destination="currentFolder"
|
||||
:forbidden-characters="forbiddenCharacters"
|
||||
multiple
|
||||
primary
|
||||
@failed="onUploadFail"
|
||||
@uploaded="onUpload" />
|
||||
</component>
|
||||
|
||||
<!-- Current folder breadcrumbs -->
|
||||
<BreadCrumbs :path="directory" @reload="fetchContent">
|
||||
<template #actions>
|
||||
<!-- Uploader -->
|
||||
<UploadPicker
|
||||
v-if="canUpload && !isQuotaExceeded && currentFolder"
|
||||
allow-folders
|
||||
:no-label="isNarrow"
|
||||
class="files-list__header-upload-button"
|
||||
:content="getContent"
|
||||
:destination="currentFolder"
|
||||
:forbidden-characters="forbiddenCharacters"
|
||||
multiple
|
||||
@failed="onUploadFail"
|
||||
@uploaded="onUpload" />
|
||||
</template>
|
||||
</BreadCrumbs>
|
||||
<BreadCrumbs :path="directory" @reload="fetchContent" />
|
||||
|
||||
<!-- Secondary loading indicator -->
|
||||
<NcLoadingIcon v-if="isRefreshing" class="files-list__refresh-icon" />
|
||||
<!-- Loading indicator -->
|
||||
<NcLoadingIcon
|
||||
v-if="isRefreshing"
|
||||
class="files-list__refresh-icon"
|
||||
:name="t('files', 'File list is reloading')" />
|
||||
|
||||
<!-- File list actions (global actions like restore all files from trashbin) -->
|
||||
<NcActions
|
||||
class="files-list__header-actions"
|
||||
:inline="1"
|
||||
|
|
@ -48,8 +54,10 @@
|
|||
</NcActionButton>
|
||||
</NcActions>
|
||||
|
||||
<!-- Filters thats can be applied to the file list -->
|
||||
<FileListFilters />
|
||||
|
||||
<!-- Grid view toggle -->
|
||||
<NcButton
|
||||
v-if="enableGridView"
|
||||
:aria-label="gridViewButtonLabel"
|
||||
|
|
@ -165,6 +173,7 @@ import { UploadPicker, UploadStatus } from '@nextcloud/upload'
|
|||
import { useThrottleFn } from '@vueuse/core'
|
||||
import { normalize, relative } from 'path'
|
||||
import { computed, defineComponent } from 'vue'
|
||||
import Teleport from 'vue2-teleport' // TODO: replace with native Vue Teleport when we switch to Vue 3
|
||||
import NcActionButton from '@nextcloud/vue/components/NcActionButton'
|
||||
import NcActions from '@nextcloud/vue/components/NcActions'
|
||||
import NcAppContent from '@nextcloud/vue/components/NcAppContent'
|
||||
|
|
@ -213,6 +222,7 @@ export default defineComponent({
|
|||
NcEmptyContent,
|
||||
NcIconSvgWrapper,
|
||||
NcLoadingIcon,
|
||||
Teleport,
|
||||
UploadPicker,
|
||||
ViewGridIcon,
|
||||
IconAlertCircleOutline,
|
||||
|
|
@ -776,6 +786,7 @@ export default defineComponent({
|
|||
.files-list {
|
||||
&__header {
|
||||
display: flex;
|
||||
gap: var(--default-grid-baseline);
|
||||
align-items: center;
|
||||
// Do not grow or shrink (vertically)
|
||||
flex: 0 0;
|
||||
|
|
@ -797,10 +808,16 @@ export default defineComponent({
|
|||
|
||||
&-actions {
|
||||
min-width: fit-content !important;
|
||||
margin-inline: calc(var(--default-grid-baseline) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
&__header-upload-button--narrow {
|
||||
// this is teleported to body on narrow screens
|
||||
position: fixed;
|
||||
inset-block-end: calc(1.5 * var(--default-grid-baseline));
|
||||
inset-inline-end: calc(1.5 * var(--default-grid-baseline));
|
||||
}
|
||||
|
||||
&__before {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
7
build/frontend-legacy/package-lock.json
generated
7
build/frontend-legacy/package-lock.json
generated
|
|
@ -81,6 +81,7 @@
|
|||
"vue-localstorage": "^0.6.2",
|
||||
"vue-material-design-icons": "^5.3.1",
|
||||
"vue-router": "^3.6.5",
|
||||
"vue2-teleport": "^1.1.4",
|
||||
"vuedraggable": "^2.24.3",
|
||||
"vuex": "^3.6.2",
|
||||
"vuex-router-sync": "^5.0.0",
|
||||
|
|
@ -15052,7 +15053,6 @@
|
|||
"integrity": "sha512-RIDh866U8agLgiIcdpB+COKnlCreHJLfIhWC3LVflku5YHfpnsIKigRZeFfMfCc4dVcqNVfQQ5gO/afOck064A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/estree": "1.0.8"
|
||||
},
|
||||
|
|
@ -17956,6 +17956,11 @@
|
|||
"vue": "^2.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue2-teleport": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/vue2-teleport/-/vue2-teleport-1.1.4.tgz",
|
||||
"integrity": "sha512-mGTszyQP6k3sSSk7MBq+PZdVojHYLwg5772hl3UVpu5uaLBqWIZ5eNP6/TjkDrf1XUTTxybvpXC6inpjwO+i/Q=="
|
||||
},
|
||||
"node_modules/vuedraggable": {
|
||||
"version": "2.24.3",
|
||||
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
|
||||
|
|
|
|||
|
|
@ -97,6 +97,7 @@
|
|||
"vue-localstorage": "^0.6.2",
|
||||
"vue-material-design-icons": "^5.3.1",
|
||||
"vue-router": "^3.6.5",
|
||||
"vue2-teleport": "^1.1.4",
|
||||
"vuedraggable": "^2.24.3",
|
||||
"vuex": "^3.6.2",
|
||||
"vuex-router-sync": "^5.0.0",
|
||||
|
|
|
|||
Loading…
Reference in a new issue