Merge pull request #200 from frappe/develop

chore: Merge develop to main
frappe · May 27, 2024 · 0a7e752 · 0a7e752
2 parents 0697d56 + 5bcc789
commit 0a7e752
Show file tree

Hide file tree

Showing 74 changed files with 4,306 additions and 99 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@
 *.egg-info
 *.swp
 __pycache__
+dev-dist
 tags
 node_modules
 crm/public/frontend

diff --git a/crm/public/crm_logo.png b/crm/public/crm_logo.png
diff --git a/crm/public/manifest/apple-icon-180.png b/crm/public/manifest/apple-icon-180.png
diff --git a/crm/public/manifest/apple-splash-1125-2436.jpg b/crm/public/manifest/apple-splash-1125-2436.jpg
diff --git a/crm/public/manifest/apple-splash-1136-640.jpg b/crm/public/manifest/apple-splash-1136-640.jpg
diff --git a/crm/public/manifest/apple-splash-1170-2532.jpg b/crm/public/manifest/apple-splash-1170-2532.jpg
diff --git a/crm/public/manifest/apple-splash-1179-2556.jpg b/crm/public/manifest/apple-splash-1179-2556.jpg
diff --git a/crm/public/manifest/apple-splash-1242-2208.jpg b/crm/public/manifest/apple-splash-1242-2208.jpg
diff --git a/crm/public/manifest/apple-splash-1242-2688.jpg b/crm/public/manifest/apple-splash-1242-2688.jpg
diff --git a/crm/public/manifest/apple-splash-1284-2778.jpg b/crm/public/manifest/apple-splash-1284-2778.jpg
diff --git a/crm/public/manifest/apple-splash-1290-2796.jpg b/crm/public/manifest/apple-splash-1290-2796.jpg
diff --git a/crm/public/manifest/apple-splash-1334-750.jpg b/crm/public/manifest/apple-splash-1334-750.jpg
diff --git a/crm/public/manifest/apple-splash-1488-2266.jpg b/crm/public/manifest/apple-splash-1488-2266.jpg
diff --git a/crm/public/manifest/apple-splash-1536-2048.jpg b/crm/public/manifest/apple-splash-1536-2048.jpg
diff --git a/crm/public/manifest/apple-splash-1620-2160.jpg b/crm/public/manifest/apple-splash-1620-2160.jpg
diff --git a/crm/public/manifest/apple-splash-1640-2360.jpg b/crm/public/manifest/apple-splash-1640-2360.jpg
diff --git a/crm/public/manifest/apple-splash-1668-2224.jpg b/crm/public/manifest/apple-splash-1668-2224.jpg
diff --git a/crm/public/manifest/apple-splash-1668-2388.jpg b/crm/public/manifest/apple-splash-1668-2388.jpg
diff --git a/crm/public/manifest/apple-splash-1792-828.jpg b/crm/public/manifest/apple-splash-1792-828.jpg
diff --git a/crm/public/manifest/apple-splash-2048-1536.jpg b/crm/public/manifest/apple-splash-2048-1536.jpg
diff --git a/crm/public/manifest/apple-splash-2048-2732.jpg b/crm/public/manifest/apple-splash-2048-2732.jpg
diff --git a/crm/public/manifest/apple-splash-2160-1620.jpg b/crm/public/manifest/apple-splash-2160-1620.jpg
diff --git a/crm/public/manifest/apple-splash-2208-1242.jpg b/crm/public/manifest/apple-splash-2208-1242.jpg
diff --git a/crm/public/manifest/apple-splash-2224-1668.jpg b/crm/public/manifest/apple-splash-2224-1668.jpg
diff --git a/crm/public/manifest/apple-splash-2266-1488.jpg b/crm/public/manifest/apple-splash-2266-1488.jpg
diff --git a/crm/public/manifest/apple-splash-2360-1640.jpg b/crm/public/manifest/apple-splash-2360-1640.jpg
diff --git a/crm/public/manifest/apple-splash-2388-1668.jpg b/crm/public/manifest/apple-splash-2388-1668.jpg
diff --git a/crm/public/manifest/apple-splash-2436-1125.jpg b/crm/public/manifest/apple-splash-2436-1125.jpg
diff --git a/crm/public/manifest/apple-splash-2532-1170.jpg b/crm/public/manifest/apple-splash-2532-1170.jpg
diff --git a/crm/public/manifest/apple-splash-2556-1179.jpg b/crm/public/manifest/apple-splash-2556-1179.jpg
diff --git a/crm/public/manifest/apple-splash-2688-1242.jpg b/crm/public/manifest/apple-splash-2688-1242.jpg
diff --git a/crm/public/manifest/apple-splash-2732-2048.jpg b/crm/public/manifest/apple-splash-2732-2048.jpg
diff --git a/crm/public/manifest/apple-splash-2778-1284.jpg b/crm/public/manifest/apple-splash-2778-1284.jpg
diff --git a/crm/public/manifest/apple-splash-2796-1290.jpg b/crm/public/manifest/apple-splash-2796-1290.jpg
diff --git a/crm/public/manifest/apple-splash-640-1136.jpg b/crm/public/manifest/apple-splash-640-1136.jpg
diff --git a/crm/public/manifest/apple-splash-750-1334.jpg b/crm/public/manifest/apple-splash-750-1334.jpg
diff --git a/crm/public/manifest/apple-splash-828-1792.jpg b/crm/public/manifest/apple-splash-828-1792.jpg
diff --git a/crm/public/manifest/manifest-icon-192.maskable.png b/crm/public/manifest/manifest-icon-192.maskable.png
diff --git a/crm/public/manifest/manifest-icon-512.maskable.png b/crm/public/manifest/manifest-icon-512.maskable.png
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,16 +2,180 @@
 <html class="h-full" lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1.0, viewport-fit=cover maximum-scale=1.0, user-scalable=no"
