From 77a1b08f38f67524e36d296dcb93899505f8a9b5 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Tue, 9 Oct 2018 15:58:13 +0200 Subject: [PATCH] Add the callout panel to the account panel, with the two components that will show up when the user is logged in or when not. Contributes to CURA-5784. --- .../components => Accounts}/AccountWidget.qml | 32 ++++++---- .../components => Accounts}/AvatarImage.qml | 4 +- .../qml/Accounts/GeneralManagementWidget.qml | 23 +++++++ .../qml/Accounts/UserManagementWidget.qml | 33 ++++++++++ resources/qml/Cura.qml | 1 + resources/qml/Skeleton/ApplicationViews.qml | 2 +- resources/qml/Skeleton/TopHeader.qml | 2 +- resources/qml/components/ActionButton.qml | 61 +++++++++++++++++++ .../components/OrientationViews.qml | 0 9 files changed, 143 insertions(+), 15 deletions(-) rename resources/qml/{Skeleton/components => Accounts}/AccountWidget.qml (60%) rename resources/qml/{Skeleton/components => Accounts}/AvatarImage.qml (88%) create mode 100644 resources/qml/Accounts/GeneralManagementWidget.qml create mode 100644 resources/qml/Accounts/UserManagementWidget.qml create mode 100644 resources/qml/components/ActionButton.qml rename resources/qml/{Skeleton => }/components/OrientationViews.qml (100%) diff --git a/resources/qml/Skeleton/components/AccountWidget.qml b/resources/qml/Accounts/AccountWidget.qml similarity index 60% rename from resources/qml/Skeleton/components/AccountWidget.qml rename to resources/qml/Accounts/AccountWidget.qml index 3d33aeaf27..89f9acd8cc 100644 --- a/resources/qml/Skeleton/components/AccountWidget.qml +++ b/resources/qml/Accounts/AccountWidget.qml @@ -5,10 +5,14 @@ import QtQuick 2.2 import QtQuick.Controls 1.1 import UM 1.4 as UM +import Cura 1.1 as Cura Item { - id: base + id: accountWidget + property var profile: Cura.API.account.userProfile + property var loggedIn: Cura.API.account.isLoggedIn + property var logoutCallback: Cura.API.account.logout height: UM.Theme.getSize("topheader").height width: UM.Theme.getSize("topheader").height @@ -19,24 +23,21 @@ Item height: Math.round(0.8 * parent.height) anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter + source: loggedIn ? profile["profile_image_url"] : UM.Theme.getImage("avatar_default") } MouseArea { - anchors.fill: avatar - onClicked: - { - // Collapse/Expand the dropdown panel - accountManagementPanel.visible = !accountManagementPanel.visible - } + anchors.fill: parent + onClicked: accountManagementPanel.visible = !accountManagementPanel.visible // Collapse/Expand the dropdown panel } UM.PointingRectangle { id: accountManagementPanel - width: 250 - height: 250 + width: panel.width + height: panel.height anchors { @@ -56,16 +57,23 @@ Item borderColor: UM.Theme.getColor("lining") borderWidth: UM.Theme.getSize("default_lining").width + // Shows the user management options or general options to create account Loader { id: panel - sourceComponent: login + sourceComponent: loggedIn ? userManagementWidget : generalManagementWidget } } Component { - id: login - Label {text: "HOLA"} + id: userManagementWidget + UserManagementWidget { } + } + + Component + { + id: generalManagementWidget + GeneralManagementWidget { } } } \ No newline at end of file diff --git a/resources/qml/Skeleton/components/AvatarImage.qml b/resources/qml/Accounts/AvatarImage.qml similarity index 88% rename from resources/qml/Skeleton/components/AvatarImage.qml rename to resources/qml/Accounts/AvatarImage.qml index 52e2757cbf..18ac19a45d 100644 --- a/resources/qml/Skeleton/components/AvatarImage.qml +++ b/resources/qml/Accounts/AvatarImage.qml @@ -9,10 +9,12 @@ Item { id: avatar + property var source + Image { id: profileImage - source: UM.Theme.getImage("avatar_default") + source: avatar.source ? avatar.source : UM.Theme.getImage("avatar_default") sourceSize: Qt.size(parent.width, parent.height) width: parent.width height: parent.height diff --git a/resources/qml/Accounts/GeneralManagementWidget.qml b/resources/qml/Accounts/GeneralManagementWidget.qml new file mode 100644 index 0000000000..2bb0c89f98 --- /dev/null +++ b/resources/qml/Accounts/GeneralManagementWidget.qml @@ -0,0 +1,23 @@ +// Copyright (c) 2018 Ultimaker B.V. +// Cura is released under the terms of the LGPLv3 or higher. + +import QtQuick 2.2 +import QtQuick.Controls 1.1 + +import UM 1.4 as UM +import Cura 1.1 as Cura + +import "../components" + +Column +{ + ActionButton + { + text: catalog.i18nc("@button", "Sign In") + color: "transparent" + hoverColor: "transparent" + textColor: UM.Theme.getColor("text") + textHoverColor: UM.Theme.getColor("text_link") + onClicked: Cura.API.account.login() + } +} \ No newline at end of file diff --git a/resources/qml/Accounts/UserManagementWidget.qml b/resources/qml/Accounts/UserManagementWidget.qml new file mode 100644 index 0000000000..24f4966679 --- /dev/null +++ b/resources/qml/Accounts/UserManagementWidget.qml @@ -0,0 +1,33 @@ +// Copyright (c) 2018 Ultimaker B.V. +// Cura is released under the terms of the LGPLv3 or higher. + +import QtQuick 2.2 +import QtQuick.Controls 1.1 + +import UM 1.4 as UM +import Cura 1.1 as Cura + +import "../components" + +Column +{ + ActionButton + { + text: catalog.i18nc("@button", "Manage Profile") + color: "transparent" + hoverColor: "transparent" + textColor: UM.Theme.getColor("text") + textHoverColor: UM.Theme.getColor("text_link") + onClicked: Qt.openUrlExternally("https://account.ultimaker.com") + } + + ActionButton + { + text: catalog.i18nc("@button", "Sign Out") + color: "transparent" + hoverColor: "transparent" + textColor: UM.Theme.getColor("text") + textHoverColor: UM.Theme.getColor("text_link") + onClicked: Cura.API.account.logout() + } +} \ No newline at end of file diff --git a/resources/qml/Cura.qml b/resources/qml/Cura.qml index 445bfb6ec9..16bae8aa3b 100644 --- a/resources/qml/Cura.qml +++ b/resources/qml/Cura.qml @@ -105,6 +105,7 @@ UM.MainWindow width: parent.width height: parent.height - menu.height - topHeader.height + z: topHeader.z - 1 Keys.forwardTo: menu diff --git a/resources/qml/Skeleton/ApplicationViews.qml b/resources/qml/Skeleton/ApplicationViews.qml index 25c2ff9983..b3d08ab627 100644 --- a/resources/qml/Skeleton/ApplicationViews.qml +++ b/resources/qml/Skeleton/ApplicationViews.qml @@ -9,7 +9,7 @@ import QtQuick.Layouts 1.1 import UM 1.4 as UM import Cura 1.0 as Cura -import "components" +import "../components" // This item contains the views selector, a combobox that is dinamically created from // the list of available Views (packages that create different visualizactions of the diff --git a/resources/qml/Skeleton/TopHeader.qml b/resources/qml/Skeleton/TopHeader.qml index c2e03aa04b..fedb00898f 100644 --- a/resources/qml/Skeleton/TopHeader.qml +++ b/resources/qml/Skeleton/TopHeader.qml @@ -8,7 +8,7 @@ import QtQuick.Controls.Styles 1.1 import UM 1.4 as UM import Cura 1.0 as Cura -import "components" +import "../Accounts" Rectangle { diff --git a/resources/qml/components/ActionButton.qml b/resources/qml/components/ActionButton.qml new file mode 100644 index 0000000000..02c279a458 --- /dev/null +++ b/resources/qml/components/ActionButton.qml @@ -0,0 +1,61 @@ +// Copyright (c) 2018 Ultimaker B.V. +// Cura is released under the terms of the LGPLv3 or higher. + +import QtQuick 2.7 +import QtQuick.Controls 2.1 +import QtQuick.Layouts 1.3 + +import UM 1.1 as UM + +Button +{ + id: button + property alias cursorShape: mouseArea.cursorShape + property var iconSource: "" + property var color: UM.Theme.getColor("primary") + property var hoverColor: UM.Theme.getColor("primary_hover") + property var disabledColor: color + property var textColor: UM.Theme.getColor("button_text") + property var textHoverColor: UM.Theme.getColor("button_text_hover") + property var textDisabledColor: textColor + property var textFont: UM.Theme.getFont("action_button") + + contentItem: Row + { + UM.RecolorImage + { + id: buttonIcon + source: button.iconSource + width: 16 * screenScaleFactor + height: 16 * screenScaleFactor + sourceSize.width: width + sourceSize.height: height + color: button.hovered ? button.textHoverColor : button.textColor + visible: button.iconSource != "" + } + + Label + { + id: buttonText + text: button.text + color: button.enabled ? (button.hovered ? button.textHoverColor : button.textColor): button.textDisabledColor + font: button.textFont + visible: button.text != "" + renderType: Text.NativeRendering + } + } + + background: Rectangle + { + color: button.enabled ? (button.hovered ? button.hoverColor : button.color) : button.disabledColor + } + + MouseArea + { + id: mouseArea + anchors.fill: parent + onPressed: mouse.accepted = false + hoverEnabled: true + cursorShape: button.enabled ? (hovered ? Qt.PointingHandCursor : Qt.ArrowCursor) : Qt.ForbiddenCursor + } +} diff --git a/resources/qml/Skeleton/components/OrientationViews.qml b/resources/qml/components/OrientationViews.qml similarity index 100% rename from resources/qml/Skeleton/components/OrientationViews.qml rename to resources/qml/components/OrientationViews.qml