Merge pull request #10 from shariquerik/listview-layout-change

frontend/src/components/AppHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex">
+  <div class="flex border-b pr-5">
     <div id="app-header" class="flex-1"></div>
     <div class="flex items-center justify-center">
       <CallUI />

frontend/src/components/CallUI.vue

@@ -107,7 +107,7 @@
   </div>
   <div
     v-show="showSmallCallWindow"
-    class="flex items-center justify-between gap-3 bg-gray-900 text-base text-gray-300 -ml-3 mr-2 px-2 py-[7px] rounded-lg cursor-pointer select-none"
+    class="flex items-center justify-between gap-3 bg-gray-900 text-base text-gray-300 ml-2 px-2 py-[7px] rounded-lg cursor-pointer select-none"
     @click="toggleCallWindow"
   >
     <div class="flex items-center gap-2">

frontend/src/components/Icons/IndicatorIcon.vue

@@ -1,12 +1,18 @@
 <template>
   <svg
-    xmlns="http://www.w3.org/2000/svg"
     width="16"
     height="16"
     viewBox="0 0 16 16"
     fill="none"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <rect width="16" height="16" rx="4.5" class="fill-current currentColor" />
+    <circle
-    <circle cx="8" cy="8" r="3" fill="white" />
+      cx="8"
+      cy="8"
+      r="4.5"
+      fill="white"
+      stroke="currentColor"
+      stroke-width="3"
+    />
   </svg>
-</template>
+</template>

frontend/src/components/LayoutHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="#app-header" v-if="showHeader">
-    <header class="flex justify-between items-center px-5 py-3">
+    <header class="flex justify-between items-center pl-5 py-2.5 h-12">
       <div class="flex items-center gap-2">
         <slot name="left-header" />
       </div>

frontend/src/components/ListView.vue

@@ -3,7 +3,7 @@
     <div class="flex flex-col overflow-y-hidden w-max min-w-full">
       <div
         id="list-header"
-        class="flex space-x-4 items-center px-5 py-2 border-b"
+        class="flex space-x-4 items-center mx-5 mb-2 p-2 rounded bg-gray-100"
       >
         <Checkbox
           class="duration-300 cursor-pointer"
@@ -13,7 +13,7 @@
         <div
           v-for="column in columns"
           :key="column"
-          class="text-sm text-gray-600"
+          class="text-base text-gray-600"
           :class="[column.size, column.align]"
         >
           {{ column.label }}
@@ -21,77 +21,81 @@
       </div>
       <div id="list-rows" class="h-full overflow-y-auto">
         <router-link
-          v-for="row in rows"
+          v-for="(row, i) in rows"
           :key="row[rowKey]"
           :to="$router.currentRoute.value.path + '/' + row[rowKey]"
-          class="flex space-x-4 items-center mx-2 px-3 py-2 border-b cursor-pointer transition-all duration-300 ease-in-out"
+          class="flex flex-col mx-5 cursor-pointer transition-all duration-300 ease-in-out"
-          :class="
-            selections.has(row[rowKey])
-              ? 'bg-gray-100 hover:bg-gray-200'
-              : 'hover:bg-gray-50'
-          "
         >
-          <Checkbox
-            :modelValue="selections.has(row[rowKey])"
-            @click.stop="toggleRow(row[rowKey])"
-            class="duration-300 cursor-pointer"
-          />
           <div
-            v-for="column in columns"
+            class="flex space-x-4 items-center px-2 py-2.5 rounded"
-            :key="column.key"
+            :class="
-            :class="[column.size, column.align]"
+              selections.has(row[rowKey])
+                ? 'bg-gray-100 hover:bg-gray-200'
+                : 'hover:bg-gray-50'
+            "
           >
-            <ListRowItem
+            <Checkbox
-              :value="getValue(row[column.key]).label"
+              :modelValue="selections.has(row[rowKey])"
-              :type="column.type"
+              @click.stop="toggleRow(row[rowKey])"
-              :align="column.align"
+              class="duration-300 cursor-pointer"
+            />
+            <div
+              v-for="column in columns"
+              :key="column.key"
+              :class="[column.size, column.align]"
             >
