Updated HTML invoice templates (#560)

assets/sass/invoice.scss

@@ -5,18 +5,14 @@
  * file that was distributed with this source code.
  */
 
-body.invoice_print
-{
-    margin: 20px;
-}
-
 .invoice {
     margin: 0;
+    border: none;
 }
 
 @media (min-width: $screen-sm-min) {
     .invoice {
-        margin: 10px 25px;
+        margin: 25px;
     }
 }
 
@@ -43,7 +39,7 @@ table.invoice-sum th, table.invoice-sum td  {
 /* ================================ FREELANCER INVOICE ================================ */
 
 #freelancer-invoice {
-    font: 16px/1 'Open Sans', sans-serif;
+    font: 15px/1 $font-family-sans-serif;
     box-sizing: border-box;
 
     h1 {
@@ -94,6 +90,7 @@ table.invoice-sum th, table.invoice-sum td  {
     article address {
         font-size: 1em;
         float: left;
+        margin: 1em 0;
     }
 
     article.address {
@@ -106,8 +103,8 @@ table.invoice-sum th, table.invoice-sum td  {
 
     /* article */
 
-    article, article address, table.meta, table.inventory {
-        margin: 2em 0 2em;
+    article, table.meta, table.inventory {
+        margin: 1em 0;
     }
 
     article:after {
@@ -138,7 +135,7 @@ table.invoice-sum th, table.invoice-sum td  {
     table.meta {
         float: right;
         width: 50%;
-        font-size: 90%;
+        font-size: 85%;
 
         th {
             text-align: right;
@@ -301,4 +298,8 @@ table.invoice-sum th, table.invoice-sum td  {
             display: none;
         }
     }
+
+    .invoice {
+        width: unset;
+    }
 }

public/build/manifest.json

@@ -1,8 +1,8 @@
 {
-  "build/app.js": "/build/app.js?c2310ed90478188a714e",
-  "build/app.css": "/build/app.css?f7e8d9ab59687914f53da64ac92c612c",
-  "build/fonts/fa-regular-400.woff": "/build/fonts/fa-regular-400.woff?d9e29124",
+  "build/app.js": "/build/app.js?19fe460d7c7c857b408b",
+  "build/app.css": "/build/app.css?dcf6ab4e76723f5aacaff45e3ae90cc7",
   "build/images/blue@2x.png": "/build/images/blue@2x.png?2694acfd",
+  "build/images/blue.png": "/build/images/blue.png?96f8a905",
   "build/fonts/fa-solid-900.woff2": "/build/fonts/fa-solid-900.woff2?e8a92a29",
   "build/images/fa-solid-900.svg": "/build/images/fa-solid-900.svg?666a82cb",
   "build/images/glyphicons-halflings-regular.svg": "/build/images/glyphicons-halflings-regular.svg?89889688",
@@ -14,7 +14,7 @@
   "build/fonts/glyphicons-halflings-regular.woff2": "/build/fonts/glyphicons-halflings-regular.woff2?448c34a5",
   "build/fonts/fa-solid-900.eot": "/build/fonts/fa-solid-900.eot?0b93480e",
   "build/fonts/fa-solid-900.woff": "/build/fonts/fa-solid-900.woff?dfc040d5",
-  "build/images/blue.png": "/build/images/blue.png?96f8a905",
+  "build/fonts/fa-regular-400.woff": "/build/fonts/fa-regular-400.woff?d9e29124",
   "build/fonts/fa-regular-400.woff2": "/build/fonts/fa-regular-400.woff2?930c1264",
   "build/images/fa-regular-400.svg": "/build/images/fa-regular-400.svg?4e41caaf",
   "build/fonts/fa-regular-400.ttf": "/build/fonts/fa-regular-400.ttf?cdd8fa76",

templates/invoice/layout.html.twig

@@ -12,15 +12,6 @@
     <section class="invoice">
         {% block invoice %}{% endblock %}
     </section>
-    {% block print_button %}
-        <div class="row no-print">
-            <div class="col-xs-12">
-                <button type="button" class="btn btn-success pull-right" onclick="window.print();return false;">
-                    <i class="{{ 'print'|icon }}"></i> {{ 'button.print'|trans }}
-                </button>
-            </div>
-        </div>
-    {% endblock %}
 </div>
 </body>
 </html>

templates/invoice/renderer/default.html.twig

@@ -75,7 +75,13 @@
                 {% endif %}
                 <tr>
                     <td>{{ entry.begin|date_short }}</td>
-                    <td>{{ entry.activity.name }} / {{ entry.project.name }}</td>
+                    <td>
+                        {% if entry.description is not empty %}
+                            {{ entry.description }}
+                        {% else %}
+                            {{ entry.activity.name }} / {{ entry.project.name }}
+                        {% endif %}
+                    </td>
                     <td contenteditable="true">{{ rate|money(model.calculator.currency) }}</td>
                     <td>{{ duration }}</td>
                     <td>{{ entry.rate|money(model.calculator.currency) }}</td>

templates/invoice/renderer/freelancer.html.twig

@@ -4,7 +4,7 @@
 
 {% block invoice %}
 
-{# You can overwrite these settings in your config/packages.local.yaml under the key "twig.globals.company" #}
+{# You can overwrite these settings in your config/packages/local.yaml under the key "twig.globals.company" #}
 {% set company = company|default({
     name: 'Kimai Inc.',
     homepage: 'www.kimai.org',
@@ -88,7 +88,13 @@
                     {% endif %}
 
                     <tr>
-                        <td contenteditable="true">{{ entry.description }}</td>
+                        <td contenteditable="true">
+                            {% if entry.description is not empty %}
+                                {{ entry.description }}
+                            {% else %}
+                                {{ entry.activity.name }} / {{ entry.project.name }}
+                            {% endif %}
+                        </td>
                         <td contenteditable="true">{{ rate|money(model.calculator.currency) }}</td>
                         <td contenteditable="true">{{ duration }}</td>
                         <td>{{ entry.rate|money(model.calculator.currency) }}</td>

templates/invoice/renderer/timesheet.html.twig

@@ -10,9 +10,9 @@
     </div>
 </div>
 
-<div class="row invoice-info" style="padding: 10px 0 20px 0">
-    <div class="col-sm-12 invoice-col">
-        <table>
+<div class="row">
+    <div class="col-xs-12">
+        <table class="table no-border table-condensed">
             <tr>
                 <th>{{ 'invoice.from'|trans }}</th>
                 <td contenteditable="true">
@@ -24,7 +24,7 @@
                 </td>
             </tr>
             <tr>
-                <th style="width:50%">{{ 'label.date'|trans }}</th>
+                <th>{{ 'label.date'|trans }}</th>
                 <td contenteditable="true">
                     {% if model.query.begin|date('m') != model.query.end|date('m') or model.query.begin|date('Y') != model.query.end|date('Y') %}
                         {{ model.query.begin|date_short }} - {{ model.query.end|date_short }}
@@ -72,7 +72,13 @@
                 {% if model.query.user is empty %}
                     <td>{{ widgets.username(entry.user) }}</td>
                 {% endif %}
-                <td>{{ entry.activity.name }} / {{ entry.project.name }}</td>
+                <td>
+                    {% if entry.description is not empty %}
+                        {{ entry.description }}
+                    {% else %}
+                        {{ entry.activity.name }} / {{ entry.project.name }}
+                    {% endif %}
+                </td>
                 <td>{{ entry.duration|duration }}</td>
             </tr>
             {% endfor %}

tests/Invoice/Renderer/TwigRendererTest.php

@@ -60,6 +60,6 @@ class TwigRendererTest extends AbstractRendererTest
         $this->assertContains('<h2 class="page-header">
            <span contenteditable="true">a test invoice template title</span>
         </h2>', $content);
-        $this->assertEquals(5, substr_count($content, '<td>activity description / project name</td>'));
+        $this->assertEquals(5, substr_count($content, 'activity description / project name'));
     }
 }

var/docs/configurations.md

@@ -31,11 +31,13 @@ If you want to adjust a setting from any of these files, use `local.yaml` (see b
 - [Email configuration](emails.md) - in `swiftmailer.yaml`
 - [Dashboard widgets](dashboard.md) - in `kimai.yaml`
 - [Calendar](calendar.md) - in `kimai.yaml`
+- [Invoices](invoices.md) - in `kimai.yaml`
 
 ## Overwriting local configs (local.yaml)
 
-You can create the file `config/packages/local.yaml` and store your own settings inside. This file will NEVER be shipped with Kimai.
-So having your custom settings in this file allows you to easily update Kimai. This is the same concept which is used for the `.env` file.
+You should NOT edit the file `config/packages/kimai.yaml` directly, as it contains default settings and will be overwritten during an update.
+Instead create the file `config/packages/local.yaml` and store your own settings in there. This file will NEVER be shipped with Kimai.
+Having your custom settings in `local.yaml` allows you to easily update Kimai. This is the same concept which is used for the `.env` file.
 
 An example `config/packages/local.yaml` file might look like this:
 

var/docs/invoices.md

@@ -55,6 +55,8 @@ Be aware of the following rules:
 
 ### Twig templates
 
+If you are looking for a way to set the advanced contact data, see below in _Configure contact data_.
+
 Generally speaking, you should use only the variable `model` in your template which is an instance of `App\Model\InvoiceModel`.
 
 Please see the [default templates](https://github.com/kevinpapst/kimai2/tree/master/templates/invoice/renderer) at 
@@ -193,4 +195,29 @@ kimai:
             - 'var/invoices/'
 ```
 
-This would disable the default documents, as Kimai will onl look in the directory `var/invoices/` for files.
+This would disable the default documents, as Kimai will onl look in the directory `var/invoices/` for files.
+
+## Configure contact data
+
+Some HTML invoice templates need additional data, that can't be edited through the UI.
+These values should be added to your `local.yaml`:
+```yaml
+twig:
+    globals:
+        company:
+            name: 'Kimai Inc.',
+            homepage: 'www.kimai.org',
+            email: 'kimai@example.com',
+            phone: '0123-4567890',
+            tax_number: 'YourTaxNumber',
+            signature: '/build/images/signature.png',
+            address: 'Kimai Inc.
+                Example road 42
+                D – 12345 City
+            ',
+            bank_account: '
+                Kimai Inc.
+                IBAN: DE00 0000 0000 0000 0000 00
+                BIC: XXXXXXXX (a bank name)
+            '
+```