From 5e6b8605315774c84e61f392be6f666c916e6110 Mon Sep 17 00:00:00 2001
From: Juraj Oravec <jurajoravec@mailo.com>
Date: Thu, 14 Jul 2022 10:33:45 +0200
Subject: [PATCH] QML: Use Pane as container in settings example

Using QtQuick.Controls Pane allows the resulting UI element to be styled
by system theme.
Using Rectangle forces some color, if not specified white is used.

Signed-off-by: Juraj Oravec <jurajoravec@mailo.com>
---
 qml/articles/8.Extension_settings.md   |  4 +++-
 qml/extensions/qml_tutorial_8/main.qml | 12 ++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/qml/articles/8.Extension_settings.md b/qml/articles/8.Extension_settings.md
index 0bd6465..327a877 100644
--- a/qml/articles/8.Extension_settings.md
+++ b/qml/articles/8.Extension_settings.md
@@ -28,12 +28,14 @@ X-Falkon-Settings=true
 
 main.qml
 ```qml
+import QtQuick.Controls 2.3
+
 Falkon.Settings {
     id: settings
     name: 'Tutorial8_settings'
 }
 
-settingsWindow: Rectangle {
+settingsWindow: Pane {
     id: window
     width: 256
     height: 200
diff --git a/qml/extensions/qml_tutorial_8/main.qml b/qml/extensions/qml_tutorial_8/main.qml
index 821aaf3..2cea540 100644
--- a/qml/extensions/qml_tutorial_8/main.qml
+++ b/qml/extensions/qml_tutorial_8/main.qml
@@ -28,16 +28,17 @@ Falkon.PluginInterface {
         toolTip: i18n('My little button')
         icon: 'falkon'
         location: Falkon.BrowserAction.NavigationToolBar | (settings.value({key: 'statusbar', defaultValue: 1}) == 1 ? Falkon.BrowserAction.StatusBar : 0)
-        popup: Rectangle {
+        popup: Pane {
             width: 100;
             height: 100;
         }
     }
 
-    settingsWindow: Rectangle {
+    settingsWindow: Pane {
         id: window
         width: 256
         height: 200
+
         Image {
             id: image
             source: 'qrc:/icons/other/about.svg'
@@ -48,15 +49,18 @@ Falkon.PluginInterface {
         CheckBox {
             id: checkStatusbar
             checked: settings.value({key: 'statusbar', defaultValue: 1}) == 1
-            text: 'Show in statusbar'
+            text: i18n('Show in statusbar')
             anchors.top: image.bottom
         }
         Button {
             id: button
             text: i18n('Save')
-            width: 256
             height: 50
+
             anchors.top: checkStatusbar.bottom
+            anchors.left: parent.left
+            anchors.right: parent.right
+
             onClicked: function() {
                 var res = settings.setValue({
                     key: 'statusbar',