mirror of
https://github.com/overte-org/overte.git
synced 2025-04-20 12:04:18 +02:00
adding button font modularity/using cairo
This commit is contained in:
Wayne Chen
parent
2a0a099397
commit
56656a9079
4 changed files with 40 additions and 322 deletions
|
|
@ -16,6 +16,8 @@ import QtQuick.Controls.Styles 1.4 as OriginalStyles
|
|||
import controlsUit 1.0 as HifiControlsUit
|
||||
import stylesUit 1.0 as HifiStylesUit
|
||||
|
||||
import TabletScriptingInterface 1.0
|
||||
|
||||
Item {
|
||||
id: linkAccountBody
|
||||
clip: true
|
||||
|
|
@ -71,7 +73,7 @@ Item {
|
|||
function toggleLoggingIn(loggedIn) {
|
||||
// For the process of logging in.
|
||||
if (linkAccountBody.withSteam) {
|
||||
|
||||
loginContainer.visible = false;
|
||||
}
|
||||
else {
|
||||
|
||||
|
|
@ -85,11 +87,15 @@ Item {
|
|||
usernameField.visible = !isLogIn;
|
||||
cantAccessContainer.visible = isLogIn;
|
||||
if (isLogIn) {
|
||||
loginButtonAtSignIn.text = "Log In";
|
||||
loginButtonAtSignIn.color = hifi.buttons.black;
|
||||
emailField.placeholderText = "Username or Email";
|
||||
emailField.anchors.top = loginContainer.top;
|
||||
emailField.anchors.topMargin = !root.isTablet ? 0.2 * root.pane.height : 0.24 * root.pane.height;
|
||||
cantAccessContainer.anchors.topMargin = !root.isTablet ? 3.5 * hifi.dimensions.contentSpacing.y : hifi.dimensions.contentSpacing.y;
|
||||
} else {
|
||||
loginButtonAtSignIn.text = "Sign Up";
|
||||
loginButtonAtSignIn.color = hifi.buttons.blue;
|
||||
emailField.placeholderText = "Email";
|
||||
emailField.anchors.top = usernameField.bottom;
|
||||
emailField.anchors.topMargin = 1.5 * hifi.dimensions.contentSpacing.y;
|
||||
|
|
@ -124,7 +130,7 @@ Item {
|
|||
id: topOpaqueRect
|
||||
height: parent.height
|
||||
width: parent.width
|
||||
opacity: 0.7
|
||||
opacity: 0.9
|
||||
color: "black"
|
||||
visible: false
|
||||
}
|
||||
|
|
@ -156,7 +162,8 @@ Item {
|
|||
|
||||
HifiControlsUit.TextField {
|
||||
id: usernameField
|
||||
width: 0.254 * parent.width
|
||||
width: banner.width
|
||||
font.family: "Cairo"
|
||||
placeholderText: "Username"
|
||||
anchors {
|
||||
top: parent.top
|
||||
|
|
@ -169,7 +176,8 @@ Item {
|
|||
|
||||
HifiControlsUit.TextField {
|
||||
id: emailField
|
||||
width: 0.254 * parent.width
|
||||
width: banner.width
|
||||
font.family: "Cairo"
|
||||
text: Settings.getValue("wallet/savedUsername", "");
|
||||
anchors {
|
||||
top: parent.top
|
||||
|
|
@ -188,7 +196,8 @@ Item {
|
|||
}
|
||||
HifiControlsUit.TextField {
|
||||
id: passwordField
|
||||
width: 0.254 * parent.width
|
||||
width: banner.width
|
||||
font.family: "Cairo"
|
||||
placeholderText: "Password"
|
||||
activeFocusOnPress: true
|
||||
echoMode: passwordFieldMouseArea.showPassword ? TextInput.Normal : TextInput.Password
|
||||
|
|
@ -247,6 +256,7 @@ Item {
|
|||
checked: !Settings.getValue("wallet/autoLogout", false);
|
||||
text: qsTr("Keep Me Logged In")
|
||||
boxSize: 18;
|
||||
labelFontFamily: "Cairo"
|
||||
labelFontSize: 18;
|
||||
color: hifi.colors.white;
|
||||
anchors {
|
||||
|
|
@ -283,8 +293,9 @@ Item {
|
|||
|
||||
lineHeight: 1
|
||||
color: "white"
|
||||
font.family: "Raleway"
|
||||
font.family: "Cairo"
|
||||
font.pixelSize: 24
|
||||
font.capitalization: Font.AllUppercase;
|
||||
font.bold: true
|
||||
lineHeightMode: Text.ProportionalHeight
|
||||
}
|
||||
|
|
@ -302,11 +313,9 @@ Item {
|
|||
width: d.minWidthButton
|
||||
height: d.minHeightButton
|
||||
text: qsTr("Log In")
|
||||
fontFamily: "Cairo"
|
||||
fontSize: signUpButton.fontSize
|
||||
// background: Rectangle {
|
||||
// radius: hifi.buttons.radius
|
||||
//
|
||||
// }
|
||||
fontBold: true
|
||||
anchors {
|
||||
top: cancelContainer.top
|
||||
right: passwordField.right
|
||||
|
|
@ -329,6 +338,7 @@ Item {
|
|||
id: cantAccessText
|
||||
z: 10
|
||||
anchors.centerIn: parent
|
||||
font.family: "Cairo"
|
||||
font.pixelSize: 14
|
||||
|
||||
text: "<a href='https://highfidelity.com/users/password/new'> Can't access your account?</a>"
|
||||
|
|
@ -354,13 +364,13 @@ Item {
|
|||
width: 0.48 * parent.width
|
||||
anchors.centerIn: parent
|
||||
anchors {
|
||||
top: bannerContainer.bottom
|
||||
top: banner.bottom
|
||||
topMargin: 0.1 * parent.height
|
||||
}
|
||||
wrapMode: Text.WordWrap
|
||||
lineHeight: 1
|
||||
color: "white"
|
||||
font.family: "Raleway"
|
||||
font.family: "Cairo"
|
||||
font.pixelSize: 48
|
||||
font.bold: true
|
||||
lineHeightMode: Text.ProportionalHeight
|
||||
|
|
@ -373,7 +383,9 @@ Item {
|
|||
width: d.minWidthButton
|
||||
height: d.minHeightButton
|
||||
color: hifi.buttons.blue
|
||||
fontFamily: "Cairo"
|
||||
fontSize: 21
|
||||
fontBold: true
|
||||
anchors {
|
||||
bottom: parent.bottom
|
||||
bottomMargin: 0.1 * parent.height
|
||||
|
|
@ -398,7 +410,7 @@ Item {
|
|||
id: bottomOpaqueRect
|
||||
height: parent.height
|
||||
width: parent.width
|
||||
opacity: 0.7
|
||||
opacity: 0.9
|
||||
color: "black"
|
||||
}
|
||||
Item {
|
||||
|
|
@ -412,11 +424,9 @@ Item {
|
|||
width: signUpButton.width
|
||||
height: signUpButton.height
|
||||
text: qsTr("Log In")
|
||||
fontFamily: "Cairo"
|
||||
fontSize: signUpButton.fontSize
|
||||
// background: Rectangle {
|
||||
// radius: hifi.buttons.radius
|
||||
//
|
||||
// }
|
||||
fontBold: true
|
||||
anchors {
|
||||
top: parent.top
|
||||
topMargin: 0.245 * parent.height
|
||||
|
|
@ -442,11 +452,6 @@ Item {
|
|||
leftMargin: (parent.width - steamLoginButton.width) / 2
|
||||
}
|
||||
|
||||
enabled: root.hasPermissionToRezThis &&
|
||||
MyAvatar.skeletonModelURL !== root.itemHref &&
|
||||
!root.wornEntityID &&
|
||||
root.valid;
|
||||
|
||||
onHoveredChanged: {
|
||||
if (hovered) {
|
||||
Tablet.playSound(TabletEnums.ButtonHover);
|
||||
|
|
@ -514,16 +519,18 @@ Item {
|
|||
font: steamIconLabel.font;
|
||||
text: steamIconLabel.text;
|
||||
}
|
||||
HifiStylesUit.RalewayBold {
|
||||
Text {
|
||||
id: steamIconLabel;
|
||||
text: "Steam Log In"
|
||||
anchors.verticalCenter: parent.verticalCenter;
|
||||
width: steamIconLabelTextMetrics.width;
|
||||
x: parent.width/2 - steamIconLabelTextMetrics.width/2 + steamIcon.width/2;
|
||||
size: signUpButton.fontSize;
|
||||
font.capitalization: Font.AllUppercase;
|
||||
verticalAlignment: Text.AlignVCenter;
|
||||
horizontalAlignment: Text.AlignHCenter;
|
||||
font.family: "Cairo"
|
||||
font.pixelSize: signUpButton.fontSize;
|
||||
font.bold: true
|
||||
color: enabled ? hifi.buttons.textColor[control.color]
|
||||
: hifi.buttons.disabledTextColor[control.colorScheme]
|
||||
}
|
||||
|
|
@ -546,7 +553,7 @@ Item {
|
|||
|
||||
lineHeight: 1
|
||||
color: "white"
|
||||
font.family: "Raleway"
|
||||
font.family: "Cairo"
|
||||
font.pixelSize: 24
|
||||
font.bold: true
|
||||
lineHeightMode: Text.ProportionalHeight
|
||||
|
|
@ -605,14 +612,11 @@ Item {
|
|||
UserActivityLogger.logAction("encourageLoginDialog", data);
|
||||
Settings.setValue("loginDialogPoppedUp", false);
|
||||
}
|
||||
flavorText.visible = true
|
||||
mainTextContainer.visible = true
|
||||
toggleLoading(false)
|
||||
}
|
||||
onHandleLinkCompleted: {
|
||||
console.log("Link Succeeded")
|
||||
|
||||
bodyLoader.setSource("WelcomeBody.qml", { "welcomeBack" : true })
|
||||
bodyLoader.item.width = root.pane.width
|
||||
bodyLoader.item.height = root.pane.height
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
//
|
||||
// LoggingInDialog.qml
|
||||
//
|
||||
// Created by Wayne Chen
|
||||
// Copyright 2018 High Fidelity, Inc.
|
||||
//
|
||||
// Distributed under the Apache License, Version 2.0.
|
||||
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||
//
|
||||
|
|
@ -1,280 +0,0 @@
|
|||
//
|
||||
// SignUpBody.qml
|
||||
//
|
||||
// Created by Wayne Chen on Oct 18 2018
|
||||
// Copyright 2016 High Fidelity, Inc.
|
||||
//
|
||||
// Distributed under the Apache License, Version 2.0.
|
||||
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||
//
|
||||
|
||||
import Hifi 1.0
|
||||
import QtQuick 2.7
|
||||
import QtQuick.Controls 1.4
|
||||
|
||||
import controlsUit 1.0
|
||||
import stylesUit 1.0
|
||||
|
||||
Item {
|
||||
id: signupBody
|
||||
clip: true
|
||||
height: root.pane.height
|
||||
width: root.pane.width
|
||||
|
||||
function signup() {
|
||||
mainTextContainer.visible = false
|
||||
toggleLoading(true)
|
||||
loginDialog.signup(emailField.text, usernameField.text, passwordField.text)
|
||||
}
|
||||
|
||||
property bool keyboardEnabled: false
|
||||
property bool keyboardRaised: false
|
||||
property bool punctuationMode: false
|
||||
|
||||
onKeyboardRaisedChanged: d.resize();
|
||||
|
||||
QtObject {
|
||||
id: d
|
||||
readonly property int minWidth: 480
|
||||
readonly property int maxWidth: 1280
|
||||
readonly property int minHeight: 120
|
||||
readonly property int maxHeight: 720
|
||||
|
||||
function resize() {
|
||||
var targetWidth = Math.max(titleWidth, form.contentWidth);
|
||||
var targetHeight = hifi.dimensions.contentSpacing.y + mainTextContainer.height +
|
||||
4 * hifi.dimensions.contentSpacing.y + form.height;
|
||||
|
||||
parent.width = root.width = Math.max(d.minWidth, Math.min(d.maxWidth, targetWidth));
|
||||
parent.height = root.height = Math.max(d.minHeight, Math.min(d.maxHeight, targetHeight))
|
||||
+ (keyboardEnabled && keyboardRaised ? (200 + 2 * hifi.dimensions.contentSpacing.y) : 0);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleLoading(isLoading) {
|
||||
linkAccountSpinner.visible = isLoading
|
||||
form.visible = !isLoading
|
||||
|
||||
leftButton.visible = !isLoading
|
||||
buttons.visible = !isLoading
|
||||
}
|
||||
|
||||
BusyIndicator {
|
||||
id: linkAccountSpinner
|
||||
|
||||
anchors {
|
||||
top: parent.top
|
||||
horizontalCenter: parent.horizontalCenter
|
||||
topMargin: hifi.dimensions.contentSpacing.y
|
||||
}
|
||||
|
||||
visible: false
|
||||
running: true
|
||||
|
||||
width: 48
|
||||
height: 48
|
||||
}
|
||||
|
||||
ShortcutText {
|
||||
id: mainTextContainer
|
||||
anchors {
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
margins: 0
|
||||
topMargin: hifi.dimensions.contentSpacing.y
|
||||
}
|
||||
|
||||
visible: false
|
||||
|
||||
text: qsTr("There was an unknown error while creating your account.")
|
||||
wrapMode: Text.WordWrap
|
||||
color: hifi.colors.redAccent
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
}
|
||||
|
||||
Column {
|
||||
id: form
|
||||
width: parent.width
|
||||
onHeightChanged: d.resize(); onWidthChanged: d.resize();
|
||||
|
||||
anchors {
|
||||
top: mainTextContainer.bottom
|
||||
topMargin: 2 * hifi.dimensions.contentSpacing.y
|
||||
}
|
||||
spacing: 2 * hifi.dimensions.contentSpacing.y
|
||||
|
||||
TextField {
|
||||
id: emailField
|
||||
width: parent.width
|
||||
label: "Email"
|
||||
activeFocusOnPress: true
|
||||
onFocusChanged: {
|
||||
root.text = "";
|
||||
}
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: usernameField
|
||||
width: parent.width
|
||||
label: "Username"
|
||||
activeFocusOnPress: true
|
||||
|
||||
ShortcutText {
|
||||
anchors {
|
||||
verticalCenter: parent.textFieldLabel.verticalCenter
|
||||
left: parent.textFieldLabel.right
|
||||
leftMargin: 10
|
||||
}
|
||||
|
||||
text: qsTr("No spaces / special chars.")
|
||||
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
|
||||
color: hifi.colors.blueAccent
|
||||
onFocusChanged: {
|
||||
root.text = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TextField {
|
||||
id: passwordField
|
||||
width: parent.width
|
||||
label: "Password"
|
||||
echoMode: TextInput.Password
|
||||
activeFocusOnPress: true
|
||||
|
||||
ShortcutText {
|
||||
anchors {
|
||||
verticalCenter: parent.textFieldLabel.verticalCenter
|
||||
left: parent.textFieldLabel.right
|
||||
leftMargin: 10
|
||||
}
|
||||
|
||||
text: qsTr("At least 6 characters")
|
||||
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
|
||||
color: hifi.colors.blueAccent
|
||||
}
|
||||
|
||||
onFocusChanged: {
|
||||
root.text = "";
|
||||
root.isPassword = focus
|
||||
}
|
||||
|
||||
Keys.onReturnPressed: signupBody.signup()
|
||||
}
|
||||
|
||||
Row {
|
||||
id: leftButton
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
spacing: hifi.dimensions.contentSpacing.x
|
||||
onHeightChanged: d.resize(); onWidthChanged: d.resize();
|
||||
|
||||
Button {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
text: qsTr("Existing User")
|
||||
|
||||
onClicked: {
|
||||
bodyLoader.setSource("LinkAccountBody.qml")
|
||||
if (!root.isTablet) {
|
||||
bodyLoader.item.width = root.pane.width
|
||||
bodyLoader.item.height = root.pane.height
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
id: buttons
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
spacing: hifi.dimensions.contentSpacing.x
|
||||
onHeightChanged: d.resize(); onWidthChanged: d.resize();
|
||||
|
||||
Button {
|
||||
id: linkAccountButton
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: 200
|
||||
|
||||
text: qsTr("Sign Up")
|
||||
color: hifi.buttons.blue
|
||||
|
||||
onClicked: signupBody.signup()
|
||||
}
|
||||
|
||||
Button {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
text: qsTr("Cancel")
|
||||
|
||||
onClicked: root.tryDestroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
root.title = qsTr("Create an Account")
|
||||
root.iconText = "<"
|
||||
//dont rise local keyboard
|
||||
keyboardEnabled = !root.isTablet && HMD.active;
|
||||
//but rise Tablet's one instead for Tablet interface
|
||||
if (root.isTablet) {
|
||||
root.keyboardEnabled = HMD.active;
|
||||
root.keyboardRaised = Qt.binding( function() { return keyboardRaised; })
|
||||
}
|
||||
d.resize();
|
||||
|
||||
emailField.forceActiveFocus();
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: loginDialog
|
||||
onHandleSignupCompleted: {
|
||||
console.log("Sign Up Succeeded");
|
||||
|
||||
// now that we have an account, login with that username and password
|
||||
loginDialog.login(usernameField.text, passwordField.text)
|
||||
}
|
||||
onHandleSignupFailed: {
|
||||
console.log("Sign Up Failed")
|
||||
toggleLoading(false)
|
||||
|
||||
mainTextContainer.text = errorString
|
||||
mainTextContainer.visible = true
|
||||
|
||||
d.resize();
|
||||
}
|
||||
onHandleLoginCompleted: {
|
||||
bodyLoader.setSource("WelcomeBody.qml", { "welcomeBack": false })
|
||||
bodyLoader.item.width = root.pane.width
|
||||
bodyLoader.item.height = root.pane.height
|
||||
}
|
||||
onHandleLoginFailed: {
|
||||
// we failed to login, show the LoginDialog so the user will try again
|
||||
bodyLoader.setSource("LinkAccountBody.qml", { "failAfterSignUp": true })
|
||||
if (!root.isTablet) {
|
||||
bodyLoader.item.width = root.pane.width
|
||||
bodyLoader.item.height = root.pane.height
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Keys.onPressed: {
|
||||
if (!visible) {
|
||||
return
|
||||
}
|
||||
|
||||
switch (event.key) {
|
||||
case Qt.Key_Enter:
|
||||
case Qt.Key_Return:
|
||||
event.accepted = true
|
||||
signupBody.signup()
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -19,7 +19,9 @@ Original.Button {
|
|||
|
||||
property int color: 0
|
||||
property int colorScheme: hifi.colorSchemes.light
|
||||
property string fontFamily: "Raleway"
|
||||
property int fontSize: hifi.fontSizes.buttonLabel
|
||||
property bool fontBold: true
|
||||
property int radius: hifi.buttons.radius
|
||||
property alias implicitTextWidth: buttonText.implicitWidth
|
||||
property string buttonGlyph: "";
|
||||
|
|
@ -35,13 +37,13 @@ Original.Button {
|
|||
Tablet.playSound(TabletEnums.ButtonHover);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onFocusChanged: {
|
||||
if (focus) {
|
||||
Tablet.playSound(TabletEnums.ButtonHover);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onClicked: {
|
||||
Tablet.playSound(TabletEnums.ButtonClick);
|
||||
}
|
||||
|
|
@ -106,17 +108,18 @@ Original.Button {
|
|||
horizontalAlignment: Text.AlignHCenter;
|
||||
verticalAlignment: Text.AlignVCenter;
|
||||
}
|
||||
RalewayBold {
|
||||
Text {
|
||||
id: buttonText;
|
||||
anchors.centerIn: parent;
|
||||
font.capitalization: control.fontCapitalization
|
||||
color: enabled ? hifi.buttons.textColor[control.color]
|
||||
: hifi.buttons.disabledTextColor[control.colorScheme]
|
||||
size: control.fontSize
|
||||
font.family: control.fontFamily
|
||||
font.pixelSize: control.fontSize
|
||||
font.bold: control.fontBold
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: control.text
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue