mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-27 18:40:39 +00:00
Invoice Desktop Toolbar
This commit is contained in:
Peter Papp
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<section id="viewport">
|
||||
|
||||
<!--Mobile Navigation-->
|
||||
<MobileNavigation />
|
||||
|
||||
<!--Navigation Sidebar-->
|
||||
<SidebarNavigation/>
|
||||
|
||||
<!--Sidebar navigation-->
|
||||
<ContentSidebar>
|
||||
<ContentGroup title="Invoices" class="navigator">
|
||||
<div class="menu-list-wrapper vertical">
|
||||
<router-link :to="{name: 'InvoicesList'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<file-text-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
Invoices
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link :to="{name: 'Users'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<clock-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
Advance Invoices
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
<ContentGroup title="Others" class="navigator">
|
||||
<div class="menu-list-wrapper vertical">
|
||||
<router-link :to="{name: 'Plans'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<users-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
Clients
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
</ContentSidebar>
|
||||
|
||||
<!--<ContentFileView/>-->
|
||||
|
||||
<router-view :class="{'is-scaled-down': isScaledDown}" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { UsersIcon, FileTextIcon, ClockIcon } from 'vue-feather-icons'
|
||||
import SidebarNavigation from '@/components/Sidebar/SidebarNavigation'
|
||||
import MobileNavigation from '@/components/Others/MobileNavigation'
|
||||
import ContentSidebar from '@/components/Sidebar/ContentSidebar'
|
||||
import ContentGroup from '@/components/Sidebar/ContentGroup'
|
||||
import { mapGetters } from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
import ContentFileView from '@/components/Others/ContentFileView'
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'config'
|
||||
]),
|
||||
},
|
||||
components: {
|
||||
SidebarNavigation,
|
||||
MobileNavigation,
|
||||
ContentSidebar,
|
||||
FileTextIcon,
|
||||
ContentGroup,
|
||||
UsersIcon,
|
||||
ClockIcon,
|
||||
ContentFileView,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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 '@assets/vuefilemanager/_mixins';
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.is-scaled-down {
|
||||
@include transform(scale(0.95));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div @contextmenu.prevent.capture="contextMenu($event, undefined)" id="files-view">
|
||||
<DesktopToolbarInvoices/>
|
||||
<!--<ContextMenu />
|
||||
<FileBrowser/>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DesktopToolbarInvoices from '@/Oasis/Modules/Invoices/components/DesktopToolbarInvoices'
|
||||
import FileBrowser from '@/components/FilesView/FileBrowser'
|
||||
import ContextMenu from '@/components/FilesView/ContextMenu'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'FilesView',
|
||||
components: {
|
||||
DesktopToolbarInvoices,
|
||||
FileBrowser,
|
||||
ContextMenu,
|
||||
},
|
||||
methods: {
|
||||
contextMenu(event, item) {
|
||||
events.$emit('contextMenu:show', event, item)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
#files-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;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
#files-view {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,224 @@
|
||||
<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">
|
||||
Invoices
|
||||
</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>
|
||||
<ToolbarButton @click.native="createInvoice" source="file-plus" :action="$t('actions.create_folder')" />
|
||||
</ToolbarGroup>
|
||||
|
||||
<!--Invoice Controls-->
|
||||
<ToolbarGroup v-if="! $isMobile()">
|
||||
<ToolbarButton @click.native="shareInvoice" source="send" :action="$t('actions.share')" />
|
||||
<ToolbarButton @click.native="deleteInvoice" 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">
|
||||
<FileSortingOptions />
|
||||
</PopoverItem>
|
||||
</PopoverWrapper>
|
||||
<ToolbarButton @click.native="$store.dispatch('fileInfoToggle')" :class="{'active': isVisibleSidebar }" :action="$t('actions.info_panel')" source="info" />
|
||||
</ToolbarGroup>
|
||||
</ToolbarWrapper>
|
||||
</div>
|
||||
|
||||
<UploadProgress />
|
||||
</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 PopoverItem from '@/components/Desktop/PopoverItem'
|
||||
import SearchBar from '@/components/FilesView/SearchBar'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'ToolBar',
|
||||
components: {
|
||||
FileSortingOptions,
|
||||
MoreHorizontalIcon,
|
||||
ChevronLeftIcon,
|
||||
ToolbarWrapper,
|
||||
PopoverWrapper,
|
||||
ToolbarButton,
|
||||
ToolbarGroup,
|
||||
PopoverItem,
|
||||
SearchBar,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isVisibleSidebar',
|
||||
'clipboard',
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
query(val) {
|
||||
this.$searchFiles(val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showSortingMenu() {
|
||||
events.$emit('popover:open', 'desktop-sorting')
|
||||
},
|
||||
deleteInvoice() {
|
||||
if (this.clipboard.length > 0)
|
||||
this.$store.dispatch('deleteInvoice')
|
||||
},
|
||||
shareInvoice() {
|
||||
alert('Share Invoice')
|
||||
},
|
||||
createInvoice() {
|
||||
alert('Create 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) {
|
||||
.toolbar .directory-name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.toolbar-go-back {
|
||||
.location-title {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.location-more {
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user