Falkon/FalkonTutorials
1
Fork 0
Code Releases Activity

QML: Use Pane as container in settings example

Browse Source 
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>
This commit is contained in:
Juraj Oravec 2022-07-14 10:33:45 +02:00
parent 6af4295558
commit 5e6b860531
Signed by: SGOrava
GPG Key ID: 13660A3F1D9F093B
2 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
qml/articles/8.Extension_settings.md
View File

@ -28,12 +28,14 @@ X-Falkon-Settings=true
main.qml main.qml
```qml ```qml
import QtQuick.Controls 2.3
Falkon.Settings { Falkon.Settings {
id: settings id: settings
name: 'Tutorial8_settings' name: 'Tutorial8_settings'
} }
settingsWindow: Rectangle { settingsWindow: Pane {
id: window id: window
width: 256 width: 256
height: 200 height: 200

12
qml/extensions/qml_tutorial_8/main.qml
View File

@ -28,16 +28,17 @@ Falkon.PluginInterface {
toolTip: i18n('My little button') toolTip: i18n('My little button')
icon: 'falkon' icon: 'falkon'
location: Falkon.BrowserAction.NavigationToolBar | (settings.value({key: 'statusbar', defaultValue: 1}) == 1 ? Falkon.BrowserAction.StatusBar : 0) location: Falkon.BrowserAction.NavigationToolBar | (settings.value({key: 'statusbar', defaultValue: 1}) == 1 ? Falkon.BrowserAction.StatusBar : 0)
popup: Rectangle { popup: Pane {
width: 100; width: 100;
height: 100; height: 100;
} }
} }
settingsWindow: Rectangle { settingsWindow: Pane {
id: window id: window
width: 256 width: 256
height: 200 height: 200
Image { Image {
id: image id: image
source: 'qrc:/icons/other/about.svg' source: 'qrc:/icons/other/about.svg'
@ -48,15 +49,18 @@ Falkon.PluginInterface {
CheckBox { CheckBox {
id: checkStatusbar id: checkStatusbar
checked: settings.value({key: 'statusbar', defaultValue: 1}) == 1 checked: settings.value({key: 'statusbar', defaultValue: 1}) == 1
text: 'Show in statusbar' text: i18n('Show in statusbar')
anchors.top: image.bottom anchors.top: image.bottom
} }
Button { Button {
id: button id: button
text: i18n('Save') text: i18n('Save')
width: 256
height: 50 height: 50
anchors.top: checkStatusbar.bottom anchors.top: checkStatusbar.bottom
anchors.left: parent.left
anchors.right: parent.right
onClicked: function() { onClicked: function() {
var res = settings.setValue({ var res = settings.setValue({
key: 'statusbar', key: 'statusbar',