aboutsummaryrefslogtreecommitdiffstats
path: root/examples/demos/colorpaletteclient/ColorPalette
diff options
context:
space:
mode:
Diffstat (limited to 'examples/demos/colorpaletteclient/ColorPalette')
-rw-r--r--examples/demos/colorpaletteclient/ColorPalette/ColorDialogDelete.qml71
-rw-r--r--examples/demos/colorpaletteclient/ColorPalette/ColorDialogEditor.qml139
-rw-r--r--examples/demos/colorpaletteclient/ColorPalette/ColorView.qml381
-rw-r--r--examples/demos/colorpaletteclient/ColorPalette/Main.qml62
-rw-r--r--examples/demos/colorpaletteclient/ColorPalette/ServerSelection.qml241
-rw-r--r--examples/demos/colorpaletteclient/ColorPalette/UserMenu.qml139
-rw-r--r--examples/demos/colorpaletteclient/ColorPalette/qmldir7
7 files changed, 1040 insertions, 0 deletions
diff --git a/examples/demos/colorpaletteclient/ColorPalette/ColorDialogDelete.qml b/examples/demos/colorpaletteclient/ColorPalette/ColorDialogDelete.qml
new file mode 100644
index 000000000..0fd26e4d0
--- /dev/null
+++ b/examples/demos/colorpaletteclient/ColorPalette/ColorDialogDelete.qml
@@ -0,0 +1,71 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import QtExampleStyle
+
+Popup {
+ id: colorDeleter
+ padding: 10
+ modal: true
+ focus: true
+ anchors.centerIn: parent
+ closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+ signal deleteClicked(int cid)
+
+ property int colorId: -1
+
+ property string colorName: ""
+
+ function maybeDelete(color_id, name) {
+ colorName = name
+ colorId = color_id
+ open()
+ }
+
+
+ ColumnLayout {
+ anchors.fill: parent
+ spacing: 10
+
+ Text {
+ color: "#222222"
+ text: qsTr("Delete Color?")
+ font.pixelSize: 16
+ font.bold: true
+ }
+
+ Text {
+ color: "#222222"
+ text: qsTr("Are you sure, you want to delete color") + " \"" + colorDeleter.colorName + "\"?"
+ font.pixelSize: 12
+ }
+
+ RowLayout {
+ Layout.fillWidth: true
+ spacing: 10
+
+ Button {
+ Layout.fillWidth: true
+ text: qsTr("Cancel")
+ onClicked: colorDeleter.close()
+ }
+
+ Button {
+ Layout.fillWidth: true
+ text: qsTr("Delete")
+
+ buttonColor: "#CC1414"
+ textColor: "#FFFFFF"
+
+ onClicked: {
+ colorDeleter.deleteClicked(colorDeleter.colorId)
+ colorDeleter.close()
+ }
+ }
+ }
+ }
+}
diff --git a/examples/demos/colorpaletteclient/ColorPalette/ColorDialogEditor.qml b/examples/demos/colorpaletteclient/ColorPalette/ColorDialogEditor.qml
new file mode 100644
index 000000000..cba6e5a76
--- /dev/null
+++ b/examples/demos/colorpaletteclient/ColorPalette/ColorDialogEditor.qml
@@ -0,0 +1,139 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Dialogs
+
+import QtExampleStyle
+
+Popup {
+ id: colorEditor
+ // Popup for adding or updating a color
+ padding: 10
+ modal: true
+ focus: true
+ anchors.centerIn: parent
+ closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+ signal colorAdded(string name, string color, string pantone_value)
+ signal colorUpdated(string name, string color, string pantone_value, int cid)
+
+ property bool newColor: true
+ property int colorId: -1
+ property alias currentColor: colordialogButton.buttonColor
+
+ function createNewColor() {
+ newColor = true
+ colorNameField.text = "cute green"
+ colorRGBField.text = "#41cd52"
+ colorPantoneField.text = "PMS 802C"
+ open()
+ }
+
+ function updateColor(color_id, name, color, pantone_value) {
+ newColor = false
+ colorNameField.text = name
+ currentColor = color
+ colorPantoneField.text = pantone_value
+ colorId = color_id
+ open()
+ }
+
+ ColorDialog {
+ id: colorDialog
+ title: qsTr("Choose a color")
+ onAccepted: {
+ colorEditor.currentColor = Qt.color(colorDialog.selectedColor)
+ colorDialog.close()
+ }
+ onRejected: {
+ colorDialog.close()
+ }
+ }
+
+ ColumnLayout {
+ anchors.fill: parent
+ spacing: 10
+
+ GridLayout {
+ columns: 2
+ rowSpacing: 10
+ columnSpacing: 10
+
+ Label {
+ text: qsTr("Color Name")
+ }
+ TextField {
+ id: colorNameField
+ padding: 10
+ }
+
+ Label {
+ text: qsTr("Pantone Value")
+ }
+ TextField {
+ id: colorPantoneField
+ padding: 10
+ }
+
+ Label {
+ text: qsTr("Rgb Value")
+ }
+
+ TextField {
+ id: colorRGBField
+ text: colorEditor.currentColor.toString()
+ readOnly: true
+ padding: 10
+ }
+ }
+
+ Button {
+ id: colordialogButton
+ Layout.fillWidth: true
+ Layout.preferredHeight: 30
+ text: qsTr("Set Color")
+ textColor: isColorDark(buttonColor) ? "#E6E6E6" : "#191919"
+
+ onClicked: colorDialog.open()
+
+ function isColorDark(color) {
+ return (0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b) < 0.5;
+ }
+ }
+
+ RowLayout {
+ Layout.fillWidth: true
+ spacing: 10
+
+ Button {
+ text: qsTr("Cancel")
+ onClicked: colorEditor.close()
+ Layout.fillWidth: true
+ }
+
+ Button {
+ Layout.fillWidth: true
+ text: colorEditor.newColor ? qsTr("Add") : qsTr("Update")
+
+ buttonColor: "#2CDE85"
+ textColor: "#FFFFFF"
+
+ onClicked: {
+ if (colorEditor.newColor) {
+ colorEditor.colorAdded(colorNameField.text,
+ colorRGBField.text,
+ colorPantoneField.text)
+ } else {
+ colorEditor.colorUpdated(colorNameField.text,
+ colorRGBField.text,
+ colorPantoneField.text,
+ colorEditor.colorId)
+ }
+ colorEditor.close()
+ }
+ }
+ }
+ }
+}
diff --git a/examples/demos/colorpaletteclient/ColorPalette/ColorView.qml b/examples/demos/colorpaletteclient/ColorPalette/ColorView.qml
new file mode 100644
index 000000000..c6ad36f80
--- /dev/null
+++ b/examples/demos/colorpaletteclient/ColorPalette/ColorView.qml
@@ -0,0 +1,381 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Effects
+import QtQuick.Shapes
+
+import QtExampleStyle
+import ColorPalette
+
+Item {
+ id: root
+ required property BasicLogin loginService
+ required property PaginatedColorsResource colors
+ required property PaginatedColorUsersResource colorViewUsers
+
+ ColorDialogEditor {
+ id: colorPopup
+ onColorAdded: (colorNameField, colorRGBField, colorPantoneField) => {
+ root.colors.add({"name" : colorNameField,
+ "color" : colorRGBField,
+ "pantone_value" : colorPantoneField})
+ }
+
+ onColorUpdated: (colorNameField, colorRGBField, colorPantoneField, cid) => {
+ root.colors.update({"name" : colorNameField,
+ "color" : colorRGBField,
+ "pantone_value" : colorPantoneField},
+ cid)
+ }
+ }
+
+ ColorDialogDelete {
+ id: colorDeletePopup
+ onDeleteClicked: (cid) => {
+ root.colors.remove(cid)
+ }
+ }
+
+ ColumnLayout {
+ // The main application layout
+ anchors.fill :parent
+
+ ToolBar {
+ Layout.fillWidth: true
+ Layout.minimumHeight: 25 + 4
+
+ UserMenu {
+ id: userMenu
+
+ userMenuUsers: root.colorViewUsers
+ userLoginService: root.loginService
+ }
+
+ RowLayout {
+ anchors.fill: parent
+ Text {
+ text: qsTr("QHTTP Server")
+ font.pixelSize: 8
+ color: "#667085"
+ }
+ Item { Layout.fillWidth: true }
+
+ AbstractButton {
+ id: loginButton
+ Layout.preferredWidth: 25
+ Layout.preferredHeight: 25
+ Item {
+ id: userImageCliped
+ anchors.left: parent.left
+ anchors.verticalCenter: parent.verticalCenter
+ width: 25
+ height: 25
+
+ Image {
+ id: userImage
+ anchors.fill: parent
+ source: getCurrentUserImage()
+ visible: false
+
+ function getCurrentUserImage() {
+ if (root.loginService.loggedIn)
+ return users.avatarForEmail(loginService.user)
+ return "qrc:/qt/qml/ColorPalette/icons/user.svg";
+ }
+ }
+
+ Image {
+ id: userMask
+ source: "qrc:/qt/qml/ColorPalette/icons/userMask.svg"
+ anchors.fill: userImage
+ anchors.margins: 4
+ visible: false
+ }
+
+ MultiEffect {
+ source: userImage
+ anchors.fill: userImage
+ maskSource: userMask
+ maskEnabled: true
+ }
+ }
+
+ onClicked: {
+ userMenu.open()
+ var pos = mapToGlobal(Qt.point(x, y))
+ pos = userMenu.parent.mapFromGlobal(pos)
+ userMenu.x = x - userMenu.width + 25 + 3
+ userMenu.y = y + 25 + 3
+ }
+
+ Shape {
+ id: bubble
+ x: -text.width - 25
+ anchors.margins: 3
+
+ preferredRendererType: Shape.CurveRenderer
+
+ visible: !root.loginService.loggedIn
+
+ ShapePath {
+ strokeWidth: 0
+ fillColor: "#667085"
+ startX: 5; startY: 0
+ PathLine { x: 5 + text.width + 6; y: 0 }
+ PathArc { x: 10 + text.width + 6; y: 5; radiusX: 5; radiusY: 5}
+ // arrow
+ PathLine { x: 10 + text.width + 6; y: 8 + text.height / 2 - 6 }
+ PathLine { x: 10 + text.width + 6 + 6; y: 8 + text.height / 2 }
+ PathLine { x: 10 + text.width + 6; y: 8 + text.height / 2 + 6}
+ PathLine { x: 10 + text.width + 6; y: 5 + text.height + 6 }
+ // end arrow
+ PathArc { x: 5 + text.width + 6; y: 10 + text.height + 6 ; radiusX: 5; radiusY: 5}
+ PathLine { x: 5; y: 10 + text.height + 6 }
+ PathArc { x: 0; y: 5 + text.height + 6 ; radiusX: 5; radiusY: 5}
+ PathLine { x: 0; y: 5 }
+ PathArc { x: 5; y: 0 ; radiusX: 5; radiusY: 5}
+ }
+ Text {
+ x: 8
+ y: 8
+ id: text
+ color: "white"
+ text: qsTr("Log in to edit")
+ font.bold: true
+ horizontalAlignment: Qt.AlignHCenter
+ verticalAlignment: Qt.AlignVCenter
+ }
+ }
+ }
+ }
+
+ Image {
+ anchors.centerIn: parent
+ source: "qrc:/qt/qml/ColorPalette/icons/qt.png"
+ fillMode: Image.PreserveAspectFit
+ height: 25
+ }
+
+ }
+ ToolBar {
+ Layout.fillWidth: true
+ Layout.minimumHeight: 32
+
+ RowLayout {
+ anchors.fill: parent
+ Text {
+ Layout.alignment: Qt.AlignVCenter
+ text: qsTr("Color Palette")
+ font.pixelSize: 14
+ font.bold: true
+ color: "#667085"
+ }
+
+ Item { Layout.fillWidth: true }
+
+ AbstractButton {
+ Layout.preferredWidth: 25
+ Layout.preferredHeight: 25
+ Layout.alignment: Qt.AlignVCenter
+
+ Rectangle {
+ anchors.fill: parent
+ radius: 4
+ color: "#192CDE85"
+ border.color: "#DDE2E8"
+ border.width: 1
+ }
+
+ Image {
+ source: UIStyle.iconPath("plus")
+ fillMode: Image.PreserveAspectFit
+ anchors.fill: parent
+ sourceSize.width: width
+ sourceSize.height: height
+
+ }
+ visible: root.loginService.loggedIn
+ onClicked: colorPopup.createNewColor()
+ }
+
+ AbstractButton {
+ Layout.preferredWidth: 25
+ Layout.preferredHeight: 25
+ Layout.alignment: Qt.AlignVCenter
+
+ Rectangle {
+ anchors.fill: parent
+ radius: 4
+ color: "#192CDE85"
+ border.color: "#DDE2E8"
+ border.width: 1
+ }
+
+ Image {
+ source: UIStyle.iconPath("update")
+ fillMode: Image.PreserveAspectFit
+ anchors.fill: parent
+ sourceSize.width: width
+ sourceSize.height: height
+ }
+
+ onClicked: {
+ root.colors.refreshCurrentPage()
+ root.colorViewUsers.refreshCurrentPage()
+ }
+ }
+ }
+ }
+
+
+
+ //! [View and model]
+ ListView {
+ id: colorListView
+
+ model: root.colors.model
+ //! [View and model]
+ footerPositioning: ListView.OverlayFooter
+ spacing: 15
+ clip: true
+
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+
+ header: Rectangle {
+ height: 32
+ width: parent.width
+ color: "#F0F1F3"
+
+ RowLayout {
+ anchors.fill: parent
+
+ component HeaderText : Text {
+ Layout.alignment: Qt.AlignVCenter
+ horizontalAlignment: Qt.AlignHCenter
+
+ font.pixelSize: 12
+ color: "#667085"
+ }
+ HeaderText {
+ id: headerName
+ text: qsTr("Color Name")
+ Layout.preferredWidth: colorListView.width * 0.3
+ }
+ HeaderText {
+ id: headerRgb
+ text: qsTr("Rgb Value")
+ Layout.preferredWidth: colorListView.width * 0.25
+ }
+ HeaderText {
+ id: headerPantone
+ text: qsTr("Pantone Value")
+ Layout.preferredWidth: colorListView.width * 0.25
+ }
+ HeaderText {
+ id: headerAction
+ text: qsTr("Action")
+ Layout.preferredWidth: colorListView.width * 0.2
+ }
+ }
+ }
+
+ delegate: Item {
+ id: colorInfo
+
+ required property int color_id
+ required property string name
+ required property string color
+ required property string pantone_value
+
+ width: colorListView.width
+ height: 25
+ RowLayout {
+ anchors.fill: parent
+ anchors.leftMargin: 5
+ anchors.rightMargin: 5
+
+ Rectangle {
+ id: colorSample
+ Layout.alignment: Qt.AlignVCenter
+ implicitWidth: 36
+ implicitHeight: 21
+ radius: 6
+ color: colorInfo.color
+ }
+
+ Text {
+ Layout.preferredWidth: colorInfo.width * 0.3 - colorSample.width
+ horizontalAlignment: Qt.AlignLeft
+ leftPadding: 5
+ text: colorInfo.name
+ }
+
+ Text {
+ Layout.preferredWidth: colorInfo.width * 0.25
+ horizontalAlignment: Qt.AlignHCenter
+ text: colorInfo.color
+ }
+
+ Text {
+ Layout.preferredWidth: colorInfo.width * 0.25
+ horizontalAlignment: Qt.AlignHCenter
+ text: colorInfo.pantone_value
+ }
+
+ Item {
+ Layout.maximumHeight: 28
+ implicitHeight: buttonBox.implicitHeight
+ implicitWidth: buttonBox.implicitWidth
+
+ RowLayout {
+ id: buttonBox
+ anchors.fill: parent
+ ToolButton {
+ icon.source: UIStyle.iconPath("delete")
+ enabled: root.loginService.loggedIn
+ onClicked: colorDeletePopup.maybeDelete(color_id, name)
+ }
+ ToolButton {
+ icon.source: UIStyle.iconPath("edit")
+ enabled: root.loginService.loggedIn
+ onClicked: colorPopup.updateColor(color_id, name, color, pantone_value)
+ }
+ }
+ }
+ }
+ }
+
+ footer: ToolBar {
+ // Paginate buttons if more than one page
+ visible: root.colors.pages > 1
+ implicitWidth: parent.width
+
+ RowLayout {
+ anchors.fill: parent
+
+ Item { Layout.fillWidth: true /* spacer */ }
+
+ Repeater {
+ model: root.colors.pages
+
+ ToolButton {
+ text: page
+ font.bold: root.colors.page === page
+
+ required property int index
+ readonly property int page: (index + 1)
+
+ onClicked: root.colors.page = page
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/examples/demos/colorpaletteclient/ColorPalette/Main.qml b/examples/demos/colorpaletteclient/ColorPalette/Main.qml
new file mode 100644
index 000000000..ae1e85533
--- /dev/null
+++ b/examples/demos/colorpaletteclient/ColorPalette/Main.qml
@@ -0,0 +1,62 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+pragma ComponentBehavior: Bound
+
+import QtQuick
+
+import ColorPalette
+
+Window {
+ id: window
+ width: 500
+ height: 400
+ visible: true
+ title: qsTr("Color Palette Client")
+
+ enum DataView {
+ UserView = 0,
+ ColorView = 1
+ }
+
+ ServerSelection {
+ id: serverview
+ anchors.fill: parent
+ onServerSelected: {colorview.visible = true; serverview.visible = false}
+ colorResources: colors
+ restPalette: paletteService
+ colorUsers: users
+ }
+
+ ColorView {
+ id: colorview
+ anchors.fill: parent
+ visible: false
+ loginService: colorLogin
+ colors: colors
+ colorViewUsers: users
+ }
+
+ //! [RestService QML element]
+ RestService {
+ id: paletteService
+
+ PaginatedColorUsersResource {
+ id: users
+ path: "/api/users"
+ }
+
+ PaginatedColorsResource {
+ id: colors
+ path: "/api/unknown"
+ }
+
+ BasicLogin {
+ id: colorLogin
+ loginPath: "/api/login"
+ logoutPath: "/api/logout"
+ }
+ }
+ //! [RestService QML element]
+
+}
diff --git a/examples/demos/colorpaletteclient/ColorPalette/ServerSelection.qml b/examples/demos/colorpaletteclient/ColorPalette/ServerSelection.qml
new file mode 100644
index 000000000..c170773cc
--- /dev/null
+++ b/examples/demos/colorpaletteclient/ColorPalette/ServerSelection.qml
@@ -0,0 +1,241 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import ColorPalette
+import QtExampleStyle
+
+pragma ComponentBehavior: Bound
+
+Item {
+ id: root
+ // A popup for selecting the server URL
+
+ signal serverSelected()
+
+ required property PaginatedColorsResource colorResources
+ required property PaginatedColorUsersResource colorUsers
+ required property RestService restPalette
+
+ Connections {
+ target: root.colorResources
+ // Closes the URL selection popup once we have received data successfully
+ function onDataUpdated() {
+ fetchTester.stop()
+ root.serverSelected()
+ }
+ }
+
+
+ ListModel {
+ id: server
+ ListElement {
+ title: qsTr("Public REST API Test Server")
+ url: "https://reqres.in"
+ icon: "qrc:/qt/qml/ColorPalette/icons/testserver.png"
+ }
+ ListElement {
+ title: qsTr("Qt-based REST API server")
+ url: "http://127.0.0.1:49425"
+ icon: "qrc:/qt/qml/ColorPalette/icons/qt.png"
+ }
+ }
+
+
+ ColumnLayout {
+ anchors.fill: parent
+ anchors.margins: 20
+ spacing: 10
+
+ Image {
+ Layout.alignment: Qt.AlignHCenter
+ source: "qrc:/qt/qml/ColorPalette/icons/qt.png"
+ fillMode: Image.PreserveAspectFit
+ Layout.preferredWidth: 20
+ }
+
+ Label {
+ text: qsTr("Choose a server")
+ Layout.alignment: Qt.AlignHCenter
+ font.pixelSize: 24
+ }
+
+ component ServerListDelegate: Rectangle {
+ id: serverListDelegate
+ required property string title
+ required property string url
+ required property string icon
+ required property int index
+
+ radius: 10
+ color: "#00000000"
+
+ border.color: ListView.view.currentIndex === index ? "#2CDE85" : "#E0E2E7"
+ border.width: 2
+
+ implicitWidth: 180
+ implicitHeight: 100
+
+ Rectangle {
+ id: img
+ anchors.left: parent.left
+ anchors.top: parent.top
+ anchors.topMargin: 10
+ anchors.leftMargin: 20
+
+ width: 30
+ height: 30
+ radius: 200
+ border. color: "#E7F4EE"
+ border.width: 5
+
+ Image {
+ anchors.centerIn: parent
+ source: serverListDelegate.icon
+ width: 15
+ height: 15
+ fillMode: Image.PreserveAspectFit
+ smooth: true
+ }
+ }
+
+ Text {
+ text: parent.url
+
+ anchors.left: parent.left
+ anchors.top: img.bottom
+ anchors.topMargin: 10
+ anchors.leftMargin: 20
+ color: "#667085"
+ font.pixelSize: 13
+ }
+ Text {
+ text: parent.title
+
+ anchors.horizontalCenter: parent.horizontalCenter
+ anchors.bottom: parent.bottom
+ anchors.bottomMargin: 10
+ color: "#222222"
+ font.pixelSize: 11
+ font.bold: true
+ }
+
+ MouseArea {
+ anchors.fill: parent
+ onClicked: serverList.currentIndex = serverListDelegate.index;
+ }
+ }
+
+ ListView {
+ id: serverList
+ Layout.alignment: Qt.AlignHCenter
+ Layout.minimumWidth: 180 * server.count + 20
+ Layout.minimumHeight: 100
+ orientation: ListView.Horizontal
+
+ model: server
+ spacing: 20
+
+ delegate: ServerListDelegate {}
+ }
+
+ Button {
+ Layout.alignment: Qt.AlignHCenter
+ text: restPalette.sslSupported ? qsTr("Connect (SSL)") : qsTr("Connect")
+
+ buttonColor: "#2CDE85"
+ textColor: "#FFFFFF"
+
+ onClicked: {
+ busyIndicatorPopup.title = (serverList.currentItem as ServerListDelegate).title
+ busyIndicatorPopup.icon = (serverList.currentItem as ServerListDelegate).icon
+ busyIndicatorPopup.open()
+
+ fetchTester.test((serverList.currentItem as ServerListDelegate).url)
+ }
+ }
+
+ Timer {
+ id: fetchTester
+ interval: 2000
+
+ function test(url) {
+ root.restPalette.url = url
+ root.colorResources.refreshCurrentPage()
+ root.colorUsers.refreshCurrentPage()
+ start()
+ }
+ onTriggered: busyIndicatorPopup.close()
+ }
+ }
+
+ onVisibleChanged: {if (!visible) busyIndicatorPopup.close();}
+
+ Popup {
+ id: busyIndicatorPopup
+ padding: 10
+ modal: true
+ focus: true
+ anchors.centerIn: parent
+ closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+
+ property alias title: titleText.text
+ property alias icon: titleImg.source
+
+ ColumnLayout {
+ id: fetchIndicator
+ anchors.fill: parent
+
+ RowLayout {
+ Rectangle {
+ Layout.preferredWidth: 50
+ Layout.preferredHeight: 50
+ radius: 200
+ border. color: "#E7F4EE"
+ border.width: 5
+
+ Image {
+ id: titleImg
+ anchors.centerIn: parent
+ width: 25
+ height: 25
+ fillMode: Image.PreserveAspectFit
+ }
+ }
+
+ Label {
+ id: titleText
+ text:""
+ font.pixelSize: 18
+ }
+ }
+
+ RowLayout {
+ Layout.fillWidth: false
+ Layout.alignment: Qt.AlignHCenter
+ BusyIndicator {
+ running: visible
+ Layout.fillWidth: true
+ }
+
+ Label {
+ text: qsTr("Testing URL")
+ font.pixelSize: 18
+ }
+ }
+
+ Button {
+ Layout.alignment: Qt.AlignHCenter
+ text: qsTr("Cancel")
+ onClicked: {
+ busyIndicatorPopup.close()
+ }
+ }
+
+ }
+
+ }
+}
diff --git a/examples/demos/colorpaletteclient/ColorPalette/UserMenu.qml b/examples/demos/colorpaletteclient/ColorPalette/UserMenu.qml
new file mode 100644
index 000000000..6c4b25683
--- /dev/null
+++ b/examples/demos/colorpaletteclient/ColorPalette/UserMenu.qml
@@ -0,0 +1,139 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Effects
+
+import QtExampleStyle
+import ColorPalette
+
+Popup {
+ id: userMenu
+
+ required property BasicLogin userLoginService
+ required property PaginatedColorUsersResource userMenuUsers
+
+ width: 280
+ height: 270
+
+ ColumnLayout {
+ anchors.fill: parent
+
+ ListView {
+ id: userListView
+
+ model: userMenu.userMenuUsers.model
+ spacing: 5
+ footerPositioning: ListView.PullBackFooter
+ clip: true
+
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+
+ delegate: Rectangle {
+ id: userInfo
+
+ required property string email
+ required property string avatar
+
+ height: 30
+ width: userListView.width
+
+
+ readonly property bool logged: (email === loginService.user)
+
+ Rectangle {
+ id: userImageCliped
+ anchors.left: parent.left
+ anchors.verticalCenter: parent.verticalCenter
+ width: 30
+ height: 30
+
+ Image {
+ id: userImage
+ anchors.fill: parent
+ source: userInfo.avatar
+ visible: false
+ }
+
+ Image {
+ id: userMask
+ source: "qrc:/qt/qml/ColorPalette/icons/userMask.svg"
+ anchors.fill: userImage
+ anchors.margins: 4
+ visible: false
+ }
+
+ MultiEffect {
+ source: userImage
+ anchors.fill: userImage
+ maskSource: userMask
+ maskEnabled: true
+ }
+ }
+
+ Text {
+ id: userMailLabel
+ anchors.left: userImageCliped.right
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.margins: 5
+ text: userInfo.email
+ font.bold: userInfo.logged
+ }
+
+ ToolButton {
+ anchors.right: parent.right
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.margins: 5
+
+ icon.source: UIStyle.iconPath(userInfo.logged
+ ? "logout" : "login")
+ enabled: userInfo.logged || !userMenu.userLoginService.loggedIn
+
+ onClicked: {
+ if (userInfo.logged) {
+ userMenu.userLoginService.logout()
+ } else {
+ //! [Login]
+ userMenu.userLoginService.login({"email" : userInfo.email,
+ "password" : "apassword",
+ "id" : userInfo.id})
+ //! [Login]
+ userMenu.close()
+ }
+ }
+ }
+
+ }
+ footer: ToolBar {
+ // Paginate buttons if more than one page
+ visible: userMenu.userMenuUsers.pages > 1
+ implicitWidth: parent.width
+
+ RowLayout {
+ anchors.fill: parent
+
+ Item { Layout.fillWidth: true /* spacer */ }
+
+ Repeater {
+ model: userMenu.userMenuUsers.pages
+
+ ToolButton {
+ text: page
+ font.bold: userMenu.userMenuUsers.page === page
+
+ required property int index
+ readonly property int page: (index + 1)
+
+ onClicked: userMenu.userMenuUsers.page = page
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/examples/demos/colorpaletteclient/ColorPalette/qmldir b/examples/demos/colorpaletteclient/ColorPalette/qmldir
new file mode 100644
index 000000000..7a153fea8
--- /dev/null
+++ b/examples/demos/colorpaletteclient/ColorPalette/qmldir
@@ -0,0 +1,7 @@
+module ColorPalette
+Main 1.0 Main.qml
+ColorDialogDelete 1.0 ColorDialogDelete.qml
+ColorDialogEditor 1.0 ColorDialogEditor.qml
+ColorView 1.0 ColorView.qml
+ServerSelection 1.0 ServerSelection.qml
+UserMenu 1.0 UserMenu.qml