refactoring part 4

resources/js/views/FileView/Components/PanelNavigationFiles.vue

@@ -84,7 +84,7 @@
 
 					<router-link :to="{name: 'Files', params: {id: folder.id}}" v-for="folder in favourites" :key="folder.id" class="menu-list-item">
 						<div class="text-theme">
-							<folder-icon size="17" class="folder-icon text-theme" />
+							<folder-icon size="17" class="folder-icon" />
 							<span class="label text-theme">{{ folder.name }}</span>
 						</div>
 						<x-icon @click.stop="$removeFavourite(folder)" size="17" class="delete-icon" />

resources/js/views/FileView/Files.vue

@@ -1,5 +1,41 @@
 <template>
 	<div>
+		<MobileContextMenu>
+			<OptionGroup v-if="item && isFolder">
+				<Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
+            </OptionGroup>
+
+			<OptionGroup v-if="item">
+				<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
+				<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
+				<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
+			</OptionGroup>
+			<OptionGroup v-if="item">
+				<Option @click.native="$shareFileOrFolder(item)" :title="item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
+				<Option @click.native="$updateTeamFolder(item)" v-if="isFolder" :title="$t('Convert as Team Folder')" icon="users" />
+			</OptionGroup>
+
+            <OptionGroup v-if="item">
+                <Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
+            </OptionGroup>
+		</MobileContextMenu>
+
+		<MobileCreateMenu>
+			<OptionGroup>
+				<OptionUpload :class="{'is-inactive': !hasCapacity }" :title="$t('actions.upload')" is-hover-disabled="true" />
+			</OptionGroup>
+			<OptionGroup>
+				<Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" is-hover-disabled="true" />
+				<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" is-hover-disabled="true" />
+			</OptionGroup>
+		</MobileCreateMenu>
+
+		<MobileMultiSelectToolbar>
+			<ToolbarButton @click.native="$moveFileOrFolder(clipboard)" class="action-btn" source="move" :action="$t('actions.move')" :class="{'is-inactive' : clipboard.length < 1}" />
+			<ToolbarButton @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive' : clipboard.length < 1}" :action="$t('actions.delete')" />
+            <ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
+		</MobileMultiSelectToolbar>
+
 		<ContextMenu>
 			<template v-slot:empty-select>
 				<OptionGroup>
@@ -40,26 +76,6 @@
 			</template>
 		</ContextMenu>
 
-		<MobileContextMenu>
-			<OptionGroup v-if="item && isFolder">
-				<Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
-            </OptionGroup>
-
-			<OptionGroup v-if="item">
-				<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
-				<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
-				<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
-			</OptionGroup>
-			<OptionGroup v-if="item">
-				<Option @click.native="$shareFileOrFolder(item)" :title="item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
-				<Option @click.native="$updateTeamFolder(item)" v-if="isFolder" :title="$t('Convert as Team Folder')" icon="users" />
-			</OptionGroup>
-
-            <OptionGroup v-if="item">
-                <Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
-            </OptionGroup>
-		</MobileContextMenu>
-
 		<FileBrowser>
 			<template v-slot:file-actions-mobile>
 				<MobileActionButton @click.native="$openSpotlight" icon="search">
@@ -91,22 +107,18 @@
                 </ButtonUpload>
 			</template>
 		</FileBrowser>
-
-		<MultiSelectToolbar>
-			<ToolbarButton @click.native="$moveFileOrFolder(clipboard)" class="action-btn" source="move" :action="$t('actions.move')" :class="{'is-inactive' : clipboard.length < 1}" />
-			<ToolbarButton @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive' : clipboard.length < 1}" :action="$t('actions.delete')" />
-            <ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
-		</MultiSelectToolbar>
 	</div>
 </template>
 
 <script>
     import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
-	import MultiSelectToolbar from "/resources/js/components/FilesView/MultiSelectToolbar"
+	import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
 	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
 	import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
+	import MobileCreateMenu from '/resources/js/components/FilesView/MobileCreateMenu'
     import ButtonUpload from '/resources/js/components/FilesView/ButtonUpload'
 	import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
+	import OptionUpload from '/resources/js/components/FilesView/OptionUpload'
 	import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
 	import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
 	import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
