diff --git a/resources/qml/Account/AccountDetails.qml b/resources/qml/Account/AccountDetails.qml index 45f822e41f..265842e2b4 100644 --- a/resources/qml/Account/AccountDetails.qml +++ b/resources/qml/Account/AccountDetails.qml @@ -1,8 +1,8 @@ // 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 2.10 +import QtQuick.Controls 2.3 import UM 1.4 as UM import Cura 1.1 as Cura @@ -16,38 +16,6 @@ Column padding: UM.Theme.getSize("wide_margin").height spacing: UM.Theme.getSize("wide_margin").height - AvatarImage - { - id: avatar - width: UM.Theme.getSize("avatar_image").width - height: UM.Theme.getSize("avatar_image").height - anchors.horizontalCenter: parent.horizontalCenter - source: - { - if(loggedIn) - { - if(profileImage) - { - return profileImage - } - return UM.Theme.getImage("avatar_no_user") - } - return UM.Theme.getImage("avatar_no_user") - } - outlineColor: loggedIn ? UM.Theme.getColor("account_widget_outline_active") : UM.Theme.getColor("lining") - } - - Label - { - id: information - anchors.horizontalCenter: parent.horizontalCenter - horizontalAlignment: Text.AlignHCenter - renderType: Text.NativeRendering - text: loggedIn ? profile["username"] : catalog.i18nc("@label", "Please log in or create an account to\nenjoy all features of Ultimaker Cura.") - font: loggedIn ? UM.Theme.getFont("large_bold") : UM.Theme.getFont("default") - color: UM.Theme.getColor("text") - } - Loader { id: accountOperations diff --git a/resources/qml/Account/AccountWidget.qml b/resources/qml/Account/AccountWidget.qml index d3bd6fd130..26b491ce15 100644 --- a/resources/qml/Account/AccountWidget.qml +++ b/resources/qml/Account/AccountWidget.qml @@ -1,46 +1,115 @@ // 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 2.10 +import QtQuick.Controls 2.3 import UM 1.4 as UM import Cura 1.1 as Cura -Button +Item { - id: accountWidget property var profile: Cura.API.account.userProfile property var loggedIn: Cura.API.account.isLoggedIn - implicitHeight: UM.Theme.getSize("main_window_header").height - implicitWidth: UM.Theme.getSize("main_window_header").height + height: signInButton.height > accountWidget.height ? signInButton.height : accountWidget.height + width: signInButton.width > accountWidget.width ? signInButton.width : accountWidget.width - background: AvatarImage + Button { - id: avatar + id: signInButton - width: Math.round(0.8 * accountWidget.width) - height: Math.round(0.8 * accountWidget.height) - anchors.verticalCenter: accountWidget.verticalCenter - anchors.horizontalCenter: accountWidget.horizontalCenter + anchors.verticalCenter: parent.verticalCenter - source: + text: catalog.i18nc("@action:button", "Sign in") + + height: Math.round(0.5 * UM.Theme.getSize("main_window_header").height) + onClicked: popup.opened ? popup.close() : popup.open() + visible: !loggedIn + + hoverEnabled: true + + background: Rectangle { - if(loggedIn) - { - if(profile["profile_image_url"]) - { - return profile["profile_image_url"] - } - return UM.Theme.getImage("avatar_no_user") - } - return UM.Theme.getImage("avatar_no_user") + radius: UM.Theme.getSize("action_button_radius").width + color: signInButton.hovered ? UM.Theme.getColor("primary_text") : UM.Theme.getColor("main_window_header_background") + border.width: UM.Theme.getSize("default_lining").width + border.color: UM.Theme.getColor("primary_text") + } + + contentItem: Label + { + id: label + text: signInButton.text + font: UM.Theme.getFont("default") + color: signInButton.hovered ? UM.Theme.getColor("main_window_header_background") : UM.Theme.getColor("primary_text") + width: contentWidth + verticalAlignment: Text.AlignVCenter + renderType: Text.NativeRendering } - outlineColor: loggedIn ? UM.Theme.getColor("account_widget_outline_active") : UM.Theme.getColor("lining") } - onClicked: popup.opened ? popup.close() : popup.open() + Button + { + id: accountWidget + + anchors.verticalCenter: parent.verticalCenter + + implicitHeight: UM.Theme.getSize("main_window_header").height + implicitWidth: UM.Theme.getSize("main_window_header").height + + hoverEnabled: true + + visible: loggedIn + + text: (loggedIn && profile["profile_image_url"] == "") ? profile["username"].charAt(0).toUpperCase() : "" + + background: AvatarImage + { + id: avatar + + width: Math.round(0.8 * accountWidget.width) + height: Math.round(0.8 * accountWidget.height) + anchors.verticalCenter: accountWidget.verticalCenter + anchors.horizontalCenter: accountWidget.horizontalCenter + + source: (loggedIn && profile["profile_image_url"]) ? profile["profile_image_url"] : "" + outlineColor: loggedIn ? UM.Theme.getColor("account_widget_outline_active") : UM.Theme.getColor("lining") + } + + contentItem: Item + { + anchors.verticalCenter: accountWidget.verticalCenter + anchors.horizontalCenter: accountWidget.horizontalCenter + visible: avatar.source == "" + Rectangle + { + id: initialCircle + anchors.centerIn: parent + width: Math.min(parent.width, parent.height) + height: width + radius: width + color: accountWidget.hovered ? UM.Theme.getColor("primary_text") : "transparent" + border.width: 1 + border.color: UM.Theme.getColor("primary_text") + } + + Label + { + id: initialLabel + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + text: accountWidget.text + font: UM.Theme.getFont("large_bold") + color: accountWidget.hovered ? UM.Theme.getColor("main_window_header_background") : UM.Theme.getColor("primary_text") + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + renderType: Text.NativeRendering + } + } + + onClicked: popup.opened ? popup.close() : popup.open() + } Popup { diff --git a/resources/qml/Account/AvatarImage.qml b/resources/qml/Account/AvatarImage.qml index b76aff6990..bcbc9f0542 100644 --- a/resources/qml/Account/AvatarImage.qml +++ b/resources/qml/Account/AvatarImage.qml @@ -1,8 +1,8 @@ // 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 2.10 +import QtQuick.Controls 2.3 import QtGraphicalEffects 1.0 import UM 1.4 as UM @@ -16,6 +16,7 @@ Item property alias source: profileImage.source property alias outlineColor: profileImageOutline.color + property bool hasAvatar: source != "" Image { @@ -32,6 +33,7 @@ Item id: profileImageMask anchors.fill: parent radius: width + color: hasAvatar ? "white" : "transparent" } OpacityMask @@ -39,6 +41,7 @@ Item anchors.fill: parent source: profileImage maskSource: profileImageMask + visible: hasAvatar cached: true } @@ -49,8 +52,9 @@ Item // Make it a bit bigger than it has to, otherwise it sometimes shows a white border. width: parent.width + 2 height: parent.height + 2 + visible: hasAvatar source: UM.Theme.getIcon("circle_outline") sourceSize: Qt.size(parent.width, parent.height) color: UM.Theme.getColor("account_widget_ouline_active") } -} \ No newline at end of file +} diff --git a/resources/qml/Account/GeneralOperations.qml b/resources/qml/Account/GeneralOperations.qml index 666a254cd1..73b8f0b9bc 100644 --- a/resources/qml/Account/GeneralOperations.qml +++ b/resources/qml/Account/GeneralOperations.qml @@ -1,31 +1,87 @@ // 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 QtQuick 2.10 +import QtQuick.Controls 2.3 import UM 1.4 as UM import Cura 1.1 as Cura -Row +Column { spacing: UM.Theme.getSize("default_margin").width + Image + { + id: machinesImage + anchors.horizontalCenter: parent.horizontalCenter + source: UM.Theme.getIcon("sign_in_to_cloud") + horizontalAlignment: Image.AlignHCenter + verticalAlignment: Image.AlignVCenter + } + + Label + { + id: title + anchors.horizontalCenter: parent.horizontalCenter + horizontalAlignment: Text.AlignHCenter + renderType: Text.NativeRendering + text: catalog.i18nc("@label", "Ultimaker Cloud") + font: UM.Theme.getFont("large_bold") + color: UM.Theme.getColor("text") + } + + Label + { + id: generalInformation + anchors.horizontalCenter: parent.horizontalCenter + horizontalAlignment: Text.AlignHCenter + renderType: Text.NativeRendering + text: catalog.i18nc("@label", "Enjoy a more powerful 3D printing experience.") + font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") + } + + Label + { + id: generalInformationPoints + anchors.horizontalCenter: parent.horizontalCenter + horizontalAlignment: Text.AlignLeft + renderType: Text.NativeRendering + text: { + var t = " - Send prints to your Ultimaker printer from anywhere\n" + + " - Access your Ultimaker Cura Settings worldwide\n" + + " - Enhance your workflow with advanced material profiles" + return catalog.i18nc("@label", t) + } + lineHeight: 1.4 + font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") + } + + // placeholder + Label + { + text: " " + } + + Cura.PrimaryButton + { + anchors.horizontalCenter: parent.horizontalCenter + width: UM.Theme.getSize("account_button").width + height: UM.Theme.getSize("account_button").height + text: catalog.i18nc("@button", "Sign in") + onClicked: Cura.API.account.login() + fixedWidthMode: true + } + Cura.SecondaryButton { + anchors.horizontalCenter: parent.horizontalCenter width: UM.Theme.getSize("account_button").width height: UM.Theme.getSize("account_button").height text: catalog.i18nc("@button", "Create account") onClicked: Qt.openUrlExternally(CuraApplication.ultimakerCloudAccountRootUrl + "/app/create") fixedWidthMode: true } - - Cura.PrimaryButton - { - width: UM.Theme.getSize("account_button").width - height: UM.Theme.getSize("account_button").height - text: catalog.i18nc("@button", "Login") - onClicked: Cura.API.account.login() - fixedWidthMode: true - } } \ No newline at end of file diff --git a/resources/qml/Account/UserOperations.qml b/resources/qml/Account/UserOperations.qml index 56c2dc416f..88a6d9d827 100644 --- a/resources/qml/Account/UserOperations.qml +++ b/resources/qml/Account/UserOperations.qml @@ -1,31 +1,63 @@ // 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 QtQuick 2.10 +import QtQuick.Controls 2.3 import UM 1.4 as UM import Cura 1.1 as Cura -Row +Column { + width: Math.max(title.width, + accountButton.width) * 1.5 + spacing: UM.Theme.getSize("default_margin").width + Label + { + id: title + anchors.horizontalCenter: parent.horizontalCenter + horizontalAlignment: Text.AlignHCenter + renderType: Text.NativeRendering + text: catalog.i18nc("@label", "Hi " + profile.username) + font: UM.Theme.getFont("large_bold") + color: UM.Theme.getColor("text") + } + + // placeholder + Label + { + text: " " + } + Cura.SecondaryButton { + id: accountButton + anchors.horizontalCenter: parent.horizontalCenter width: UM.Theme.getSize("account_button").width height: UM.Theme.getSize("account_button").height - text: catalog.i18nc("@button", "Manage account") + text: catalog.i18nc("@button", "Ultimaker account") onClicked: Qt.openUrlExternally(CuraApplication.ultimakerCloudAccountRootUrl) fixedWidthMode: true } - Cura.PrimaryButton + Label { - width: UM.Theme.getSize("account_button").width - height: UM.Theme.getSize("account_button").height - text: catalog.i18nc("@button", "Logout") - onClicked: Cura.API.account.logout() - fixedWidthMode: true + id: signOutButton + anchors.horizontalCenter: parent.horizontalCenter + text: catalog.i18nc("@button", "Sign out") + color: UM.Theme.getColor("secondary_button_text") + font: UM.Theme.getFont("medium") + renderType: Text.NativeRendering + + MouseArea + { + anchors.fill: parent + onClicked: Cura.API.account.logout() + hoverEnabled: true + onEntered: signOutButton.font.underline = true + onExited: signOutButton.font.underline = false + } } -} \ No newline at end of file +} diff --git a/resources/qml/MainWindow/MainWindowHeader.qml b/resources/qml/MainWindow/MainWindowHeader.qml index d75ccd0f04..ffcad4c75b 100644 --- a/resources/qml/MainWindow/MainWindowHeader.qml +++ b/resources/qml/MainWindow/MainWindowHeader.qml @@ -122,6 +122,7 @@ Item id: accountWidget anchors { + verticalCenter: parent.verticalCenter right: parent.right rightMargin: UM.Theme.getSize("default_margin").width } diff --git a/resources/themes/cura-light/icons/sign_in_to_cloud.svg b/resources/themes/cura-light/icons/sign_in_to_cloud.svg new file mode 100644 index 0000000000..75abb176c2 --- /dev/null +++ b/resources/themes/cura-light/icons/sign_in_to_cloud.svg @@ -0,0 +1,36 @@ + + + + Group-cloud + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/resources/themes/cura-light/images/avatar_no_user.svg b/resources/themes/cura-light/images/avatar_no_user.svg deleted file mode 100644 index bef9cb52db..0000000000 --- a/resources/themes/cura-light/images/avatar_no_user.svg +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - - - - - image/svg+xml - - - - - - - - - - - - diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index a54b63b4c9..3d3bbba0a8 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -445,7 +445,7 @@ "stage_menu": [0.0, 4.0], - "account_button": [12, 3], + "account_button": [12, 2.5], "print_setup_widget": [38.0, 30.0], "print_setup_mode_toggle": [0.0, 2.0],