+		/>
     <title>Frappe CRM</title>
+
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-title" content="Frappe CRM" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="white" />
+
+    <!-- PWA -->
     <link
       rel="icon"
       type="image/png"
       sizes="196x196"
-      href="/assets/crm/crm_logo.png"
+      href="/assets/crm/manifest/apple-icon-180.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      href="/assets/crm/manifest/apple-icon-180.png"
+    />
+
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2048-2732.jpg"
+      media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2732-2048.jpg"
+      media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1668-2388.jpg"
+      media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2388-1668.jpg"
+      media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1536-2048.jpg"
+      media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2048-1536.jpg"
+      media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1668-2224.jpg"
+      media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2224-1668.jpg"
+      media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1620-2160.jpg"
+      media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2160-1620.jpg"
+      media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1290-2796.jpg"
+      media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2796-1290.jpg"
+      media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1179-2556.jpg"
+      media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2556-1179.jpg"
+      media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1284-2778.jpg"
+      media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2778-1284.jpg"
+      media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1170-2532.jpg"
+      media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2532-1170.jpg"
+      media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1125-2436.jpg"
+      media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2436-1125.jpg"
+      media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1242-2688.jpg"
+      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2688-1242.jpg"
+      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-828-1792.jpg"
+      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1792-828.jpg"
+      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1242-2208.jpg"
+      media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2208-1242.jpg"
+      media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-750-1334.jpg"
+      media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1334-750.jpg"
+      media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-640-1136.jpg"
+      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1136-640.jpg"
+      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
     />
   </head>
-  <body class="overscroll-y-none no-scrollbar">
+  <body class="sm:overscroll-y-none no-scrollbar">
     <div id="app" class="h-full"></div>
     <div id="modals"></div>
     <div id="popovers"></div>

diff --git a/frontend/package.json b/frontend/package.json
@@ -29,6 +29,7 @@
     "@vitejs/plugin-vue": "^4.2.3",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.5",
-    "vite": "^4.4.9"
+    "vite": "^4.4.9",
+    "vite-plugin-pwa": "^0.15.0"
   }
 }
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,15 +1,31 @@
 <template>
   <router-view v-if="$route.name == 'Login'" />
-  <DesktopLayout v-else-if="session().isLoggedIn">
+  <Layout v-else-if="session().isLoggedIn">
     <router-view />
-  </DesktopLayout>
+  </Layout>
   <Dialogs />
   <Toasts />
 </template>
 
 <script setup>
-import DesktopLayout from '@/components/Layouts/DesktopLayout.vue'
 import { Dialogs } from '@/utils/dialogs'
 import { sessionStore as session } from '@/stores/session'
+import { useScreenSize } from '@/composables'
 import { Toasts } from 'frappe-ui'
+import { computed, defineAsyncComponent } from 'vue'
+
+const screenSize = useScreenSize()
+const MobileLayout = defineAsyncComponent(() =>
+  import('./components/Layouts/MobileLayout.vue')
+)
+const DesktopLayout = defineAsyncComponent(() =>
+  import('./components/Layouts/DesktopLayout.vue')
+)
+const Layout = computed(() => {
+  if (screenSize.width < 640) {
+    return MobileLayout
+  } else {
+    return DesktopLayout
+  }
+})
 </script>
diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="mx-10 mb-4 mt-8 flex items-center justify-between text-lg font-medium"
+    class="mx-4 my-3 flex items-center justify-between text-lg font-medium sm:mx-10 sm:mb-4 sm:mt-8"
   >
     <div class="flex h-8 items-center text-xl font-semibold text-gray-800">
       {{ __(title) }}
@@ -56,7 +56,7 @@
         <template #prefix>
           <FeatherIcon name="plus" class="h-4 w-4" />
         </template>
-        <span>{{ __('New WhatsApp Message') }}</span>
+        <span>{{ __('New Message') }}</span>
       </Button>
     </div>
     <Dropdown v-else :options="defaultActions" @click.stop>
@@ -89,7 +89,7 @@
     class="activities flex-1 overflow-y-auto"
   >
     <WhatsAppArea
