From 3ccd2712f44f30988b3419ec2c2fcaf2a78b70fd Mon Sep 17 00:00:00 2001
From: Simon Hausmann <simon.hausmann@sixtyfps.io>
Date: Tue, 16 Feb 2021 11:35:12 +0100
Subject: [PATCH] Make it possible to expand print queue item details

TODO: Animate the appearance/disappearance somehow...
---
 examples/printerdemo/ui/home_page.60 | 69 ++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/examples/printerdemo/ui/home_page.60 b/examples/printerdemo/ui/home_page.60
index 5305044f7..f44611151 100644
--- a/examples/printerdemo/ui/home_page.60
+++ b/examples/printerdemo/ui/home_page.60
@@ -43,6 +43,17 @@ ActionButton := Rectangle {
     TouchArea { clicked => { root.clicked() } }
 }
 
+PrintQueueDetailsLabel := Text {
+    font-weight: 500;
+    color: #122F7B;
+}
+
+PrintQueueSeparator := Rectangle {
+    height: 1px;
+    border-width: 1px;
+    border-color: #BDC0D1;
+}
+
 PrinterQueue := Rectangle {
     property <[PrinterQueueItem]> printer_queue;
 
@@ -69,6 +80,8 @@ PrinterQueue := Rectangle {
                 border-width: 2px;
                 background: DemoPalette.printer_queue_item_background_color;
 
+                property <bool> expanded;
+
                 VerticalLayout {
                     padding: parent.border_radius;
                     spacing: 4px;
@@ -83,6 +96,62 @@ PrinterQueue := Rectangle {
                         overflow: elide;
                         font-weight: 800;
                     }
+
+                    if (expanded) : GridLayout {
+                        Row {
+                            PrintQueueDetailsLabel {
+                                text: "Owner";
+                            }
+                            Text {
+                                text: queue_item.owner;
+                            }
+                        }
+                        Row {                            
+                            PrintQueueSeparator {
+                                colspan: 2;
+                            }
+                        }
+                        Row {
+                            PrintQueueDetailsLabel {
+                                text: "Pages";
+                            }
+                            Text {
+                                text: queue_item.pages;
+                            }
+                        }
+                        Row {                            
+                            PrintQueueSeparator {
+                                colspan: 2;
+                            }
+                        }
+                        Row {
+                            PrintQueueDetailsLabel {
+                                text: "Size";
+                            }
+                            Text {
+                                text: queue_item.pages;
+                            }
+                        }
+                        Row {                            
+                            PrintQueueSeparator {
+                                colspan: 2;
+                            }
+                        }
+                        Row {
+                            PrintQueueDetailsLabel {
+                                text: "Submitted";
+                            }
+                            Text {
+                                text: queue_item.submission_date;
+                            }
+                        }                        
+                    }
+                }
+                     
+                TouchArea {
+                    clicked => {
+                        expanded = !expanded;
+                    }
                 }
             }
         }