lilith/jami-client-qt
1
0
Fork 0
mirror of https://git.jami.net/savoirfairelinux/jami-client-qt.git synced 2025-08-04 14:55:43 +02:00
Code Activity

settingsview: make all areas of settings view scrollable

Browse source 
Also, it comes with little ui fixes:
1. Advanced sip security settings, tls version comboBox geometry fix
2. Margin between account deletion button and user identity for sip account

Gitlab: #104
Change-Id: Ia9af7a7031e3ab8221b77b7c1f06b2f3aeb4528d
This commit is contained in:
Ming Rui Zhang 2020-09-16 17:08:21 -04:00
parent 8a064c3a64
commit c821c75443
15 changed files with 385 additions and 403 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/constant/JamiTheme.qml
View file

@ -91,6 +91,7 @@ Item {
property int menuFontSize: 12
property int maximumWidthSettingsView: 600
property int settingsHeaderpreferredHeight: 64
property int preferredFieldWidth: 256
property int preferredFieldHeight: 32
property int preferredMarginSize: 16

92
src/settingsview/SettingsView.qml
View file

@ -134,6 +134,7 @@ Rectangle {
Rectangle {
id: settingsViewRect
anchors.fill: root
signal stopAudioMeter
@ -151,10 +152,58 @@ Rectangle {
}
}
StackLayout {
id: rightSettingsWidget
SettingsHeader {
id: settingsHeader
anchors.fill: parent
anchors.top: settingsViewRect.top
anchors.left: settingsViewRect.left
anchors.leftMargin: {
var pageWidth = rightSettingsStackLayout.itemAt(
rightSettingsStackLayout.currentIndex).contentWidth
return (settingsViewRect.width - pageWidth) / 2 + JamiTheme.preferredMarginSize
}
height: JamiTheme.settingsHeaderpreferredHeight
title: {
switch(selectedMenu){
case SettingsView.Account:
return qsTr("Account Settings")
case SettingsView.General:
return qsTr("General")
case SettingsView.Media:
return JamiStrings.avSettingsTitle
case SettingsView.Plugin:
return qsTr("Plugin")
}
}
onBackArrowClicked: root.settingsBackArrowClicked()
}
ScrollView {
id: settingsViewScrollView
property ScrollBar vScrollBar: ScrollBar.vertical
anchors.top: settingsHeader.bottom
anchors.horizontalCenter: settingsViewRect.horizontalCenter
height: settingsViewRect.height - settingsHeader.height
width: settingsViewRect.width
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded
clip: true
contentHeight: rightSettingsStackLayout.height
StackLayout {
id: rightSettingsStackLayout
anchors.centerIn: parent
width: settingsViewScrollView.width
property int pageIdCurrentAccountSettingsPage: 0
property int pageIdGeneralSettingsPage: 1
@ -174,12 +223,20 @@ Rectangle {
}
}
Component.onCompleted: {
// avoid binding loop
height = Qt.binding(function (){
return Math.max(
rightSettingsStackLayout.itemAt(currentIndex).preferredHeight,
settingsViewScrollView.height)
})
}
// current account setting scroll page, index 0
CurrentAccountSettings {
id: pageIdCurrentAccountSettings
Layout.fillHeight: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignCenter
isSIP: settingsViewRect.isSIP
@ -190,40 +247,37 @@ Rectangle {
onNavigateToNewWizardView: {
leaveSettingsSlot(false)
}
onAdvancedSettingsToggled: {
if (settingsVisible)
settingsViewScrollView.vScrollBar.position =
getAdvancedSettingsScrollPosition()
else
settingsViewScrollView.vScrollBar.position = 0
}
}
// general setting page, index 1
GeneralSettingsPage {
id: generalSettings
Layout.fillHeight: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignCenter
}
// av setting page, index 2
AvSettingPage {
id: avSettings
Layout.fillHeight: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignCenter
}
// plugin setting page, index 3
PluginSettingsPage {
id: pluginSettings
Layout.fillHeight: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignCenter
}
}
}
// Back button signal redirection
Component.onCompleted: {
pageIdCurrentAccountSettings.backArrowClicked.connect(settingsBackArrowClicked)
generalSettings.backArrowClicked.connect(settingsBackArrowClicked)
avSettings.backArrowClicked.connect(settingsBackArrowClicked)
pluginSettings.backArrowClicked.connect(settingsBackArrowClicked)
}
}

2
src/settingsview/components/AdvancedCallSettings.qml
View file

@ -123,7 +123,7 @@ ColumnLayout {
SettingMaterialButton {
id: btnRingtone
Layout.fillWidth: true
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.minimumHeight: JamiTheme.preferredFieldHeight
titleField: JamiStrings.selectCustomRingtone
source: "qrc:/images/icons/round-folder-24px.svg"

6
src/settingsview/components/AdvancedJamiSecuritySettings.qml
View file

@ -136,7 +136,7 @@ ColumnLayout {
SettingMaterialButton {
id: btnCACert
Layout.fillWidth: true
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.minimumHeight: JamiTheme.preferredFieldHeight
titleField: JamiStrings.caCertificate
source: "qrc:/images/icons/round-folder-24px.svg"
@ -147,7 +147,7 @@ ColumnLayout {
SettingMaterialButton {
id: btnUserCert
Layout.fillWidth: true
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.minimumHeight: JamiTheme.preferredFieldHeight
titleField: JamiStrings.userCertificate
source: "qrc:/images/icons/round-folder-24px.svg"
@ -158,7 +158,7 @@ ColumnLayout {
SettingMaterialButton {
id: btnPrivateKey
Layout.fillWidth: true
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.minimumHeight: JamiTheme.preferredFieldHeight
titleField: JamiStrings.privateKey
source: "qrc:/images/icons/round-folder-24px.svg"

7
src/settingsview/components/AdvancedSIPSecuritySettings.qml
View file

@ -202,7 +202,7 @@ ColumnLayout {
SettingMaterialButton {
id: btnSIPCACert
Layout.fillWidth: true
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.minimumHeight: JamiTheme.preferredFieldHeight
titleField: JamiStrings.caCertificate
source: "qrc:/images/icons/round-folder-24px.svg"
@ -213,7 +213,7 @@ ColumnLayout {
SettingMaterialButton {
id: btnSIPUserCert
Layout.fillWidth: true
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.minimumHeight: JamiTheme.preferredFieldHeight
titleField: JamiStrings.userCertificate
source: "qrc:/images/icons/round-folder-24px.svg"
@ -224,7 +224,7 @@ ColumnLayout {
SettingMaterialButton {
id: btnSIPPrivateKey
Layout.fillWidth: true
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.minimumHeight: JamiTheme.preferredFieldHeight
titleField: JamiStrings.privateKey
source: "qrc:/images/icons/round-folder-24px.svg"
@ -282,7 +282,6 @@ ColumnLayout {
Layout.fillWidth: true
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.rightMargin: JamiTheme.preferredMarginSize
labelText: JamiStrings.tlsProtocol
fontPointSize: JamiTheme.settingsFontSize

52
src/settingsview/components/AdvancedSettings.qml
View file

@ -34,8 +34,7 @@ ColumnLayout {
property bool isSIP
property int itemWidth
signal scrolled
property alias settingsVisible: advancedSettingsView.visible
function updateAdvancedAccountInfos() {
advancedCallSettings.updateCallSettingsInfos()
@ -90,77 +89,87 @@ ColumnLayout {
advancedSettingsView.visible = !advancedSettingsView.visible
if(advancedSettingsView.visible)
updateAdvancedAccountInfos()
scrolled()
}
}
}
ColumnLayout {
id: advancedSettingsView
Layout.fillWidth: true
visible: false
AdvancedCallSettings {
id: advancedCallSettings
isSIP: root.isSIP
itemWidth: root.itemWidth
Layout.fillWidth: true
isSIP: root.isSIP
itemWidth: root.itemWidth
}
AdvancedVoiceMailSettings {
id: advancedVoiceMailSettings
visible: root.isSIP
itemWidth: root.itemWidth
Layout.fillWidth: true
visible: root.isSIP
itemWidth: root.itemWidth
}
AdvancedSIPSecuritySettings {
id: advancedSIPSecuritySettings
visible: root.isSIP
itemWidth: root.itemWidth
Layout.fillWidth: true
visible: root.isSIP
itemWidth: root.itemWidth
}
AdvancedNameServerSettings {
id: advancedNameServerSettings
visible: !root.isSIP
itemWidth: root.itemWidth
Layout.fillWidth: true
visible: !root.isSIP
itemWidth: root.itemWidth
}
AdvancedOpenDHTSettings {
id: advancedOpenDHTSettings
visible: !root.isSIP
itemWidth: root.itemWidth
Layout.fillWidth: true
visible: !root.isSIP
itemWidth: root.itemWidth
}
AdvancedJamiSecuritySettings {
id: advancedJamiSecuritySettings
visible: !root.isSIP
itemWidth: root.itemWidth
Layout.fillWidth: true
visible: !root.isSIP
itemWidth: root.itemWidth
}
AdvancedConnectivitySettings {
id: advancedConnectivitySettings
itemWidth: root.itemWidth
isSIP: root.isSIP
Layout.fillWidth: true
itemWidth: root.itemWidth
isSIP: root.isSIP
}
AdvancedPublicAddressSettings {
id: advancedPublicAddressSettings
visible: isSIP
itemWidth: root.itemWidth
Layout.fillWidth: true
visible: isSIP
itemWidth: root.itemWidth
}
AdvancedMediaSettings {
@ -171,10 +180,11 @@ ColumnLayout {
AdvancedSDPSettings {
id: advancedSDPStettings
visible: isSIP
itemWidth: root.itemWidth
Layout.fillWidth: true
visible: isSIP
itemWidth: root.itemWidth
}
}
}

23
src/settingsview/components/AudioSettings.qml
View file

@ -106,7 +106,7 @@ ColumnLayout {
id: inputComboBoxSetting
Layout.fillWidth: true
Layout.maximumHeight: JamiTheme.preferredFieldHeight
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.leftMargin: JamiTheme.preferredMarginSize
labelText: JamiStrings.microphone
@ -118,7 +118,9 @@ ColumnLayout {
onIndexChanged: {
stopAudioMeter(false)
var selectedInputDeviceName = comboModel.data(comboModel.index( modelIndex, 0), AudioInputDeviceModel.Device_ID)
var selectedInputDeviceName = comboModel.data(
comboModel.index(modelIndex, 0),
AudioInputDeviceModel.Device_ID)
AVModel.setInputDevice(selectedInputDeviceName)
startAudioMeter(false)
}
@ -141,7 +143,7 @@ ColumnLayout {
id: outputComboBoxSetting
Layout.fillWidth: true
Layout.maximumHeight: JamiTheme.preferredFieldHeight
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.leftMargin: JamiTheme.preferredMarginSize
labelText: JamiStrings.outputDevice
@ -153,7 +155,9 @@ ColumnLayout {
onIndexChanged: {
stopAudioMeter(false)
var selectedOutputDeviceName = audioOutputDeviceModel.data(audioOutputDeviceModel.index( modelIndex, 0), AudioOutputDeviceModel.Device_ID)
var selectedOutputDeviceName = audioOutputDeviceModel.data(
audioOutputDeviceModel.index(modelIndex, 0),
AudioOutputDeviceModel.Device_ID)
AVModel.setOutputDevice(selectedOutputDeviceName)
startAudioMeter(false)
}
@ -163,7 +167,7 @@ ColumnLayout {
id: ringtoneDeviceComboBoxSetting
Layout.fillWidth: true
Layout.maximumHeight: JamiTheme.preferredFieldHeight
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.leftMargin: JamiTheme.preferredMarginSize
labelText: JamiStrings.ringtoneDevice
@ -175,7 +179,9 @@ ColumnLayout {
onIndexChanged: {
stopAudioMeter(false)
var selectedRingtoneDeviceName = audioOutputDeviceModel.data(audioOutputDeviceModel.index( modelIndex, 0), AudioOutputDeviceModel.Device_ID)
var selectedRingtoneDeviceName = audioOutputDeviceModel.data(
audioOutputDeviceModel.index(modelIndex, 0),
AudioOutputDeviceModel.Device_ID)
AVModel.setRingtoneDevice(selectedRingtoneDeviceName)
startAudioMeter(false)
}
@ -185,7 +191,7 @@ ColumnLayout {
id: audioManagerComboBoxSetting
Layout.fillWidth: true
Layout.maximumHeight: JamiTheme.preferredFieldHeight
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.leftMargin: JamiTheme.preferredMarginSize
labelText: JamiStrings.audioManager
@ -196,7 +202,8 @@ ColumnLayout {
onIndexChanged: {
stopAudioMeter(false)
var selectedAudioManager = comboModel.data(comboModel.index( modelIndex, 0), AudioManagerListModel.AudioManagerID)
var selectedAudioManager = comboModel.data(
comboModel.index(modelIndex, 0), AudioManagerListModel.AudioManagerID)
AVModel.setAudioManager(selectedAudioManager)
startAudioMeter(false)
populateAudioSettings()

35
src/settingsview/components/AvSettingPage.qml
View file

@ -32,8 +32,8 @@ Rectangle {
id: root
property int preferredColumnWidth: Math.min(root.width / 2 - 50, 275)
signal backArrowClicked
property int contentWidth: avSettingsColumnLayout.width
property int preferredHeight: avSettingsColumnLayout.implicitHeight
onVisibleChanged: {
if (!visible) {
@ -48,38 +48,13 @@ Rectangle {
}
ColumnLayout {
id: avSettingsColumnLayout
anchors.centerIn: root
height: root.height
width: Math.min(JamiTheme.maximumWidthSettingsView, root.width)
SettingsHeader {
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
Layout.leftMargin: JamiTheme.preferredMarginSize
Layout.fillWidth: true
Layout.preferredHeight: 64
title: JamiStrings.avSettingsTitle
onBackArrowClicked: root.backArrowClicked()
}
ScrollView {
id: avSettingsScrollView
property ScrollBar vScrollBar: ScrollBar.vertical
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded
Layout.fillHeight: true
Layout.fillWidth: true
focus: true
clip: true
ColumnLayout {
width: avSettingsScrollView.width
// Audio
AudioSettings {
id: audioSettings
@ -103,5 +78,3 @@ Rectangle {
}
}
}
}
}

43
src/settingsview/components/CurrentAccountSettings.qml
View file

@ -36,11 +36,13 @@ Rectangle {
property bool isSIP
property int contentWidth: currentAccountSettingsColumnLayout.width
property int preferredHeight: currentAccountSettingsColumnLayout.implicitHeight
property int preferredColumnWidth : Math.min(root.width / 2 - 50, 350)
signal navigateToMainView
signal navigateToNewWizardView
signal backArrowClicked
signal advancedSettingsToggled(bool settingsVisible)
function isPhotoBoothOpened() {
return accountProfile.isPhotoBoothOpened()
@ -86,6 +88,9 @@ Rectangle {
bannedContacts.connectCurrentAccount(false)
}
function getAdvancedSettingsScrollPosition() {
return advancedSettings.y / currentAccountSettingsColumnLayout.height
}
function setPasswordButtonText() {
var hasPassword = AccountAdapter.hasPassword()
@ -175,40 +180,13 @@ Rectangle {
}
ColumnLayout {
id: currentAccountSettingsColumnLayout
anchors.centerIn: root
height: root.height
width: Math.min(JamiTheme.maximumWidthSettingsView, root.width)
SettingsHeader {
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
Layout.leftMargin: JamiTheme.preferredMarginSize
Layout.fillWidth: true
Layout.preferredHeight: 64
title: qsTr("Account Settings")
onBackArrowClicked: root.backArrowClicked()
}
ScrollView {
id: scrollView
property ScrollBar vScrollBar: ScrollBar.vertical
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded
Layout.fillHeight: true
Layout.fillWidth: true
focus: true
clip: true
ColumnLayout {
id: accountLayout
width: scrollView.width
ToggleSwitch {
id: accountEnableCheckBox
@ -295,6 +273,7 @@ Rectangle {
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: JamiTheme.preferredFieldWidth
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.topMargin: isSIP ? JamiTheme.preferredMarginSize : 0
Layout.leftMargin: JamiTheme.preferredMarginSize
Layout.rightMargin: JamiTheme.preferredMarginSize
@ -342,9 +321,7 @@ Rectangle {
itemWidth: preferredColumnWidth
isSIP: root.isSIP
onScrolled: scrollView.vScrollBar.position = advancedSettings.y / accountLayout.height
}
}
onHeightChanged: advancedSettingsToggled(settingsVisible)
}
}
}

31
src/settingsview/components/GeneralSettingsPage.qml
View file

@ -32,38 +32,17 @@ Rectangle {
id: root
property int preferredColumnWidth : Math.min(root.width / 2 - 50, 350)
signal backArrowClicked
property int contentWidth: generalSettingsColumnLayout.width
property int preferredHeight: generalSettingsColumnLayout.implicitHeight
ColumnLayout {
id: generalSettingsColumnLayout
anchors.centerIn: root
height: root.height
width: Math.min(JamiTheme.maximumWidthSettingsView, root.width)
SettingsHeader {
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
Layout.leftMargin: JamiTheme.preferredMarginSize
Layout.fillWidth: true
Layout.preferredHeight: 64
title: qsTr("General")
onBackArrowClicked: root.backArrowClicked()
}
ScrollView {
id: generalSettingsScrollView
Layout.fillHeight: true
Layout.fillWidth: true
focus: true
clip: true
ColumnLayout {
width: generalSettingsScrollView.width
// system setting panel
SystemSettings {
Layout.fillWidth: true
@ -93,5 +72,3 @@ Rectangle {
}
}
}
}
}

39
src/settingsview/components/PluginSettingsPage.qml
View file

@ -29,6 +29,9 @@ import "../../commoncomponents"
Rectangle {
id: root
property int contentWidth: pluginSettingsColumnLayout.width
property int preferredHeight: pluginSettingsColumnLayout.implicitHeight
function populatePluginSettings() {
enabledplugin.checked = PluginModel.getPluginsEnabled()
pluginListSettingsView.visible = enabledplugin.checked
@ -38,39 +41,18 @@ Rectangle {
PluginModel.setPluginsEnabled(state)
}
signal backArrowClicked
ColumnLayout {
id: pluginSettingsColumnLayout
anchors.centerIn: root
height: root.height
width: Math.min(JamiTheme.maximumWidthSettingsView, root.width)
SettingsHeader {
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
Layout.leftMargin: JamiTheme.preferredMarginSize
Layout.fillWidth: true
Layout.preferredHeight: 64
title: qsTr("Plugin")
onBackArrowClicked: root.backArrowClicked()
}
ScrollView {
id: pluginScrollView
Layout.fillHeight: true
Layout.fillWidth: true
focus: true
clip: true
ColumnLayout {
width: pluginScrollView.width
ToggleSwitch {
id: enabledplugin
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
Layout.fillWidth: true
Layout.topMargin: JamiTheme.preferredMarginSize
Layout.leftMargin: JamiTheme.preferredMarginSize
@ -92,10 +74,11 @@ Rectangle {
PluginListSettingsView {
id: pluginListSettingsView
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
Layout.fillWidth: true
Layout.leftMargin: JamiTheme.preferredMarginSize
Layout.rightMargin: JamiTheme.preferredMarginSize
Layout.alignment: Qt.AlignHCenter
pluginListPreferencesView: pluginListPreferencesView
@ -106,6 +89,8 @@ Rectangle {
PluginListPreferencesView {
id: pluginListPreferencesView
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
Layout.fillWidth: true
Layout.leftMargin: JamiTheme.preferredMarginSize
Layout.rightMargin: JamiTheme.preferredMarginSize
@ -115,5 +100,3 @@ Rectangle {
}
}
}
}
}

2
src/settingsview/components/RecordingSettings.qml
View file

@ -174,7 +174,7 @@ ColumnLayout {
id: recordPathButton
Layout.alignment: Qt.AlignRight
Layout.fillHeight: true
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.preferredWidth: itemWidth
toolTipText: JamiStrings.tipRecordFolder

6
src/settingsview/components/SettingsComboBox.qml
View file

@ -52,17 +52,19 @@ RowLayout {
ElidedTextLabel {
id: label
Layout.fillWidth: true
Layout.preferredHeight: heightOfLayout
Layout.rightMargin: JamiTheme.preferredMarginSize
Layout.rightMargin: JamiTheme.preferredMarginSize / 2
eText: qsTr(labelText)
fontSize: JamiTheme.settingsFontSize
maxWidth: width
maxWidth: widthOfComboBox
}
SettingParaCombobox {
id: comboBoxOfLayout
Layout.preferredWidth: widthOfComboBox
Layout.preferredHeight: JamiTheme.preferredFieldHeight

2
src/settingsview/components/SystemSettings.qml
View file

@ -127,7 +127,7 @@ ColumnLayout {
Layout.alignment: Qt.AlignRight
Layout.preferredWidth: itemWidth
Layout.fillHeight: true
Layout.preferredHeight: JamiTheme.preferredFieldHeight
toolTipText: JamiStrings.tipChooseDownloadFolder
text: downloadPath

11
src/settingsview/components/VideoSettings.qml
View file

@ -155,7 +155,7 @@ ColumnLayout {
id: deviceComboBoxSetting
Layout.fillWidth: true
Layout.maximumHeight: JamiTheme.preferredFieldHeight
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.leftMargin: JamiTheme.preferredMarginSize
labelText: JamiStrings.device
@ -174,7 +174,7 @@ ColumnLayout {
id: resolutionComboBoxSetting
Layout.fillWidth: true
Layout.maximumHeight: JamiTheme.preferredFieldHeight
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.leftMargin: JamiTheme.preferredMarginSize
labelText: JamiStrings.resolution
@ -193,7 +193,7 @@ ColumnLayout {
id: fpsComboBoxSetting
Layout.fillWidth: true
Layout.maximumHeight: JamiTheme.preferredFieldHeight
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.leftMargin: JamiTheme.preferredMarginSize
labelText: JamiStrings.fps
@ -227,22 +227,21 @@ ColumnLayout {
// video Preview
Rectangle {
id: rectBox
Layout.alignment: Qt.AlignHCenter
Layout.maximumHeight: width * aspectRatio
Layout.minimumHeight: width * aspectRatio
Layout.preferredHeight: width * aspectRatio
Layout.minimumWidth: 200
Layout.maximumWidth: 400
Layout.preferredWidth: itemWidth * 2
Layout.bottomMargin: JamiTheme.preferredMarginSize
color: "white"
radius: 5
PreviewRenderer {
id: previewWidget
anchors.fill: rectBox
anchors.centerIn: rectBox
layer.enabled: true
layer.effect: OpacityMask {