nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 00:02:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

file view refactoring

Browse Source
This commit is contained in:
Čarodej
2021-10-27 09:53:59 +02:00
parent e3ddf27023
commit 21d6410f76
42 changed files with 866 additions and 1467 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
resources/js/App.vue
View File

@@ -1,5 +1,5 @@
<template>
<div id="vuefilemanager" @click="unClick" v-cloak>
<div @click="unClick" v-cloak>
<!--UI components-->
<Alert />
@@ -154,21 +154,6 @@ export default {
height: 100%;
}
#vuefilemanager {
position: absolute;
width: 100%;
height: 100%;
overflow-y: auto;
scroll-behavior: smooth;
}
@media only screen and (max-width: 690px) {
.is-scaled-down {
@include transform(scale(0.95));
}
}
// Dark mode support
.dark {

8
resources/js/components/FilesView/DesktopToolbar.vue
View File

@@ -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;

32
resources/js/components/FilesView/FileActionsMobile.vue
View File

@@ -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>

200
resources/js/components/FilesView/FileBrowser.vue
View File

@@ -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>

3
resources/js/components/FilesView/InfoSidebar.vue
View File

@@ -182,8 +182,7 @@
<style scoped lang="scss">
.info-wrapper {
padding-bottom: 20px;
height: 100%;
padding-bottom: 50px;
}
.info-headline {

125
resources/js/components/FilesView/MobileToolbar.vue
View File

@@ -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>

14
resources/js/components/FilesView/Option.vue
View File

@@ -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;
}

15
resources/js/components/FilesView/UploadProgress.vue
View File

@@ -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;

8
resources/js/components/Others/EmptyPageContent.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="empty-page-content">
<div class="content">
<div class="icon">
<file-icon v-if="icon === 'file'" size="38"></file-icon>
<file-text-icon v-if="icon === 'file-text'" size="38"></file-text-icon>
<settings-icon v-if="icon === 'settings'" size="38"></settings-icon>
<div class="icon inline-block">
<file-icon v-if="icon === 'file'" size="38" />
<file-text-icon v-if="icon === 'file-text'" size="38" />
<settings-icon v-if="icon === 'settings'" size="38" />
</div>
<div class="header">
<h1 class="title">{{ title }}</h1>

26
resources/js/components/Sidebar/ContentSidebar.vue
View File

@@ -1,5 +1,5 @@
<template>
<section class="content-sidebar" id="content-sidebar">
<section class="content-sidebar flex-none xl:w-56 w-52 sm:block hidden overflow-y-auto pt-6 select-none" id="content-sidebar">
<slot></slot>
</section>
</template>
@@ -15,30 +15,10 @@
@import '/resources/sass/vuefilemanager/_mixins';
.content-sidebar {
//background: linear-gradient(0deg, rgba(246, 245, 241, 0.4) 0%, rgba(243, 244, 246, 0.4) 100%);
background: rgba($light_background, 0.6);
user-select: none;
padding-top: 25px;
overflow-y: auto;
flex: 0 0 225px;
}
@media only screen and (max-width: 1024px) {
.content-sidebar {
flex: 0 0 205px;
}
}
@media only screen and (max-width: 690px) {
.content-sidebar {
display: none;
}
}
.dark {
.content-sidebar {
background: rgba($dark_mode_foreground, 0.2);
}
.dark .content-sidebar {
background: rgba($dark_mode_foreground, 0.2);
}
</style>

13
resources/js/components/Sidebar/SidebarNavigation.vue
View File

@@ -1,5 +1,5 @@
<template>
<nav class="menu-bar">
<nav class="menu-bar flex-none xl:w-20 w-16 sm:grid hidden">
<div class="icon-navigation menu" v-if="user">
<router-link :to="{name: 'Profile'}" class="icon-navigation-item user">
@@ -104,8 +104,6 @@
background: $light_background;
user-select: none;
padding-top: 25px;
display: grid;
flex: 0 0 72px;
}
.icon-navigation {
@@ -190,9 +188,6 @@
}
@media only screen and (max-width: 1024px) {
.menu-bar {
flex: 0 0 60px;
}
.icon-navigation {
@@ -206,12 +201,6 @@
}
}
@media only screen and (max-width: 690px) {
.menu-bar {
display: none;
}
}
.dark {
.dark-switcher {

4
resources/js/components/Teams/EditTeamFolderPopup.vue
View File

@@ -181,7 +181,9 @@
})
this.$nextTick(() => {
this.$refs.email.focus()
if (this.$refs.email)
this.$refs.email.focus()
})
})

4
resources/js/views/Admin.vue
View File

