Merge pull request frappe#423 from shariquerik/files-uploader-fix

metalmon · Oct 21, 2024 · 482c720 · 482c720
2 parents c79cb3d + 1a67cc9
commit 482c720
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
@@ -63,10 +63,7 @@
           </div>
         </div>
       </div>
-      <div
-        v-else-if="title == 'Tasks'"
-        class="px-3 pb-3 sm:px-10 sm:pb-5 overflow-x-auto sm:w-full w-max"
-      >
+      <div v-else-if="title == 'Tasks'" class="px-3 pb-3 sm:px-10 sm:pb-5">
         <TaskArea :modalRef="modalRef" :tasks="activities" :doctype="doctype" />
       </div>
       <div v-else-if="title == 'Calls'" class="activity">
@@ -100,7 +97,7 @@
       </div>
       <div
         v-else-if="title == 'Attachments'"
-        class="px-3 pb-3 sm:px-10 sm:pb-5 overflow-x-auto sm:w-full w-max"
+        class="px-3 pb-3 sm:px-10 sm:pb-5"
       >
         <AttachmentArea
           :attachments="activities"

diff --git a/frontend/src/components/Activities/TaskArea.vue b/frontend/src/components/Activities/TaskArea.vue
@@ -5,8 +5,8 @@
         class="activity flex cursor-pointer gap-6 rounded p-2.5 duration-300 ease-in-out hover:bg-gray-50"
         @click="modalRef.showTask(task)"
       >
-        <div class="flex flex-1 flex-col gap-1.5 text-base">
-          <div class="font-medium text-gray-900">
+        <div class="flex flex-1 flex-col gap-1.5 text-base truncate">
+          <div class="font-medium text-gray-900 truncate">
             {{ task.title }}
           </div>
           <div class="flex gap-1.5 text-gray-800">

diff --git a/frontend/src/components/FilesUploader/FilesUploader.vue b/frontend/src/components/FilesUploader/FilesUploader.vue
@@ -28,7 +28,7 @@
             v-if="
               filesUploaderArea?.showWebLink || filesUploaderArea?.showCamera
             "
-            :label="__('Back to file upload')"
+            :label="isMobileView ? __('Back') : __('Back to file upload')"
             @click="
               () => {
                 filesUploaderArea.showWebLink = false
@@ -103,6 +103,7 @@
 <script setup>
 import FilesUploaderArea from '@/components/FilesUploader/FilesUploaderArea.vue'
 import FilesUploadHandler from './filesUploaderHandler'
+import { isMobileView } from '@/composables/settings'
 import { createToast } from '@/utils'
 import { ref, computed } from 'vue'
 

diff --git a/frontend/src/components/FilesUploader/FilesUploaderArea.vue b/frontend/src/components/FilesUploader/FilesUploaderArea.vue
@@ -60,9 +60,9 @@
       <div
         v-for="file in files"
         :key="file.name"
-        class="flex items-center justify-between py-3"
+        class="flex items-center justify-between gap-2 py-3"
       >
-        <div class="flex items-center gap-4">
+        <div class="flex items-center gap-4 truncate">
           <div
             class="size-11 rounded overflow-hidden flex-shrink-0 flex justify-center items-center"
             :class="{ border: !file.type?.startsWith('image') }"
@@ -75,8 +75,8 @@
             />
             <component v-else class="size-4" :is="fileIcon(file.type)" />
           </div>
-          <div class="flex flex-col gap-1 text-sm text-gray-600">
-            <div class="text-base text-gray-800">
+          <div class="flex flex-col gap-1 text-sm text-gray-600 truncate">
+            <div class="text-base text-gray-800 truncate">
               {{ file.name }}
             </div>
             <div class="mb-1">
@@ -201,21 +201,29 @@ function onFileInput(event) {
 
 const video = ref(null)
 const facingMode = ref('environment')
+const stream = ref(null)
 
 async function startCamera() {
   showCamera.value = true
 
-  let stream = await navigator.mediaDevices.getUserMedia({
+  stream.value = await navigator.mediaDevices.getUserMedia({
     video: {
       facingMode: facingMode.value,
     },
     audio: false,
   })
-  video.value.srcObject = stream
+  video.value.srcObject = stream.value
+}
+
+function stopStream() {
+  stream.value.getTracks().forEach((track) => track.stop())
+  showCamera.value = false
+  cameraImage.value = null
 }
 
 function switchCamera() {
   facingMode.value = facingMode.value === 'environment' ? 'user' : 'environment'
+  stopStream()
   startCamera()
 }