mobile file request

resources/js/components/FilesView/DesktopUploadRequestToolbar.vue

@@ -6,8 +6,8 @@
             <div class="flex items-center">
 
 				<!--I am Done-->
-                <div class="bg-theme-200 mr-6 flex cursor-pointer items-center rounded-lg py-1 pr-1 pl-4">
-                    <b @click="uploadingDone" class="text-theme mr-3 text-xs">
+                <div @click="uploadingDone" class="bg-theme-200 mr-6 flex cursor-pointer items-center rounded-lg py-1 pr-1 pl-4">
+                    <b class="text-theme mr-3 text-xs">
                         {{ $t('Tell Jane you are done!') }}
                     </b>
 					<MemberAvatar
@@ -121,9 +121,8 @@ export default {
     },
     methods: {
         uploadingDone() {
-            // TODO: add name to the message
 			events.$emit('confirm:open', {
-				title: this.$t('Are you sure you uploaded all files you want for {name}?', {name: this.uploadRequest.relationships.user.data.attributes.name}),
+				title: this.$t('Are you sure you uploaded all files you want for {name}?', {name: this.uploadRequest.data.relationships.user.data.attributes.name}),
 				message: this.$t("You won't be able to upload any files here once again."),
 				action: {
 					id: this.$router.currentRoute.params.token,

resources/js/components/FilesView/EmptyFilePage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex h-screen items-center justify-center" v-if="isLoading || isEmpty">
+    <div class="flex h-screen items-center justify-center md:px-0 px-4" v-if="isLoading || isEmpty">
         <!--Show message for user-->
         <div v-if="!isLoading" class="text-content text-center">
             <slot></slot>

resources/js/components/FilesView/FileActionsMobile.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="sticky top-14 z-[19] block overflow-x-auto whitespace-nowrap bg-white px-4 pb-3 dark:bg-dark-background lg:hidden"
+        class="sticky top-14 z-[19] flex items-center overflow-x-auto whitespace-nowrap bg-white px-4 pb-3 dark:bg-dark-background lg:hidden"
     >
         <!--Show Buttons-->
         <slot v-if="!isMultiSelectMode" />

resources/js/components/FilesView/MobileUploadRequestToolbar.vue

@@ -0,0 +1,42 @@
+<template>
+    <div
+        class="sticky top-0 z-[19] block flex w-full items-center justify-between bg-white py-5 px-4 text-center dark:bg-dark-background lg:hidden"
+    >
+        <NavigationBar />
+
+<!--        <div class="relative flex items-center">
+            &lt;!&ndash;More Actions&ndash;&gt;
+            <div class="relative">
+                <div
+                    @click="showMobileNavigation"
+                    class="absolute right-0 -mr-2 -translate-y-2/4 transform p-4"
+                >
+                    <menu-icon size="17" />
+                </div>
+            </div>
+        </div>-->
+    </div>
+</template>
+
+<script>
+import TeamMembersPreview from '../Teams/Components/TeamMembersPreview'
+import TeamMembersButton from '../Teams/Components/TeamMembersButton'
+import { MenuIcon } from 'vue-feather-icons'
+import NavigationBar from './NavigationBar'
+
+export default {
+    name: 'MobileUploadRequestToolBar',
+    components: {
+        NavigationBar,
+        TeamMembersPreview,
+        TeamMembersButton,
+        MenuIcon,
+    },
+    methods: {
+        showMobileNavigation() {
+            this.$showMobileMenu('user-navigation')
+            this.$store.commit('DISABLE_MULTISELECT_MODE')
+        },
+    },
+}
+</script>

resources/js/views/FileView/UploadRequestFiles.vue

@@ -82,9 +82,17 @@
         </ContextMenu>
 
         <FileActionsMobile v-if="entries.length">
-            <MobileActionButton @click.native="$openSpotlight()" icon="search">
-                {{ $t('Spotlight') }}
-            </MobileActionButton>
+			<!--I am Done-->
+			<button @click="uploadingDone" class="flex shrink-0 items-center mr-2 rounded-xl bg-theme-200 py-1 px-1 pr-3">
+				<MemberAvatar
+					:member="uploadRequest.data.relationships.user"
+					:size="26"
+				/>
+				<b class="text-theme ml-2 text-sm">
+					{{ $t('Tell Jane you are done!') }}
+				</b>
+			</button>
+
             <MobileActionButton
 				@click.native="$showMobileMenu('create-list')"
 				v-if="$checkPermission(['master', 'editor'])"
@@ -174,8 +182,8 @@ export default {
 		emptyPageTitle() {
 			// Todo: add name into translation
 			return {
-				active: this.$t('Jane Request You for File Upload'),
-				filled: this.$t('Upload Request was Fulfilled Successfully'),
+				active: this.$t('{name} Request You for File Upload', {name: this.uploadRequest.data.relationships.user.data.attributes.name}),
+				filled: this.$t('Upload Request for {name} was Fulfilled Successfully', {name: this.uploadRequest.data.relationships.user.data.attributes.name}),
 				expired: this.$t('Upload Request Expired'),
 			}[this.uploadRequest.data.attributes.status]
 		},
@@ -193,6 +201,16 @@ export default {
 		}
 	},
 	methods: {
+		uploadingDone() {
+			events.$emit('confirm:open', {
+				title: this.$t('Are you sure you uploaded all files you want for {name}?', {name: this.uploadRequest.data.relationships.user.data.attributes.name}),
+				message: this.$t("You won't be able to upload any files here once again."),
+				action: {
+					id: this.$router.currentRoute.params.token,
+					operation: 'close-upload-request',
+				},
+			})
+		},
 		createFolder() {
 			events.$emit('popup:open', {name: 'create-folder'})
 		},

resources/js/views/UploadRequest.vue

@@ -23,7 +23,7 @@
             class="transition-transform duration-200 lg:grid lg:flex-grow lg:content-start lg:px-3.5"
         >
             <DesktopUploadRequestToolbar v-if="entries.length" />
-            <!--<MobileToolbar />-->
+            <MobileUploadRequestToolBar v-if="entries.length" />
 
             <!--Google Adsense banner-->
             <div v-if="config.allowedAdsense" v-html="config.adsenseBanner01" class="mb-5 min-h-[120px]"></div>
@@ -40,13 +40,13 @@
 
 <script>
 import DesktopUploadRequestToolbar from '../components/FilesView/DesktopUploadRequestToolbar'
+import MobileUploadRequestToolBar from "../components/FilesView/MobileUploadRequestToolbar"
 import FileSortingMobile from '../components/FilesView/FileSortingMobile'
 import FileFilterMobile from '../components/FilesView/FileFilterMobile'
 import CreateFolderPopup from '../components/Others/CreateFolderPopup'
 import DesktopToolbar from '../components/FilesView/DesktopToolbar'
 import ConfirmPopup from "../components/Others/Popup/ConfirmPopup"
 import RenameItemPopup from '../components/Others/RenameItemPopup'
-import MobileToolbar from '../components/FilesView/MobileToolbar'
 import FilePreview from '../components/FilePreview/FilePreview'
 import MoveItemPopup from '../components/Others/MoveItemPopup'
 import InfoSidebar from '../components/FilesView/InfoSidebar'
@@ -58,15 +58,15 @@ import { events } from '../bus'
 export default {
     name: 'UploadRequest',
     components: {
-		ConfirmPopup,
         DesktopUploadRequestToolbar,
+		MobileUploadRequestToolBar,
         CreateFolderPopup,
         FileSortingMobile,
         FileFilterMobile,
         RenameItemPopup,
         DesktopToolbar,
         MoveItemPopup,
-        MobileToolbar,
+		ConfirmPopup,
         InfoSidebar,
         FilePreview,
         Spotlight,