-      class="px-10"
+      class="px-4 sm:px-10"
       v-model="whatsappMessages"
       v-model:reply="replyMessage"
       :messages="whatsappMessages.data"
@@ -102,7 +102,7 @@
   >
     <div
       v-if="title == 'Notes'"
-      class="activity grid grid-cols-1 gap-4 px-10 pb-5 lg:grid-cols-2 xl:grid-cols-3"
+      class="activity grid grid-cols-1 gap-4 px-4 pb-3 sm:px-10 sm:pb-5 lg:grid-cols-2 xl:grid-cols-3"
     >
       <div
         v-for="note in activities"
@@ -158,7 +158,9 @@
     </div>
     <div v-else-if="title == 'Comments'" class="activity pb-5">
       <div v-for="(comment, i) in activities">
-        <div class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-10">
+        <div
+          class="grid grid-cols-[30px_minmax(auto,_1fr)] sm:gap-4 gap-2 px-4 sm:px-10"
+        >
           <div
             class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
             :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
@@ -212,7 +214,10 @@
         </div>
       </div>
     </div>
-    <div v-else-if="title == 'Tasks'" class="activity px-10 pb-5">
+    <div
+      v-else-if="title == 'Tasks'"
+      class="activity px-4 pb-3 sm:px-10 sm:pb-5"
+    >
       <div v-for="(task, i) in activities">
         <div
           class="flex cursor-pointer gap-6 rounded p-2.5 duration-300 ease-in-out hover:bg-gray-50"
@@ -307,7 +312,9 @@
     </div>
     <div v-else-if="title == 'Calls'" class="activity">
       <div v-for="(call, i) in activities">
-        <div class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-10">
+        <div
+          class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-4 sm:px-10"
+        >
           <div
             class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
             :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
@@ -324,7 +331,7 @@
             </div>
           </div>
           <div
-            class="mb-3 flex max-w-[70%] flex-col gap-3 rounded-md bg-gray-50 p-4"
+            class="mb-3 flex flex-col gap-3 rounded-md bg-gray-50 p-4 sm:max-w-[70%]"
           >
             <div class="flex items-center justify-between">
               <div>
@@ -410,8 +417,16 @@
       </div>
     </div>
     <div v-else v-for="(activity, i) in activities" class="activity">
-      <div class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-10">
+      <div
+        class="px-4 sm:px-10"
+        :class="
+          title == 'Activity'
+            ? 'grid grid-cols-[30px_minmax(auto,_1fr)] sm:gap-4 gap-2'
+            : ''
+        "
+      >
         <div
+          v-if="title == 'Activity'"
           class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:-z-10 before:border-l before:border-gray-200"
           :class="[
             i != activities.length - 1 ? 'before:h-full' : 'before:h-4',
@@ -574,7 +589,7 @@
             activity.activity_type == 'incoming_call' ||
             activity.activity_type == 'outgoing_call'
           "
-          class="mb-3 flex max-w-[70%] flex-col gap-3 rounded-md bg-gray-50 p-4"
+          class="mb-3 flex flex-col gap-3 rounded-md bg-gray-50 p-4 sm:max-w-[70%]"
         >
           <div class="flex items-center justify-between">
             <div>
@@ -625,35 +640,39 @@
               :src="activity.recording_url"
             ></audio>
           </div>
-          <div class="flex items-center justify-between">
+          <div
+            class="flex items-center justify-between sm:justify-start sm:gap-1"
+          >
             <div class="flex items-center gap-1">
               <Avatar
                 :image="activity.caller.image"
                 :label="activity.caller.label"
-                size="xl"
+                class="sm:h-8 sm:w-8"
               />
               <div class="ml-1 flex flex-col gap-1">
-                <div class="text-base font-medium">
+                <div class="text-xs font-medium sm:text-base">
                   {{ __(activity.caller.label) }}
                 </div>
-                <div class="text-xs text-gray-600">
+                <div class="text-2xs text-gray-600 sm:text-xs">
                   {{ activity.from }}
                 </div>
               </div>
-              <FeatherIcon
-                name="arrow-right"
-                class="mx-2 h-5 w-5 text-gray-600"
-              />
+            </div>
+            <FeatherIcon
+              name="arrow-right"
+              class="size-4 text-gray-600 sm:mx-2 sm:size-5"
+            />
+            <div class="flex items-center gap-1">
               <Avatar
                 :image="activity.receiver.image"
                 :label="activity.receiver.label"
-                size="xl"
+                class="sm:h-8 sm:w-8"
               />
               <div class="ml-1 flex flex-col gap-1">
-                <div class="text-base font-medium">
+                <div class="text-xs font-medium sm:text-base">
                   {{ __(activity.receiver.label) }}
                 </div>
-                <div class="text-xs text-gray-600">
+                <div class="text-2xs text-gray-600 sm:text-xs">
                   {{ activity.to }}
                 </div>
               </div>