Merge pull request #10 from shariquerik/listview-layout-change
This commit is contained in:
Shariq Ansari
GitHub
commit
ffc8070c42
@ -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 />
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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 cx="8" cy="8" r="3" fill="white" />
|
||||
<circle
|
||||
cx="8"
|
||||
cy="8"
|
||||
r="4.5"
|
||||
fill="white"
|
||||
stroke="currentColor"
|
||||
stroke-width="3"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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="
|
||||
selections.has(row[rowKey])
|
||||
? 'bg-gray-100 hover:bg-gray-200'
|
||||
: 'hover:bg-gray-50'
|
||||
"
|
||||
class="flex flex-col mx-5 cursor-pointer transition-all duration-300 ease-in-out"
|
||||
>
|
||||
<Checkbox
|
||||
:modelValue="selections.has(row[rowKey])"
|
||||
@click.stop="toggleRow(row[rowKey])"
|
||||
class="duration-300 cursor-pointer"
|
||||
/>
|
||||
<div
|
||||
v-for="column in columns"
|
||||
:key="column.key"
|
||||
:class="[column.size, column.align]"
|
||||
class="flex space-x-4 items-center px-2 py-2.5 rounded"
|
||||
:class="
|
||||
selections.has(row[rowKey])
|
||||
? 'bg-gray-100 hover:bg-gray-200'
|
||||
: 'hover:bg-gray-50'
|
||||
"
|
||||
>
|
||||
<ListRowItem
|
||||
:value="getValue(row[column.key]).label"
|
||||
:type="column.type"
|
||||
:align="column.align"
|
||||
<Checkbox
|
||||
:modelValue="selections.has(row[rowKey])"
|
||||
@click.stop="toggleRow(row[rowKey])"
|
||||
class="duration-300 cursor-pointer"
|
||||
/>
|
||||
<div
|
||||
v-for="column in columns"
|
||||
:key="column.key"
|
||||
:class="[column.size, column.align]"
|
||||
>
|
||||
<template #prefix>
|
||||
<div v-if="column.type === 'indicator'">
|
||||
<IndicatorIcon :class="getValue(row[column.key]).color" />
|
||||
</div>
|
||||
<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"
|
||||
<ListRowItem
|
||||
:value="getValue(row[column.key]).label"
|
||||
:type="column.type"
|
||||
:align="column.align"
|
||||
>
|
||||
<template #prefix>
|
||||
<div v-if="column.type === 'indicator'">
|
||||
<IndicatorIcon :class="getValue(row[column.key]).color" />
|
||||
</div>
|
||||
<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'">
|
||||
<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="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>
|
||||
</ListRowItem>
|
||||
</div>
|
||||
</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'
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 }">
|
||||
|
||||
@ -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 }">
|
||||
|
||||
@ -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',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user