Add fullscreen order table view

kulczy · kulczy · commit fed98117fb16 · 2025-01-10T13:44:00.000+01:00
diff --git a/src/Sylius/Bundle/AdminBundle/Resources/assets/entrypoint.js b/src/Sylius/Bundle/AdminBundle/Resources/assets/entrypoint.js
@@ -13,6 +13,7 @@ import './app';
 
 import './scripts/bulk-delete';
 import './scripts/check-all';
+import './scripts/fullscreen';
 import './scripts/menu-search';
 import './scripts/spotlight';
 import './scripts/statistics_chart';
diff --git a/src/Sylius/Bundle/AdminBundle/Resources/assets/scripts/fullscreen.js b/src/Sylius/Bundle/AdminBundle/Resources/assets/scripts/fullscreen.js
@@ -0,0 +1,25 @@
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+document.querySelectorAll('[data-fullscreen-btn]').forEach(btn => {
+    btn.addEventListener('click', () => {
+        const containerId = btn.getAttribute('data-fullscreen-btn');
+        const container = document.querySelector(`[data-fullscreen-container="${containerId}"]`);
+
+        if (!document.fullscreenElement) {
+            if (container.requestFullscreen) {
+                container.requestFullscreen();
+            }
+        } else {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            }
+        }
+    });
+});
diff --git a/src/Sylius/Bundle/AdminBundle/Resources/translations/messages.en.yml b/src/Sylius/Bundle/AdminBundle/Resources/translations/messages.en.yml
@@ -74,6 +74,7 @@ sylius:
         create_new:
             customer_group: 'Create a new customer group'
         delete_avatar: 'Delete avatar'
+        full_screen: 'Full screen'
         global: 'Global'
         ip_address: 'IP address'
         language: 'Language'
diff --git a/src/Sylius/Bundle/AdminBundle/templates/order/show/content/sections/items.html.twig b/src/Sylius/Bundle/AdminBundle/templates/order/show/content/sections/items.html.twig
@@ -1,10 +1,17 @@
-<div class="card mb-3">
+<div class="card mb-3" data-fullscreen-container="orders">
     <div class="card-header">
-        <div class="card-title">{{ 'sylius.ui.items'|trans }}</div>
+        <div class="card-title">
+            {{ 'sylius.ui.items'|trans }}
+        </div>
+        <div class="card-actions btn-actions">
+            <div class="btn-action cursor-pointer" data-fullscreen-btn="orders" data-bs-toggle="tooltip" data-bs-title="{{ 'sylius.ui.full_screen'|trans }}">
+                {{ ux_icon('tabler:maximize') }}
+            </div>
+        </div>
     </div>
     <div class="table-responsive">
         <table class="table table-hover table-vcenter card-table" {{ sylius_test_html_attribute('table-items') }}>
-            {% hook 'items'  %}
+            {% hook 'items' %}
         </table>
     </div>
 </div>
