Merge pull request #1962 from frappe/develop

chore(release): dev to main

desk/index.html

@@ -16,6 +16,8 @@
       window.frappe_version = "{{ frappe_version }}";
       window.helpdesk_version = "{{ helpdesk_version }}";
       window.site_name = "{{ site_name }}";
+      window.favicon = "{{ favicon }}";
+      document.querySelector("link").href = window.favicon;
     </script>
   </body>
 </html>

desk/package.json

@@ -10,6 +10,7 @@
 		"copy-html-entry": "cp ../helpdesk/public/desk/index.html ../helpdesk/www/helpdesk/index.html"
 	},
 	"dependencies": {
+		"@headlessui/vue": "^1.7.22",
 		"@iconify-json/lucide": "^1.1.99",
 		"@iconify-json/ph": "^1.1.5",
 		"@iconify/tools": "^2.2.6",
@@ -37,7 +38,7 @@
 		"unplugin-vue-components": "^0.25.2",
 		"vee-validate": "^4.8.2",
 		"vite": "^4.4.9",
-    	"vue": "^3.4.12",
+		"vue": "^3.4.12",
 		"vue-echarts": "^6.5.4",
 		"vue-router": "^4.2.2",
 		"vuedraggable": "^4.1.0",

desk/src/App.vue

@@ -1,9 +1,7 @@
 <template>
-  <span class="fixed inset-0">
-    <RouterView class="antialiased" />
-    <Toasts />
-    <KeymapDialog />
-  </span>
+  <RouterView class="antialiased" />
+  <Toasts />
+  <KeymapDialog />
 </template>
 
 <script setup lang="ts">
@@ -16,12 +14,6 @@ import { stopSession } from "@/telemetry";
 import { init as initTelemetry } from "@/telemetry";
 useConfigStore();
 
-const viewportWidth = ref(
-  Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
-);
-
-provide("viewportWidth", viewportWidth);
-
 onMounted(async () => {
   window.addEventListener("online", () => {
     createToast({

desk/src/components/Apps.vue

@@ -0,0 +1,66 @@
+<template>
+  <Popover placement="right-start" class="flex w-full">
+    <template #target="{ togglePopover }">
+      <button
+        :class="[
+          'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-gray-800 hover:bg-gray-100',
+        ]"
+        @click.prevent="togglePopover()"
+      >
+        <div class="flex gap-2">
+          <AppsIcon />
+          <span class="whitespace-nowrap">Apps</span>
+        </div>
+        <ChevronRight class="h-4 w-4 stroke-1.5" />
+      </button>
+    </template>
+    <template #body>
+      <div
+        class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-white shadow-xl"
+      >
+        <div v-for="app in apps.data" key="name">
+          <a
+            :href="app.route"
+            class="flex flex-col gap-1.5 rounded justify-center items-center py-2 px-3 hover:bg-gray-100"
+          >
+            <img class="size-8" :src="app.logo" />
+            <div class="text-sm" @click="app.onClick">
+              {{ app.title }}
+            </div>
+          </a>
+        </div>
+      </div>
+    </template>
+  </Popover>
+</template>
+<script setup>
+import { Popover, createResource } from "frappe-ui";
+import AppsIcon from "./icons/AppsIcon.vue";
+import ChevronRight from "~icons/lucide/chevron-right";
+
+const apps = createResource({
+  url: "frappe.apps.get_apps",
+  cache: "apps",
+  auto: true,
+  transform: (data) => {
+    let _apps = [
+      {
+        name: "frappe",
+        logo: "/assets/helpdesk/desk/desk.png",
+        title: "Desk",
+        route: "/app",
+      },
+    ];
+    data.map((app) => {
+      if (app.name === "helpdesk") return;
+      _apps.push({
+        name: app.name,
+        logo: app.logo,
+        title: app.title,
+        route: app.route,
+      });
+    });
+    return _apps;
+  },
+});
+</script>

desk/src/components/BrandLogo.vue

@@ -0,0 +1,14 @@
+<template>
+  <Avatar v-if="config.brandLogo" size="xl" :image="config.brandLogo" />
+  <HDLogo v-else class="h-8 w-8 shrink-0 rounded" />
+</template>
+
+<script setup lang="ts">
+import { Avatar } from "frappe-ui";
+import HDLogo from "@/assets/logos/HDLogo.vue";
+
+import { useConfigStore } from "@/stores/config";
+const config = useConfigStore();
+</script>
+
+<style scoped></style>

desk/src/components/CannedResponseSelectorModal.vue

@@ -13,7 +13,7 @@
       </TextInput>
       <div
         v-if="filteredTemplates.length"
-        class="mt-2 grid max-h-[560px] grid-cols-3 gap-2 overflow-y-auto"
+        class="mt-2 grid max-h-[560px] grid-cols-1 md:grid-cols-3 gap-2 overflow-y-auto"
       >
         <div
           v-for="template in filteredTemplates"

desk/src/components/ColumnSettings.vue

@@ -2,7 +2,10 @@
   <NestedPopover>
     <template #target>
       <Button label="Columns">
-        <template #prefix>
+        <template v-if="hideLabel">
+          <ColumnsIcon class="h-4" />
+        </template>
+        <template v-if="!hideLabel" #prefix>
           <ColumnsIcon class="h-4" />
         </template>
       </Button>
@@ -147,6 +150,10 @@ let props = defineProps({
     type: Array,
     required: true,
   },
+  hideLabel: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 function resetToDefault(close) {

desk/src/components/CommunicationArea.vue

@@ -1,75 +1,77 @@
 <template>
-  <div class="flex justify-between gap-3 border-t px-10 py-2.5">
-    <div class="flex gap-1.5">
-      <Button
-        ref="sendEmailRef"
-        variant="ghost"
-        label="Reply"
-        :class="[showEmailBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
-        @click="toggleEmailBox()"
-      >
-        <template #prefix>
-          <EmailIcon class="h-4" />
-        </template>
-      </Button>
-      <Button
-        variant="ghost"
-        label="Comment"
-        :class="[showCommentBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
-        @click="toggleCommentBox()"
-      >
-        <template #prefix>
-          <CommentIcon class="h-4" />
-        </template>
-      </Button>
+  <div class="flex flex-col comm-area">
+    <div class="flex justify-between gap-3 border-t px-10 py-2.5">
+      <div class="flex gap-1.5">
+        <Button
+          ref="sendEmailRef"
+          variant="ghost"
+          label="Reply"
+          :class="[showEmailBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
+          @click="toggleEmailBox()"
+        >
+          <template #prefix>
+            <EmailIcon class="h-4" />
+          </template>
+        </Button>
+        <Button
+          variant="ghost"
+          label="Comment"
+          :class="[showCommentBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
+          @click="toggleCommentBox()"
+        >
+          <template #prefix>
+            <CommentIcon class="h-4" />
+          </template>
+        </Button>
+      </div>
+    </div>
+    <div v-show="showCommentBox">
+      <CommentTextEditor
+        v-model="doc"
+        v-model:attachments="attachments"
+        :editable="showCommentBox"
+        :doctype="doctype"
+        placeholder="Add a comment..."
+        @submit="
+          () => {
+            showCommentBox = false;
+            emit('update');
+          }
+        "
+        @discard="
+          () => {
+            showCommentBox = false;
+          }
+        "
+      />
+    </div>
+    <div
+      v-show="showEmailBox"
+      class="flex gap-1.5"
+      @keydown.ctrl.enter.capture.stop="submitEmail"
+      @keydown.meta.enter.capture.stop="submitEmail"
+    >
+      <EmailEditor
+        ref="emailEditorRef"
+        v-model="doc"
+        v-model:content="content"
+        v-model:attachments="attachments"
+        :to-emails="toEmails"
+        :cc-emails="ccEmails"
+        :bcc-emails="bccEmails"
+        @submit="
+          () => {
+            showEmailBox = false;
+            emit('update');
+          }
+        "
+        @discard="
+          () => {
+            showEmailBox = false;
+          }
+        "
+      />
     </div>
-  </div>
-  <div v-show="showCommentBox">
-    <CommentTextEditor
-      v-model="doc"
-      v-model:attachments="attachments"
-      :editable="showCommentBox"
-      :doctype="doctype"
-      placeholder="Add a comment..."
-      @submit="
-        () => {
-          showCommentBox = false;
-          emit('update');
-        }
-      "
-      @discard="
-        () => {
-          showCommentBox = false;
-        }
-      "
-    />
-  </div>
-  <div
-    v-show="showEmailBox"
-    class="flex gap-1.5"
-    @keydown.ctrl.enter.capture.stop="submitEmail"
-    @keydown.meta.enter.capture.stop="submitEmail"
-  >
-    <EmailEditor
-      ref="emailEditorRef"
-      v-model="doc"
-      v-model:content="content"
-      v-model:attachments="attachments"
-      :to-emails="toEmails"
-      :cc-emails="ccEmails"
-      :bcc-emails="bccEmails"
-      @submit="
-        () => {
-          showEmailBox = false;
-          emit('update');
-        }
-      "
-      @discard="
-        () => {
-          showEmailBox = false;
-        }
-      "
-    />
   </div>
 </template>
 
@@ -135,3 +137,11 @@ defineExpose({
   toggleEmailBox,
 });
 </script>
+
+<style>
+@media screen and (max-width: 640px) {
+  .comm-area {
+    width: 100vw;
+  }
+}
+</style>

desk/src/components/EmailBox.vue

@@ -3,7 +3,20 @@
     class="grow cursor-pointer rounded-md border-transparent bg-gray-50 text-base leading-6 transition-all duration-300 ease-in-out"
   >
     <div class="mb-1 flex items-center justify-between gap-2">
-      <div class="flex items-center gap-2">
+      <!-- comment design for mobile -->
+      <div v-if="isMobileView" class="flex items-center gap-2">
+        <UserAvatar :name="sender.name" size="lg" />
+        <div class="leading-tight">
+          <span>{{ sender.full_name }}</span>
+          <Tooltip :text="dateFormat(creation, dateTooltipFormat)">
+            <div class="text-xs text-gray-600">
+              {{ timeAgo(creation) }}
+            </div>
+          </Tooltip>
+        </div>
+      </div>
+      <!-- comment design for desktop -->
+      <div v-else class="flex items-center gap-2">
         <UserAvatar :name="sender.name" size="md" />
         <span>{{ sender.full_name }}</span>
         <span>&middot;</span>
@@ -13,6 +26,7 @@
           </div>
         </Tooltip>
       </div>
+
       <div class="flex gap-0.5">
         <Button
           variant="ghost"
@@ -76,6 +90,7 @@
 import { UserAvatar, AttachmentItem } from "@/components";
 import { dateFormat, timeAgo, dateTooltipFormat } from "@/utils";
 import { ReplyIcon, ReplyAllIcon } from "./icons/";
+import { useScreenSize } from "@/composables/screen";
 
 const props = defineProps({
   sender: {
@@ -101,4 +116,6 @@ const props = defineProps({
 });
 
 const emit = defineEmits(["reply"]);
+
+const { isMobileView } = useScreenSize();
 </script>