GitHub-Proxy/Cura
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/Ultimaker/Cura synced 2025-08-13 09:59:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5246 from Ultimaker/CURA-6132_improve_account_widget

Browse Source 
CURA-6132 improve account widget
This commit is contained in:
Remco Burema 2019-01-30 17:46:32 +01:00 committed by GitHub
commit 156e7a2bee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 251 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
resources/qml/Account/AccountDetails.qml
View File

@ -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

117
resources/qml/Account/AccountWidget.qml
View File

@ -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
{

10
resources/qml/Account/AvatarImage.qml
View File

@ -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")
}
}
}

80
resources/qml/Account/GeneralOperations.qml
View File

@ -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
}
}

54
resources/qml/Account/UserOperations.qml
View File

@ -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
}
}
}
}

1
resources/qml/MainWindow/MainWindowHeader.qml
View File

@ -122,6 +122,7 @@ Item
id: accountWidget
anchors
{
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: UM.Theme.getSize("default_margin").width
}

36
resources/themes/cura-light/icons/sign_in_to_cloud.svg Normal file
View File

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="78px" height="58px" viewBox="0 0 78 58" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
<title>Group-cloud</title>
<desc>Created with Sketch.</desc>
<g id="Sign-in-/Message-restyle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Sign-in-open" transform="translate(-1013.000000, -128.000000)">
<g id="Group-cloud" transform="translate(1013.000000, 128.000000)">
<g id="Icon/-group-printer/-connected">
<g id="printer-group">
<g id="Group-Copy" transform="translate(0.000000, 2.122786)" fill="#08073F" fill-rule="nonzero">
<g id="UM3">
<path d="M34.2044094,0.202170085 L0.287432013,0.202170085 C0.164246864,0.202170085 0.0410617159,0.323472136 0.0410617159,0.444774187 L0.0410617159,38.5740521 C0.0410617159,38.6953542 0.164246864,38.8166563 0.287432013,38.8166563 L2.50476467,38.8166563 C2.99750527,38.8166563 3.49024586,38.7357883 3.73661615,38.3314482 L3.98298644,38.088844 C4.31148018,37.8058059 4.76315904,37.6440697 5.21483793,37.6036358 L29.2770035,37.6036358 C29.7697441,37.6036358 30.2624847,37.6845038 30.508855,38.088844 L30.7552253,38.3314482 C31.0837189,38.6144862 31.5353978,38.7762222 31.9870768,38.8166563 L34.2044094,38.8166563 C34.3275946,38.8166563 34.4507797,38.6953542 34.4507797,38.5740521 L34.4507797,0.444774187 C34.4507797,0.323472136 34.3275946,0.202170085 34.2044094,0.202170085 Z M30.6731017,29.4763984 C30.6731017,30.6085509 29.7286825,31.5385333 28.5789543,31.5385333 L5.83076366,31.5385333 C4.68103562,31.5385333 3.73661615,30.6085509 3.73661615,29.4763984 L3.73661615,4.44774187 C3.73661615,4.0434017 4.06510989,3.67949555 4.51678875,3.67949555 L29.9339908,3.67949555 C30.3446081,3.67949555 30.7141636,4.00296768 30.7141636,4.44774187 L30.7141636,29.4763984 L30.6731017,29.4763984 Z" id="Shape"></path>
</g>
</g>
<g id="Group-Copy-4" transform="translate(43.114802, 2.122786)" fill="#08073F" fill-rule="nonzero">
<g id="UM3">
<path d="M34.2044094,0.202170085 L0.287432013,0.202170085 C0.164246864,0.202170085 0.0410617159,0.323472136 0.0410617159,0.444774187 L0.0410617159,38.5740521 C0.0410617159,38.6953542 0.164246864,38.8166563 0.287432013,38.8166563 L2.50476467,38.8166563 C2.99750527,38.8166563 3.49024586,38.7357883 3.73661615,38.3314482 L3.98298644,38.088844 C4.31148018,37.8058059 4.76315904,37.6440697 5.21483793,37.6036358 L29.2770035,37.6036358 C29.7697441,37.6036358 30.2624847,37.6845038 30.508855,38.088844 L30.7552253,38.3314482 C31.0837189,38.6144862 31.5353978,38.7762222 31.9870768,38.8166563 L34.2044094,38.8166563 C34.3275946,38.8166563 34.4507797,38.6953542 34.4507797,38.5740521 L34.4507797,0.444774187 C34.4507797,0.323472136 34.3275946,0.202170085 34.2044094,0.202170085 Z M30.6731017,29.4763984 C30.6731017,30.6085509 29.7286825,31.5385333 28.5789543,31.5385333 L5.83076366,31.5385333 C4.68103562,31.5385333 3.73661615,30.6085509 3.73661615,29.4763984 L3.73661615,4.44774187 C3.73661615,4.0434017 4.06510989,3.67949555 4.51678875,3.67949555 L29.9339908,3.67949555 C30.3446081,3.67949555 30.7141636,4.00296768 30.7141636,4.44774187 L30.7141636,29.4763984 L30.6731017,29.4763984 Z" id="Shape"></path>
</g>
</g>
<g id="Group-Copy-2" transform="translate(19.401661, 0.000000)">
<rect id="Rectangle" fill="#FFFFFF" x="4.31148018" y="0" width="30.1803611" height="36.0873602"></rect>
<g id="UM3" fill="#08073F" fill-rule="nonzero">
<path d="M38.4799606,0.227441345 L0.323361012,0.227441345 C0.184777722,0.227441345 0.0461944303,0.363906153 0.0461944303,0.50037096 L0.0461944303,43.3958088 C0.0461944303,43.5322734 0.184777722,43.6687383 0.323361012,43.6687383 L2.81786025,43.6687383 C3.37219342,43.6687383 3.92652659,43.5777618 4.20369316,43.122879 L4.48085976,42.8499495 C4.8504152,42.5315316 5.35855393,42.3495785 5.86669267,42.3040902 L32.936629,42.3040902 C33.4909621,42.3040902 34.0452952,42.3950669 34.3224619,42.8499495 L34.5996285,43.122879 C34.9691838,43.4412969 35.4773225,43.62325 35.9854612,43.6687383 L38.4799606,43.6687383 C38.6185438,43.6687383 38.7571272,43.5322734 38.7571272,43.3958088 L38.7571272,0.50037096 C38.7571272,0.363906153 38.6185438,0.227441345 38.4799606,0.227441345 Z M34.5072395,33.1609482 C34.5072395,34.4346197 33.4447677,35.4808499 32.1513237,35.4808499 L6.55960911,35.4808499 C5.26616507,35.4808499 4.20369316,34.4346197 4.20369316,33.1609482 L4.20369316,5.0037096 C4.20369316,4.54882691 4.57324863,4.13943248 5.08138736,4.13943248 L33.6757398,4.13943248 C34.1376842,4.13943248 34.5534339,4.50333865 34.5534339,5.0037096 L34.5534339,33.1609482 L34.5072395,33.1609482 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
<g id="Group" transform="translate(40.578299, 25.035294)">
<ellipse id="Oval-Copy" stroke="#FFFFFF" stroke-width="3.5636363" fill="#3282FF" cx="15.6684507" cy="15.5040369" rx="15.5251417" ry="15.3630911"></ellipse>
<path d="M22.3562041,13.3374471 C22.1651254,11.6632641 20.7320354,10.3830065 19.0123274,10.3830065 C18.5346308,10.3830065 18.1524734,10.4814879 17.7703161,10.6784506 C16.9104621,9.29971165 15.3818327,8.41337947 13.7576641,8.41337947 C11.0825627,8.41337947 8.98069738,10.5799693 8.98069738,13.3374471 C8.98069738,13.3374471 8.98069738,13.3374471 8.98069738,13.4359285 C7.3565287,13.6328912 6.11451736,15.1101115 6.11451736,16.7842945 C6.11451736,18.6554402 7.64314671,20.2311419 9.45839405,20.2311419 C10.8914841,20.2311419 20.1587994,20.2311419 21.8785074,20.2311419 C23.6937548,20.2311419 25.2223841,18.6554402 25.2223841,16.7842945 C25.2223841,15.0116302 23.9803728,13.6328912 22.3562041,13.3374471 Z" id="Path" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

