Print demo: Draft of a spin box

examples/printerdemo/ui/common.60

@@ -29,6 +29,8 @@ export global DemoPalette := {
     // "Print"/"Scan" buttons, the printer queue items (for expansion) or controls such
     // as the combo box or spin box.
     property <color> control_outline_color: #FFBF63;
+    property <color> control_secoundary: #6284FF;
+    property <color> control_foreground: #122F7B;
 
     property <bool> night_mode: false;
 }
@@ -47,7 +49,7 @@ export Page := Rectangle {
             font-weight: 900;
             font-size: 22px;
             text: "< ";
-            color: #6284FF; // FIXME, what's for the night mode?
+            color: DemoPalette.control_secoundary;
             TouchArea { clicked => { back() } }
         }
 
@@ -66,4 +68,74 @@ export struct PrinterQueueItem := {
     pages: int,
     size: string, // number instead and format in .60?
     submission_date: string
+}
+
+
+SpinBoxButton := Rectangle {
+    callback clicked;
+    property<string> text;
+    border-radius: 3px;
+    border-width: 5px;
+    border-color: DemoPalette.control_outline_color;
+    width: height;
+    touch := TouchArea {
+        clicked => {
+            root.clicked();
+        }
+    }
+    Text {
+        height: 100%;
+        width: 100%;
+        vertical-alignment: center;
+        horizontal-alignment: center;
+        text <=> root.text;
+        font-size: height;
+        color: DemoPalette.control_secoundary;
+    }
+}
+
+export SpinBox := Rectangle {
+    property <bool> checked;
+    property <int> value;
+    property <int> minimum;
+    property <int> maximum: 100;
+
+    HorizontalLayout {
+        spacing: 12px;
+        padding: 0;
+        height: 32px;
+        SpinBoxButton {
+            text: "-";
+            clicked => {
+                if (root.value > root.minimum) {
+                    root.value -= 1;
+                }
+            }
+        }
+
+        Rectangle {
+            height: 72px;
+            border-radius: 3px;
+            border-width: 5px;
+            border-color: DemoPalette.control_outline_color;
+            Text {
+                width: 100%;
+                height: 100%;
+                vertical-alignment: center;
+                horizontal-alignment: center;
+                text: value;
+                font-size: 22px;
+                color: DemoPalette.control_foreground;
+            }
+        }
+
+        SpinBoxButton {
+            text: "+";
+            clicked => {
+                if (root.value < root.maximum) {
+                    root.value += 1;
+                }
+            }
+        }
+    }
 }

examples/printerdemo/ui/copy_page.60

@@ -0,0 +1,27 @@
+/* LICENSE BEGIN
+    This file is part of the SixtyFPS Project -- https://sixtyfps.io
+    Copyright (c) 2020 Olivier Goffart <olivier.goffart@sixtyfps.io>
+    Copyright (c) 2020 Simon Hausmann <simon.hausmann@sixtyfps.io>
+
+    SPDX-License-Identifier: GPL-3.0-only
+    This file is also available under commercial licensing terms.
+    Please contact info@sixtyfps.io for more information.
+LICENSE END */
+
+import { DemoPalette, Page, SpinBox } from "./common.60";
+
+
+export CopyPage := Page {
+    has_back_button: true;
+    header: "Copy";
+
+    GridLayout {
+        padding-top: 40px;
+        Row {
+            Text { text: "Copies"; }
+            SpinBox { value: 1; }
+            Rectangle {}
+        }
+        Row { Rectangle {} }
+    }
+}

examples/printerdemo/ui/home_page.60

@@ -9,6 +9,7 @@
 LICENSE END */
 
 import { DemoPalette, Page, PrinterQueueItem } from "./common.60";
+import { CopyPage } from "./copy_page.60";
 
 ActionButton := Rectangle {
 
@@ -106,7 +107,7 @@ PrinterQueue := Rectangle {
                                 text: queue_item.owner;
                             }
                         }
-                        Row {                            
+                        Row {
                             PrintQueueSeparator {
                                 colspan: 2;
                             }
@@ -119,7 +120,7 @@ PrinterQueue := Rectangle {
                                 text: queue_item.pages;
                             }
                         }
-                        Row {                            
+                        Row {
                             PrintQueueSeparator {
                                 colspan: 2;
                             }
@@ -132,7 +133,7 @@ PrinterQueue := Rectangle {
                                 text: queue_item.pages;
                             }
                         }
-                        Row {                            
+                        Row {
                             PrintQueueSeparator {
                                 colspan: 2;
                             }
@@ -144,10 +145,10 @@ PrinterQueue := Rectangle {
                             Text {
                                 text: queue_item.submission_date;
                             }
-                        }                        
+                        }
                     }
                 }
-                     
+
                 TouchArea {
                     clicked => {
                         expanded = !expanded;
@@ -199,17 +200,15 @@ export HomePage := Page {
         back => { current_subpage = 0 }
     }
     Page {
-        header: "Copy";
+        header: "Scan";
         x: current_subpage == 2 ? 0 : parent.width + parent.x;
         animate x { duration: 125ms; easing: ease; }
         has_back_button: true;
         back => { current_subpage = 0 }
     }
-    Page {
-        header: "Scan";
+    CopyPage {
         x: current_subpage == 3 ? 0 : parent.width + parent.x;
         animate x { duration: 125ms; easing: ease; }
-        has_back_button: true;
         back => { current_subpage = 0 }
     }
     Page {