-              <template #prefix>
+              <ListRowItem
-                <div v-if="column.type === 'indicator'">
+                :value="getValue(row[column.key]).label"
-                  <IndicatorIcon :class="getValue(row[column.key]).color" />
+                :type="column.type"
-                </div>
+                :align="column.align"
-                <div v-else-if="column.type === 'avatar'">
+              >
-                  <Avatar
+                <template #prefix>
-                    v-if="getValue(row[column.key]).label"
+                  <div v-if="column.type === 'indicator'">
-                    class="flex items-center"
+                    <IndicatorIcon :class="getValue(row[column.key]).color" />
-                    :image="getValue(row[column.key]).image"
+                  </div>
-                    :label="getValue(row[column.key]).image_label"
+                  <div v-else-if="column.type === 'avatar'">
+                    <Avatar
+                      v-if="getValue(row[column.key]).label"
+                      class="flex items-center"
+                      :image="getValue(row[column.key]).image"
+                      :label="getValue(row[column.key]).image_label"
+                      size="sm"
+                    />
+                  </div>
+                  <div v-else-if="column.type === 'logo'">
+                    <Avatar
+                      v-if="getValue(row[column.key]).label"
+                      class="flex items-center"
+                      :image="getValue(row[column.key]).logo"
+                      :label="getValue(row[column.key]).image_label"
+                      size="sm"
+                    />
+                  </div>
+                  <div v-else-if="column.type === 'icon'">
+                    <FeatherIcon
+                      :name="getValue(row[column.key]).icon"
+                      class="h-3 w-3"
+                    />
+                  </div>
+                  <div v-else-if="column.type === 'phone'">
+                    <PhoneIcon class="h-4 w-4" />
+                  </div>
+                </template>
+                <div v-if="column.type === 'badge'">
+                  <Badge
+                    :variant="'subtle'"
+                    :theme="row[column.key].color"
                     size="md"
+                    :label="row[column.key].label"
                   />
                 </div>
-                <div v-else-if="column.type === 'logo'">
+              </ListRowItem>
-                  <Avatar
+            </div>
-                    v-if="getValue(row[column.key]).label"
-                    class="flex items-center"
-                    :image="getValue(row[column.key]).logo"
-                    :label="getValue(row[column.key]).image_label"
-                    size="md"
-                    shape="square"
-                  />
-                </div>
-                <div v-else-if="column.type === 'icon'">
-                  <FeatherIcon
-                    :name="getValue(row[column.key]).icon"
-                    class="h-3 w-3"
-                  />
-                </div>
-                <div v-else-if="column.type === 'email'">
-                  <FeatherIcon name="mail" class="h-3 w-3" />
-                </div>
-                <div v-else-if="column.type === 'phone'">
-                  <FeatherIcon name="phone" class="h-3 w-3" />
-                </div>
-              </template>
-              <div v-if="column.type === 'badge'">
-                <Badge
-                  :variant="'subtle'"
-                  :theme="row[column.key].color"
-                  size="md"
-                  :label="row[column.key].label"
-                />
-              </div>
-            </ListRowItem>
           </div>
+          <div
+            v-if="i < rows.length - 1"
+            class="mx-2 h-px border-t border-gray-200"
+          />
         </router-link>
       </div>
       <transition
@@ -139,6 +143,7 @@
 </template>
 <script setup>
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import ListRowItem from '@/components/ListRowItem.vue'
 import { Checkbox, Avatar, Badge, FeatherIcon } from 'frappe-ui'
 import { reactive, computed } from 'vue'

frontend/src/pages/CallLogs.vue

@@ -4,7 +4,7 @@
       <Breadcrumbs :items="[{ label: list.title }]" />
     </template>
   </LayoutHeader>
-  <div class="flex justify-between items-center px-5 pb-2.5 border-b">
+  <div class="flex justify-between items-center px-5 pt-3 pb-4">
     <div class="flex items-center gap-2">
       <Button label="Sort">
         <template #prefix><SortIcon class="h-4" /></template>

frontend/src/pages/Contacts.vue

@@ -9,7 +9,7 @@
       </Button>
     </template>
   </LayoutHeader>
-  <div class="flex justify-between items-center px-5 pb-2.5 border-b">
+  <div class="flex justify-between items-center px-5 pt-3 pb-4">
     <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">

frontend/src/pages/Deals.vue

@@ -9,7 +9,7 @@
       </Button>
     </template>
   </LayoutHeader>
-  <div class="flex justify-between items-center px-5 pb-2.5 border-b">
+  <div class="flex justify-between items-center px-5 pt-3 pb-4">
     <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">

frontend/src/pages/Leads.vue

@@ -9,7 +9,7 @@
       </Button>
     </template>
   </LayoutHeader>
-  <div class="flex justify-between items-center px-5 pb-2.5 border-b">
+  <div class="flex justify-between items-center px-5 pt-3 pb-4">
     <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">
@@ -159,7 +159,7 @@ const columns = [
     label: 'Status',
     key: 'status',
     type: 'indicator',
-    size: 'w-32',
+    size: 'w-28',
   },
   {
     label: 'Email',