refactor #198 Minor restyle of order credit memo list ui ()

This PR was merged into the 1.0-dev branch. Discussion ---------- - Updates color schema for credit memo `Show/Download` buttons to neutral gray/secondary action blue. Buttons are grouped. - Replaces custom channel widget (Visually incorrect) with `@SyliusAdmin/Common/_channel.html.twig' ` - Adds `issuedAt` value to header of credit memo details page (No issued at value without it at all) - Cleans trailing whitespaces in README Before ![image](https://user-images.githubusercontent.com/870747/76000184-ebab5100-5f35-11ea-8080-00f03b352890.png) After ![image](https://user-images.githubusercontent.com/870747/76000061-b868c200-5f35-11ea-93c9-42dbc2e749ae.png) P.S. I've renamed `Show` button to `Details`, which looks better to me, but this change is optional and I can revert it. Commits ------- 9eff4e3 Minor restyle of order credit memo list ui
Sylius · Mar 11, 2020 · 99a06c3 · 99a06c3
2 parents bca5377 + 9eff4e3
commit 99a06c3
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -18,21 +18,21 @@
 
 ## Business value
 
-In contrast to basic Refund functionality delivered by core Sylius bundles, Refund Plugin offers much wider range of 
+In contrast to basic Refund functionality delivered by core Sylius bundles, Refund Plugin offers much wider range of
 possibilities and business scenarios.
 
 Once an Order is paid, an Administrator is able to access Refunds section of a given Order and perform a Refund
 of chosen items or shipments. What's more, if a more detailed scenario occurs, an Administrator is able to refund an item
 partially.
 
-From Administrator's point of view, every Refund request results in creating two entities: 
+From Administrator's point of view, every Refund request results in creating two entities:
 * Credit Memo - a document representing a list of refunded items (downloadable and sent to Customer via .pdf file)
 * Refund Payment - entity representing payment in favour of the Customer
 
 ## Pre - requirements
 
 In order to be able to generate PDF files of refunds, [wkhtmltopdf](https://wkhtmltopdf.org/) must be installed.
-It is used by `KnpSnappyBundle` and can be configured according to [their docummentation](https://github.com/KnpLabs/KnpSnappyBundle#configuration). 
+It is used by `KnpSnappyBundle` and can be configured according to [their docummentation](https://github.com/KnpLabs/KnpSnappyBundle#configuration).
 
 ## Installation
 
@@ -41,7 +41,7 @@ It is used by `KnpSnappyBundle` and can be configured according to [their documm
     ```bash
     composer require sylius/refund-plugin
     ```
-    
+
     > Remember to allow community recipes with `composer config extra.symfony.allow-contrib true` or during plugin installation process
 
 2. Copy plugin migrations to your migrations directory (e.g. `src/Migrations`) and apply them to your database:
@@ -108,12 +108,12 @@ as shown below:
                 <parameter>stripe</parameter>
             </parameter>
         </parameters>
-   ``` 
+   ```
 
 Online refund logic should be implemented if you need it.
 As the first try for the possible customization, you can check out `Sylius\RefundPlugin\Event\UnitsRefunded` event.
- 
+
 ## Security issues
 
-If you think that you have found a security issue, please do not use the issue tracker and do not post it publicly. 
+If you think that you have found a security issue, please do not use the issue tracker and do not post it publicly.
 Instead, all security issues must be sent to `security@sylius.com`.
diff --git a/src/Resources/views/Download/creditMemo.html.twig b/src/Resources/views/Download/creditMemo.html.twig
@@ -1,7 +1,7 @@
 {% set to = creditMemo.to %}
 {% set from = creditMemo.from %}
 
-<html lang="en">
+<html lang="{{ creditMemo.localeCode }}">
 <head>
     <meta charset="utf-8">
     <style>
@@ -31,7 +31,6 @@
                         <td colspan="2" class="title">
                             <img src="https://demo.sylius.com/assets/shop/img/logo.png" style="width:300px;">
                         </td>
-
                         <td>
                             {{ 'sylius_refund.ui.issued_at'|trans }}: {{ creditMemo.issuedAt|date('Y-m-d H:i:s') }}<br>
                         </td>

diff --git a/src/Resources/views/Order/Admin/CreditMemo/_header.html.twig b/src/Resources/views/Order/Admin/CreditMemo/_header.html.twig
@@ -7,9 +7,12 @@
                 <div class="item">
                     {{ 'sylius_refund.ui.issued_for_order'|trans }}: #{{ credit_memo.order.number }}
                 </div>
+                <div class="item">
+                    {{ 'sylius_refund.ui.issued_at'|trans }}: {{ credit_memo.issuedAt|date('d-m-Y') }}
+                </div>
                 <div class="item">
                     {{ 'sylius_refund.ui.issued_from'|trans }}
-                    <span class="ui large empty horizontal circular label" style="background-color: {{ credit_memo.channel.color }}"></span> <strong id="credit-memo-channel-name">{{ credit_memo.channel.name }}</strong>
+                    {% include '@SyliusAdmin/Common/_channel.html.twig' with {'channel': credit_memo.channel} %}
                 </div>
             </div>
         </div>

diff --git a/src/Resources/views/Order/Admin/CreditMemo/details.html.twig b/src/Resources/views/Order/Admin/CreditMemo/details.html.twig
@@ -1,7 +1,5 @@
 {% extends '@SyliusAdmin/layout.html.twig' %}
 
-{% import '@SyliusAdmin/Common/Macro/money.html.twig' as money %}
-
 {% import '@SyliusUi/Macro/buttons.html.twig' as buttons %}
 
 {% block title %}{{ 'sylius_refund.ui.credit_memo'|trans ~ ' ' ~ credit_memo.number }} {{ parent() }}{% endblock %}
@@ -18,7 +16,7 @@
                 'sylius_refund.ui.download',
                 null,
                 'download',
-                'purple'
+                'blue'
             ) }}
         </div>
     </div>

diff --git a/src/Resources/views/Order/Admin/CreditMemo/list.html.twig b/src/Resources/views/Order/Admin/CreditMemo/list.html.twig
@@ -1,5 +1,5 @@
-{% import "@SyliusAdmin/Common/Macro/money.html.twig" as money %}
-{% import "@SyliusUi/Macro/buttons.html.twig" as buttons %}
+{% import '@SyliusAdmin/Common/Macro/money.html.twig' as money %}
+{% import '@SyliusUi/Macro/buttons.html.twig' as buttons %}
 
 {% if credit_memos|length > 0 %}
 <div class="ui segment" id="credit-memos">
@@ -18,24 +18,25 @@
         {% for credit_memo in credit_memos %}
             <tr>
                 <td>{{ credit_memo.number }}</td>
-                <td><span class="ui large empty horizontal circular label" style="background-color: {{ credit_memo.channel.color }}"></span>{{ credit_memo.channel.name }}</td>
+                <td>{% include '@SyliusAdmin/Common/_channel.html.twig' with {'channel': credit_memo.channel} %}</td>
                 <td>{{ money.format(credit_memo.total, credit_memo.currencyCode) }}</td>
                 <td>{{ credit_memo.issuedAt|date('d-m-Y') }}</td>
                 <td>
-                    {{ buttons.default(
-                        path('sylius_refund_credit_memo_details', {'orderNumber': credit_memo.order.number, 'id': credit_memo.id}),
-                        'sylius.ui.show',
-                        null,
-                        'eye',
-                        'green'
-                    ) }}
-                    {{ buttons.default(
-                        path('sylius_refund_admin_credit_memo_download', {'id': credit_memo.id}),
-                        'sylius_refund.ui.download',
-                        null,
-                        'download',
-                        'purple'
-                    ) }}
+                    <div class="ui buttons">
+                        {{ buttons.default(
+                            path('sylius_refund_credit_memo_details', {'orderNumber': credit_memo.order.number, 'id': credit_memo.id}),
+                            'sylius.ui.details',
+                            null,
+                            'eye'
+                        ) }}
+                        {{ buttons.default(
+                            path('sylius_refund_admin_credit_memo_download', {'id': credit_memo.id}),
+                            'sylius_refund.ui.download',
+                            null,
+                            'download',
+                            'blue'
+                        ) }}
+                    </div>
                 </td>
             </tr>
         {% endfor %}

diff --git a/src/Resources/views/Order/Shop/_creditMemos.html.twig b/src/Resources/views/Order/Shop/_creditMemos.html.twig
@@ -1,4 +1,4 @@
-{% import "@SyliusAdmin/Common/Macro/money.html.twig" as money %}
+{% import '@SyliusAdmin/Common/Macro/money.html.twig' as money %}
 {% import '@SyliusUi/Macro/buttons.html.twig' as buttons %}
 
 {% if credit_memos|length > 0 %}

diff --git a/src/Resources/views/_header.html.twig b/src/Resources/views/_header.html.twig
@@ -22,7 +22,7 @@
                         </div>
                         <div class="item">
                             {{ 'sylius.ui.purchased_from'|trans }}
-                            <span class="ui large empty horizontal circular label" style="background-color: {{ order.channel.color }}"></span> <strong>{{ order.channel }}</strong>
+                            {% include '@SyliusAdmin/Common/_channel.html.twig' with {'channel': order.channel} %}
                         </div>
                     </div>
                 </div>

diff --git a/tests/Behat/Page/Admin/CreditMemoDetailsPage.php b/tests/Behat/Page/Admin/CreditMemoDetailsPage.php
@@ -96,7 +96,9 @@ public function getNumber(): string
 
     public function getChannelName(): string
     {
-        return $this->getDocument()->find('css', '#credit-memo-channel-name')->getText();
+        $items = $this->getDocument()->findAll('css', '.channel > .channel__item');
+
+        return $items[1]->getText();
     }
 
     public function getTotal(): string