From 618b642c3f06141b1331b780bb2abd94c248af4f Mon Sep 17 00:00:00 2001
From: Jaby <jaby@william.zone>
Date: Mon, 3 Mar 2025 20:46:30 +0100
Subject: [PATCH] Prepare for palette display

---
 src/Tools/tim_tool/ui/tab/file-tab.slint | 39 +++++++++++++++++++-----
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/Tools/tim_tool/ui/tab/file-tab.slint b/src/Tools/tim_tool/ui/tab/file-tab.slint
index 58a39df2..91a57665 100644
--- a/src/Tools/tim_tool/ui/tab/file-tab.slint
+++ b/src/Tools/tim_tool/ui/tab/file-tab.slint
@@ -14,6 +14,7 @@ component ProjectWidget inherits Rectangle {
 component ConvertImageWidget inherits Rectangle {
     in-out property <string> image_path;
     in-out property <image>  image_data;
+    in-out property <image>  image_palette_data;
     in-out property <string> image_name;
     in-out property <bool>   enable_button: false;
 
@@ -48,21 +49,43 @@ component ConvertImageWidget inherits Rectangle {
         }
     
         GroupBox {
-            title: "Loaded image";
+            title: "Loaded image and palette";
             VerticalLayout {
                 alignment: start;
                 padding:   4px;
                 HorizontalLayout {
                     alignment: center;
                     Rectangle {
-                        width:  256px;
-                        height: 256px;
-                        background: #000000;
+                        width:  256px + 2*4px; // < Because of border
+                        height: 256px + 2*4px; // < Because of border
+                        background: #404040;
+                        border-color: #808080;
+                        border-width: 4px;
                         Image {
-                            width:     256px;
-                            height:    256px;
-                            source:    root.image_data;
-                            image-fit: contain;
+                            width:           256px;
+                            height:          256px;
+                            source:          root.image_data;
+                            image-fit:       contain;
+                            image-rendering: pixelated;
+                        }
+                    }
+                    Rectangle {
+                        // Fake padding because the padding setting for the HorizontalLayout would not work
+                        width:  4px;
+                        height: 1px;
+                    }
+                    Rectangle {
+                        width:  256px + 2*4px; // < Because of border
+                        height: 256px + 2*4px; // < Because of border
+                        background: #404040;
+                        border-color: #808080;
+                        border-width: 4px;
+                        Image {
+                            width:           256px;
+                            height:          256px;
+                            source:          root.image_palette_data;
+                            image-fit:       contain;
+                            image-rendering: pixelated;
                         }
                     }
                 }