Popover for create button

public/mix-manifest.json

@@ -266,7 +266,7 @@
     "/chunks/oasis/invoices.d66ff1fbf4e24e8ec5cd.hot-update.js": "/chunks/oasis/invoices.d66ff1fbf4e24e8ec5cd.hot-update.js",
     "/chunks/oasis/invoices.2b7a37f23761c8771f3d.hot-update.js": "/chunks/oasis/invoices.2b7a37f23761c8771f3d.hot-update.js",
     "/js/main.d274f733d95bca3ec329.hot-update.js": "/js/main.d274f733d95bca3ec329.hot-update.js",
-    "/chunks/admin~chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/sh~f205bd67.js": "/chunks/admin~chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/sh~f205bd67.js?id=8c1846376a04bc9a970c",
+    "/chunks/admin~chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/sh~f205bd67.js": "/chunks/admin~chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/sh~f205bd67.js?id=fa690960a972b61a0d05",
     "/chunks/app-language~chunks/dashboard~chunks/dashboard-oasis~chunks/files~chunks/invoices~chunks/oasi~cd3e6128.js": "/chunks/app-language~chunks/dashboard~chunks/dashboard-oasis~chunks/files~chunks/invoices~chunks/oasi~cd3e6128.js?id=64ee94ef1dbfecb30cb9",
     "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/oasis/platba~chunks/settings-su~50fe86ed.js": "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/oasis/platba~chunks/settings-su~50fe86ed.js?id=623f7615840be8374dcf",
     "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/shared-files~ch~e5a24789.js": "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/shared-files~ch~e5a24789.js?id=8a936fa4187b27beddd8",
@@ -274,7 +274,7 @@
     "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/shared~chunks/s~87b39a8d.js": "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/shared~chunks/s~87b39a8d.js?id=4ebf5cc9fb3ba55fcd79",
     "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/shared-files~chunks/shared/file-browser.js?id=75ecfbff622777db6ce3",
     "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/shared-files~chunks/shared/file~7807db72.js": "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/shared-files~chunks/shared/file~7807db72.js?id=962f11c09911fbc094d6",
-    "/chunks/oasis/invoices/list.js": "/chunks/oasis/invoices/list.js?id=4d60023241b31e18df68",
+    "/chunks/oasis/invoices/list.js": "/chunks/oasis/invoices/list.js?id=1e8cb04f4470dee2827e",
     "/vendors~chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/shared~~c9df84c5.js": "/vendors~chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/shared~~c9df84c5.js?id=4d042d0c0d8477a4f7ac",
     "/chunks/oasis/invoices/list.51c1a825e34ada41b37b.hot-update.js": "/chunks/oasis/invoices/list.51c1a825e34ada41b37b.hot-update.js",
     "/chunks/admin~chunks/oasis/invoices~chunks/platform.291e81896f6c9f73d66b.hot-update.js": "/chunks/admin~chunks/oasis/invoices~chunks/platform.291e81896f6c9f73d66b.hot-update.js",
@@ -305,5 +305,17 @@
     "/chunks/oasis/invoices/list.32c48114deeb5a864273.hot-update.js": "/chunks/oasis/invoices/list.32c48114deeb5a864273.hot-update.js",
     "/chunks/oasis/invoices/list.55dc139e826e3df827e6.hot-update.js": "/chunks/oasis/invoices/list.55dc139e826e3df827e6.hot-update.js",
     "/chunks/oasis/invoices/list.7f7d97dba5fc935ba8c6.hot-update.js": "/chunks/oasis/invoices/list.7f7d97dba5fc935ba8c6.hot-update.js",
