UI refactoring

.gitignore

@@ -2,6 +2,7 @@
 # SPDX-FileCopyrightText: none
 
 CMakeLists.txt.user
+build/
 build-*/
 config.cppcheck
 config-cppcheck-build-dir

CMakeLists.txt

@@ -21,7 +21,16 @@ if(QT_KNOWN_POLICY_QTP0002)
 endif()
 
 qt_standard_project_setup(REQUIRES 6.5)
-add_compile_definitions(QT_DISABLE_DEPRECATED_UP_TO=0x060500 QT_NO_CAST_FROM_ASCII)
+
+add_definitions(
+    -DQT_ENABLE_STRICT_MODE_UP_TO=0x0600500
+    -DQT_DISABLE_DEPRECATED_BEFORE=0x0600500
+    -DQT_NO_URL_CAST_FROM_STRING
+    -DQT_NO_CAST_FROM_ASCII
+    -DQT_NO_NARROWING_CONVERSIONS_IN_CONNECT
+    -DQT_NO_FOREACH
+    -DQT_NO_CONTEXTLESS_CONNECT
+)
 
 add_subdirectory(src)
 

src/CMakeLists.txt

@@ -9,74 +9,44 @@ cmake_minimum_required(VERSION 3.19)
 set(QT_QML_OUTPUT_DIRECTORY ${CMAKE_BINARY_DIR}/qml)
 set(QML_IMPORT_PATH ${QT_QML_OUTPUT_DIRECTORY} CACHE STRING "Import paths for Qt Creator's code model" FORCE)
 
