test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: icon,icon shape/size changes in listview

Browse Source
This commit is contained in:
Shariq Ansari 2023-09-20 19:23:24 +05:30
parent 78be1a809a
commit 220fad975b
3 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/Icons/IndicatorIcon.vue
View File

@ -1,12 +1,18 @@
<template> <template>
<svg <svg
xmlns="http://www.w3.org/2000/svg"
width="16" width="16"
height="16" height="16"
viewBox="0 0 16 16" viewBox="0 0 16 16"
fill="none" 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> </svg>
</template> </template>

18
frontend/src/components/ListView.vue
View File

@ -21,7 +21,7 @@
</div> </div>
<div id="list-rows" class="h-full overflow-y-auto"> <div id="list-rows" class="h-full overflow-y-auto">
<router-link <router-link
v-for="row in rows" v-for="(row, i) in rows"
:key="row[rowKey]" :key="row[rowKey]"
:to="$router.currentRoute.value.path + '/' + row[rowKey]" :to="$router.currentRoute.value.path + '/' + row[rowKey]"
class="flex flex-col mx-5 cursor-pointer transition-all duration-300 ease-in-out" class="flex flex-col mx-5 cursor-pointer transition-all duration-300 ease-in-out"
@ -59,7 +59,7 @@
class="flex items-center" class="flex items-center"
:image="getValue(row[column.key]).image" :image="getValue(row[column.key]).image"
:label="getValue(row[column.key]).image_label" :label="getValue(row[column.key]).image_label"
size="md" size="sm"
/> />
</div> </div>
<div v-else-if="column.type === 'logo'"> <div v-else-if="column.type === 'logo'">
@ -68,8 +68,7 @@
class="flex items-center" class="flex items-center"
:image="getValue(row[column.key]).logo" :image="getValue(row[column.key]).logo"
:label="getValue(row[column.key]).image_label" :label="getValue(row[column.key]).image_label"
size="md" size="sm"
shape="square"
/> />
</div> </div>
<div v-else-if="column.type === 'icon'"> <div v-else-if="column.type === 'icon'">
@ -78,11 +77,8 @@
class="h-3 w-3" class="h-3 w-3"
/> />
</div> </div>
<div v-else-if="column.type === 'email'">
<FeatherIcon name="mail" class="h-3 w-3" />
</div>
<div v-else-if="column.type === 'phone'"> <div v-else-if="column.type === 'phone'">
<FeatherIcon name="phone" class="h-3 w-3" /> <PhoneIcon class="h-4 w-4" />
</div> </div>
</template> </template>
<div v-if="column.type === 'badge'"> <div v-if="column.type === 'badge'">
@ -96,7 +92,10 @@
</ListRowItem> </ListRowItem>
</div> </div>
</div> </div>
<div class="mx-2 h-px border-t border-gray-200"></div> <div
v-if="i < rows.length - 1"
class="mx-2 h-px border-t border-gray-200"
/>
</router-link> </router-link>
</div> </div>
<transition <transition
@ -144,6 +143,7 @@
</template> </template>
<script setup> <script setup>
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue' import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
import ListRowItem from '@/components/ListRowItem.vue' import ListRowItem from '@/components/ListRowItem.vue'
import { Checkbox, Avatar, Badge, FeatherIcon } from 'frappe-ui' import { Checkbox, Avatar, Badge, FeatherIcon } from 'frappe-ui'
import { reactive, computed } from 'vue' import { reactive, computed } from 'vue'

2
frontend/src/pages/Leads.vue
View File

@ -159,7 +159,7 @@ const columns = [
label: 'Status', label: 'Status',
key: 'status', key: 'status',
type: 'indicator', type: 'indicator',
size: 'w-32', size: 'w-28',
}, },
{ {
label: 'Email', label: 'Email',