-    "/chunks/oasis/invoices/list.de4ab90bd0a83dec5490.hot-update.js": "/chunks/oasis/invoices/list.de4ab90bd0a83dec5490.hot-update.js"
+    "/chunks/oasis/invoices/list.de4ab90bd0a83dec5490.hot-update.js": "/chunks/oasis/invoices/list.de4ab90bd0a83dec5490.hot-update.js",
+    "/chunks/oasis/invoices/list.c3eee6134554c879e646.hot-update.js": "/chunks/oasis/invoices/list.c3eee6134554c879e646.hot-update.js",
+    "/chunks/oasis/invoices/list.edd67b7363ca493fe88b.hot-update.js": "/chunks/oasis/invoices/list.edd67b7363ca493fe88b.hot-update.js",
+    "/chunks/oasis/invoices/list.161245b153712a25ec2a.hot-update.js": "/chunks/oasis/invoices/list.161245b153712a25ec2a.hot-update.js",
+    "/chunks/oasis/invoices/list.f7dce71d89bff5cde786.hot-update.js": "/chunks/oasis/invoices/list.f7dce71d89bff5cde786.hot-update.js",
+    "/chunks/oasis/invoices/list.6e26919171ad495c9c7b.hot-update.js": "/chunks/oasis/invoices/list.6e26919171ad495c9c7b.hot-update.js",
+    "/chunks/oasis/invoices/list.809a0ea87897a83bfa18.hot-update.js": "/chunks/oasis/invoices/list.809a0ea87897a83bfa18.hot-update.js",
+    "/chunks/oasis/invoices/list.0acdfdd98858cd9b2e8c.hot-update.js": "/chunks/oasis/invoices/list.0acdfdd98858cd9b2e8c.hot-update.js",
+    "/chunks/oasis/invoices/list.18b480e872fd5c30b776.hot-update.js": "/chunks/oasis/invoices/list.18b480e872fd5c30b776.hot-update.js",
+    "/chunks/oasis/invoices/list.71fdb103d5232b771b14.hot-update.js": "/chunks/oasis/invoices/list.71fdb103d5232b771b14.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/sh~f205bd67.de24112ab030ac431c7f.hot-update.js": "/chunks/admin~chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/sh~f205bd67.de24112ab030ac431c7f.hot-update.js",
+    "/chunks/oasis/invoices/list.25a2e7775dd722b378cf.hot-update.js": "/chunks/oasis/invoices/list.25a2e7775dd722b378cf.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/sh~f205bd67.2287f96b9fa7b144c71f.hot-update.js": "/chunks/admin~chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/sh~f205bd67.2287f96b9fa7b144c71f.hot-update.js"
 }

resources/js/Oasis/Modules/Invoices/components/DesktopToolbarInvoices.vue

@@ -17,9 +17,21 @@
 					<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')" />
+					<PopoverWrapper>
+                    	<ToolbarButton @click.stop.native="createCreateMenu" source="file-plus" :action="$t('actions.create_folder')" />
+						<PopoverItem name="desktop-create-invoices">
+							<OptionGroup>
+								<Option title="Create Invoice" icon="file-text" />
+								<Option title="Create Advance Invoice" icon="clock" />
+							</OptionGroup>
+							<OptionGroup>
+								<Option title="Create Client" icon="user" />
+							</OptionGroup>
+						</PopoverItem>
+					</PopoverWrapper>
 				</ToolbarGroup>
 
 				<!--Invoice Controls-->
@@ -40,8 +52,6 @@
 				</ToolbarGroup>
 			</ToolbarWrapper>
         </div>
-
-		<UploadProgress />
     </div>
 </template>
 
@@ -56,6 +66,8 @@
 	import SearchBar from '@/components/FilesView/SearchBar'
 	import {mapGetters} from 'vuex'
 	import {events} from '@/bus'
+	import OptionGroup from '@/components/FilesView/OptionGroup'
+	import Option from '@/components/FilesView/Option'
 
 	export default {
 		name: 'ToolBar',
@@ -69,6 +81,8 @@
 			ToolbarGroup,
 			PopoverItem,
 			SearchBar,
+			OptionGroup,
+			Option,
 		},
 		computed: {
 			...mapGetters([
@@ -90,6 +104,9 @@
 			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')
@@ -97,9 +114,6 @@
 			shareInvoice() {
 				alert('Share Invoice')
 			},
-			createInvoice() {
-				alert('Create Invoice')
-			},
 		},
 	}
 </script>

resources/js/components/FilesView/Option.vue

@@ -32,6 +32,7 @@
             <globe-icon v-if="icon === 'globe'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
             <monitor-icon v-if="icon === 'monitor'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
             <box-icon v-if="icon === 'box'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
+            <clock-icon v-if="icon === 'clock'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
         </div>
         <div class="text-label group-hover-text-theme" :class="{'text-theme': isActive}">
             {{ title }}
@@ -45,6 +46,7 @@
 <script>
 import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
 import {
+	ClockIcon,
     ChevronRightIcon,
     BoxIcon,
     MonitorIcon,
@@ -87,7 +89,8 @@ import {
             'icon'
         ],
         components: {
-            BoxIcon,
+			ClockIcon,
+			BoxIcon,
             MonitorIcon,
             GlobeIcon,
             DatabaseIcon,