@@ -1,5 +1,5 @@
<template>
<section id="viewport">
<div class="sm:flex md:h-screen md:overflow-hidden">
<!--On Top of App Components-->
<FilePreview />
<Spotlight />
@@ -88,7 +88,7 @@
</ContentSidebar>
<router-view/>
</section>
</div>
</template>
<script>

2
resources/js/views/Auth/Headline.vue
View File

@@ -10,7 +10,7 @@
</div>
<h1>{{ title }}</h1>
<h2>{{ description }}:</h2>
<h2>{{ description }}</h2>
</div>
</template>
<script>

37
resources/js/views/FileView/Files.vue
View File

@@ -79,24 +79,25 @@
</template>
</ContextMenu>
<FileActionsMobile>
<MobileActionButton @click.native="$openSpotlight" icon="search">
{{ $t('actions.search') }}
</MobileActionButton>
<MobileActionButton @click.native="$showLocations" icon="filter">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton @click.native="$createItems" v-if="$checkPermission(['master', 'editor'])" icon="cloud-plus">
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<FileBrowser>
<template v-slot:file-actions-mobile>
<MobileActionButton @click.native="$openSpotlight" icon="search">
{{ $t('actions.search') }}
</MobileActionButton>
<MobileActionButton @click.native="$showLocations" icon="filter">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton @click.native="$createItems" v-if="$checkPermission(['master', 'editor'])" icon="cloud-plus">
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</template>
<template v-slot:empty-file-page>
<h1 class="title">
@@ -114,6 +115,7 @@
</template>
<script>
import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
@@ -132,6 +134,7 @@
export default {
name: 'Files',
components: {
FileActionsMobile,
MobileActionButtonUpload,
MobileMultiSelectToolbar,
MobileActionButton,

32
resources/js/views/FileView/MySharedItems.vue
View File

@@ -48,22 +48,22 @@
</OptionGroup>
</MobileContextMenu>
<FileBrowser>
<template v-slot:file-actions-mobile>
<MobileActionButton @click.native="$openSpotlight" icon="search">
{{ $t('actions.search')}}
</MobileActionButton>
<MobileActionButton @click.native="$showLocations" icon="filter">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</template>
<FileActionsMobile>
<MobileActionButton @click.native="$openSpotlight" icon="search">
{{ $t('actions.search')}}
</MobileActionButton>
<MobileActionButton @click.native="$showLocations" icon="filter">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<FileBrowser>
<template v-slot:empty-file-page>
<h1 class="title">{{ $t('shared.empty_shared') }}</h1>
</template>
@@ -77,6 +77,7 @@
</template>
<script>
import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
@@ -101,6 +102,7 @@
FileBrowser,
ContextMenu,
Option,
FileActionsMobile,
},
computed: {
...mapGetters([

56
resources/js/views/FileView/Public.vue
View File

@@ -71,35 +71,35 @@
</template>
</ContextMenu>
<FileBrowser>
<template v-slot:file-actions-mobile>
<template v-if="$checkPermission('editor')">
<MobileActionButton @click.native="$openSpotlight" icon="search">
{{ $t('actions.search') }}
</MobileActionButton>
<MobileActionButton @click.native="$createItems" icon="cloud-plus">
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</template>
<template v-if="$checkPermission('visitor')">
<MobileActionButton @click.native="$openSpotlight" icon="search">
{{ $t('actions.search')}}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</template>
<FileActionsMobile>
<template v-if="$checkPermission('editor')">
<MobileActionButton @click.native="$openSpotlight" icon="search">
{{ $t('actions.search') }}
</MobileActionButton>
<MobileActionButton @click.native="$createItems" icon="cloud-plus">
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</template>
<template v-if="$checkPermission('visitor')">
<MobileActionButton @click.native="$openSpotlight" icon="search">
{{ $t('actions.search')}}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</template>
</FileActionsMobile>
<FileBrowser>
<template v-slot:empty-file-page>
<template v-if="$checkPermission('editor')">
<h1 class="title">
@@ -123,6 +123,7 @@
</template>
<script>
import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
@@ -151,6 +152,7 @@
FileBrowser,
ContextMenu,
Option,
FileActionsMobile,
},
computed: {
...mapGetters([

38
resources/js/views/FileView/RecentUploads.vue
View File

@@ -39,25 +39,25 @@
</OptionGroup>
</MobileContextMenu>
<FileBrowser>
<template v-slot:file-actions-mobile>
<MobileActionButton @click.native="$openSpotlight" icon="search">
{{ $t('actions.search')}}
</MobileActionButton>
<MobileActionButton @click.native="$showLocations" icon="filter">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButtonUpload>
{{ $t('context_menu.upload') }}
</MobileActionButtonUpload>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</template>
<FileActionsMobile>
<MobileActionButton @click.native="$openSpotlight" icon="search">
{{ $t('actions.search')}}
</MobileActionButton>
<MobileActionButton @click.native="$showLocations" icon="filter">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButtonUpload>
{{ $t('context_menu.upload') }}
</MobileActionButtonUpload>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<FileBrowser>
<template v-slot:empty-file-page>
<h1 class="title">
{{ $t('empty_page.title') }}
@@ -79,6 +79,7 @@
</template>
<script>
import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
@@ -105,6 +106,7 @@
FileBrowser,
ContextMenu,
Option,
FileActionsMobile,
},
computed: {
...mapGetters([

38
resources/js/views/FileView/SharedWithMe.vue
View File

@@ -57,25 +57,25 @@
</template>
</ContextMenu>
<FileBrowser>
<template v-slot:file-actions-mobile>
<MobileActionButton @click.native="$openSpotlight" icon="search">
{{ $t('actions.search') }}
</MobileActionButton>
<MobileActionButton @click.native="$showLocations" icon="filter">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton v-if="canEdit" @click.native="$createItems" icon="cloud-plus">
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</template>
<FileActionsMobile>
<MobileActionButton @click.native="$openSpotlight" icon="search">
{{ $t('actions.search') }}
</MobileActionButton>
<MobileActionButton @click.native="$showLocations" icon="filter">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton v-if="canEdit" @click.native="$createItems" icon="cloud-plus">
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<FileBrowser>
<template v-slot:empty-file-page>
<!--Homepage-->
@@ -113,6 +113,7 @@
</template>
<script>
import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
@@ -147,6 +148,7 @@
ContextMenu,
ButtonBase,
Option,
FileActionsMobile,
},
computed: {
...mapGetters([

38
resources/js/views/FileView/TeamFolders.vue
View File

@@ -80,25 +80,25 @@
</template>
</ContextMenu>
<FileBrowser>
<template v-slot:file-actions-mobile>
<MobileActionButton @click.native="$openSpotlight" icon="search">
{{ $t('actions.search') }}
</MobileActionButton>
<MobileActionButton @click.native="$showLocations" icon="filter">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton @click.native="$createItems" v-if="$checkPermission(['master', 'editor'])" icon="cloud-plus">
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</template>
<FileActionsMobile>
<MobileActionButton @click.native="$openSpotlight" icon="search">
{{ $t('actions.search') }}
</MobileActionButton>
<MobileActionButton @click.native="$showLocations" icon="filter">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton @click.native="$createItems" v-if="$checkPermission(['master', 'editor'])" icon="cloud-plus">
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<FileBrowser>
<template v-slot:empty-file-page>
<template v-if="isTeamFolderHomepage">
@@ -130,6 +130,7 @@
</template>
<script>
import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
@@ -164,6 +165,7 @@
ContextMenu,
ButtonBase,
Option,
FileActionsMobile,
},
computed: {
...mapGetters([

38
resources/js/views/FileView/Trash.vue
View File

@@ -42,25 +42,25 @@
</OptionGroup>
</MobileContextMenu>
<FileBrowser>
<template v-slot:file-actions-mobile>
<MobileActionButton @click.native="$openSpotlight" icon="search">
{{ $t('actions.search')}}
</MobileActionButton>
<MobileActionButton @click.native="$showLocations" icon="filter">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton @click.native="$emptyTrash" icon="trash">
{{ $t('context_menu.empty_trash') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</template>
<FileActionsMobile>
<MobileActionButton @click.native="$openSpotlight" icon="search">
{{ $t('actions.search')}}
</MobileActionButton>
<MobileActionButton @click.native="$showLocations" icon="filter">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton @click.native="$emptyTrash" icon="trash">
{{ $t('context_menu.empty_trash') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showViewOptions" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<FileBrowser>
<template v-slot:empty-file-page>
<h1 class="title">{{ $t('empty_page.title') }}</h1>
</template>
@@ -74,6 +74,7 @@
</template>
<script>
import FileActionsMobile from "../../components/FilesView/FileActionsMobile";
import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
@@ -98,6 +99,7 @@
FileBrowser,
ContextMenu,
Option,
FileActionsMobile,
},
computed: {
...mapGetters([

156
resources/js/views/Platform.vue
View File

@@ -1,11 +1,11 @@
<template>
<div id="application-wrapper">
<div class="sm:flex md:h-screen md:overflow-hidden">
<!--On Top of App Components-->
<FilePreview />
<Spotlight />
<!--Popups-->
<!--Popups-->
<ProcessingPopup />
<ConfirmPopup />
@@ -19,109 +19,115 @@
<RenameItemPopup />
<MoveItemPopup />
<!--Mobile components-->
<!--Mobile components-->
<FileSortingMobile />
<FileFilterMobile />
<!--Navigations-->
<!--Navigations-->
<MobileNavigation />
<!--Others-->
<!--Others-->
<DragUI />
<!--2 col Sidebars-->
<SidebarNavigation />
<PanelNavigationFiles />
<div @contextmenu.prevent.capture="contextMenu($event, undefined)" id="file-view">
<DesktopToolbar/>
<router-view :key="$route.fullPath" />
<div
@contextmenu.prevent.capture="contextMenu($event, undefined)"
class="md:grid md:content-start sm:flex-grow sm:px-3.5 transition-transform duration-200"
:class="{'transform scale-97 origin-center': isScaledDown}"
>
<DesktopToolbar />
<MobileToolbar />
<!--File list & info sidebar-->
<div class="flex space-x-6 md:overflow-hidden md:h-full">
<router-view
id="file-view"
:class="{'2xl:w-5/6 md:w-4/6 w-full': isVisibleSidebar, 'w-full': ! isVisibleSidebar}"
class="relative"
:key="$route.fullPath"
/>
<InfoSidebar
v-if="isVisibleSidebar"
class="2xl:w-72 w-2/6 overflow-y-auto overflow-x-hidden h-screen md:block hidden"
/>
</div>
</div>
</div>
</template>
<script>
import FileSortingMobile from '/resources/js/components/FilesView/FileSortingMobile'
import SidebarNavigation from '/resources/js/components/Sidebar/SidebarNavigation'
import FileFilterMobile from '/resources/js/components/FilesView/FileFilterMobile'
import CreateFolderPopup from '/resources/js/components/Others/CreateFolderPopup'
import ProcessingPopup from '/resources/js/components/FilesView/ProcessingPopup'
import MobileNavigation from '/resources/js/components/Others/MobileNavigation'
import ShareCreatePopup from '/resources/js/components/Others/ShareCreatePopup'
import SidebarNavigation from '/resources/js/components/Sidebar/SidebarNavigation'
import FileFilterMobile from '/resources/js/components/FilesView/FileFilterMobile'
import CreateFolderPopup from '/resources/js/components/Others/CreateFolderPopup'
import ProcessingPopup from '/resources/js/components/FilesView/ProcessingPopup'
import MobileNavigation from '/resources/js/components/Others/MobileNavigation'
import ShareCreatePopup from '/resources/js/components/Others/ShareCreatePopup'
import DesktopToolbar from '/resources/js/components/FilesView/DesktopToolbar'
import CreateTeamFolderPopup from "../components/Teams/CreateTeamFolderPopup"
import EditTeamFolderPopup from "../components/Teams/EditTeamFolderPopup"
import ConfirmPopup from '/resources/js/components/Others/Popup/ConfirmPopup'
import RenameItemPopup from '/resources/js/components/Others/RenameItemPopup'
import ShareEditPopup from '/resources/js/components/Others/ShareEditPopup'
import MoveItemPopup from '/resources/js/components/Others/MoveItemPopup'
import FilePreview from '/resources/js/components/FilePreview/FilePreview'
import Spotlight from '/resources/js/components/Spotlight/Spotlight'
import DragUI from '/resources/js/components/FilesView/DragUI'
import ConfirmPopup from '/resources/js/components/Others/Popup/ConfirmPopup'
import RenameItemPopup from '/resources/js/components/Others/RenameItemPopup'
import PanelNavigationFiles from "./FileView/Components/PanelNavigationFiles"
import {events} from '/resources/js/bus'
import MobileToolbar from '/resources/js/components/FilesView/MobileToolbar'
import ShareEditPopup from '/resources/js/components/Others/ShareEditPopup'
import FilePreview from '/resources/js/components/FilePreview/FilePreview'
import MoveItemPopup from '/resources/js/components/Others/MoveItemPopup'
import EditTeamFolderPopup from "../components/Teams/EditTeamFolderPopup"
import Spotlight from '/resources/js/components/Spotlight/Spotlight'
import DragUI from '/resources/js/components/FilesView/DragUI'
import InfoSidebar from "../components/FilesView/InfoSidebar"
import {events} from '/resources/js/bus'
import {mapGetters} from "vuex"
export default {
name: 'Platform',
components: {
export default {
name: 'Platform',
components: {
CreateTeamFolderPopup,
PanelNavigationFiles,
EditTeamFolderPopup,
CreateFolderPopup,
FileSortingMobile,
SidebarNavigation,
FileFilterMobile,
MobileNavigation,
ShareCreatePopup,
ProcessingPopup,
RenameItemPopup,
ShareEditPopup,
CreateFolderPopup,
FileSortingMobile,
SidebarNavigation,
FileFilterMobile,
MobileNavigation,
ShareCreatePopup,
ProcessingPopup,
RenameItemPopup,
ShareEditPopup,
DesktopToolbar,
MoveItemPopup,
ConfirmPopup,
FilePreview,
MoveItemPopup,
MobileToolbar,
ConfirmPopup,
InfoSidebar,
FilePreview,
Spotlight,
DragUI,
},
data() {
return {
isScaledDown: false
}
},
DragUI,
},
computed: {
...mapGetters([
'isVisibleSidebar'
])
},
data() {
return {
isScaledDown: false
}
},
methods: {
contextMenu(event, item) {
events.$emit('context-menu:show', event, item)
},
},
mounted() {
events.$on('mobile-menu:show', () => this.isScaledDown = true)
events.$on('fileItem:deselect', () => this.isScaledDown = false)
events.$on('mobile-menu:hide', () => this.isScaledDown = false)
}
mounted() {
events.$on('mobile-menu:show', () => this.isScaledDown = true)
events.$on('fileItem:deselect', () => this.isScaledDown = false)
events.$on('mobile-menu:hide', () => this.isScaledDown = false)
}
}
</script>
<style lang="scss">
@import '/resources/sass/vuefilemanager/_mixins';
#file-view {
font-family: 'Nunito', sans-serif;
font-size: 16px;
width: 100%;
height: 100%;
position: relative;
min-width: 320px;
overflow-x: hidden;
padding-left: 15px;
padding-right: 15px;
overflow-y: hidden;
@include transition(120ms);
}
@media only screen and (max-width: 690px) {
.is-scaled-down {
@include transform(scale(0.95));
}
}
</style>

18
resources/js/views/Profile.vue
View File

@@ -1,9 +1,16 @@
<template>
<section id="viewport">
<div class="sm:flex md:h-screen md:overflow-hidden">
<!--On Top of App Components-->
<FilePreview />
<Spotlight />
<!--2FA popups-->
<TwoFactorRecoveryCodesPopup />
<TwoFactorSetupPopup />
<!--Access Token Popup-->
<CreatePersonaTokenPopup />
<SidebarNavigation />
<PanelNavigationUser />
@@ -61,14 +68,7 @@
<Spinner></Spinner>
</div>
</div>
<!--2FA popups-->
<TwoFactorRecoveryCodesPopup />
<TwoFactorSetupPopup />
<!--Access Token Popup-->
<CreatePersonaTokenPopup />
</section>
</div>
</template>
<script>

14
resources/js/views/SetupWizard/AppSetup.vue
View File

@@ -3,11 +3,13 @@
<!--Database Credentials-->
<AuthContent name="database-credentials" :visible="true">
<div class="content-headline">
<settings-icon size="40" class="title-icon text-theme" />
<h1>Setup Wizard</h1>
<h2>Set up your application appearance, analytics, etc.</h2>
</div>
<Headline
class="container mx-auto max-w-screen-sm"
title="Setup Wizard"
description="Set up your application appearance, analytics, etc."
>
<settings-icon size="40" class="title-icon text-theme mx-auto" />
</Headline>
<ValidationObserver @submit.prevent="appSetupSubmit" ref="appSetup" v-slot="{ invalid }" tag="form"
class="form block-form">
@@ -145,6 +147,7 @@
import AuthContent from '/resources/js/components/Auth/AuthContent'
import AuthButton from '/resources/js/components/Auth/AuthButton'
import {SettingsIcon} from 'vue-feather-icons'
import Headline from "../Auth/Headline"
import {required} from 'vee-validate/dist/rules'
import {mapGetters} from 'vuex'
import axios from 'axios'
@@ -164,6 +167,7 @@
FormLabel,
required,
InfoBox,
Headline,
},
data() {
return {

15
resources/js/views/SetupWizard/BillingsDetail.vue
View File

@@ -3,12 +3,13 @@
<!--Database Credentials-->
<AuthContent name="database-credentials" :visible="true">
<div class="content-headline">
<settings-icon size="40" class="title-icon text-theme"/>
<h1>Setup Wizard</h1>
<h2>Set up your billing information.</h2>
</div>
<Headline
class="container mx-auto max-w-screen-sm"
title="Setup Wizard"
description="Set up your billing information."
>
<settings-icon size="40" class="title-icon text-theme mx-auto" />
</Headline>
<ValidationObserver @submit.prevent="billingInformationSubmit" ref="billingInformation" v-slot="{ invalid }"
tag="form" class="form block-form">
<FormLabel>Company Information</FormLabel>
@@ -114,6 +115,7 @@
import AuthContent from '/resources/js/components/Auth/AuthContent'
import AuthButton from '/resources/js/components/Auth/AuthButton'
import {SettingsIcon} from 'vue-feather-icons'
import Headline from "../Auth/Headline"
import {required} from 'vee-validate/dist/rules'
import {mapGetters} from 'vuex'
import axios from 'axios'
@@ -131,6 +133,7 @@
FormLabel,
required,
InfoBox,
Headline,
},
computed: {
...mapGetters(['countries']),

14
resources/js/views/SetupWizard/Database.vue
View File

@@ -3,11 +3,13 @@
<!--Database Credentials-->
<AuthContent name="database-credentials" :visible="true">
<div class="content-headline">
<settings-icon size="40" class="title-icon text-theme"/>
<h1>Setup Wizard</h1>
<h2>Set up your database connection to install application database.</h2>
</div>
<Headline
class="container mx-auto max-w-screen-sm"
title="Setup Wizard"
description="Set up your database connection to install application database."
>
<settings-icon size="40" class="title-icon text-theme mx-auto" />
</Headline>
<ValidationObserver @submit.prevent="databaseCredentialsSubmit" ref="verifyPurchaseCode" v-slot="{ invalid }" tag="form" class="form block-form">
<FormLabel>Database Credentials</FormLabel>
@@ -94,6 +96,7 @@
import AuthButton from '/resources/js/components/Auth/AuthButton'
import { SettingsIcon } from 'vue-feather-icons'
import {required} from 'vee-validate/dist/rules'
import Headline from "../Auth/Headline"
import {mapGetters} from 'vuex'
import axios from 'axios'
@@ -110,6 +113,7 @@
FormLabel,
required,
InfoBox,
Headline,
},
computed: {
submitButtonText() {

15
resources/js/views/SetupWizard/EnvironmentSetup.vue
View File

@@ -3,12 +3,13 @@
<!--Database Credentials-->
<AuthContent name="database-credentials" :visible="true">
<div class="content-headline">
<settings-icon size="40" class="title-icon text-theme"/>
<h1>Setup Wizard</h1>
<h2>Set up your storage driver and email client.</h2>
</div>
<Headline
class="container mx-auto max-w-screen-sm"
title="Setup Wizard"
description="Set up your storage driver and email client."
>
<settings-icon size="40" class="title-icon text-theme mx-auto" />
</Headline>
<ValidationObserver @submit.prevent="EnvironmentSetupSubmit" ref="environmentSetup" v-slot="{ invalid }" tag="form" class="form block-form">
<InfoBox>
<p>If you don’t know which storage driver set, keep selected <b>'Local Driver'</b>. For more info, where
@@ -141,6 +142,7 @@ import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import AuthContent from '/resources/js/components/Auth/AuthContent'
import AuthButton from '/resources/js/components/Auth/AuthButton'
import {SettingsIcon} from 'vue-feather-icons'
import Headline from "../Auth/Headline"
import {required} from 'vee-validate/dist/rules'
import {mapGetters} from 'vuex'
import axios from 'axios'
@@ -158,6 +160,7 @@ export default {
FormLabel,
required,
InfoBox,
Headline,
},
watch: {
'storage.driver': function () {

15
resources/js/views/SetupWizard/InstallationDisclaimer.vue
View File

@@ -3,12 +3,13 @@
<!--Database Credentials-->
<AuthContent name="database-credentials" :visible="true">
<div class="content-headline">
<settings-icon size="40" class="title-icon text-theme"/>
<h1>Setup Wizard</h1>
<h2>Database was installed successfully. Let's set up application, Make sure you have these informations before continue:</h2>
</div>
<Headline
class="container mx-auto max-w-screen-sm"
title="Setup Wizard"
description="Database was installed successfully. Let's set up application, Make sure you have these informations before continue:"
>
<settings-icon size="40" class="title-icon text-theme mx-auto" />
</Headline>
<div id="loader" v-if="isLoading">
<Spinner></Spinner>
</div>
@@ -77,6 +78,7 @@
import Spinner from '/resources/js/components/FilesView/Spinner'
import { SettingsIcon } from 'vue-feather-icons'
import {required} from 'vee-validate/dist/rules'
import Headline from "../Auth/Headline"
import {mapGetters} from 'vuex'
import axios from 'axios'
@@ -94,6 +96,7 @@
required,
Spinner,
InfoBox,
Headline,
},
data() {
return {

14
resources/js/views/SetupWizard/PurchaseCode.vue
View File

@@ -4,11 +4,13 @@
<!--Licence Verify-->
<AuthContent name="licence-verify" :visible="true">
<div class="content-headline">
<settings-icon size="40" class="title-icon text-theme"/>
<h1>Setup Wizard</h1>
<h2>Please set your purchase code before continue to set up your application.</h2>
</div>
<Headline
class="container mx-auto max-w-screen-sm"
title="Setup Wizard"
description="Please set your purchase code before continue to set up your application."
>
<settings-icon size="40" class="title-icon text-theme mx-auto" />
</Headline>
<ValidationObserver @submit.prevent="verifyPurchaseCode" ref="verifyPurchaseCode" v-slot="{ invalid }" tag="form" class="form inline-form">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Purchase Code" rules="required" v-slot="{ errors }">
@@ -38,6 +40,7 @@
import AuthButton from '/resources/js/components/Auth/AuthButton'
import { SettingsIcon } from 'vue-feather-icons'
import {required} from 'vee-validate/dist/rules'
import Headline from "../Auth/Headline"
import {mapGetters} from 'vuex'
import axios from 'axios'
@@ -52,6 +55,7 @@
AuthButton,
required,
InfoBox,
Headline,
},
data() {
return {

15
resources/js/views/SetupWizard/StatusCheck.vue
View File

@@ -3,11 +3,14 @@
<!--Database Credentials-->
<AuthContent name="database-credentials" :visible="true">
<div class="content-headline">
<settings-icon size="40" class="title-icon text-theme" />
<h1>Server Check</h1>
<h2>At first, we have to check if all modules and setup is ready for running VueFileManager.</h2>
</div>
<Headline
class="container mx-auto max-w-screen-sm"
title="Server Check"
description="At first, we have to check if all modules and setup is ready for running VueFileManager"
>
<settings-icon size="40" class="title-icon text-theme mx-auto" />
</Headline>
<div class="form block-form">
@@ -107,6 +110,7 @@
import AuthButton from '/resources/js/components/Auth/AuthButton'
import {SettingsIcon} from 'vue-feather-icons'
import {required} from 'vee-validate/dist/rules'
import Headline from "../Auth/Headline"
import {mapGetters} from 'vuex'
import axios from 'axios'
import {
@@ -128,6 +132,7 @@
required,
InfoBox,
CheckIcon,
Headline,
XIcon,
},
computed: {

17
resources/js/views/SetupWizard/StripeCredentials.vue
View File

@@ -3,11 +3,14 @@
<!--Database Credentials-->
<AuthContent name="database-credentials" :visible="true">
<div class="content-headline">
<settings-icon size="40" class="title-icon text-theme"/>
<h1>Setup Wizard</h1>
<h2>Set up your database credentials.</h2>
</div>
<Headline
class="container mx-auto max-w-screen-sm"
title="Setup Wizard"
description="Set up your database credentials."
>
<settings-icon size="40" class="title-icon text-theme mx-auto" />
</Headline>
<ValidationObserver @submit.prevent="stripeCredentialsSubmit" ref="stripeCredentials" v-slot="{ invalid }" tag="form" class="form block-form">
<InfoBox>
@@ -86,8 +89,9 @@
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import AuthContent from '/resources/js/components/Auth/AuthContent'
import AuthButton from '/resources/js/components/Auth/AuthButton'
import {SettingsIcon} from 'vue-feather-icons'
import {required} from 'vee-validate/dist/rules'
import {SettingsIcon} from 'vue-feather-icons'
import Headline from "../Auth/Headline"
import {mapGetters} from 'vuex'
import axios from 'axios'
@@ -104,6 +108,7 @@
FormLabel,
required,
InfoBox,
Headline,
},
computed: {
...mapGetters(['config', 'currencyList']),

15
resources/js/views/SetupWizard/SubscriptionPlans.vue
View File

@@ -3,11 +3,14 @@
<!--Database Credentials-->
<AuthContent name="database-credentials" :visible="true">
<div class="content-headline">
<settings-icon size="40" class="title-icon text-theme"/>
<h1>Setup Wizard</h1>
<h2>Set up plans for your customers.</h2>
</div>
<Headline
class="container mx-auto max-w-screen-sm"
title="Setup Wizard"
description="Set up plans for your customers."
>
<settings-icon size="40" class="title-icon text-theme mx-auto" />
</Headline>
<ValidationObserver @submit.prevent="subscriptionPlansSubmit" ref="subscriptionPlans" v-slot="{ invalid }"
tag="form" class="form block-form">
@@ -99,6 +102,7 @@
import {SettingsIcon} from 'vue-feather-icons'
import {required} from 'vee-validate/dist/rules'
import {XIcon} from 'vue-feather-icons'
import Headline from "../Auth/Headline"
import {mapGetters} from 'vuex'
import axios from 'axios'
@@ -117,6 +121,7 @@
required,
InfoBox,
XIcon,
Headline,
},
computed: {
submitButtonText() {

14
resources/js/views/SetupWizard/SubscriptionService.vue
View File

@@ -4,11 +4,13 @@
<!--Licence Verify-->
<AuthContent name="subscription-service" :visible="true">
<div class="content-headline">
<settings-icon size="40" class="title-icon text-theme"/>
<h1>Setup Wizard</h1>
<h2>You can charge users for storage space by monthly billing plans. Please, select your charging service or skip this step if you don't want charge users:</h2>
</div>
<Headline
class="container mx-auto max-w-screen-sm"
title="Setup Wizard"
description="You can charge users for storage space by monthly billing plans. Please, select your charging service or skip this step if you don't want charge users:"
>
<settings-icon size="40" class="title-icon text-theme mx-auto" />
</Headline>
<div class="services">
<router-link :to="{name: 'StripeCredentials'}" tag="div" class="service-card">
@@ -42,6 +44,7 @@
import AuthButton from '/resources/js/components/Auth/AuthButton'
import { SettingsIcon, ChevronRightIcon } from 'vue-feather-icons'
import {required} from 'vee-validate/dist/rules'
import Headline from "../Auth/Headline"
import {mapGetters} from 'vuex'
import axios from 'axios'
@@ -56,6 +59,7 @@
AuthContent,
AuthButton,
required,
Headline,
},
data() {
return {

60
resources/js/views/Shared.vue
View File

@@ -1,5 +1,5 @@
<template>
<div id="application-wrapper">
<div class="sm:flex md:h-screen md:overflow-hidden">
<!--Loading Spinner-->
<Spinner v-if="isLoading" />
@@ -26,15 +26,37 @@
<NavigationSharePanel v-if="sharedDetail && $router.currentRoute.name === 'Public'"/>
<div @contextmenu.prevent.capture="contextMenu($event, undefined)" id="file-view">
<DesktopToolbar/>
<!--TODO: fix desktopbar on authentication screen-->
<router-view :key="$route.fullPath" />
<div
@contextmenu.prevent.capture="contextMenu($event, undefined)"
class="md:grid md:content-start sm:flex-grow sm:px-3.5 transition-transform duration-300"
:class="{'transform scale-97 origin-center': isScaledDown}"
>
<DesktopToolbar />
<MobileToolbar />
<!--File list & info sidebar-->
<div class="flex space-x-6 md:overflow-hidden md:h-full">
<router-view
id="file-view"
:class="{'2xl:w-5/6 md:w-4/6 w-full': isVisibleSidebar, 'w-full': ! isVisibleSidebar}"
class="relative"
:key="$route.fullPath"
/>
<InfoSidebar
v-if="isVisibleSidebar"
class="2xl:w-72 w-2/6 overflow-y-auto overflow-x-hidden h-screen md:block hidden"
/>
</div>
</div>
</div>
</template>
<script>
import MobileToolbar from '/resources/js/components/FilesView/MobileToolbar'
import InfoSidebar from "../components/FilesView/InfoSidebar";
import MobileMultiSelectToolbar from '/resources/js/components/FilesView/MobileMultiSelectToolbar'
import FileSortingMobile from '/resources/js/components/FilesView/FileSortingMobile'
import CreateFolderPopup from '/resources/js/components/Others/CreateFolderPopup'
@@ -55,6 +77,8 @@
export default {
name: 'Shared',
components: {
MobileToolbar,
InfoSidebar,
NavigationSharePanel,
MobileMultiSelectToolbar,
CreateFolderPopup,
@@ -72,6 +96,7 @@
},
computed: {
...mapGetters([
'isVisibleSidebar',
'sharedDetail',
'config',
])
@@ -122,28 +147,3 @@
}
}
</script>
<style lang="scss">
@import '/resources/sass/vuefilemanager/_mixins';
#file-view {
font-family: 'Nunito', sans-serif;
font-size: 16px;
width: 100%;
height: 100%;
position: relative;
min-width: 320px;
overflow-x: hidden;
padding-left: 15px;
padding-right: 15px;
overflow-y: hidden;
@include transition(120ms);
}
@media only screen and (max-width: 690px) {
.is-scaled-down {
@include transform(scale(0.95));
}
}
</style>

10
resources/sass/app.scss vendored
View File

@@ -11,16 +11,6 @@
flex: 1;
}
#application-wrapper {
display: flex;
height: 100%;
#content {
position: relative;
width: 100%;
}
}
#single-page {
overflow-x: hidden;
width: 100%;

5
resources/views/index.blade.php
View File

@@ -34,8 +34,9 @@
@include('vuefilemanager.others.color-template')
</head>
<body>
<div id="app"></div>
<body class="{{ is_dev() ? 'debug-screens' : '' }}">
<div id="app"></div>
<script>
let config = {

2
resources/views/vuefilemanager/others/color-template.blade.php
View File

@@ -99,6 +99,8 @@
.StripeElement--focus {border-color: {{ $color }} !important;}
{{-- Dark mode --}}
.dark .dark-text-theme {color: {{ $color }} !important;}
.dark .text-theme {
color: {{ $color }}
}