invoice - add density selector, refactor invoice css

public/locales/en/invoice-controls.json

@@ -1,6 +1,9 @@
 {
   "back": "Back",
   "book": "Book",
+  "density": "Density",
+  "compact": "Compact",
+  "comfortable": "Comfortable",
   "download_pdf": "Download PDF",
   "delete": "Delete",
   "delete_modal": {

src/assets/scss/components/_invoice.scss

@@ -1,15 +1,36 @@
-.invoice-container {
+.invoice {
-  overflow-x: auto;
+  &-container {
-}
+    overflow-x: auto;
+  }
 
-.invoice-box {
+  &-box {
-  margin: auto;
+    margin: auto;
-  padding: 30px;
+    padding: 30px;
-  min-width: var(--breakpoint-md);
+    min-width: var(--breakpoint-md);
-  box-shadow: $box-shadow-light-1;
+    box-shadow: $box-shadow-light-1;
-  font-size: 16px;
+    font-size: 16px;
-  line-height: 24px;
+    line-height: 24px;
-  font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
+    font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
+  }
+
+  &__row {
+    &-control {
+      position: absolute;
+      top: 12px;
+      right: -30px;
+    }
+  }
+
+  &__rows {
+    &--compact {
+      th, td {
+        padding: 4px 16px;
+      }
+      .invoice__row-control {
+        top: 0;
+      }
+    }
+  }
 }
 
 @page {
@@ -30,9 +51,3 @@
     box-shadow: none;
   }
 }
-
-.remove-invoice-row {
-  position: absolute;
-  right: -30px;
-  top: 10px;
-}

src/components/invoices/InvoiceControls.vue

@@ -20,7 +20,13 @@
                     <template slot="button-content">
                         <i class="material-icons">more_vert</i>
                     </template>
-                    <b-dropdown-item-button @click="print">{{ $t('download_pdf') }} </b-dropdown-item-button>
+                    <b-dropdown-group :header="$t('density')">
+                        <b-dropdown-item-button @click="toggleCompact">
+                            {{ invoice.is_compact ? $t('comfortable') : $t('compact') }}
+                        </b-dropdown-item-button>
+                    </b-dropdown-group>
+                    <b-dropdown-divider/>
+                    <b-dropdown-item-button @click="print">{{ $t('download_pdf') }}</b-dropdown-item-button>
                     <b-dropdown-item-button @click="deleteInvoice">{{ $t('delete') }}</b-dropdown-item-button>
                 </b-dropdown>
             </div>
@@ -31,14 +37,17 @@
 <script>
 import { mapGetters } from 'vuex';
 import NotificationService from '@/services/notification.service';
-import { BDropdown, BDropdownItemButton } from 'bootstrap-vue';
+import { BDropdown, BDropdownDivider, BDropdownGroup, BDropdownItemButton } from 'bootstrap-vue';
 import AppSelect from '@/components/form/AppSelect';
 
 export default {
   i18nOptions: { namespaces: ['invoice-controls', 'statuses'] },
   components: {
     BDropdown,
+    BDropdownDivider,
     BDropdownItemButton,
+    BDropdownGroup,
+
     AppSelect,
   },
   computed: {
@@ -94,6 +103,9 @@ export default {
         invoiceId: this.invoice.id,
       });
     },
+    toggleCompact() {
+      this.updateProp({ is_compact: !this.invoice.is_compact });
+    },
     print() {
       window.print();
     },

src/components/invoices/InvoiceForm.vue

@@ -21,7 +21,7 @@
                                      @change="updateProp({ notes: $event })"/>
                     </div>
                     <div class="row">
-                        <table class="table">
+                        <table class="table" :class="{'invoice__rows--compact': invoice.is_compact}">
                             <InvoiceRowsHeader :invoice="invoice"/>
                             <tbody>
                             <InvoiceRow v-for="(row, index) in invoice.rows" :errors="errors"

src/components/invoices/InvoiceRow.vue

@@ -38,7 +38,8 @@
         </td>
         <td class="text-right position-relative">
             {{ (row.quantity * row.price) | currency }}
-            <button class="btn btn-sm remove-invoice-row d-print-none" @click="removeRow(row)">
+            <button class="btn btn-sm d-print-none invoice__row-control"
+                    @click="removeRow(row)">
                 <i class="material-icons md-18 pointer">remove</i>
             </button>
         </td>

src/components/invoices/InvoiceRowsHeader.vue

@@ -1,15 +1,15 @@
 <template>
     <thead>
-    <tr>
+        <tr>
-        <th>{{ $t('item') }}</th>
+            <th>{{ $t('item') }}</th>
-        <th>{{ $t('quantity') }}</th>
+            <th>{{ $t('quantity') }}</th>
-        <th>{{ $t('unit') }}</th>
+            <th>{{ $t('unit') }}</th>
-        <th>{{ $t('price') }}</th>
+            <th>{{ $t('price') }}</th>
-        <th v-for="tax in taxes" :key="tax.id">
+            <th v-for="tax in taxes" :key="tax.id">
-            {{ tax.label }} %
+                {{ tax.label }} %
-        </th>
+            </th>
-        <th class="text-right">{{ $t('sum') }}</th>
+            <th class="text-right">{{ $t('sum') }}</th>
-    </tr>
+        </tr>
     </thead>
 </template>
 

src/store/models/invoice.js

@@ -15,6 +15,7 @@ export default class Invoice extends Model {
       number: this.attr(''),
       status: this.attr('draft'),
       issued_at: this.attr(''),
+      is_compact: this.attr(false),
       due_at: this.attr(''),
       late_fee: this.attr(''),
       currency: this.attr(''),