@@ -118,11 +130,13 @@
 		name: 'Files',
 		components: {
 			MobileActionButtonUpload,
-			MultiSelectToolbar,
+			MobileMultiSelectToolbar,
 			MobileActionButton,
 			MobileContextMenu,
+			MobileCreateMenu,
 			ToolbarButton,
 			ButtonUpload,
+			OptionUpload,
 			OptionGroup,
 			FileBrowser,
 			ContextMenu,
@@ -131,8 +145,16 @@
 		computed: {
 			...mapGetters([
 				'clipboard',
+				'config',
 				'user',
 			]),
+			hasCapacity() {
+				// Check if storage limitation is set
+				if (!this.config.storageLimit) return true
+
+				// Check if user has storage
+				return this.user && this.user.data.attributes.storage.used <= 100
+			},
 			isFolder() {
 				return this.item && this.item.type === 'folder'
 			},
@@ -180,6 +202,9 @@
 					this.$store.dispatch('removeFromFavourites', this.item)
 				}
 			},
+			createFolder() {
+				events.$emit('popup:open', {name: 'create-folder'})
+			},
 		},
 		created() {
 			this.$store.dispatch('getFolder', this.$route.params.id)

resources/js/views/FileView/MySharedItems.vue

@@ -32,7 +32,7 @@
 			</template>
 		</ContextMenu>
 
-		<MobileContextMenu v-if="item">
+		<MobileContextMenu>
 			<OptionGroup v-if="isFolder">
 				<Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
 			</OptionGroup>
@@ -41,7 +41,7 @@
 				<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
 			</OptionGroup>
 			<OptionGroup>
-				<Option @click.native="$shareFileOrFolder(item)" :title="item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
+				<Option @click.native="$shareFileOrFolder(item)" :title="item && item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
 			</OptionGroup>
 			<OptionGroup>
 				<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
@@ -69,17 +69,17 @@
 			</template>
 		</FileBrowser>
 
-		<MultiSelectToolbar>
+		<MobileMultiSelectToolbar>
 			<ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
 			<ToolbarButton @click.native="$shareCancel" class="action-btn" source="shared-off" />
-		</MultiSelectToolbar>
+		</MobileMultiSelectToolbar>
 	</div>
 </template>
 
 <script>
     import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
 	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
-	import MultiSelectToolbar from "/resources/js/components/FilesView/MultiSelectToolbar"
+	import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
 	import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
 	import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
 	import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
@@ -94,7 +94,7 @@
 		components: {
 			MobileActionButtonUpload,
 			MobileActionButton,
-			MultiSelectToolbar,
+			MobileMultiSelectToolbar,
 			MobileContextMenu,
 			ToolbarButton,
 			OptionGroup,

resources/js/views/FileView/Public.vue

@@ -1,5 +1,43 @@
 <template>
 	<div>
+		<MobileContextMenu>
+			<template v-slot:editor>
+				<OptionGroup>
+					<Option v-if="item" @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
+					<Option v-if="item" @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
+					<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
+				</OptionGroup>
+				<OptionGroup>
+					<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
+				</OptionGroup>
+			</template>
+			<template v-slot:visitor>
+				<OptionGroup>
+					<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
+				</OptionGroup>
+			</template>
+		</MobileContextMenu>
+
+		<MobileCreateMenu>
+			<OptionGroup>
+				<OptionUpload :title="$t('actions.upload')" is-hover-disabled="true" />
+			</OptionGroup>
+			<OptionGroup>
+				<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" is-hover-disabled="true" />
+			</OptionGroup>
+		</MobileCreateMenu>
+
+		<MobileMultiSelectToolbar>
+			<template v-slot:visitor>
+				<ToolbarButton @click.native="downloadItem" class="action-btn" source="download" :action="$t('actions.download')" />
+			</template>
+			<template v-slot:editor>
+				<ToolbarButton @click.native="$moveFileOrFolder(clipboard)" class="action-btn" source="move" :action="$t('actions.move')" :class="{'is-inactive': clipboard.length < 1}" />
+				<ToolbarButton @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive': clipboard.length < 1}" :action="$t('actions.delete')" />
+				<ToolbarButton @click.native="downloadItem" class="action-btn" source="download" :action="$t('actions.download')" />
+			</template>
+		</MobileMultiSelectToolbar>
+
 		<ContextMenu>
 			<template v-slot:empty-select v-if="$checkPermission('editor')">
 				<OptionGroup>
@@ -30,24 +68,6 @@
 			</template>
 		</ContextMenu>
 
-		<MobileContextMenu>
-			<template v-slot:editor>
-				<OptionGroup>
-					<Option v-if="item" @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
-					<Option v-if="item" @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
-					<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
-				</OptionGroup>
-				<OptionGroup>
-					<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
-				</OptionGroup>
-			</template>
-			<template v-slot:visitor>
-				<OptionGroup>
-					<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
-				</OptionGroup>
-			</template>
-		</MobileContextMenu>
-
 		<FileBrowser>
 			<template v-slot:file-actions-mobile>
 				<template v-if="$checkPermission('editor')">
@@ -96,25 +116,16 @@
 				</template>
 			</template>
 		</FileBrowser>
-
-		<MultiSelectToolbar>
-			<template v-slot:visitor>
-				<ToolbarButton @click.native="downloadItem" class="action-btn" source="download" :action="$t('actions.download')" />
-			</template>
-			<template v-slot:editor>
-				<ToolbarButton @click.native="$moveFileOrFolder(clipboard)" class="action-btn" source="move" :action="$t('actions.move')" :class="{'is-inactive': clipboard.length < 1}" />
-				<ToolbarButton @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive': clipboard.length < 1}" :action="$t('actions.delete')" />
-				<ToolbarButton @click.native="downloadItem" class="action-btn" source="download" :action="$t('actions.download')" />
-			</template>
-		</MultiSelectToolbar>
 	</div>
 </template>
 
 <script>
-	import MultiSelectToolbar from "/resources/js/components/FilesView/MultiSelectToolbar"
+	import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
 	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
 	import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
+	import MobileCreateMenu from '/resources/js/components/FilesView/MobileCreateMenu'
 	import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
+	import OptionUpload from '/resources/js/components/FilesView/OptionUpload'
     import ButtonUpload from '/resources/js/components/FilesView/ButtonUpload'
 	import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
 	import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
@@ -126,10 +137,12 @@
 	export default {
 		name: 'Files',
 		components: {
+			MobileMultiSelectToolbar,
 			MobileActionButton,
-			MultiSelectToolbar,
 			MobileContextMenu,
+			MobileCreateMenu,
 			ToolbarButton,
+			OptionUpload,
 			ButtonUpload,
 			OptionGroup,
 			FileBrowser,
@@ -146,6 +159,11 @@
 				item: undefined,
 			}
 		},
+		methods: {
+			createFolder() {
+				events.$emit('popup:open', {name: 'create-folder'})
+			},
+		},
 		created() {
 			this.$store.dispatch('getSharedFolder', this.$route.params.id)
 

resources/js/views/FileView/RecentUploads.vue

@@ -59,17 +59,17 @@
 			</template>
 		</FileBrowser>
 
-		<MultiSelectToolbar>
+		<MobileMultiSelectToolbar>
 			<ToolbarButton @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive' : clipboard.length < 1}" :action="$t('actions.delete')" />
 			<ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
-		</MultiSelectToolbar>
+		</MobileMultiSelectToolbar>
 	</div>
 </template>
 
 <script>
     import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
 	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
-	import MultiSelectToolbar from "/resources/js/components/FilesView/MultiSelectToolbar"
+	import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
 	import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
 	import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
 	import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
@@ -83,7 +83,7 @@
 		name: 'RecentUploads',
 		components: {
 			MobileActionButtonUpload,
-			MultiSelectToolbar,
+			MobileMultiSelectToolbar,
 			MobileActionButton,
 			MobileContextMenu,
 			ToolbarButton,

resources/js/views/FileView/Trash.vue

@@ -66,17 +66,17 @@
 			</template>
 		</FileBrowser>
 
-		<MultiSelectToolbar>
+		<MobileMultiSelectToolbar>
 			<ToolbarButton @click.native="$deleteFileOrFolder(clipboard)" class="action-btn" source="trash" :class="{'is-inactive' : clipboard.length < 1}" :action="$t('actions.delete')" />
 			<ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
-		</MultiSelectToolbar>
+		</MobileMultiSelectToolbar>
 	</div>
 </template>
 
 <script>
     import MobileActionButtonUpload from '/resources/js/components/FilesView/MobileActionButtonUpload'
 	import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
-	import MultiSelectToolbar from "/resources/js/components/FilesView/MultiSelectToolbar"
+	import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
 	import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
 	import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
 	import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
@@ -90,7 +90,7 @@
 		name: 'Trash',
 		components: {
 			MobileActionButtonUpload,
-			MultiSelectToolbar,
+			MobileMultiSelectToolbar,
 			MobileActionButton,
 			MobileContextMenu,
 			ToolbarButton,