mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
file view refactoring
This commit is contained in:
Čarodej
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="desktop-toolbar">
|
||||
<div id="desktop-toolbar" class="md:block hidden">
|
||||
<div class="toolbar-wrapper">
|
||||
<div @click="goBack" class="location">
|
||||
<chevron-left-icon :class="{'is-active': isNotHomepage }" class="icon-back" size="17" />
|
||||
@@ -360,12 +360,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
#desktop-toolbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.team-preview:hover {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="mobile-actions-wrapper">
|
||||
<div class="sticky dark:bg-dark-background bg-white top-12 pb-3 px-4 z-10 whitespace-nowrap overflow-x-auto md:hidden block">
|
||||
|
||||
<!--Show Buttons-->
|
||||
<div v-if="! isSelectMode" class="mobile-actions">
|
||||
@@ -20,7 +20,7 @@
|
||||
</div>
|
||||
|
||||
<!--Upload Progressbar-->
|
||||
<UploadProgress />
|
||||
<UploadProgress class="pt-3"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -82,32 +82,4 @@
|
||||
.button-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#mobile-actions-wrapper {
|
||||
display: none;
|
||||
background: white;
|
||||
position: sticky;
|
||||
top: 35px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.mobile-actions {
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
margin: 0 -15px;
|
||||
padding: 10px 0 10px 15px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
#mobile-actions-wrapper {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
#mobile-actions-wrapper {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
:class="{'is-offset': filesInQueueTotal > 0, 'is-dragging': isDragging }"
|
||||
class="file-content"
|
||||
class="file-content md:w-full md:overflow-y-auto md:h-full"
|
||||
id="file-content-id"
|
||||
@drop.stop.prevent="dropUpload($event)"
|
||||
@keydown.delete="deleteItems"
|
||||
@@ -9,78 +9,58 @@
|
||||
@dragleave="dragLeave"
|
||||
@dragover.prevent
|
||||
tabindex="-1"
|
||||
@click.self="filesContainerClick"
|
||||
>
|
||||
<div
|
||||
:class="{'is-visible': isVisibleSidebar, 'mobile-multi-select': isMultiSelect}"
|
||||
@click.self="filesContainerClick"
|
||||
class="files-container"
|
||||
ref="fileContainer"
|
||||
>
|
||||
<MobileToolbar />
|
||||
<!--Show empty page if no content-->
|
||||
<EmptyFilePage>
|
||||
<slot name="empty-file-page" />
|
||||
</EmptyFilePage>
|
||||
|
||||
<!--Mobile Actions-->
|
||||
<FileActionsMobile>
|
||||
<slot name="file-actions-mobile" />
|
||||
</FileActionsMobile>
|
||||
<!--Item previews list-->
|
||||
<div v-if="isList" class="file-list-wrapper">
|
||||
<transition-group
|
||||
name="file"
|
||||
tag="section"
|
||||
class="file-list"
|
||||
:class="FilePreviewType"
|
||||
>
|
||||
<FileItemList
|
||||
@dragstart="dragStart(item)"
|
||||
@drop.stop.native.prevent="dragFinish(item, $event)"
|
||||
@contextmenu.native.prevent="contextMenu($event, item)"
|
||||
:item="item"
|
||||
v-for="item in entries"
|
||||
:key="item.data.id"
|
||||
class="file-item"
|
||||
:class="draggedItems.includes(item) ? 'dragged' : ''"
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
<!--Show empty page if no content-->
|
||||
<EmptyFilePage>
|
||||
<slot name="empty-file-page" />
|
||||
</EmptyFilePage>
|
||||
|
||||
<!--Item previews list-->
|
||||
<div v-if="isList" class="file-list-wrapper">
|
||||
<transition-group
|
||||
name="file"
|
||||
tag="section"
|
||||
class="file-list"
|
||||
:class="FilePreviewType"
|
||||
>
|
||||
<FileItemList
|
||||
@dragstart="dragStart(item)"
|
||||
@drop.stop.native.prevent="dragFinish(item, $event)"
|
||||
@contextmenu.native.prevent="contextMenu($event, item)"
|
||||
:item="item"
|
||||
v-for="item in entries"
|
||||
:key="item.data.id"
|
||||
class="file-item"
|
||||
:class="draggedItems.includes(item) ? 'dragged' : ''"
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
<!--Item previews grid-->
|
||||
<div v-if="isGrid" class="file-grid-wrapper">
|
||||
<transition-group
|
||||
name="file"
|
||||
tag="section"
|
||||
class="file-list"
|
||||
:class="FilePreviewType"
|
||||
>
|
||||
<FileItemGrid
|
||||
@dragstart="dragStart(item)"
|
||||
@drop.native.prevent="dragFinish(item, $event)"
|
||||
@contextmenu.native.prevent="contextMenu($event, item)"
|
||||
:item="item"
|
||||
v-for="item in entries"
|
||||
:key="item.data.id"
|
||||
class="file-item"
|
||||
:class="draggedItems.includes(item) ? 'dragged' : '' "
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--File Info Panel-->
|
||||
<div :class="{'is-visible': isVisibleSidebar }" class="file-info-container">
|
||||
<InfoSidebar />
|
||||
</div>
|
||||
<!--Item previews grid-->
|
||||
<div v-if="isGrid" class="file-grid-wrapper">
|
||||
<transition-group
|
||||
name="file"
|
||||
tag="section"
|
||||
class="file-list"
|
||||
:class="FilePreviewType"
|
||||
>
|
||||
<FileItemGrid
|
||||
@dragstart="dragStart(item)"
|
||||
@drop.native.prevent="dragFinish(item, $event)"
|
||||
@contextmenu.native.prevent="contextMenu($event, item)"
|
||||
:item="item"
|
||||
v-for="item in entries"
|
||||
:key="item.data.id"
|
||||
class="file-item"
|
||||
:class="draggedItems.includes(item) ? 'dragged' : '' "
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileActionsMobile from '/resources/js/components/FilesView/FileActionsMobile'
|
||||
import MobileToolbar from '/resources/js/components/FilesView/MobileToolbar'
|
||||
import EmptyFilePage from '/resources/js/components/FilesView/EmptyFilePage'
|
||||
import EmptyMessage from '/resources/js/components/FilesView/EmptyMessage'
|
||||
import FileItemList from '/resources/js/components/FilesView/FileItemList'
|
||||
@@ -88,14 +68,11 @@
|
||||
import InfoSidebar from '/resources/js/components/FilesView/InfoSidebar'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '/resources/js/bus'
|
||||
import {debounce} from "lodash";
|
||||
|
||||
export default {
|
||||
name: 'FileBrowser',
|
||||
components: {
|
||||
FileActionsMobile,
|
||||
EmptyFilePage,
|
||||
MobileToolbar,
|
||||
FileItemList,
|
||||
FileItemGrid,
|
||||
EmptyMessage,
|
||||
@@ -231,7 +208,7 @@
|
||||
|
||||
// Scroll top
|
||||
let container = document.getElementsByClassName(
|
||||
'files-container'
|
||||
'file-content'
|
||||
)[0]
|
||||
|
||||
if (container)
|
||||
@@ -264,11 +241,6 @@
|
||||
|
||||
}
|
||||
|
||||
.mobile-multi-select {
|
||||
bottom: 50px !important;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.button-upload {
|
||||
display: block;
|
||||
text-align: center;
|
||||
@@ -282,7 +254,6 @@
|
||||
}
|
||||
|
||||
.file-content {
|
||||
display: flex;
|
||||
|
||||
&.is-dragging {
|
||||
@include transform(scale(0.99));
|
||||
@@ -290,16 +261,6 @@
|
||||
}
|
||||
|
||||
.files-container {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
flex: 0 0 100%;
|
||||
@include transition(150ms);
|
||||
position: relative;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
&.is-visible {
|
||||
flex: 0 1 100%;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
|
||||
@@ -311,12 +272,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.file-info-container {
|
||||
flex: 0 0 300px;
|
||||
padding-left: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Transition
|
||||
.file-move {
|
||||
transition: transform 0.6s;
|
||||
@@ -336,60 +291,16 @@
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 960px) {
|
||||
|
||||
.file-content {
|
||||
position: absolute;
|
||||
top: 72px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 0;
|
||||
@include transition;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
&.is-offset {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
.file-info-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-search {
|
||||
display: block;
|
||||
}
|
||||
.file-content {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 0;
|
||||
@include transition;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
&.is-offset {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.files-container {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
overflow-y: auto;
|
||||
|
||||
.file-list {
|
||||
|
||||
@@ -399,25 +310,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.file-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0;
|
||||
@include transition;
|
||||
|
||||
&.is-offset {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-search {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.file-info-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -182,8 +182,7 @@
|
||||
<style scoped lang="scss">
|
||||
|
||||
.info-wrapper {
|
||||
padding-bottom: 20px;
|
||||
height: 100%;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.info-headline {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="mobile-toolbar">
|
||||
<div class="sticky top-0 dark:bg-dark-background bg-white flex text-center py-4 px-4 w-full justify-between items-center z-10 md:hidden block">
|
||||
|
||||
<!-- Go back-->
|
||||
<div @click="goBack" class="go-back-button">
|
||||
<div @click="goBack" class="go-back-button flex text-left items-center">
|
||||
<chevron-left-icon size="17" class="icon-back" :class="{'is-visible': isLoadedFolder }" />
|
||||
|
||||
<!--Folder Title-->
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
<!--More Actions-->
|
||||
<div class="more-actions-button">
|
||||
<div v-if="$checkPermission('master')" @click="showMobileNavigation" class="tap-area">
|
||||
<div v-if="$checkPermission('master')" @click="showMobileNavigation" class="tap-area px-1.5">
|
||||
<menu-icon size="17" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -66,96 +66,59 @@
|
||||
@import '/resources/sass/vuefilemanager/_variables';
|
||||
@import '/resources/sass/vuefilemanager/_mixins';
|
||||
|
||||
.mobile-toolbar {
|
||||
background: white;
|
||||
text-align: center;
|
||||
display: none;
|
||||
padding: 10px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 6;
|
||||
.go-back-button {
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.icon-back {
|
||||
pointer-events: none;
|
||||
opacity: 0.15;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
margin-top: -2px;
|
||||
margin-right: 4px;
|
||||
|
||||
.go-back-button {
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
|
||||
.icon-back {
|
||||
pointer-events: none;
|
||||
opacity: 0.15;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
margin-top: -2px;
|
||||
margin-right: 4px;
|
||||
|
||||
&.is-visible {
|
||||
pointer-events: initial;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
&.is-visible {
|
||||
pointer-events: initial;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.directory-name {
|
||||
line-height: 1;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
@include font-size(16);
|
||||
color: $text;
|
||||
font-weight: 700;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
}
|
||||
.directory-name {
|
||||
line-height: 1;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
@include font-size(16);
|
||||
color: $text;
|
||||
font-weight: 700;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.more-actions-button {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
.more-actions-button {
|
||||
position: relative;
|
||||
|
||||
.tap-area {
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -20px;
|
||||
.tap-area {
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
.mobile-toolbar {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
||||
.mobile-toolbar {
|
||||
background: $dark_mode_background;
|
||||
.directory-name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.directory-name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
.more-actions-button .tap-area {
|
||||
|
||||
.more-actions-button .tap-area {
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<li class="menu-option group" :class="{'hover-disabled': isHoverDisabled}">
|
||||
<li class="menu-option group flex items-center" :class="{'hover-disabled': isHoverDisabled}">
|
||||
<div class="icon-left group-hover-text-theme">
|
||||
<calendar-icon v-if="icon === 'calendar'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<grid-icon v-if="icon === 'grid'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
@@ -41,9 +41,9 @@
|
||||
{{ title }}
|
||||
</div>
|
||||
<div v-if="arrow" class="icon-right group-hover-text-theme">
|
||||
<chevron-right-icon v-if="arrow === 'right'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<arrow-up-icon v-if="arrow === 'up'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<arrow-down-icon v-if="arrow === 'down'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
|
||||
<chevron-right-icon v-if="arrow === 'right'" size="17" class="group-hover-text-theme inline-block" :class="{'text-theme': isActive}"/>
|
||||
<arrow-up-icon v-if="arrow === 'up'" size="17" class="group-hover-text-theme inline-block" :class="{'text-theme': isActive}"/>
|
||||
<arrow-down-icon v-if="arrow === 'down'" size="17" class="group-hover-text-theme inline-block" :class="{'text-theme': isActive}"/>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
@@ -150,18 +150,12 @@ import {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
color: $text;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon-right {
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
|
||||
svg {
|
||||
@include transform(translateY(3px));
|
||||
}
|
||||
|
||||
polyline, line {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="progress-title">
|
||||
|
||||
<!--Is processing-->
|
||||
<span v-if="isProcessingFile">
|
||||
<span v-if="isProcessingFile" class="flex items-center justify-center">
|
||||
<refresh-cw-icon size="12" class="sync-alt text-theme" />
|
||||
{{ $t('uploading.processing_file') }}
|
||||
</span>
|
||||
@@ -89,7 +89,6 @@
|
||||
|
||||
.upload-progress {
|
||||
width: 100%;
|
||||
padding-bottom: 10px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
@@ -98,7 +97,7 @@
|
||||
|
||||
.cancel-icon {
|
||||
cursor: pointer;
|
||||
padding: 0 13px;
|
||||
padding: 0 7px 0 13px;
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -119,16 +118,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.upload-progress {
|
||||
|
||||
.progress-wrapper .cancel-icon {
|
||||
padding: 0 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.progress-bar {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
Reference in New Issue
Block a user