-qt_add_executable(appOPC_UA_Browser
+qt6_add_executable(appOPC_UA_Browser
     main.cpp
 )
 
-set_source_files_properties(qml/style/Style.qml PROPERTIES
+add_subdirectory(com/basyskom/quickcontrols)
+
+set_source_files_properties(qml/Colors.qml PROPERTIES
     QT_QML_SINGLETON_TYPE TRUE
 )
 
-qt_add_qml_module(appOPC_UA_Browser
+qt6_add_qml_module(appOPC_UA_Browser
     URI OPC_UA_Browser
     VERSION 1.0
     DEPENDENCIES QtCore QtQuick
-    QML_FILES qml/Main.qml
-              qml/BrowserView.qml
-              qml/ConnectionView.qml
-              qml/ContentView.qml
-              qml/ContextMenu.qml
-              qml/DashboardConfigurationView.qml
-              qml/DashboardView.qml
-              qml/ImprintView.qml
-              qml/LicenseView.qml
-              qml/LoggingView.qml
-              qml/MessageView.qml
-              qml/NodeAttributeList.qml
-              qml/NodeDetailView.qml
-              qml/NodeReferenceList.qml
-              qml/NodesView.qml
-              qml/SettingsView.qml
+    QML_FILES qml/Colors.qml
+              qml/Main.qml
+              qml/views/BrowserView.qml
+              qml/views/ConnectionView.qml
+              qml/views/ContentView.qml
+              qml/views/DashboardConfigurationView.qml
+              qml/views/DashboardView.qml
+              qml/views/ImprintView.qml
+              qml/views/LicenseView.qml
+              qml/views/LoggingView.qml
+              qml/views/MessageView.qml
+              qml/views/NodeDetailView.qml
+              qml/views/NodesView.qml
+              qml/views/SettingsView.qml
+              qml/controls/ContextMenu.qml
+              qml/controls/IconTabButton.qml
+              qml/controls/LabelledComboBox.qml
+              qml/controls/LabelledEndpointComboBox.qml
+              qml/controls/LabelledSpinBox.qml
+              qml/controls/LabelledTextField.qml
+              qml/controls/NodeAttributeList.qml
+              qml/controls/NodeReferenceList.qml
+              qml/controls/SettingsList.qml
               qml/controls/SideMenu.qml
-              qml/controls/StyledButton.qml
-              qml/controls/StyledComboBox.qml
-              qml/controls/StyledEndpointComboBox.qml
-              qml/controls/StyledIconTabButton.qml
-              qml/controls/StyledItemSelector.qml
-              qml/controls/StyledMenuItem.qml
-              qml/controls/StyledMenuSeparator.qml
-              qml/controls/StyledScrollBar.qml
-              qml/controls/StyledSpinBox.qml
-              qml/controls/StyledTabButton.qml
-              qml/controls/StyledTextField.qml
-              qml/style/Style.qml
-              qml/style/StyleDefinitions.qml
-              qml/style/ThemeBright.qml
-              qml/style/ThemeBrowserView.qml
-              qml/style/ThemeButton.qml
-              qml/style/ThemeComboBox.qml
-              qml/style/ThemeConnectionView.qml
-              qml/style/ThemeContextMenu.qml
-              qml/style/ThemeDark.qml
-              qml/style/ThemeDashboard.qml
-              qml/style/ThemeDashboardItem.qml
-              qml/style/ThemeDefault.qml
-              qml/style/ThemeHeader.qml
-              qml/style/ThemeIconTabButton.qml
-              qml/style/ThemeImprintView.qml
-              qml/style/ThemeItemSelector.qml
-              qml/style/ThemeLicenseView.qml
-              qml/style/ThemeListView.qml
-              qml/style/ThemeLoggingView.qml
-              qml/style/ThemeMainWindow.qml
-              qml/style/ThemeMessageView.qml
-              qml/style/ThemeNodesView.qml
-              qml/style/ThemeScrollBar.qml
-              qml/style/ThemeSettingsView.qml
-              qml/style/ThemeSideMenu.qml
-              qml/style/ThemeSpinBox.qml
-              qml/style/ThemeTabButton.qml
-              qml/style/ThemeTextField.qml
     SOURCES attribute.h attribute.cpp
             attributemodel.h attributemodel.cpp
             backend.h backend.cpp
@@ -103,7 +73,7 @@ qt_add_qml_module(appOPC_UA_Browser
             woodworkingdashboardcreator.cpp
 )
 
-qt_add_resources(appOPC_UA_Browser "icons"
+qt6_add_resources(appOPC_UA_Browser "icons"
     PREFIX "/"
     FILES font/Swansea.ttf
           font/SwanseaBold.ttf
@@ -138,23 +108,29 @@ qt_add_resources(appOPC_UA_Browser "icons"
           languages/German.png
           languages/German.utf8)
 
-qt_add_translations(appOPC_UA_Browser
+qt6_add_translations(appOPC_UA_Browser
           QM_FILES_OUTPUT_VARIABLE APP_QM_FILES
           TS_FILES languages/English_en_GB.ts
                    languages/German_de_DE.ts
           LUPDATE_OPTIONS -locations none)
 
-qt_add_resources(appOPC_UA_Browser "i18n"
+qt6_add_resources(appOPC_UA_Browser "i18n"
     PREFIX "/i18n"
     BASE "${CMAKE_CURRENT_BINARY_DIR}"
     FILES ${APP_QM_FILES})
 
 target_compile_options(appOPC_UA_Browser PRIVATE -Wall -Wextra -Wdeprecated)
 
-target_link_libraries(appOPC_UA_Browser
-    PRIVATE Qt6::Core Qt6::Quick Qt6::QuickControls2 Qt::OpcUa
+target_link_libraries(appOPC_UA_Browser PRIVATE
+    Qt6::Core
+    Qt6::Quick
+    Qt6::QuickControls2
+    Qt6::OpcUa
+
+    quickcontrols_moduleplugin
 )
 
+
 set_property(TARGET appOPC_UA_Browser APPEND PROPERTY
     QT_ANDROID_PACKAGE_SOURCE_DIR ${CMAKE_CURRENT_SOURCE_DIR}/android
 )

src/backend.cpp

@@ -737,11 +737,11 @@ void BackEnd::getEndpoints(int serverIndex)
 
 void BackEnd::requestEndpoints(const QString &serverUrl)
 {
-    mServerUrl = serverUrl;
-    setState(tr("Request endpoints for \"%1\"").arg(mServerUrl.toString()));
-    qCDebug(backendLog) << "Request endpoints for " << mServerUrl.toString();
+    mServerUrl = QUrl(serverUrl);
+    setState(tr("Request endpoints for \"%1\"").arg(serverUrl));
+    qCDebug(backendLog) << "Request endpoints for " << serverUrl;
     createClient();
-    mOpcUaClient->requestEndpoints(mServerUrl.toString());
+    mOpcUaClient->requestEndpoints(mServerUrl);
 }
 
 void BackEnd::getEndpointsComplete(const QList<QOpcUaEndpointDescription> &endpoints,

src/com/basyskom/quickcontrols/Button.qml

@@ -0,0 +1,53 @@
+/**
+ * SPDX-FileCopyrightText: 2024 basysKom GmbH
+ * SPDX-FileContributor: Karsten Herrler <karsten.herrler@basyskom.com>
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.Button {
+    id: control
+
+    property int radius: 5
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+    horizontalPadding: padding + 2
+    spacing: 6
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: control.checked || control.highlighted ? control.palette.brightText :
+                control.flat && !control.down ? (control.visualFocus ? control.palette.highlight : control.palette.windowText) : control.palette.buttonText
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.checked || control.highlighted ? control.palette.brightText :
+               control.flat && !control.down ? (control.visualFocus ? control.palette.highlight : control.palette.windowText) : control.palette.buttonText
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 40
+        visible: !control.flat || control.down || control.checked || control.highlighted
+        color: "transparent"
+
+        border.color: control.highlighted ? control.palette.highlight : control.palette.windowText
+        border.width: 1
+        radius: control.radius
+    }
+}

src/com/basyskom/quickcontrols/CMakeLists.txt

@@ -0,0 +1,21 @@
+# SPDX-FileCopyrightText: 2024 basysKom GmbH
+# SPDX-FileContributor: Kai Uwe Broulik <kai.uwe.broulik@basyskom.com>
+# SPDX-License-Identifier: BSD-3-Clause
+
+qt6_add_qml_module(quickcontrols_module
+    STATIC
+    URI com.basyskom.quickcontrols
+    VERSION 1.0
+    QML_FILES
+        Button.qml
+        CheckBox.qml
+        MenuItem.qml
+        MenuSeparator.qml
+        Popup.qml
+        ScrollBar.qml
+        SpinBox.qml
+        TabButton.qml
+        TextField.qml
+    IMPORTS
+        QtQuick.Controls.Fusion
+)

src/com/basyskom/quickcontrols/CheckBox.qml

@@ -0,0 +1,68 @@
+/**
+ * SPDX-FileCopyrightText: 2024 basysKom GmbH
+ * SPDX-FileContributor: Karsten Herrler <karsten.herrler@basyskom.com>
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Templates as T
+
+T.CheckBox {
+    id: control
+
+    property color indicatorBackgroundColor: control.palette.base
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 0
+    spacing: 6
+
+    font.pointSize: 12
+
+    indicator: Rectangle {
+        readonly property color pressedColor: Fusion.mergedColors(control.palette.base, control.palette.windowText, 85)
+        readonly property color checkMarkColor: Qt.darker(control.palette.highlight, 1.2)
+
+        implicitWidth: 24
+        implicitHeight: 24
+
+        x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        radius: width / 2
+
+        color: control.down ? control.palette.light : control.indicatorBackgroundColor
+        border.width: 1
+        border.color: control.palette.highlight
+
+        ColorImage {
+            anchors.centerIn: parent
+
+            visible: control.checkState === Qt.Checked || (control.checked && control.checkState === undefined)
+            fillMode: Image.PreserveAspectFit
+            color: control.palette.highlight
+
+            source: "qrc:/icons/checkmark.svg"
+            sourceSize.width: parent.height * 0.65
+            sourceSize.height: parent.width * 0.65
+        }
+    }
+
+    contentItem: Text {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        color: control.palette.windowText
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+}