From 512b3decc7e3acee8b2cf11402032b39df6e5353 Mon Sep 17 00:00:00 2001 From: Olivier Goffart Date: Thu, 17 Mar 2022 14:13:22 +0100 Subject: [PATCH] Adapt the printer demo to work on the 2.8'' display Part of #1015 --- examples/printerdemo_mcu/ui/common.slint | 25 ++- examples/printerdemo_mcu/ui/copy_page.slint | 51 +----- examples/printerdemo_mcu/ui/home_page.slint | 55 ++---- examples/printerdemo_mcu/ui/ink_page.slint | 12 +- examples/printerdemo_mcu/ui/print_page.slint | 31 ---- .../printerdemo_mcu/ui/printer_queue.slint | 172 ++---------------- examples/printerdemo_mcu/ui/printerdemo.slint | 96 +++++----- examples/printerdemo_mcu/ui/scan_page.slint | 47 ++--- .../printerdemo_mcu/ui/settings_page.slint | 73 +++----- examples/printerdemo_mcu/ui/usb_page.slint | 107 ----------- 10 files changed, 157 insertions(+), 512 deletions(-) delete mode 100644 examples/printerdemo_mcu/ui/print_page.slint delete mode 100644 examples/printerdemo_mcu/ui/usb_page.slint diff --git a/examples/printerdemo_mcu/ui/common.slint b/examples/printerdemo_mcu/ui/common.slint index ff0226dc6..7d442067e 100644 --- a/examples/printerdemo_mcu/ui/common.slint +++ b/examples/printerdemo_mcu/ui/common.slint @@ -49,7 +49,7 @@ export global DemoPalette := { property push-button-text-color: white; - property base-font-size: 16px; + property base-font-size: 12px; property night-mode: false; } @@ -67,20 +67,24 @@ export Page := Rectangle { image-fit: contain; colorize: DemoPalette.control-secondary; y: h.y + (h.height - height) / 2; + x: 5px; width: 14px; height: 24px; TouchArea { clicked => { back() } - width: 150%; + width: 200%; + height: 200%; + x: (parent.width - width) / 2; + y: (parent.height - height) / 2; } } h := Text { font-weight: 900; - font-size: DemoPalette.base-font-size * 2; + font-size: DemoPalette.base-font-size * 1.75; color: DemoPalette.text-foreground-color; - y: 46px - font-size; - x: has-back-button ? 24px + 16px : 0px; + y: 23px - font-size; + x: has-back-button ? 30px + 16px : 0px; // Allow clicking on the title as well to get back easier when just // using fingers on a small screen. if (has-back-button) : TouchArea { @@ -102,6 +106,10 @@ SquareButton := Rectangle { border-width: 2px; border-color: DemoPalette.control-outline-color; touch := TouchArea { + x: -4px; + y: -4px; + width: parent.width + 8px; + height: parent.height + 8px; clicked => { root.clicked(); } @@ -241,7 +249,7 @@ export CheckBox := Rectangle { clicked => { checked = !checked; } } - Text { + if text != "" : Text { text <=> root.text; vertical-alignment: center; horizontal-alignment: center; @@ -270,12 +278,11 @@ export PushButton := Rectangle { background: pressed ? colors.pressed : (touch-area.has-hover ? colors.hovered : colors.base); - height: 27px; // line-height in the design horizontal-stretch: 1; HorizontalLayout { - padding-top: 0px; - padding-bottom: 0px; + padding-top: 5px; + padding-bottom: 5px; padding-left: parent.border-radius; padding-right: parent.border-radius; diff --git a/examples/printerdemo_mcu/ui/copy_page.slint b/examples/printerdemo_mcu/ui/copy_page.slint index be248f0c6..e45d98d16 100644 --- a/examples/printerdemo_mcu/ui/copy_page.slint +++ b/examples/printerdemo_mcu/ui/copy_page.slint @@ -10,9 +10,9 @@ export CopyPage := Page { header: "Copy"; GridLayout { - padding-top: 46px /* header line height in design */ - + /* extra top-padding in design */ 27px; - spacing: 24px; + padding-top: 23px /* header line height in design */ + + /* extra top-padding in design */ 13px; + spacing: 5px; Row { Text { text: "Choose Settings"; @@ -27,64 +27,33 @@ export CopyPage := Page { value: 1; minimum: 1; } - - Rectangle {} - - Label { text: "Size"; } - ComboBox { - value: "DIN A4"; - choices: ["DIN A4", "DIN A3", "Letter"]; - } } - Row { - Label { text: "Layout"; } - ComboBox { - value: "Portrait"; - choices: ["Portrait", "Landscape"]; - } - - Rectangle {} - - Label { text: "Paper Tray"; } - ComboBox { - value: "Special Tray"; - choices: ["Special Tray", "Normal Tray"]; - } - } - Row { + /*Row { Label { text: "Quality"; } ComboBox { value: "Best"; choices: ["Best", "Medium", "Draft"]; } - - Rectangle {} - - Label { text: "Paper Type"; } - ComboBox { - value: "Standard"; - choices: ["Standard", "Non-standard"]; - } - } + }*/ Row { Label { text: "Color"; } ComboBox { value: "Grayscale"; choices: ["Grayscale", "Color"]; } - - Rectangle {} - + } + Row { Label { text: "Paper Handling"; } CheckBox { checked: true; text: "sort page"; } } + Row { HorizontalLayout { - col: 3; - colspan: 2; + col: 0; + colspan: 3; Rectangle { horizontal-stretch: 0; diff --git a/examples/printerdemo_mcu/ui/home_page.slint b/examples/printerdemo_mcu/ui/home_page.slint index 188438a97..61613e982 100644 --- a/examples/printerdemo_mcu/ui/home_page.slint +++ b/examples/printerdemo_mcu/ui/home_page.slint @@ -4,9 +4,7 @@ import { DemoPalette, Page, PushButton } from "./common.slint"; import { CopyPage } from "./copy_page.slint"; import { ScanPage } from "./scan_page.slint"; -import { PrintPage } from "./print_page.slint"; import { PrinterQueueView } from "./printer_queue.slint"; -import { UsbPage } from "./usb_page.slint"; ActionButton := Rectangle { @@ -18,20 +16,22 @@ ActionButton := Rectangle { spacing: 4px; Rectangle { - border-radius: 25px; - border-width: 5px; + border-radius: 12px; + border-width: 3px; border-color: DemoPalette.control-outline-color; background: DemoPalette.printer-action-background-color; img := Image { x: (parent.width / 2) - (self.width / 2); y: (parent.height / 2) - (self.height / 2); + width: self.source.width * 1px / 2; + height: self.source.height * 1px / 2; colorize: DemoPalette.text-foreground-color; } } label := Text { - font-size: DemoPalette.base-font-size * 1.375; + font-size: DemoPalette.base-font-size * 1.2; font-weight: 800; horizontal-alignment: center; color: DemoPalette.text-foreground-color; @@ -42,27 +42,26 @@ ActionButton := Rectangle { } export HomePage := Page { - property header-row-height: 40px; + property header-row-height: 40px / 2; - property button-spacing: 28px; - property button-width: 127px; - property button-height: button-width + 37px; + property button-spacing: 8px; + property button-width: 127px / 2; + property button-height: button-width + 20px; - header: "Xerol 1347 hdp"; + header: "Printer"; property current-subpage: 0; for action[idx] in [ - { name: "Print", icon: @image-url("images/print.svg") }, - { name: "Scan", icon: @image-url("images/scan.svg") }, { name: "Copy", icon: @image-url("images/copy.svg") }, - { name: "USB", icon: @image-url("images/usb.svg") }, + { name: "Scan", icon: @image-url("images/scan.svg") }, + ]: ActionButton { - x: mod(idx, 2) * (button-width + button-spacing); - y: floor(idx / 2) * (button-height + button-spacing) - + /* header row height */ 46px - + /* top-padding of printer queue */ 27px; // align with the first item of the printer queue + x: mod(idx, 1) * (button-width + button-spacing) + button-spacing; + y: floor(idx / 1) * (button-height + button-spacing) + + header-row-height + + /* top-padding of printer queue */ 18px; // align with the first item of the printer queue width: button-width; height: button-height; icon: action.icon; @@ -71,32 +70,18 @@ export HomePage := Page { } queue-view := PrinterQueueView { - x: button-width*2 +button-spacing; + + x: button-width + button-spacing * 2; width: parent.width - x; - show-job-details(idx) => { - current-subpage = 1; // Not nice to hard-code the index here... - } } - /* FIXME: these make us run out of memory/stack on the pico - PrintPage { - x: current-subpage == 1 ? 0 : parent.width + parent.x + 2px; - animate x { duration: 125ms; easing: ease; } - back => { current-subpage = 0 } - } - */ - /* ScanPage { + ScanPage { x: current-subpage == 2 ? 0 : parent.width + parent.x + 2px; animate x { duration: 125ms; easing: ease; } back => { current-subpage = 0 } } CopyPage { - x: current-subpage == 3 ? 0 : parent.width + parent.x + 2px; - animate x { duration: 125ms; easing: ease; } - back => { current-subpage = 0 } - }*/ - UsbPage { - x: current-subpage == 4 ? 0 : parent.width + parent.x + 2px; + x: current-subpage == 1 ? 0 : parent.width + parent.x + 2px; animate x { duration: 125ms; easing: ease; } back => { current-subpage = 0 } } diff --git a/examples/printerdemo_mcu/ui/ink_page.slint b/examples/printerdemo_mcu/ui/ink_page.slint index 5c782b307..2236c3f94 100644 --- a/examples/printerdemo_mcu/ui/ink_page.slint +++ b/examples/printerdemo_mcu/ui/ink_page.slint @@ -17,9 +17,9 @@ export InkPage := Page { Rectangle { x: (parent.width - width) / 2; - y: (parent.height - height) / 2; - height: 75%; - width: 50%; + y: (parent.height - height); + height: 82%; + width: 60%; HorizontalLayout { spacing: root.width * 5%; @@ -43,7 +43,11 @@ export InkPage := Page { ] transitions [ out innactive : { - animate height { duration: 750ms; easing: ease-in-out; } + animate height { + duration: 750ms; + delay: 100ms; + easing: ease-in-out; + } } in innactive : { animate height { duration: 200ms; easing: ease-in; } diff --git a/examples/printerdemo_mcu/ui/print_page.slint b/examples/printerdemo_mcu/ui/print_page.slint deleted file mode 100644 index 33111fc1a..000000000 --- a/examples/printerdemo_mcu/ui/print_page.slint +++ /dev/null @@ -1,31 +0,0 @@ -// Copyright © SixtyFPS GmbH -// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial - -import { DemoPalette, Page, SpinBox, Label, PushButton } from "./common.slint"; -import { WidePrinterQueueList } from "./printer_queue.slint"; - - -export PrintPage := Page { - has-back-button: true; - header: "Print"; - - GridLayout { - padding-top: 46px /* header line height in design */ - + /* extra top-padding in design */ 27px; - spacing: 24px; - Row { - Text { - text: "Printing-Queue"; - color: DemoPalette.secondary-foreground-color; - font-size: DemoPalette.base-font-size * 1.125; - font-weight: 800; - } - } - - Row { - queue := WidePrinterQueueList { - viewport-width: width; - } - } - } -} diff --git a/examples/printerdemo_mcu/ui/printer_queue.slint b/examples/printerdemo_mcu/ui/printer_queue.slint index 7299d96e0..8e57dd8c7 100644 --- a/examples/printerdemo_mcu/ui/printer_queue.slint +++ b/examples/printerdemo_mcu/ui/printer_queue.slint @@ -19,9 +19,9 @@ export global PrinterQueue := { callback pause-job(int); property <[PrinterQueueItem]> printer-queue: [ - { status: "PRINTING", progress: 63, title: "210106-FinalPresentation.pdf", owner: "simon.hausmann@slint-ui.com", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" }, - { status: "WAITING...", title: "Adressliste.docx", owner: "simon.hausmann@slint-ui.com", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" }, - { status: "WAITING...", title: "210106-FinalPresentation.pdf", owner: "simon.hausmann@slint-ui.com", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" }, + { status: "PRINTING", progress: 63, title: "Slint-Demo.jpeg", owner: "info@slint-ui.com", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" }, + { status: "WAITING...", title: "Adressliste.docx", owner: "info@slint-ui.com", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" }, + { status: "WAITING...", title: "210106-FinalPresentation.pdf", owner: "info@slint-ui.com", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" }, ]; } @@ -111,11 +111,11 @@ PrintDetails := GridLayout { NarrowPrintQueueElement := Rectangle { property queue-item; - callback show-job-details(); + callback cancel-job(); border-color: DemoPalette.control-outline-color; - border-radius: 14px; - border-width: 2px; + border-radius: 6px; + border-width: 1px; background: DemoPalette.printer-queue-item-background-color; clip: true; @@ -169,7 +169,7 @@ NarrowPrintQueueElement := Rectangle { color: DemoPalette.status-label-text-color; font-size: DemoPalette.base-font-size * 0.75; font-weight: 800; - letter-spacing: 1.56px; + letter-spacing: 1.26px; } Text { @@ -195,10 +195,9 @@ NarrowPrintQueueElement := Rectangle { } PushButton { opacity: expanded-opacity; - text: "More "; - clicked => { - root.show-job-details(); - } + text: "Delete"; + icon: @image-url("images/delete.svg"); + clicked => { cancel-job(); } } Rectangle { horizontal-stretch: 0; @@ -210,167 +209,30 @@ NarrowPrintQueueElement := Rectangle { } NarrowPrinterQueueList := Flickable { - callback show-job-details(int); VerticalLayout { alignment: start; padding: 0px; - spacing: 13.5px; + spacing: 6px; for queue-item[idx] in PrinterQueue.printer-queue: NarrowPrintQueueElement { width: root.width; queue-item: queue-item; - show-job-details => { - root.show-job-details(idx) + cancel-job => { + PrinterQueue.cancel-job(idx) } } } } -ProgressBar := Rectangle { - property progress; - - // FIXME: The intermediate rectangle is needed to allow the surrounding - // layout to freely resize the progress bar without affecting the design-intended - // height of 6px. The alternative of specifying a `max-height: 6px` will unfortunately - // also affect the width calculation and make it vanish altogether. - Rectangle { - y: parent.height / 2 - 3px; - height: 6px; - - border-radius: 3px; - background: DemoPalette.neutral-box; - - Rectangle { - width: max(6px, progress * parent.width / 100); - border-radius: parent.border-radius; - background: DemoPalette.control-foreground; - } - } -} - -WidePrintQueueElement := Rectangle { - callback cancel-job(); - callback pause-job(); - - property queue-item; - - border-color: DemoPalette.neutral-box; - border-radius: 14px; - border-width: 2px; - background: DemoPalette.printer-queue-item-background-color; - - GridLayout { - padding: parent.border-radius; - spacing: 3px; - - HorizontalLayout { - width: 48%; - Text { - // TODO: text-transform: uppercase - text: { - if (queue-item.status == "PRINTING") { - "\{queue-item.progress}% - \{queue-item.status}" - } else { - queue-item.status - } - } - color: DemoPalette.status-label-text-color; - font-size: DemoPalette.base-font-size * 0.75; - font-weight: 700; - letter-spacing: 1.56px; - horizontal-stretch: 1; - } - ProgressBar { - // Each progress bar should have the same size - // In principle it should be the smaller size which would fit next to the text foe each entry - // But since it is too hard to compute, just hardcode that for now - width: 50%; // 164px; - progress: queue-item.progress; - } - } - - Text { - col: 0; - row: 1; - text: queue-item.title; - color: DemoPalette.text-foreground-color; - overflow: elide; - font-weight: 700; - font-size: DemoPalette.base-font-size * 1.125; - horizontal-stretch: 1; - } - - HorizontalLayout { - col: 0; - row: 3; - spacing: 14px; - horizontal-stretch: 1; - vertical-stretch: 0; - - PushButton { - text: "Pause"; - icon: @image-url("images/pause.svg"); - clicked => { pause-job(); } - } - PushButton { - primary: false; - text: "Delete"; - icon: @image-url("images/delete.svg"); - clicked => { cancel-job(); } - } - } - - PrintDetails { - row: 0; - col: 2; - rowspan: 4; - width: 40%; - padding: 0px; - padding-bottom: root.border-radius / 2; - queue-item: root.queue-item; - horizontal-stretch: 1; - } - } -} - - -export WidePrinterQueueList := Flickable { - - VerticalLayout { - alignment: start; - padding: 0px; - spacing: 13.5px; - - for queue-item[idx] in PrinterQueue.printer-queue: WidePrintQueueElement { - queue-item: queue-item; - cancel-job => { PrinterQueue.cancel-job(idx) } - pause-job => { PrinterQueue.pause-job(idx) } - } - } -} - export PrinterQueueView := Rectangle { - callback show-job-details(int); - border-radius: 27px; + border-radius: 18px; background: DemoPalette.night-mode ? DemoPalette.printer-action-background-color : #F4F6FF; VerticalLayout { - padding: 16px; - spacing: 16px; + padding: 6px; + spacing: 6px; - Text { - text: "Printing-Queue"; - color: DemoPalette.text-foreground-color; - font-size: DemoPalette.base-font-size * 1.5; - font-weight: 700; - } - - queue-list := NarrowPrinterQueueList { - width: root.width - 2*parent.padding; // FIXME why do we need this? bug in layout? - show-job-details(idx) => { - root.show-job-details(idx) - } - } + queue-list := NarrowPrinterQueueList { } } } diff --git a/examples/printerdemo_mcu/ui/printerdemo.slint b/examples/printerdemo_mcu/ui/printerdemo.slint index 87684efbe..e4f65fa9e 100644 --- a/examples/printerdemo_mcu/ui/printerdemo.slint +++ b/examples/printerdemo_mcu/ui/printerdemo.slint @@ -16,12 +16,6 @@ import "./fonts/NotoSans-Bold.ttf"; SideBarIcon := Rectangle { property active; callback activate; - - GridLayout { - padding: 0px; - @children - } - TouchArea { clicked => { root.activate(); } } @@ -30,8 +24,8 @@ SideBarIcon := Rectangle { MainWindow := Window { callback quit(); - width: 772px; - height: 504px; + width: 320px; + height: 240px; title: "Slint printer demo"; background: DemoPalette.main-background; default-font-family: "Noto Sans"; @@ -48,57 +42,57 @@ MainWindow := Window { property active-page: 0; - HorizontalLayout { - padding: 10px; - padding-left: 67px; + main-view := Rectangle { + property margin: 5px; + x: sidebar.x + sidebar.width; + y: margin; + height: parent.height - margin * 2; + width: parent.width - x - margin; + border-radius: 15px; + background: DemoPalette.page-background-color; - main-view := Rectangle { - height: 100%; - border-radius: 30px; - background: DemoPalette.page-background-color; + Rectangle { + clip: true; + x: main-view.border-radius / 2; + y: main-view.border-radius / 2; + width: main-view.width - main-view.border-radius; + height: main-view.height - main-view.border-radius; - Rectangle { - clip: true; - x: main-view.border-radius / 2; - y: main-view.border-radius / 2; - width: main-view.width - main-view.border-radius; - height: main-view.height - main-view.border-radius; - - home-page := HomePage { - y: active-page == 0 ? 0 : active-page < 0 ? - height - 1px : parent.height + 1px; - animate y { duration: 125ms; easing: ease; } - } - SettingsPage { - y: active-page == 1 ? 0 : active-page < 1 ? - height - 1px : parent.height + 1px; - animate y { duration: 125ms; easing: ease; } - } - InkPage { - y: active-page == 2 ? 0 : active-page < 2 ? - height - 1px : parent.height + 1px; - animate y { duration: 125ms; easing: ease; } - ink-levels <=> root.ink-levels; - page-visible: active-page == 2; - } + home-page := HomePage { + y: active-page == 0 ? 0 : active-page > 0 ? - height - 1px : parent.height + 1px; + //animate y { duration: 125ms; easing: ease; } + } + SettingsPage { + y: active-page == 1 ? 0 : active-page > 1 ? - height - 1px : parent.height + 1px; + //animate y { duration: 125ms; easing: ease; } + } + InkPage { + y: active-page == 2 ? 0 : active-page > 2 ? - height - 1px : parent.height + 1px; + //animate y { duration: 125ms; easing: ease; } + ink-levels <=> root.ink-levels; + page-visible: active-page == 2; } } } + sidebar := Rectangle { - width: 57px; - x: 10px; + width: 48px; + x: 5px; callback icon-y(int) -> length; icon-y(index) => { - return 100px // top padding - + index * 72px; + return 34px // top padding + + index * 50px; } Image { source: @image-url("images/page_selection.svg"); - y: sidebar.icon-y(root.active-page) - self.width / 2; + y: sidebar.icon-y(root.active-page) - 25px; animate y { duration: 125ms; } - width: main-view.x - sidebar.x + 1px; + width: parent.width + 1px; height: 1.77 * self.width; colorize: DemoPalette.page-background-color; } @@ -109,8 +103,8 @@ MainWindow := Window { @image-url("images/ink.svg"), ] : SideBarIcon { y: sidebar.icon-y(idx); - x: 16px; - height: 35px; + x: (parent.width - width) / 2; + height: 30px; width: 30px; icon := Image { @@ -125,23 +119,25 @@ MainWindow := Window { } activate => { + home-page.current-subpage = 0; root.active-page = idx; } } Rectangle { - y: sidebar.icon-y(3) + 17px; - x: 12px; + y: sidebar.icon-y(3) ; + x: (parent.width - width) / 2; background: #6284FF; height: 2px; width: 37px; } SideBarIcon { - y: sidebar.icon-y(4); - x: 16px; - height: 35px; - width: 30px; + //y: sidebar.icon-y(3) + 10px; + y: parent.height - height - main-view.margin * 2; + x: (parent.width - width) / 2; + height: 27px; + width: 27px; Image { colorize: DemoPalette.night-mode ? #F1FF98 : DemoPalette.inactive-page-icon-color; diff --git a/examples/printerdemo_mcu/ui/scan_page.slint b/examples/printerdemo_mcu/ui/scan_page.slint index 43bd1cd90..6108e56c0 100644 --- a/examples/printerdemo_mcu/ui/scan_page.slint +++ b/examples/printerdemo_mcu/ui/scan_page.slint @@ -9,9 +9,9 @@ export ScanPage := Page { header: "Scan"; GridLayout { - padding-top: 46px /* header line height in design */ - + /* extra top-padding in design */ 27px; - spacing: 24px; + padding-top: 23px /* header line height in design */ + + /* extra top-padding in design */ 13px; + spacing: 5px; Row { Text { text: "Choose Settings"; @@ -20,61 +20,44 @@ export ScanPage := Page { font-weight: 800; } } - /* - FIXME: these make us run out of memory/stack on the pico + Row { Label { text: "Copies"; } SpinBox { value: 1; minimum: 1; } - - Rectangle {} - - Label { text: "Size"; } - ComboBox { - value: "Original"; - choices: ["Original", "A4"]; - } } - Row { + /*Row { Label { text: "Quality"; } ComboBox { value: "Best"; choices: ["Best", "Medium", "Draft"]; } - Rectangle {} - - Label { text: "Format"; } - ComboBox { - value: "PDF"; - choices: ["PDF", "JPEG", "PNG"]; - } - } + }*/ Row { Label { text: "Color"; } ComboBox { value: "Grayscale"; choices: ["Grayscale", "RGB", "YCMB"]; } + } - Rectangle {} - - Label { text: "Save to"; } + Row { + Label { text: "Format"; } ComboBox { - value: "Desktop"; - choices: ["Desktop"]; + value: "PDF"; + choices: ["PDF", "JPEG", "PNG"]; } } + Row { - Rectangle { - colspan: 3; - } HorizontalLayout { - col: 3; + col: 0; colspan: 2; + Rectangle { horizontal-stretch: 0; width: 10%; @@ -93,6 +76,6 @@ export ScanPage := Page { } } Row { Rectangle {} } - */ + } } diff --git a/examples/printerdemo_mcu/ui/settings_page.slint b/examples/printerdemo_mcu/ui/settings_page.slint index 51287cedc..2a14dd889 100644 --- a/examples/printerdemo_mcu/ui/settings_page.slint +++ b/examples/printerdemo_mcu/ui/settings_page.slint @@ -7,36 +7,26 @@ export SettingsPage := Page { header: "Settings"; GridLayout { - padding-top: 46px /* header line height in design */ - + /* extra top-padding in design */ 27px; - spacing: 24px; - Row { - Text { - text: "General"; - color: DemoPalette.secondary-foreground-color; - font-size: DemoPalette.base-font-size * 1.125; - font-weight: 800; - } - } - Row { - Label { text: "TURBO mode"; } - CheckBox { checked: true; } - - Rectangle {} - - Label { text: "Power Management"; } - CheckBox { - checked: false; - text: "Eco Mode"; - } - } - + padding-top: 23px /* header line height in design */ + + /* extra top-padding in design */ 13px; + spacing: 5px; Row { Text { text: "Defaults"; color: DemoPalette.secondary-foreground-color; font-size: DemoPalette.base-font-size * 1.125; font-weight: 800; + colspan: 2; + horizontal-stretch: 2; + } + Rectangle {} + Text { + col: 2; + colspan: 2; + text: "General"; + color: DemoPalette.secondary-foreground-color; + font-size: DemoPalette.base-font-size * 1.125; + font-weight: 800; } } Row { @@ -44,47 +34,34 @@ export SettingsPage := Page { ComboBox { value: "Portrait"; choices: ["Portrait", "Landscape"]; + horizontal-stretch: 2; } - Rectangle {} - - Label { text: "Paper Tray"; } - ComboBox { - value: "Special Tray"; - choices: ["Special Tray", "Normal Tray"]; - } + Label { text: "EcoMode"; } + CheckBox { checked: false; } } Row { Label { text: "Quality"; } ComboBox { value: "Best"; choices: ["Best", "Medium", "Draft"]; + horizontal-stretch: 2; } - Rectangle {} - - Label { text: "Paper Type"; } - ComboBox { - value: "Standard"; - choices: ["Standard", "Non-standard"]; - } + Label { text: "TURBO "; } + CheckBox { checked: true; } } Row { - Label { text: "Color Mode"; } + Label { text: "Color"; } ComboBox { value: "Grayscale"; choices: ["Grayscale", "RGB", "YCMB"]; - } - - Rectangle {} - - Label { text: "Paper Handling"; } - CheckBox { - checked: true; - text: "sort page"; + horizontal-stretch: 2; } } - Row { Rectangle {} } + + Rectangle {} + } } diff --git a/examples/printerdemo_mcu/ui/usb_page.slint b/examples/printerdemo_mcu/ui/usb_page.slint deleted file mode 100644 index f1e2bf85f..000000000 --- a/examples/printerdemo_mcu/ui/usb_page.slint +++ /dev/null @@ -1,107 +0,0 @@ -// Copyright © SixtyFPS GmbH -// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial - -import { DemoPalette, Page, SpinBox, Label, ComboBox, PushButton, CheckBox } from "./common.slint"; -import { StandardListView } from "std-widgets.slint"; -import { PrinterQueue } from "./printer_queue.slint"; - -struct File := { name: string, preview: image } - -export UsbPage := Page { - has-back-button: true; - header: "USB"; - - property <[File]> files: [ - { name: ".." }, - /* - { name: "cat.jpg", preview: @image-url("images/cat.jpg") }, - { name: "dog.jpg", preview: @image-url("images/dog.jpg") }, - { name: "elephant.jpg",preview: @image-url("images/elephant.jpg") }, - { name: "snake.jpg", preview: @image-url("images/snake.jpg") }, - */ - ]; - - GridLayout { - padding-top: 46px /* header line height in design */ - + /* extra top-padding in design */ 27px; - spacing: 24px; - - /* - FIXME: this makes us exceed flash space on the pico - Rectangle { - width: 50%; - rowspan: 5; - border-radius: 30px; - clip: true; - Image { - height: 100%; - width: 100%; - source: files[list-view.current-item].preview; - image-fit: cover; - } - - } - */ - - Label { - col: 1; - row: 0; - text: "Select File:"; - vertical-stretch: 0; - max-height: 32px; - } - - list-view := StandardListView { - current-item: 1; - col: 1; - row: 1; - colspan: 2; - horizontal-stretch: 1; - vertical-stretch: 1; - // TODO: maybe we want something like `model: files.map(item => { text: item.preview })` - model: [ - { text: ".." }, - { text: "cat.jpg" }, - { text: "dog.jpg" }, - { text: "elephant.jpg" }, - { text: "snake.jpg" }, - ]; - } - - Row { - Label { col: 1; text: "Copies"; } - SpinBox { - value: 1; - minimum: 1; - } - } - Row { - Label { col: 1; text: "Color"; } - ComboBox { - value: "Grayscale"; - choices: ["Grayscale", "Color"]; - } - } - HorizontalLayout { - row: 4; - col: 1; - colspan: 2; - - Rectangle { - horizontal-stretch: 0; - width: 10%; - } - PushButton { - icon: @image-url("images/print.svg"); - text: "Start printing"; - clicked => { - PrinterQueue.start-job(files[list-view.current-item].name); - } - } - Rectangle { - horizontal-stretch: 0; - width: 10%; - } - } - } -}