diff --git a/resources/qml/Account/AccountDetails.qml b/resources/qml/Account/AccountDetails.qml new file mode 100644 index 0000000000..ab1ccc15df --- /dev/null +++ b/resources/qml/Account/AccountDetails.qml @@ -0,0 +1,77 @@ +// 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 UM 1.4 as UM +import Cura 1.1 as Cura + +import "../components" + +Column +{ + property var profile: null + property var loggedIn: false + + padding: 2 * UM.Theme.getSize("default_margin").height + spacing: 2 * UM.Theme.getSize("default_margin").height + + AvatarImage + { + id: avatar + width: 75 * screenScaleFactor + height: 75 * screenScaleFactor + anchors.horizontalCenter: parent.horizontalCenter + source: loggedIn ? profile["profile_image_url"] : UM.Theme.getImage("avatar_default") + outlineColor: loggedIn ? UM.Theme.getColor("account_widget_ouline_active") : UM.Theme.getColor("account_widget_ouline_inactive") + } + + Label + { + id: message + anchors.horizontalCenter: parent.horizontalCenter + visible: !loggedIn + text: catalog.i18nc("@label", "Please login or create an account to 
enjoy all features of Ultimaker Cura") + } + + Column + { + id: userInformation + anchors.horizontalCenter: parent.horizontalCenter + visible: loggedIn + + Label + { + anchors.horizontalCenter: parent.horizontalCenter + text: loggedIn ? profile["username"] : "" + font: UM.Theme.getFont("large") + } + + Label + { + anchors.horizontalCenter: parent.horizontalCenter + text: "email.address@hardcoded.is" + font: UM.Theme.getFont("default") + } + } + + Loader + { + id: accountEntryPoints + anchors.horizontalCenter: parent.horizontalCenter + sourceComponent: loggedIn ? userOperations : generalOperations + } + + Component + { + id: userOperations + UserOperations { } + } + + Component + { + id: generalOperations + GeneralOperations { } + } +} \ No newline at end of file diff --git a/resources/qml/Account/AccountWidget.qml b/resources/qml/Account/AccountWidget.qml index 89f9acd8cc..1d9541de2c 100644 --- a/resources/qml/Account/AccountWidget.qml +++ b/resources/qml/Account/AccountWidget.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.2 -import QtQuick.Controls 1.1 +import QtQuick 2.7 +import QtQuick.Controls 2.1 import UM 1.4 as UM import Cura 1.1 as Cura @@ -12,7 +12,6 @@ Item 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 @@ -24,6 +23,7 @@ Item anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter source: loggedIn ? profile["profile_image_url"] : UM.Theme.getImage("avatar_default") + outlineColor: loggedIn ? UM.Theme.getColor("account_widget_ouline_active") : UM.Theme.getColor("account_widget_ouline_inactive") } MouseArea @@ -58,22 +58,11 @@ Item borderWidth: UM.Theme.getSize("default_lining").width // Shows the user management options or general options to create account - Loader + AccountDetails { id: panel - sourceComponent: loggedIn ? userManagementWidget : generalManagementWidget + profile: Cura.API.account.userProfile + loggedIn: Cura.API.account.isLoggedIn } } - - Component - { - id: userManagementWidget - UserManagementWidget { } - } - - Component - { - id: generalManagementWidget - GeneralManagementWidget { } - } } \ No newline at end of file diff --git a/resources/qml/Account/AvatarImage.qml b/resources/qml/Account/AvatarImage.qml index 18ac19a45d..96c3cd2330 100644 --- a/resources/qml/Account/AvatarImage.qml +++ b/resources/qml/Account/AvatarImage.qml @@ -10,6 +10,8 @@ Item id: avatar property var source + property var fallbackSource: UM.Theme.getImage("avatar_default") + property var outlineColor: UM.Theme.getColor("account_widget_ouline_active") Image { @@ -41,4 +43,14 @@ Item cached: true invert: false } + + UM.RecolorImage + { + id: profileImageOutline + source: UM.Theme.getIcon("circle_outline") + sourceSize: Qt.size(parent.width, parent.height) + width: parent.width + height: parent.height + color: avatar.outlineColor + } } \ No newline at end of file diff --git a/resources/qml/Account/GeneralManagementWidget.qml b/resources/qml/Account/GeneralManagementWidget.qml deleted file mode 100644 index 2bb0c89f98..0000000000 --- a/resources/qml/Account/GeneralManagementWidget.qml +++ /dev/null @@ -1,23 +0,0 @@ -// 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/Account/GeneralOperations.qml b/resources/qml/Account/GeneralOperations.qml new file mode 100644 index 0000000000..d224de44bb --- /dev/null +++ b/resources/qml/Account/GeneralOperations.qml @@ -0,0 +1,35 @@ +// 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" + +Row +{ + spacing: UM.Theme.getSize("default_margin").width + + ActionButton + { + width: UM.Theme.getSize("account_button").width + height: UM.Theme.getSize("account_button").height + text: catalog.i18nc("@button", "Create account") + color: UM.Theme.getColor("secondary") + hoverColor: UM.Theme.getColor("secondary") + textColor: UM.Theme.getColor("text_link") + textHoverColor: UM.Theme.getColor("text") + onClicked: Qt.openUrlExternally("https://account.ultimaker.com") + } + + ActionButton + { + width: UM.Theme.getSize("account_button").width + height: UM.Theme.getSize("account_button").height + text: catalog.i18nc("@button", "Login") + onClicked: Cura.API.account.login() + } +} \ No newline at end of file diff --git a/resources/qml/Account/UserManagementWidget.qml b/resources/qml/Account/UserManagementWidget.qml deleted file mode 100644 index 24f4966679..0000000000 --- a/resources/qml/Account/UserManagementWidget.qml +++ /dev/null @@ -1,33 +0,0 @@ -// 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/Account/UserOperations.qml b/resources/qml/Account/UserOperations.qml new file mode 100644 index 0000000000..1704254ed3 --- /dev/null +++ b/resources/qml/Account/UserOperations.qml @@ -0,0 +1,35 @@ +// 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" + +Row +{ + spacing: UM.Theme.getSize("default_margin").width + + ActionButton + { + width: UM.Theme.getSize("account_button").width + height: UM.Theme.getSize("account_button").height + text: catalog.i18nc("@button", "Manage account") + color: UM.Theme.getColor("secondary") + hoverColor: UM.Theme.getColor("secondary") + textColor: UM.Theme.getColor("text_link") + textHoverColor: UM.Theme.getColor("text") + onClicked: Qt.openUrlExternally("https://account.ultimaker.com") + } + + ActionButton + { + width: UM.Theme.getSize("account_button").width + height: UM.Theme.getSize("account_button").height + text: catalog.i18nc("@button", "Logout") + onClicked: Cura.API.account.logout() + } +} \ No newline at end of file diff --git a/resources/qml/Skeleton/TopHeader.qml b/resources/qml/Skeleton/TopHeader.qml index 8cb568df4d..c24fe86af0 100644 --- a/resources/qml/Skeleton/TopHeader.qml +++ b/resources/qml/Skeleton/TopHeader.qml @@ -1,13 +1,14 @@ // Copyright (c) 2018 Ultimaker B.V. // Cura is released under the terms of the LGPLv3 or higher. -import QtQuick 2.2 +import QtQuick 2.7 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.1 import UM 1.4 as UM import Cura 1.0 as Cura +import "../components" import "../Account" Rectangle @@ -72,13 +73,30 @@ Rectangle Button { id: toolboxShortcutButton - text: catalog.i18nc("@action:button", "Toolbox") anchors { right: accountWidget.left rightMargin: UM.Theme.getSize("default_margin").width + verticalCenter: parent.verticalCenter + } + style: ButtonStyle + { + background: Rectangle + { + color: control.hovered ? UM.Theme.getColor("secondary") : UM.Theme.getColor("topheader_button_background_active") + radius: 2 * screenScaleFactor + } + + label: Label + { + text: catalog.i18nc("@action:button", "Toolbox") + color: UM.Theme.getColor("topheader_button_text_active") + font: UM.Theme.getFont("action_button") + renderType: Text.NativeRendering + anchors.verticalCenter: control.verticalCenter + } + } - style: UM.Theme.styles.topheader_tab action: Cura.Actions.browsePackages } diff --git a/resources/qml/components/ActionButton.qml b/resources/qml/components/ActionButton.qml index 02c279a458..b49e3f1dcb 100644 --- a/resources/qml/components/ActionButton.qml +++ b/resources/qml/components/ActionButton.qml @@ -19,6 +19,7 @@ Button property var textHoverColor: UM.Theme.getColor("button_text_hover") property var textDisabledColor: textColor property var textFont: UM.Theme.getFont("action_button") + property var cornerRadius: 2 * screenScaleFactor contentItem: Row { @@ -32,6 +33,7 @@ Button sourceSize.height: height color: button.hovered ? button.textHoverColor : button.textColor visible: button.iconSource != "" + anchors.verticalCenter: parent.verticalCenter } Label @@ -42,12 +44,14 @@ Button font: button.textFont visible: button.text != "" renderType: Text.NativeRendering + anchors.verticalCenter: parent.verticalCenter } } background: Rectangle { color: button.enabled ? (button.hovered ? button.hoverColor : button.color) : button.disabledColor + radius: cornerRadius } MouseArea diff --git a/resources/themes/cura-light/icons/circle_outline.svg b/resources/themes/cura-light/icons/circle_outline.svg new file mode 100644 index 0000000000..4d0b0e4eb0 --- /dev/null +++ b/resources/themes/cura-light/icons/circle_outline.svg @@ -0,0 +1,64 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/resources/themes/cura-light/styles.qml b/resources/themes/cura-light/styles.qml index b08d9e8728..939399efc8 100755 --- a/resources/themes/cura-light/styles.qml +++ b/resources/themes/cura-light/styles.qml @@ -90,6 +90,14 @@ QtObject { } } + property Component action_button: Component + { + ButtonStyle + { + + } + } + property Component topheader_tab: Component { ButtonStyle diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index e49824ae74..285d2724a0 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -87,6 +87,9 @@ "topheader_button_background_active": [255, 255, 255, 255], "topheader_button_background_inactive": [255, 255, 255, 0], + "account_widget_ouline_active": [9, 140, 188, 255], + "account_widget_ouline_inactive": [175, 175, 175, 255], + "text": [0, 0, 0, 255], "text_detail": [174, 174, 174, 128], "text_link": [12, 169, 227, 255], @@ -341,6 +344,8 @@ "topheader_button": [8, 4], "topheader_button_icon": [1.2, 1.2], + "account_button": [12, 3], + "views_selector": [0.0, 4.0], "default_lining": [0.08, 0.08],