fix: New List Design

models/doctype/SalesInvoice/SalesInvoiceList.js

@@ -3,9 +3,10 @@ import indicators from 'frappejs/ui/constants/indicators';
 
 export default {
   doctype: 'SalesInvoice',
-  title: _('Sales Invoice'),
+  title: _('Sales Invoices'),
   columns: [
     'customer',
+    'name',
     {
       label: 'Status',
       fieldname: 'status',

src/components/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="pt-6 pb-2 px-2 w-64 h-full block window-drag bg-gray-200 flex justify-between flex-col"
+    class="pt-6 pb-2 px-2 h-full block window-drag bg-gray-200 flex justify-between flex-col"
   >
     <div>
       <WindowControls class="px-3" />
@@ -39,7 +39,7 @@
       <button
         class="block bg-white rounded w-full h-8 flex justify-center focus:outline-none focus:shadow-outline"
       >
-        <AddIcon class="w-3 h-3" />
+        <AddIcon class="w-3 h-3 stroke-current text-gray-900" />
       </button>
     </div>
   </div>

src/pages/Desk.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex">
-    <Sidebar />
-    <div class="bg-white">
+    <Sidebar class="w-56" />
+    <div class="flex-1 overflow-y-hidden">
       <router-view :key="$route.fullPath" />
     </div>
   </div>

src/pages/ListView/List.vue

@@ -1,21 +1,27 @@
 <template>
-  <div class="list-container">
-    <list-row class="text-muted rounded-top bg-light">
-      <list-cell
+  <div class="px-8 pb-8 mt-2">
+    <ListRow class="text-gray-700" :columnCount="columns.length">
+      <ListCell
         v-for="column in columns"
         :key="column.label"
         :class="['Float', 'Currency'].includes(column.fieldtype) ? 'text-right':''"
-      >{{ column.label }}</list-cell>
-    </list-row>
-    <list-row v-for="doc in data" :key="doc.name" @click.native="openForm(doc.name)">
-      <list-cell v-for="column in columns" :key="column.label" class="d-flex align-items-center">
+      >{{ column.label }}</ListCell>
+    </ListRow>
+    <ListRow
+      class="cursor-pointer text-gray-900 hover:text-gray-600"
+      v-for="doc in data"
+      :key="doc.name"
+      @click.native="openForm(doc.name)"
+      :columnCount="columns.length"
+    >
+      <ListCell v-for="column in columns" :key="column.label">
         <indicator v-if="column.getIndicator" :color="column.getIndicator(doc)" class="mr-2" />
         <span
           style="width: 100%"
           :class="['Float', 'Currency'].includes(column.fieldtype) ? 'text-right':''"
         >{{ getColumnValue(column, doc) }}</span>
-      </list-cell>
-    </list-row>
+      </ListCell>
+    </ListRow>
   </div>
 </template>
 <script>
@@ -78,7 +84,8 @@ export default {
       this.data = await frappe.db.getAll({
         doctype: this.doctype,
         fields: ['*'],
-        filters
+        filters,
+        limit: 13
       });
     },
     getFilters() {

src/pages/ListView/ListCell.vue

@@ -1,10 +1,5 @@
 <template>
-  <div class="col">
+  <div class="text-sm py-4">
     <slot></slot>
   </div>
 </template>
-<script>
-export default {
-  props: ['col']
-}
-</script>

src/pages/ListView/ListRow.vue

@@ -1,21 +1,28 @@
 <template>
-  <div class="list-row row no-gutters py-2 px-3">
+  <div class="list-row border-b" :style="style">
     <slot></slot>
   </div>
 </template>
-<style lang="scss">
-@import '../../styles/variables';
-.list-row {
-  cursor: pointer;
-  border: 1px solid $border-color;
-  background-color: var(--white);
-
-  &:hover {
-    background-color: var(--white);
+<script>
+export default {
+  name: 'ListRow',
+  props: {
+    columnCount: {
+      type: Number,
+      default: 1
+    }
+  },
+  computed: {
+    style() {
+      return {
+        'grid-template-columns': `repeat(${this.columnCount}, 1fr)`
+      }
+    }
   }
 }
-
-.list-row:not(:first-child) {
-  border-top: none;
+</script>
+<style>
+.list-row {
+  display: grid;
 }
 </style>

src/pages/ListView/index.vue

@@ -1,9 +1,8 @@
 <template>
-  <div class="bg-white">
-    <page-header :title="title" />
-    <div class="px-4 py-3">
-      <list-toolbar :title="title" :filters="filters" @newClick="openNewForm" class="mb-2" />
-      <list :listConfig="listConfig" :filters="filters" />
+  <div class="flex flex-col">
+    <PageHeader :title="title" />
+    <div class="flex-1">
+      <List :listConfig="listConfig" :filters="filters" />
     </div>
   </div>
 </template>
@@ -11,7 +10,6 @@
 import frappe from 'frappejs';
 import Observable from 'frappejs/utils/observable';
 import PageHeader from '@/components/PageHeader';
-import ListToolbar from './ListToolbar';
 import List from './List';
 import listConfigs from './listConfig';
 
@@ -20,7 +18,6 @@ export default {
   props: ['listName', 'filters'],
   components: {
     PageHeader,
-    ListToolbar,
     List
   },
   created() {