76
resources/themes/cura-light/images/avatar_no_user.svg
View File

@ -1,76 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="500"
height="500"
viewBox="0 0 132.29167 132.29167"
version="1.1"
id="svg8"
inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
sodipodi:docname="avatar_no_user.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="1"
inkscape:pageshadow="2"
inkscape:zoom="0.98994949"
inkscape:cx="264.32988"
inkscape:cy="275.53798"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:pagecheckerboard="true"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="1920"
inkscape:window-height="1137"
inkscape:window-x="2872"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-164.70834)">
<g
id="g819"
transform="matrix(2.4332992,0,0,2.4332992,27.213046,191.79972)"
style="fill:#afafaf;fill-opacity:1">
<path
id="path815"
d="m 16,15.7 c 3.6,0 6.4,-3.5 6.4,-7.8 C 22.4,3.6 21.5,0 16,0 10.5,0 9.6,3.5 9.6,7.8 c 0,4.4 2.8,7.9 6.4,7.9 z"
inkscape:connector-curvature="0"
style="fill:#afafaf;fill-opacity:1" />
<path
id="path817"
d="m 28.2,27.3 c -0.1,-7.5 -1.1,-9.7 -8.6,-11 -0.9,0.9 -2.2,1.4 -3.5,1.3 -1.3,0.1 -2.6,-0.4 -3.5,-1.3 C 5,17.6 4,19.7 3.8,27 c 0,0.2 0,0.4 0,0.6 v 0.8 c 0,0 1.8,3.7 12.2,3.7 10.4,0 12.2,-3.6 12.2,-3.6 v -0.6 c 0,-0.3 -0.1,-0.4 0,-0.6 z"
inkscape:connector-curvature="0"
style="fill:#afafaf;fill-opacity:1" />
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

2
resources/themes/cura-light/theme.json
View File

@ -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],