mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-27 18:40:39 +00:00
Create client frontend
This commit is contained in:
Peter Papp
@@ -0,0 +1,461 @@
|
||||
<template>
|
||||
<div class="file-wrapper" @mouseup.stop="clickedItem" @dblclick="showInvoice">
|
||||
<div class="file-item" :class="{'is-clicked': isClicked , 'no-clicked': !isClicked && $isMobile()}">
|
||||
|
||||
<!-- MultiSelecting for the mobile version -->
|
||||
<transition name="slide-from-left">
|
||||
<div class="check-select" v-if="isMobileSelectMode">
|
||||
<div class="select-box" :class="{'select-box-active': isClicked } ">
|
||||
<CheckIcon v-if="isClicked" class="icon" size="17" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!--Thumbnail for item-->
|
||||
<div class="icon-item">
|
||||
|
||||
<!--Image thumbnail-->
|
||||
<img loading="lazy" class="image" :src="item.avatar" :alt="item.name" />
|
||||
</div>
|
||||
|
||||
<!--Name-->
|
||||
<div class="item-name">
|
||||
|
||||
<b :ref="item.id" class="name">
|
||||
{{ item.name }}
|
||||
</b>
|
||||
|
||||
<div class="item-info">
|
||||
<span class="item-size">
|
||||
Created at: {{ item.created_at }}, Total: {{ item.totalNet }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Show item actions-->
|
||||
<transition name="slide-from-right">
|
||||
<div class="actions" v-if="$isMobile() && ! isMobileSelectMode">
|
||||
<span @mousedown.stop="showItemActions" class="show-actions">
|
||||
<MoreVerticalIcon size="16" class="icon-action text-theme" />
|
||||
</span>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {CheckIcon, MoreVerticalIcon} from 'vue-feather-icons'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'InvoiceItem',
|
||||
props: [
|
||||
'item'
|
||||
],
|
||||
components: {
|
||||
MoreVerticalIcon,
|
||||
CheckIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'FilePreviewType',
|
||||
'clipboard',
|
||||
'entries'
|
||||
]),
|
||||
isClicked() {
|
||||
return this.clipboard.some(element => element.id === this.item.id)
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isMobileSelectMode: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showItemActions() {
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
|
||||
events.$emit('mobile-menu:show', 'client-menu')
|
||||
},
|
||||
clickedItem(e) {
|
||||
if (!this.$isMobile()) {
|
||||
|
||||
if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
|
||||
|
||||
// Click + Ctrl
|
||||
if (this.clipboard.some(item => item.data.id === this.item.data.id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FROM_CLIPBOARD', this.item)
|
||||
} else {
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
}
|
||||
|
||||
} else if (e.shiftKey) {
|
||||
|
||||
// Click + Shift
|
||||
let lastItem = this.entries.indexOf(this.clipboard[this.clipboard.length - 1])
|
||||
let clickedItem = this.entries.indexOf(this.item)
|
||||
|
||||
// If Click + Shift + Ctrl dont remove already selected items
|
||||
if (!e.ctrlKey && !e.metaKey) {
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
}
|
||||
|
||||
//Shift selecting from top to bottom
|
||||
if (lastItem < clickedItem) {
|
||||
for (let i = lastItem; i <= clickedItem; i++) {
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.entries[i])
|
||||
}
|
||||
//Shift selecting from bottom to top
|
||||
} else {
|
||||
for (let i = lastItem; i >= clickedItem; i--) {
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.entries[i])
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
// Click
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.isMobileSelectMode && this.$isMobile()) {
|
||||
events.$emit('file-preview:show')
|
||||
}
|
||||
|
||||
if (this.isMobileSelectMode && this.$isMobile()) {
|
||||
if (this.clipboard.some(item => item.data.id === this.item.data.id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FROM_CLIPBOARD', this.item)
|
||||
} else {
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
}
|
||||
}
|
||||
},
|
||||
showInvoice() {
|
||||
events.$emit('file-preview:show')
|
||||
},
|
||||
},
|
||||
created() {
|
||||
events.$on('mobileSelecting:start', () => {
|
||||
this.isMobileSelectMode = true
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
})
|
||||
|
||||
events.$on('mobileSelecting:stop', () => {
|
||||
this.isMobileSelectMode = false
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vuefilemanager/_variables';
|
||||
@import '@assets/vuefilemanager/_mixins';
|
||||
|
||||
|
||||
.slide-from-left-move {
|
||||
transition: transform 300s ease;
|
||||
}
|
||||
|
||||
.slide-from-left-enter-active,
|
||||
.slide-from-right-enter-active,
|
||||
.slide-from-left-leave-active,
|
||||
.slide-from-right-leave-active {
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.slide-from-left-enter,
|
||||
.slide-from-left-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.slide-from-right-enter,
|
||||
.slide-from-right-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
|
||||
.check-select {
|
||||
margin-right: 15px;
|
||||
margin-left: 6px;
|
||||
|
||||
.select-box {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: darken($light_background, 5%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.select-box-active {
|
||||
background-color: $theme;
|
||||
|
||||
.icon {
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-wrapper {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.actions {
|
||||
text-align: right;
|
||||
width: 50px;
|
||||
|
||||
.show-actions {
|
||||
cursor: pointer;
|
||||
padding: 12px 0 12px 6px;
|
||||
|
||||
.icon-action {
|
||||
margin-top: 9px;
|
||||
@include font-size(14);
|
||||
|
||||
circle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.item-info {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.item-shared {
|
||||
display: inline-block;
|
||||
|
||||
.label {
|
||||
@include font-size(12);
|
||||
font-weight: 400;
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
.shared-icon {
|
||||
vertical-align: middle;
|
||||
|
||||
path,
|
||||
circle,
|
||||
line {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
@include font-size(11);
|
||||
font-weight: 400;
|
||||
color: rgba($text, 0.7);
|
||||
}
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
|
||||
&[contenteditable] {
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
&[contenteditable='true']:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $text;
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.actived {
|
||||
max-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
.file-item {
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
flex: 0 0 50px;
|
||||
line-height: 0;
|
||||
margin-right: 20px;
|
||||
|
||||
.folder {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
|
||||
/deep/ .folder-icon {
|
||||
@include font-size(52)
|
||||
}
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
@include font-size(45);
|
||||
|
||||
path {
|
||||
fill: #fafafc;
|
||||
stroke: #dfe0e8;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.file-icon-text {
|
||||
line-height: 1;
|
||||
top: 40%;
|
||||
@include font-size(11);
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
max-width: 50px;
|
||||
max-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image {
|
||||
object-fit: cover;
|
||||
user-select: none;
|
||||
max-width: 100%;
|
||||
border-radius: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
border: 2px dashed transparent;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 7px 7px 7px 15px;
|
||||
|
||||
&.is-dragenter {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&.no-clicked {
|
||||
background: white !important;
|
||||
|
||||
.item-name {
|
||||
.name {
|
||||
color: $text !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
border-radius: 8px;
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.check-select {
|
||||
|
||||
.select-box {
|
||||
background-color: lighten($dark_mode_foreground, 10%);
|
||||
}
|
||||
|
||||
.select-box-active {
|
||||
background-color: $theme;
|
||||
|
||||
.icon {
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-wrapper {
|
||||
.icon-item {
|
||||
.file-icon {
|
||||
path {
|
||||
fill: $dark_mode_foreground;
|
||||
stroke: #2f3c54;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
&.no-clicked {
|
||||
background: $dark_mode_background !important;
|
||||
|
||||
.file-icon {
|
||||
|
||||
path {
|
||||
fill: $dark_mode_foreground !important;
|
||||
stroke: #2F3C54;
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
|
||||
.name {
|
||||
color: $dark_mode_text_primary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.file-icon {
|
||||
path {
|
||||
fill: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
.name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<MenuMobile name="client-menu">
|
||||
<TitlePreview
|
||||
v-if="clipboard[0]"
|
||||
class="headline"
|
||||
:avatar="clipboard[0].avatar"
|
||||
:title="clipboard[0].name"
|
||||
:subtitle="clipboard[0].email"
|
||||
/>
|
||||
|
||||
<MenuMobileGroup>
|
||||
<OptionGroup class="menu-option-group">
|
||||
<Option @click.native="" title="Edit" icon="rename" />
|
||||
<Option @click.native="deleteItem" title="Delete" icon="trash" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="showDetail" :title="$t('context_menu.detail')" icon="detail" />
|
||||
</OptionGroup>
|
||||
</MenuMobileGroup>
|
||||
</MenuMobile>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
|
||||
import TitlePreview from '@/components/FilesView/TitlePreview'
|
||||
import ThumbnailItem from '@/components/Others/ThumbnailItem'
|
||||
import OptionGroup from '@/components/FilesView/OptionGroup'
|
||||
import MenuMobile from '@/components/Mobile/MenuMobile'
|
||||
import Option from '@/components/FilesView/Option'
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'FileMenuMobile',
|
||||
components: {
|
||||
MenuMobileGroup,
|
||||
ThumbnailItem,
|
||||
TitlePreview,
|
||||
OptionGroup,
|
||||
MenuMobile,
|
||||
Option,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'clipboard',
|
||||
'user',
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisible: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.headline {
|
||||
padding: 20px 20px 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div id="mobile-actions-wrapper">
|
||||
|
||||
<!--Base location-->
|
||||
<div class="mobile-actions">
|
||||
<MobileActionButton @click.native="showLocations" icon="filter">
|
||||
{{ directoryName }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="createButton" icon="file-plus">
|
||||
Create
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="showViewOptions" icon="th-list">
|
||||
{{ $t('preview_sorting.preview_sorting_button') }}
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MobileActionButtonUpload from '@/components/FilesView/MobileActionButtonUpload'
|
||||
import MobileActionButton from '@/components/FilesView/MobileActionButton'
|
||||
import UploadProgress from '@/components/FilesView/UploadProgress'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'FileActionsMobile',
|
||||
components: {
|
||||
MobileActionButtonUpload,
|
||||
MobileActionButton,
|
||||
UploadProgress,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'currentFolder'
|
||||
]),
|
||||
directoryName() {
|
||||
return this.currentFolder
|
||||
? this.currentFolder.name
|
||||
: 'Invoices'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isSelectMode: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showLocations() {
|
||||
events.$emit('mobile-menu:show', 'invoice-filter')
|
||||
},
|
||||
createButton() {
|
||||
events.$emit('mobile-menu:show', 'invoice-create')
|
||||
},
|
||||
showViewOptions() {
|
||||
events.$emit('mobile-menu:show', 'invoice-sorting')
|
||||
},
|
||||
selectAll() {
|
||||
this.$store.commit('ADD_ALL_ITEMS_TO_CLIPBOARD')
|
||||
},
|
||||
deselectAll() {
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
},
|
||||
enableMultiSelectMode() {
|
||||
this.isSelectMode = true
|
||||
|
||||
events.$emit('mobileSelecting:start')
|
||||
},
|
||||
disableMultiSelectMode() {
|
||||
this.isSelectMode = false
|
||||
|
||||
events.$emit('mobileSelecting:stop')
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
events.$on('mobileSelecting:stop', () => this.isSelectMode = false)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vuefilemanager/_variables';
|
||||
@import '@assets/vuefilemanager/_mixins';
|
||||
|
||||
.button-enter-active,
|
||||
.button-leave-active {
|
||||
transition: all 250ms;
|
||||
}
|
||||
|
||||
.button-enter {
|
||||
opacity: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.button-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#mobile-actions-wrapper {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,341 @@
|
||||
<template>
|
||||
<div
|
||||
class="file-content"
|
||||
id="file-content-id"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
:class="{'is-visible': isVisibleSidebar, 'mobile-multi-select': isMultiSelect}"
|
||||
@click.self="filesContainerClick"
|
||||
class="files-container"
|
||||
ref="fileContainer"
|
||||
>
|
||||
<MobileToolbar />
|
||||
|
||||
<SearchBar v-model="query" @reset-query="query = ''" class="mobile-search" :placeholder="$t('inputs.placeholder_search_files')" />
|
||||
|
||||
<!--Mobile Actions-->
|
||||
<InvoiceActionsMobile />
|
||||
|
||||
<!--Item previews list-->
|
||||
<div class="file-list-wrapper">
|
||||
<transition-group
|
||||
name="file"
|
||||
tag="section"
|
||||
class="file-list"
|
||||
>
|
||||
<InvoiceItem
|
||||
@contextmenu.native.prevent="contextMenu($event, item)"
|
||||
:item="item"
|
||||
v-if="item.type === 'invoice'"
|
||||
v-for="item in entries"
|
||||
:key="item.id"
|
||||
class="file-item"
|
||||
/>
|
||||
<ClientItem
|
||||
@contextmenu.native.prevent="contextMenu($event, item)"
|
||||
:item="item"
|
||||
v-if="item.type === 'client'"
|
||||
v-for="item in entries"
|
||||
:key="item.id"
|
||||
class="file-item"
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
<!--Show empty page if folder is empty-->
|
||||
<EmptyFilePage v-if="! isSearching" />
|
||||
|
||||
<!--Show empty page if no search results-->
|
||||
<EmptyMessage
|
||||
v-if="isSearching && isEmpty"
|
||||
:message="$t('messages.nothing_was_found')"
|
||||
icon="eye-slash"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--File Info Panel-->
|
||||
<div :class="{'is-visible': isVisibleSidebar }" class="file-info-container">
|
||||
<InvoiceInfoSidebar />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InvoiceActionsMobile from '@/Oasis/Invoices/components/InvoiceActionsMobile'
|
||||
import InvoiceInfoSidebar from '@/Oasis/Invoices/components/InvoiceInfoSidebar'
|
||||
import InvoiceItem from '@/Oasis/Invoices/components/InvoiceItem'
|
||||
import ClientItem from '@/Oasis/Invoices/components/ClientItem'
|
||||
import EmptyFilePage from '@/components/FilesView/EmptyFilePage'
|
||||
import MobileToolbar from '@/components/FilesView/MobileToolbar'
|
||||
import EmptyMessage from '@/components/FilesView/EmptyMessage'
|
||||
import SearchBar from '@/components/FilesView/SearchBar'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'FilesContainer',
|
||||
components: {
|
||||
InvoiceActionsMobile,
|
||||
InvoiceInfoSidebar,
|
||||
EmptyFilePage,
|
||||
MobileToolbar,
|
||||
EmptyMessage,
|
||||
InvoiceItem,
|
||||
ClientItem,
|
||||
SearchBar,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'filesInQueueTotal',
|
||||
'isVisibleSidebar',
|
||||
'FilePreviewType',
|
||||
'currentFolder',
|
||||
'isSearching',
|
||||
'clipboard',
|
||||
'isLoading',
|
||||
'entries',
|
||||
]),
|
||||
isEmpty() {
|
||||
return this.entries.length == 0
|
||||
},
|
||||
draggedItems() {
|
||||
//Set opacity for dragged items
|
||||
|
||||
if (!this.clipboard.includes(this.draggingId)) {
|
||||
return [this.draggingId]
|
||||
}
|
||||
|
||||
if (this.clipboard.includes(this.draggingId)) {
|
||||
return this.clipboard
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
query(val) {
|
||||
this.$searchInvoices(val)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
draggingId: undefined,
|
||||
isDragging: false,
|
||||
isMultiSelect: false,
|
||||
query: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deleteItems() {
|
||||
if (this.clipboard.length > 0 && this.$checkPermission('master') || this.$checkPermission('editor')) {
|
||||
this.$store.dispatch('deleteItem')
|
||||
}
|
||||
},
|
||||
contextMenu(event, item) {
|
||||
events.$emit('contextMenu:show', event, item)
|
||||
},
|
||||
filesContainerClick() {
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
}
|
||||
},
|
||||
created() {
|
||||
events.$on('mobileSelecting:start', () => {
|
||||
this.isMultiSelect = true
|
||||
})
|
||||
|
||||
events.$on('mobileSelecting:stop', () => {
|
||||
this.isMultiSelect = false
|
||||
})
|
||||
|
||||
events.$on('fileItem:deselect', () => {
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
})
|
||||
|
||||
this.$store.commit('STORE_CURRENT_FOLDER', {
|
||||
name: 'Invoices',
|
||||
id: undefined,
|
||||
location: 'regular-invoice',
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vuefilemanager/_variables';
|
||||
@import '@assets/vuefilemanager/_mixins';
|
||||
|
||||
.file-list {
|
||||
.dragged {
|
||||
/deep/ .is-dragenter {
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dragged {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#multi-selected {
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
|
||||
}
|
||||
|
||||
.mobile-multi-select {
|
||||
bottom: 50px !important;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.button-upload {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.mobile-search {
|
||||
display: none;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.file-content {
|
||||
display: flex;
|
||||
|
||||
&.is-dragging {
|
||||
@include transform(scale(0.99));
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
||||
&.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 180px);
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-info-container {
|
||||
flex: 0 0 300px;
|
||||
padding-left: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Transition
|
||||
.file-move {
|
||||
transition: transform 0.6s;
|
||||
}
|
||||
|
||||
.file-enter-active {
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.file-leave-active {
|
||||
transition: all 0ms;
|
||||
}
|
||||
|
||||
.file-enter, .file-leave-to /* .list-leave-active below version 2.1.8 */
|
||||
{
|
||||
opacity: 0;
|
||||
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 {
|
||||
|
||||
&.grid {
|
||||
grid-template-columns: repeat(auto-fill, 120px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div :style="{ top: positionY + 'px', left: positionX + 'px' }" @click="closeAndResetContextMenu" class="contextmenu" v-show="isVisible || showFromPreview" ref="contextmenu" :class="{'filePreviewFixed': showFromPreview}">
|
||||
|
||||
<!--Invoice-->
|
||||
<div v-show="isInvoice" class="menu-options" id="menu-list">
|
||||
<OptionGroup class="menu-option-group">
|
||||
<Option @click.native="" title="Edit Invoice" icon="rename" />
|
||||
<Option @click.native="" title="Send Invoice" icon="send" />
|
||||
<Option @click.native="" title="Go to Company" icon="user" />
|
||||
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
|
||||
</OptionGroup>
|
||||
|
||||
<OptionGroup>
|
||||
<Option @click.native="showDetail" :title="$t('context_menu.detail')" icon="detail" />
|
||||
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
|
||||
</OptionGroup>
|
||||
</div>
|
||||
|
||||
<!--Client-->
|
||||
<div v-show="isClient" class="menu-options" id="menu-list">
|
||||
<OptionGroup class="menu-option-group">
|
||||
<Option @click.native="" title="Edit" icon="rename" />
|
||||
<Option @click.native="deleteItem" title="Delete" icon="trash" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="showDetail" title="Go to Profile" icon="user" />
|
||||
<Option @click.native="showDetail" :title="$t('context_menu.detail')" icon="detail" />
|
||||
</OptionGroup>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OptionGroup from '@/components/FilesView/OptionGroup'
|
||||
import Option from '@/components/FilesView/Option'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'ContextMenu',
|
||||
components: {
|
||||
OptionGroup,
|
||||
Option
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'user',
|
||||
'clipboard'
|
||||
]),
|
||||
isInvoice() {
|
||||
return this.clipboard[0] && this.clipboard[0].type === 'invoice'
|
||||
},
|
||||
isClient() {
|
||||
return this.clipboard[0] && this.clipboard[0].type === 'client'
|
||||
},
|
||||
isMultiSelectContextMenu() {
|
||||
|
||||
// If is context Menu open on multi selected items open just options for the multi selected items
|
||||
if (this.clipboard.length > 1 && this.clipboard.includes(this.item))
|
||||
return false
|
||||
|
||||
// If is context Menu open for the non selected item open options for the single item
|
||||
if (this.clipboard.length < 2 || !this.clipboard.includes(this.item))
|
||||
return true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showFromPreview: false,
|
||||
item: undefined,
|
||||
isVisible: false,
|
||||
positionX: 0,
|
||||
positionY: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
downloadItem() {
|
||||
if (this.clipboard.length > 1)
|
||||
this.$store.dispatch('downloadFiles')
|
||||
else {
|
||||
this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
|
||||
}
|
||||
},
|
||||
showDetail() {
|
||||
// Dispatch load file info detail
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
|
||||
// Show panel if is not open
|
||||
this.$store.dispatch('fileInfoToggle', true)
|
||||
},
|
||||
deleteItem() {
|
||||
|
||||
},
|
||||
closeAndResetContextMenu() {
|
||||
// Close context menu
|
||||
this.isVisible = false
|
||||
|
||||
// Reset item container
|
||||
this.item = undefined
|
||||
},
|
||||
showFolderActionsMenu() {
|
||||
let container = document.getElementById('folder-actions')
|
||||
|
||||
this.positionX = container.offsetLeft + 16
|
||||
this.positionY = container.offsetTop + 30
|
||||
|
||||
// Show context menu
|
||||
this.isVisible = true
|
||||
},
|
||||
showContextMenu(event) {
|
||||
let parent = document.getElementById('menu-list')
|
||||
let nodesSameClass = parent.getElementsByClassName('menu-option')
|
||||
|
||||
let VerticalOffsetArea = nodesSameClass.length * 50
|
||||
let HorizontalOffsetArea = 190
|
||||
|
||||
let container = document.getElementById('files-view')
|
||||
|
||||
var offset = container.getClientRects()[0]
|
||||
|
||||
let x = event.clientX - offset.left
|
||||
let y = event.clientY - offset.top
|
||||
|
||||
// Set position Y
|
||||
if (container.offsetHeight - y < VerticalOffsetArea) {
|
||||
this.positionY = y - VerticalOffsetArea
|
||||
} else {
|
||||
this.positionY = y
|
||||
}
|
||||
|
||||
// Set position X
|
||||
if (container.offsetWidth - x < HorizontalOffsetArea) {
|
||||
this.positionX = x - HorizontalOffsetArea
|
||||
} else {
|
||||
this.positionX = x
|
||||
}
|
||||
|
||||
// Show context menu
|
||||
this.isVisible = true
|
||||
},
|
||||
showFilePreviewMenu() {
|
||||
let container = document.getElementById('fast-preview-menu')
|
||||
if (container) {
|
||||
this.positionX = container.offsetLeft + 16
|
||||
this.positionY = container.offsetTop + 51
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
events.$on('showContextMenuPreview:show', (item) => {
|
||||
if (!this.showFromPreview) {
|
||||
this.item = item
|
||||
this.showFromPreview = true
|
||||
this.showFilePreviewMenu()
|
||||
} else if (this.showFromPreview) {
|
||||
this.showFromPreview = false
|
||||
this.item = undefined
|
||||
}
|
||||
})
|
||||
|
||||
events.$on('showContextMenuPreview:hide', () => {
|
||||
this.isVisible = false
|
||||
this.showFromPreview = false
|
||||
this.item = undefined
|
||||
})
|
||||
|
||||
events.$on('contextMenu:show', (event, item) => {
|
||||
// Store item
|
||||
this.item = item
|
||||
|
||||
// Show context menu
|
||||
setTimeout(() => this.showContextMenu(event, item), 10)
|
||||
})
|
||||
|
||||
events.$on('unClick', () => this.closeAndResetContextMenu())
|
||||
|
||||
events.$on('folder:actions', (folder) => {
|
||||
// Store item
|
||||
this.item = folder
|
||||
|
||||
if (this.isVisible) this.isVisible = false
|
||||
else this.showFolderActionsMenu()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/vuefilemanager/_variables";
|
||||
@import "@assets/vuefilemanager/_mixins";
|
||||
|
||||
.no-options {
|
||||
/deep/ .text-label {
|
||||
color: $text-muted !important;
|
||||
}
|
||||
|
||||
/deep/ &:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/deep/ path,
|
||||
/deep/ line,
|
||||
/deep/ circle {
|
||||
stroke: $text-muted !important;
|
||||
}
|
||||
}
|
||||
|
||||
.filePreviewFixed {
|
||||
position: fixed !important;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.contextmenu {
|
||||
min-width: 250px;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
box-shadow: $shadow;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
&.showed {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-options {
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.contextmenu {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
.no-options {
|
||||
/deep/ .text-label {
|
||||
color: $dark_mode_text_secondary !important;
|
||||
}
|
||||
|
||||
/deep/ &:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/deep/ path,
|
||||
/deep/ line,
|
||||
/deep/ circle {
|
||||
stroke: $dark_mode_text_secondary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<MenuMobile name="invoice-create">
|
||||
<MenuMobileGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="showLocation('regular-invoice')" title="Create Invoice" icon="file-plus" is-hover-disabled="true" />
|
||||
<Option @click.native="showLocation('advance-invoice')" title="Create Advance Invoice" icon="clock" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="showLocation('clients')" title="Create Client" icon="user-plus" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
</MenuMobileGroup>
|
||||
</MenuMobile>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
|
||||
import OptionGroup from '@/components/FilesView/OptionGroup'
|
||||
import MenuMobile from '@/components/Mobile/MenuMobile'
|
||||
import Option from '@/components/FilesView/Option'
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'InvoiceFilterMobile',
|
||||
components: {
|
||||
MenuMobileGroup,
|
||||
OptionGroup,
|
||||
MenuMobile,
|
||||
Option,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'homeDirectory'
|
||||
]),
|
||||
},
|
||||
methods: {
|
||||
showLocation(location) {
|
||||
|
||||
},
|
||||
flushBrowseHistory() {
|
||||
this.$store.commit('FLUSH_FOLDER_HISTORY')
|
||||
},
|
||||
goToFiles() {
|
||||
this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
|
||||
this.flushBrowseHistory()
|
||||
},
|
||||
goToLatest() {
|
||||
this.$store.dispatch('getLatest')
|
||||
this.flushBrowseHistory()
|
||||
},
|
||||
goToTrash() {
|
||||
this.$store.dispatch('getTrash')
|
||||
this.flushBrowseHistory()
|
||||
},
|
||||
goToShared() {
|
||||
this.$store.dispatch('getShared', [{back: false, init: false}])
|
||||
this.flushBrowseHistory()
|
||||
},
|
||||
goToParticipantUploads() {
|
||||
this.$store.dispatch('getParticipantUploads')
|
||||
this.flushBrowseHistory()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div id="desktop-toolbar">
|
||||
<div class="toolbar-wrapper">
|
||||
|
||||
<div class="location">
|
||||
<!--<chevron-left-icon :class="{'is-active': browseHistory.length > 1 }" class="icon-back" size="17" />-->
|
||||
|
||||
<span class="location-title">
|
||||
{{ directoryName }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ToolbarWrapper>
|
||||
|
||||
<!--Search bar-->
|
||||
<ToolbarGroup style="margin-left: 0">
|
||||
<SearchBar v-model="query" @reset-query="query = ''" placeholder="Search your invoices..." />
|
||||
</ToolbarGroup>
|
||||
|
||||
<!--Creating controls-->
|
||||
<ToolbarGroup>
|
||||
<PopoverWrapper>
|
||||
<ToolbarButton @click.stop.native="createCreateMenu" source="plus" :action="$t('actions.create_folder')" />
|
||||
<PopoverItem name="desktop-create-invoices">
|
||||
<OptionGroup>
|
||||
<Option title="Create Invoice" icon="file-plus" />
|
||||
<Option title="Create Advance Invoice" icon="clock" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="createClient" title="Create Client" icon="user-plus" />
|
||||
</OptionGroup>
|
||||
</PopoverItem>
|
||||
</PopoverWrapper>
|
||||
</ToolbarGroup>
|
||||
|
||||
<!--Invoice Controls-->
|
||||
<ToolbarGroup v-if="! $isMobile()">
|
||||
<ToolbarButton @click.native="shareInvoice" :class="{'is-inactive': canActiveInView }" source="send" :action="$t('actions.share')" />
|
||||
<ToolbarButton @click.native="shareInvoice" :class="{'is-inactive': canActiveInView }" source="rename" :action="$t('actions.share')" />
|
||||
<ToolbarButton @click.native="deleteInvoice" :class="{'is-inactive': canActiveInView }" source="trash" :action="$t('actions.delete')" />
|
||||
</ToolbarGroup>
|
||||
|
||||
<!--View Controls-->
|
||||
<ToolbarGroup>
|
||||
<PopoverWrapper>
|
||||
<ToolbarButton @click.stop.native="showSortingMenu" source="preview-sorting" :action="$t('actions.sorting_view')" />
|
||||
<PopoverItem name="desktop-sorting">
|
||||
<OptionGroup>
|
||||
<Option @click.native.stop="sort('created_at')" :title="$t('preview_sorting.sort_date')" icon="calendar" />
|
||||
<Option @click.native.stop="sort('name')" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
|
||||
</OptionGroup>
|
||||
</PopoverItem>
|
||||
</PopoverWrapper>
|
||||
<ToolbarButton @click.native="$store.dispatch('fileInfoToggle')" :class="{'active': isVisibleSidebar }" :action="$t('actions.info_panel')" source="info" />
|
||||
</ToolbarGroup>
|
||||
</ToolbarWrapper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileSortingOptions from '@/components/FilesView/FileSortingOptions'
|
||||
import {ChevronLeftIcon, MoreHorizontalIcon} from 'vue-feather-icons'
|
||||
import PopoverWrapper from '@/components/Desktop/PopoverWrapper'
|
||||
import ToolbarWrapper from '@/components/Desktop/ToolbarWrapper'
|
||||
import ToolbarButton from '@/components/FilesView/ToolbarButton'
|
||||
import ToolbarGroup from '@/components/Desktop/ToolbarGroup'
|
||||
import OptionGroup from '@/components/FilesView/OptionGroup'
|
||||
import PopoverItem from '@/components/Desktop/PopoverItem'
|
||||
import SearchBar from '@/components/FilesView/SearchBar'
|
||||
import Option from '@/components/FilesView/Option'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'InvoiceDesktopToolbar',
|
||||
components: {
|
||||
FileSortingOptions,
|
||||
MoreHorizontalIcon,
|
||||
ChevronLeftIcon,
|
||||
ToolbarWrapper,
|
||||
PopoverWrapper,
|
||||
ToolbarButton,
|
||||
ToolbarGroup,
|
||||
PopoverItem,
|
||||
SearchBar,
|
||||
OptionGroup,
|
||||
Option,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isVisibleSidebar',
|
||||
'currentFolder',
|
||||
'clipboard',
|
||||
]),
|
||||
directoryName() {
|
||||
return this.currentFolder ? this.currentFolder.name : 'Invoices'
|
||||
},
|
||||
canActiveInView() {
|
||||
let locations = [
|
||||
'regular-invoice',
|
||||
'advance-invoice',
|
||||
]
|
||||
return !this.$isThisLocation(locations) || this.clipboard.length === 0
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
query(val) {
|
||||
this.$searchInvoices(val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createClient() {
|
||||
this.$router.push({name: 'CreateClient'})
|
||||
},
|
||||
showSortingMenu() {
|
||||
events.$emit('popover:open', 'desktop-sorting')
|
||||
},
|
||||
createCreateMenu() {
|
||||
events.$emit('popover:open', 'desktop-create-invoices')
|
||||
},
|
||||
deleteInvoice() {
|
||||
if (this.clipboard.length > 0)
|
||||
this.$store.dispatch('deleteInvoice')
|
||||
},
|
||||
shareInvoice() {
|
||||
alert('Send Invoice')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/vuefilemanager/_variables";
|
||||
@import "@assets/vuefilemanager/_mixins";
|
||||
|
||||
.is-inactive {
|
||||
opacity: 0.25;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toolbar-wrapper {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.location {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
||||
.icon-back {
|
||||
@include transition(150ms);
|
||||
pointer-events: none;
|
||||
margin-right: 6px;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.15;
|
||||
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.location-title {
|
||||
@include font-size(15);
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.location-more {
|
||||
margin-left: 6px;
|
||||
padding: 1px 4px;
|
||||
line-height: 0;
|
||||
border-radius: 3px;
|
||||
@include transition(150ms);
|
||||
|
||||
svg circle {
|
||||
@include transition(150ms);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
svg circle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-position {
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
@include font-size(17);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.location {
|
||||
|
||||
.location-title {
|
||||
max-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-tools {
|
||||
.button {
|
||||
margin-left: 0;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
#desktop-toolbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.location {
|
||||
.location-title {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.location-more {
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<MenuMobile name="invoice-filter">
|
||||
<MenuMobileGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="showLocation('regular-invoice')" :is-active="$isThisLocation('regular-invoice')" title="Invoices" icon="file-text" is-hover-disabled="true" />
|
||||
<Option @click.native="showLocation('advance-invoice')" :is-active="$isThisLocation('advance-invoice')" title="Advance Invoices" icon="clock" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="showLocation('clients')" :is-active="$isThisLocation('clients')" title="Clients" icon="users" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
</MenuMobileGroup>
|
||||
</MenuMobile>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
|
||||
import OptionGroup from '@/components/FilesView/OptionGroup'
|
||||
import MenuMobile from '@/components/Mobile/MenuMobile'
|
||||
import Option from '@/components/FilesView/Option'
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'InvoiceFilterMobile',
|
||||
components: {
|
||||
MenuMobileGroup,
|
||||
OptionGroup,
|
||||
MenuMobile,
|
||||
Option,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'homeDirectory'
|
||||
]),
|
||||
},
|
||||
methods: {
|
||||
showLocation(location) {
|
||||
let routes = {
|
||||
'regular-invoice': 'getRegularInvoices',
|
||||
'advance-invoice': 'getAdvanceInvoices',
|
||||
'clients': 'getClients',
|
||||
}
|
||||
this.$store.dispatch(routes[location])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="info-wrapper">
|
||||
|
||||
<!--Is empty clipboard-->
|
||||
<EmptyMessage
|
||||
v-if="isEmpty"
|
||||
:message="$t('messages.nothing_to_preview')"
|
||||
icon="eye-off"
|
||||
/>
|
||||
|
||||
<div v-if="isClient">
|
||||
|
||||
<!--Single file preview-->
|
||||
<div v-if="isSingleFile && !isEmpty" class="info-headline">
|
||||
<TitlePreview
|
||||
icon="user"
|
||||
:title="singleFile.name"
|
||||
subtitle="Client"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--File info-->
|
||||
<ListInfo v-if="isSingleFile && !isEmpty">
|
||||
|
||||
<ListInfoItem
|
||||
title="Email"
|
||||
:content="singleFile.email"
|
||||
/>
|
||||
|
||||
<ListInfoItem
|
||||
title="Total Net"
|
||||
:content="singleFile.totalNet"
|
||||
/>
|
||||
|
||||
<ListInfoItem
|
||||
title="Total Invoices"
|
||||
:content="singleFile.totalInvoices + ' Pcs.'"
|
||||
/>
|
||||
|
||||
<!--Created At-->
|
||||
<ListInfoItem
|
||||
:title="$t('file_detail.created_at')"
|
||||
:content="singleFile.created_at"
|
||||
/>
|
||||
</ListInfo>
|
||||
</div>
|
||||
|
||||
<div v-if="isInvoice">
|
||||
|
||||
<!--Multiple item selection-->
|
||||
<div v-if="! isSingleFile && !isEmpty" class="info-headline">
|
||||
<TitlePreview
|
||||
icon="check-square"
|
||||
:title="$t('file_detail.selected_multiple')"
|
||||
:subtitle="this.clipboard.length + ' ' + $tc('file_detail.items', this.clipboard.length)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--Single file preview-->
|
||||
<div v-if="isSingleFile && !isEmpty" class="info-headline">
|
||||
<TitlePreview
|
||||
icon="file-text"
|
||||
:title="singleFile.clientName"
|
||||
:subtitle="'Invoice - ' + singleFile.invoiceNumber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--File info-->
|
||||
<ListInfo v-if="isSingleFile && !isEmpty">
|
||||
|
||||
<ListInfoItem
|
||||
title="Invoice Number"
|
||||
:content="singleFile.invoiceNumber"
|
||||
/>
|
||||
|
||||
<ListInfoItem
|
||||
title="Total"
|
||||
:content="singleFile.total"
|
||||
/>
|
||||
|
||||
<ListInfoItem
|
||||
title="Client"
|
||||
:content="singleFile.clientName"
|
||||
/>
|
||||
|
||||
<!--Created At-->
|
||||
<ListInfoItem
|
||||
:title="$t('file_detail.created_at')"
|
||||
:content="singleFile.created_at"
|
||||
/>
|
||||
</ListInfo>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FilePreviewDetail from '@/components/Others/FilePreviewDetail'
|
||||
import {Edit2Icon, LockIcon, UnlockIcon} from 'vue-feather-icons'
|
||||
import ImageMetaData from '@/components/FilesView/ImageMetaData'
|
||||
import EmptyMessage from '@/components/FilesView/EmptyMessage'
|
||||
import TitlePreview from '@/components/FilesView/TitlePreview'
|
||||
import CopyInput from '@/components/Others/Forms/CopyInput'
|
||||
import ListInfoItem from '@/components/Others/ListInfoItem'
|
||||
import ListInfo from '@/components/Others/ListInfo'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from "@/bus"
|
||||
|
||||
export default {
|
||||
name: 'InfoSidebar',
|
||||
components: {
|
||||
FilePreviewDetail,
|
||||
ImageMetaData,
|
||||
EmptyMessage,
|
||||
TitlePreview,
|
||||
ListInfoItem,
|
||||
UnlockIcon,
|
||||
CopyInput,
|
||||
Edit2Icon,
|
||||
LockIcon,
|
||||
ListInfo,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'permissionOptions',
|
||||
'clipboard',
|
||||
]),
|
||||
isInvoice() {
|
||||
return this.clipboard[0] && this.clipboard[0].type === 'invoice'
|
||||
},
|
||||
isClient() {
|
||||
return this.clipboard[0] && this.clipboard[0].type === 'client'
|
||||
},
|
||||
isEmpty() {
|
||||
return this.clipboard.length === 0
|
||||
},
|
||||
isSingleFile() {
|
||||
return this.clipboard.length === 1
|
||||
},
|
||||
singleFile() {
|
||||
return this.clipboard[0]
|
||||
},
|
||||
canShowMetaData() {
|
||||
return this.clipboard[0].metadata && this.clipboard[0].metadata.ExifImageWidth
|
||||
},
|
||||
isLocked() {
|
||||
return this.clipboard[0].shared.is_protected
|
||||
},
|
||||
sharedInfo() {
|
||||
let title = this.permissionOptions.find(option => {
|
||||
return option.value === this.clipboard[0].shared.permission
|
||||
})
|
||||
|
||||
return title ? this.$t(title.label) : this.$t('shared.can_download')
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openShareOptions() {
|
||||
events.$emit('popup:open', {name: 'share-edit', item: this.clipboard[0]})
|
||||
},
|
||||
openMoveOptions() {
|
||||
events.$emit("popup:open", {name: "move", item: this.clipboard});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.info-wrapper {
|
||||
padding-bottom: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.info-headline {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.share-link {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
|
||||
.lock-icon {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
margin-right: 9px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.copy-share-link {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,454 @@
|
||||
<template>
|
||||
<div class="file-wrapper" @mouseup.stop="clickedItem" @dblclick="showInvoice">
|
||||
<div class="file-item" :class="{'is-clicked': isClicked , 'no-clicked': !isClicked && $isMobile()}">
|
||||
|
||||
<!-- MultiSelecting for the mobile version -->
|
||||
<transition name="slide-from-left">
|
||||
<div class="check-select" v-if="isMobileSelectMode">
|
||||
<div class="select-box" :class="{'select-box-active': isClicked } ">
|
||||
<CheckIcon v-if="isClicked" class="icon" size="17" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!--Name-->
|
||||
<div class="item-name">
|
||||
|
||||
<b :ref="item.id" class="name">
|
||||
{{ item.clientName }} - {{ item.total }}
|
||||
</b>
|
||||
|
||||
<div class="item-info">
|
||||
<span class="item-size">
|
||||
{{ item.created_at }}, n. {{ item.invoiceNumber }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Show item actions-->
|
||||
<transition name="slide-from-right">
|
||||
<div class="actions" v-if="$isMobile() && ! isMobileSelectMode">
|
||||
<span @mousedown.stop="showItemActions" class="show-actions">
|
||||
<MoreVerticalIcon size="16" class="icon-action text-theme" />
|
||||
</span>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {CheckIcon, MoreVerticalIcon} from 'vue-feather-icons'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'InvoiceItem',
|
||||
props: [
|
||||
'item'
|
||||
],
|
||||
components: {
|
||||
MoreVerticalIcon,
|
||||
CheckIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'FilePreviewType',
|
||||
'clipboard',
|
||||
'entries'
|
||||
]),
|
||||
isClicked() {
|
||||
return this.clipboard.some(element => element.id === this.item.id)
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isMobileSelectMode: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showItemActions() {
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
|
||||
events.$emit('mobile-menu:show', 'invoice-menu')
|
||||
},
|
||||
clickedItem(e) {
|
||||
if (!this.$isMobile()) {
|
||||
|
||||
if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
|
||||
|
||||
// Click + Ctrl
|
||||
if (this.clipboard.some(item => item.data.id === this.item.data.id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FROM_CLIPBOARD', this.item)
|
||||
} else {
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
}
|
||||
|
||||
} else if (e.shiftKey) {
|
||||
|
||||
// Click + Shift
|
||||
let lastItem = this.entries.indexOf(this.clipboard[this.clipboard.length - 1])
|
||||
let clickedItem = this.entries.indexOf(this.item)
|
||||
|
||||
// If Click + Shift + Ctrl dont remove already selected items
|
||||
if (!e.ctrlKey && !e.metaKey) {
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
}
|
||||
|
||||
//Shift selecting from top to bottom
|
||||
if (lastItem < clickedItem) {
|
||||
for (let i = lastItem; i <= clickedItem; i++) {
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.entries[i])
|
||||
}
|
||||
//Shift selecting from bottom to top
|
||||
} else {
|
||||
for (let i = lastItem; i >= clickedItem; i--) {
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.entries[i])
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
// Click
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.isMobileSelectMode && this.$isMobile()) {
|
||||
events.$emit('file-preview:show')
|
||||
}
|
||||
|
||||
if (this.isMobileSelectMode && this.$isMobile()) {
|
||||
if (this.clipboard.some(item => item.data.id === this.item.data.id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FROM_CLIPBOARD', this.item)
|
||||
} else {
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
}
|
||||
}
|
||||
},
|
||||
showInvoice() {
|
||||
events.$emit('file-preview:show')
|
||||
},
|
||||
},
|
||||
created() {
|
||||
events.$on('mobileSelecting:start', () => {
|
||||
this.isMobileSelectMode = true
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
})
|
||||
|
||||
events.$on('mobileSelecting:stop', () => {
|
||||
this.isMobileSelectMode = false
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vuefilemanager/_variables';
|
||||
@import '@assets/vuefilemanager/_mixins';
|
||||
|
||||
|
||||
.slide-from-left-move {
|
||||
transition: transform 300s ease;
|
||||
}
|
||||
|
||||
.slide-from-left-enter-active,
|
||||
.slide-from-right-enter-active,
|
||||
.slide-from-left-leave-active,
|
||||
.slide-from-right-leave-active {
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.slide-from-left-enter,
|
||||
.slide-from-left-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.slide-from-right-enter,
|
||||
.slide-from-right-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
|
||||
.check-select {
|
||||
margin-right: 15px;
|
||||
margin-left: 6px;
|
||||
|
||||
.select-box {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: darken($light_background, 5%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.select-box-active {
|
||||
background-color: $theme;
|
||||
|
||||
.icon {
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-wrapper {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.actions {
|
||||
text-align: right;
|
||||
width: 50px;
|
||||
|
||||
.show-actions {
|
||||
cursor: pointer;
|
||||
padding: 12px 0 12px 6px;
|
||||
|
||||
.icon-action {
|
||||
margin-top: 9px;
|
||||
@include font-size(14);
|
||||
|
||||
circle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.item-info {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.item-shared {
|
||||
display: inline-block;
|
||||
|
||||
.label {
|
||||
@include font-size(12);
|
||||
font-weight: 400;
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
.shared-icon {
|
||||
vertical-align: middle;
|
||||
|
||||
path,
|
||||
circle,
|
||||
line {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
@include font-size(11);
|
||||
font-weight: 400;
|
||||
color: rgba($text, 0.7);
|
||||
}
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
|
||||
&[contenteditable] {
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
&[contenteditable='true']:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $text;
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.actived {
|
||||
max-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
.file-item {
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
flex: 0 0 50px;
|
||||
line-height: 0;
|
||||
margin-right: 20px;
|
||||
|
||||
.folder {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
|
||||
/deep/ .folder-icon {
|
||||
@include font-size(52)
|
||||
}
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
@include font-size(45);
|
||||
|
||||
path {
|
||||
fill: #fafafc;
|
||||
stroke: #dfe0e8;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.file-icon-text {
|
||||
line-height: 1;
|
||||
top: 40%;
|
||||
@include font-size(11);
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
max-width: 50px;
|
||||
max-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image {
|
||||
object-fit: cover;
|
||||
user-select: none;
|
||||
max-width: 100%;
|
||||
border-radius: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
border: 2px dashed transparent;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 7px 12px 15px;
|
||||
|
||||
&.is-dragenter {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&.no-clicked {
|
||||
background: white !important;
|
||||
|
||||
.item-name {
|
||||
.name {
|
||||
color: $text !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
border-radius: 8px;
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.check-select {
|
||||
|
||||
.select-box {
|
||||
background-color: lighten($dark_mode_foreground, 10%);
|
||||
}
|
||||
|
||||
.select-box-active {
|
||||
background-color: $theme;
|
||||
|
||||
.icon {
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-wrapper {
|
||||
.icon-item {
|
||||
.file-icon {
|
||||
path {
|
||||
fill: $dark_mode_foreground;
|
||||
stroke: #2f3c54;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
&.no-clicked {
|
||||
background: $dark_mode_background !important;
|
||||
|
||||
.file-icon {
|
||||
|
||||
path {
|
||||
fill: $dark_mode_foreground !important;
|
||||
stroke: #2F3C54;
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
|
||||
.name {
|
||||
color: $dark_mode_text_primary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.file-icon {
|
||||
path {
|
||||
fill: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
.name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<MenuMobile name="invoice-menu">
|
||||
<TitlePreview
|
||||
v-if="clipboard[0]"
|
||||
class="headline"
|
||||
icon="file-text"
|
||||
:title="clipboard[0].name"
|
||||
:subtitle="'Invoice - ' + clipboard[0].invoiceNumber"
|
||||
/>
|
||||
|
||||
<!--Trash location-->
|
||||
<MenuMobileGroup>
|
||||
<OptionGroup class="menu-option-group">
|
||||
<Option @click.native="" title="Edit Invoice" icon="rename" />
|
||||
<Option @click.native="" title="Send Invoice" icon="send" />
|
||||
<Option @click.native="" title="Go to Company" icon="user" />
|
||||
<Option @click.native="" :title="$t('context_menu.delete')" icon="trash" />
|
||||
</OptionGroup>
|
||||
|
||||
<OptionGroup>
|
||||
<Option @click.native="" :title="$t('context_menu.detail')" icon="detail" />
|
||||
<Option @click.native="" :title="$t('context_menu.download')" icon="download" />
|
||||
</OptionGroup>
|
||||
</MenuMobileGroup>
|
||||
</MenuMobile>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
|
||||
import TitlePreview from '@/components/FilesView/TitlePreview'
|
||||
import ThumbnailItem from '@/components/Others/ThumbnailItem'
|
||||
import OptionGroup from '@/components/FilesView/OptionGroup'
|
||||
import MenuMobile from '@/components/Mobile/MenuMobile'
|
||||
import Option from '@/components/FilesView/Option'
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'FileMenuMobile',
|
||||
components: {
|
||||
MenuMobileGroup,
|
||||
ThumbnailItem,
|
||||
TitlePreview,
|
||||
OptionGroup,
|
||||
MenuMobile,
|
||||
Option,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'clipboard',
|
||||
'user',
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisible: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.headline {
|
||||
padding: 20px 20px 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<MenuMobile name="invoice-sorting">
|
||||
<MenuMobileGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native.stop="sort('created_at')" :title="$t('preview_sorting.sort_date')" icon="calendar" />
|
||||
<Option @click.native.stop="sort('name')" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
|
||||
</OptionGroup>
|
||||
</MenuMobileGroup>
|
||||
</MenuMobile>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
|
||||
import OptionGroup from '@/components/FilesView/OptionGroup'
|
||||
import MenuMobile from '@/components/Mobile/MenuMobile'
|
||||
import Option from '@/components/FilesView/Option'
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'InvoiceFilterMobile',
|
||||
components: {
|
||||
MenuMobileGroup,
|
||||
OptionGroup,
|
||||
MenuMobile,
|
||||
Option,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'homeDirectory'
|
||||
]),
|
||||
},
|
||||
methods: {
|
||||
showLocation(location) {
|
||||
|
||||
},
|
||||
flushBrowseHistory() {
|
||||
this.$store.commit('FLUSH_FOLDER_HISTORY')
|
||||
},
|
||||
goToFiles() {
|
||||
this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
|
||||
this.flushBrowseHistory()
|
||||
},
|
||||
goToLatest() {
|
||||
this.$store.dispatch('getLatest')
|
||||
this.flushBrowseHistory()
|
||||
},
|
||||
goToTrash() {
|
||||
this.$store.dispatch('getTrash')
|
||||
this.flushBrowseHistory()
|
||||
},
|
||||
goToShared() {
|
||||
this.$store.dispatch('getShared', [{back: false, init: false}])
|
||||
this.flushBrowseHistory()
|
||||
},
|
||||
goToParticipantUploads() {
|
||||
this.$store.dispatch('getParticipantUploads')
|
||||
this.flushBrowseHistory()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user