Merge pull request #1095 from ssiyad/fix/ticket_list_item_shadow

fix: replace ticket list item shadow with background
frappe · Apr 5, 2023 · 09f8c29 · 09f8c29
2 parents 0d42704 + 0e2cd7f
commit 09f8c29
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 49 deletions.
diff --git a/desk/package.json b/desk/package.json
@@ -11,7 +11,7 @@
  },
  "dependencies": {
  "@headlessui/vue": "^1.7.12",
- "@tailwindcss/line-clamp": "^0.4.2",
+ "@tailwindcss/line-clamp": "^0.4.4",
  "@vee-validate/zod": "^4.8.2",
  "@vitejs/plugin-vue": "^4.0.0",
  "autoprefixer": "^10.4.13",

diff --git a/desk/src/components/desk/tickets/TicketSummary.vue b/desk/src/components/desk/tickets/TicketSummary.vue
@@ -1,7 +1,7 @@
 <template>
- <div class="leading-loose">
+ <div class="leading-relaxed">
  <router-link :to="toRoute">
- <div class="truncate" :class="{ 'font-semibold': !isSeen }">
+ <div class="line-clamp-2" :class="{ 'font-semibold': !isSeen }">
  {{ subject }}
  </div>
  </router-link>

diff --git a/desk/src/pages/desk/Tickets.vue b/desk/src/pages/desk/Tickets.vue
@@ -59,21 +59,26 @@
  :onchange="(e) => toggleAllSelected(e.target.checked)"
  />
  </div>
- <div class="basis-1/3">Summary</div>
+ <div class="basis-1/3">Subject</div>
  <div class="flex basis-2/3">
  <div class="basis-1/5">Assigned To</div>
  <div class="basis-1/5">Raised By</div>
  <div class="basis-1/5">Type</div>
- <div class="basis-1/5">Status</div>
+ <div class="basis-1/5">
+ <div class="pl-3">Status</div>
+ </div>
  <div class="basis-1/5">Priority</div>
  </div>
  </div>
  </div>
- <div class="overflow-x-scroll px-6 py-2 font-sans text-base">
+ <div class="divide-y overflow-x-scroll px-6 py-2 font-sans text-base">
  <div
  v-for="t in ticketList.list.data"
  :key="t.name"
- class="hover:shadow-around flex w-full items-center rounded-lg border-b px-2 py-1 shadow-black transition-all last-of-type:border-none"
+ class="flex w-full items-center px-2 py-1 transition-all"
+ :class="{
+ 'bg-gray-100': selected.has(t.name),
+ }"
  >
  <div class="pl-1 pr-4">
  <Input
@@ -106,7 +111,7 @@
  :button="{
  label: t.status,
  iconRight: 'chevron-down',
- class: 'bg-white text-gray-500 hover:bg-white',
+ appearance: 'minimal',
  }"
  />
  </div>
@@ -144,50 +149,58 @@
  />
  </div>
  </div>
- <div
- v-show="selected.size"
- class="fixed inset-x-0 bottom-5 mx-auto w-max font-sans text-base"
+ <transition
+ enter-active-class="duration-300 ease-out"
+ enter-from-class="transform opacity-0"
+ enter-to-class="opacity-100"
+ leave-active-class="duration-200 ease-in"
+ leave-from-class="opacity-100"
+ leave-to-class="transform opacity-0"
  >
  <div
- class="shadow-around flex items-center rounded-lg border border-gray-300 bg-white px-3 py-2"
+ v-show="selected.size"
+ class="fixed inset-x-0 bottom-5 mx-auto w-max font-sans text-base"
  >
- <div class="w-64">
- <div class="inline-block align-middle">
- <Input type="checkbox" :value="true" :disabled="true" />
+ <div
+ class="shadow-around flex items-center rounded-lg border border-gray-300 bg-white px-3 py-2"
+ >
+ <div class="w-64">
+ <div class="inline-block align-middle">
+ <Input type="checkbox" :value="true" :disabled="true" />
+ </div>
+ <div class="inline-block pl-2 align-middle">
+ {{ ticketsSelectedText }}
+ </div>
  </div>
- <div class="inline-block pl-2 align-middle">
- {{ selected.size }}
- tickets selected
+ <div>
+ <Dropdown
+ :options="agentsAsDropdownOptions"
+ :button="{
+ label: 'Assign',
+ iconLeft: 'plus-circle',
+ class: 'bg-white text-gray-500',
+ }"
+ />
+ </div>
+ <div class="text-gray-300">&#x007C;</div>
+ <div>
+ <Button
+ label="Select all"
+ class="bg-white text-gray-500"
+ :disabled="allSelected"
+ @click="selectAll"
+ />
+ </div>
+ <div>
+ <Button
+ icon="x"
+ class="bg-white text-gray-500"
+ @click="deselectAll"
+ />
  </div>
- </div>
- <div>
- <Dropdown
- :options="agentsAsDropdownOptions"
- :button="{
- label: 'Assign',
- iconLeft: 'plus-circle',
- class: 'bg-white text-gray-500',
- }"
- />
- </div>
- <div class="text-gray-300">&#x007C;</div>
- <div>
- <Button
- label="Select all"
- class="bg-white text-gray-500"
- :disabled="allSelected"
- @click="selectAll"
- />
- </div>
- <div>
- <Button
- icon="x"
- class="bg-white text-gray-500"
- @click="deselectAll"
- />
  </div>
  </div>
- </div>
+ </transition>
  <NewTicketDialog
  v-model="showNewTicketDialog"
  @close="showNewTicketDialog = false"
@@ -237,6 +250,7 @@ export default {
  const ticketList = createListManager({
  doctype: "HD Ticket",
  pageLength: 20,
+ orderBy: "modified desc",
  });
 
  return {
@@ -282,6 +296,15 @@ export default {
  if (this.$_.isEmpty(this.ticketList.list.data)) return;
  return this.ticketList.list.data.length === this.selected.size;
  },
+ ticketsSelectedText() {
+ /** Number of selected items */
+ const n = this.selected.size;
+
+ /** Singular or Plural */
+ const s = n > 1 ? "Tickets" : "Ticket";
+
+ return `${n} ${s} selected`;
+ },
  filterByPriorityOptions() {
  return this.ticketPriorityStore.getNames().map((priority) => ({
  label: priority,

diff --git a/desk/yarn.lock b/desk/yarn.lock
@@ -207,10 +207,10 @@
  dependencies:
  mini-svg-data-uri "^1.2.3"
 
-"@tailwindcss/line-clamp@^0.4.2":
- version "0.4.2"
- resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz#f353c5a8ab2c939c6267ac5b907f012e5ee130f9"
- integrity sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==
+"@tailwindcss/line-clamp@^0.4.4":
+ version "0.4.4"
+ resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz#767cf8e5d528a5d90c9740ca66eb079f5e87d423"
+ integrity sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==
 
 "@tailwindcss/typography@^0.5.0":
  version "0.5.9"