Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-22 11:13:27 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions2

Path towards pixel perfection

Browse source
This commit is contained in:
Zach Fox 2018-01-18 17:05:36 -08:00
parent 61a5750b09
commit c6429f4f33
4 changed files with 79 additions and 29 deletions
interface/resources/qml
controls-uit
TextField.qml
hifi/commerce/wallet/sendMoney
ConnectionItem.qmlSendMoney.qml
scripts/system/commerce
wallet.js

22
interface/resources/qml/controls-uit/TextField.qml
View file

@ -24,10 +24,13 @@ TextField {
property bool isSearchField: false
property string label: ""
property real controlHeight: height + (textFieldLabel.visible ? textFieldLabel.height + 1 : 0)
property bool hasDefocusedBorder: false;
property bool hasRoundedBorder: false
property int roundedBorderRadius: 4
property bool error: false;
property bool hasClearButton: false;
property string leftPlaceholderGlyph: "";
property string leftPermanentGlyph: "";
property string centerPlaceholderGlyph: "";
placeholderText: textField.placeholderText
@ -101,12 +104,12 @@ TextField {
}
}
border.color: textField.error ? hifi.colors.redHighlight :
(textField.activeFocus ? hifi.colors.primaryHighlight : (isFaintGrayColorScheme ? hifi.colors.lightGrayText : hifi.colors.lightGray))
(textField.activeFocus ? hifi.colors.primaryHighlight : (hasDefocusedBorder ? (isFaintGrayColorScheme ? hifi.colors.lightGrayText : hifi.colors.lightGray) : color))
border.width: textField.activeFocus || hasRoundedBorder || textField.error ? 1 : 0
radius: isSearchField ? textField.height / 2 : (hasRoundedBorder ? 4 : 0)
radius: isSearchField ? textField.height / 2 : (hasRoundedBorder ? roundedBorderRadius : 0)
HiFiGlyphs {
text: textField.leftPlaceholderGlyph;
text: textField.leftPermanentGlyph;
color: textColor;
size: hifi.fontSizes.textFieldSearchIcon;
anchors.left: parent.left;
@ -115,6 +118,15 @@ TextField {
visible: text;
}
HiFiGlyphs {
text: textField.centerPlaceholderGlyph;
color: textColor;
size: parent.height;
anchors.horizontalCenter: parent.horizontalCenter;
anchors.verticalCenter: parent.verticalCenter;
visible: text && !textField.focus && textField.text === "";
}
HiFiGlyphs {
text: hifi.glyphs.search
color: textColor
@ -145,7 +157,7 @@ TextField {
placeholderTextColor: isFaintGrayColorScheme ? hifi.colors.lightGrayText : hifi.colors.lightGray
selectedTextColor: hifi.colors.black
selectionColor: hifi.colors.primaryHighlight
padding.left: ((isSearchField || textField.leftPlaceholderGlyph !== "") ? textField.height - 2 : 0) + hifi.dimensions.textPadding
padding.left: hasRoundedBorder ? textField.height / 2 : ((isSearchField || textField.leftPermanentGlyph !== "") ? textField.height - 2 : 0) + hifi.dimensions.textPadding
padding.right: (hasClearButton ? textField.height - 2 : 0) + hifi.dimensions.textPadding
}

18
interface/resources/qml/hifi/commerce/wallet/sendMoney/ConnectionItem.qml
View file

@ -29,13 +29,13 @@ Item {
property string userName;
property string profilePicUrl;
height: 65;
height: 75;
width: parent.width;
Rectangle {
id: mainContainer;
// Style
color: root.isSelected ? hifi.colors.faintGray : hifi.colors.white;
color: root.isSelected ? hifi.colors.faintGray80 : hifi.colors.white;
// Size
anchors.left: parent.left;
anchors.right: parent.right;
@ -49,7 +49,7 @@ Item {
anchors.verticalCenter: parent.verticalCenter;
anchors.left: parent.left;
anchors.leftMargin: 36;
height: root.height - 15;
height: 50;
width: visible ? height : 0;
clip: true;
Image {
@ -83,15 +83,15 @@ Item {
RalewaySemiBold {
id: userName;
anchors.left: avatarImage.right;
anchors.leftMargin: 16;
anchors.leftMargin: 12;
anchors.top: parent.top;
anchors.bottom: parent.bottom;
anchors.right: chooseButton.visible ? chooseButton.left : parent.right;
anchors.rightMargin: chooseButton.visible ? 10 : 0;
// Text size
size: 20;
size: 18;
// Style
color: hifi.colors.baseGray;
color: hifi.colors.blueAccent;
text: root.userName;
elide: Text.ElideRight;
// Alignment
@ -107,9 +107,9 @@ Item {
colorScheme: hifi.colorSchemes.dark;
anchors.verticalCenter: parent.verticalCenter;
anchors.right: parent.right;
anchors.rightMargin: 24;
height: root.height - 20;
width: 110;
anchors.rightMargin: 28;
height: 35;
width: 100;
text: "CHOOSE";
onClicked: {
var msg = { method: 'chooseConnection', userName: root.userName, profilePicUrl: root.profilePicUrl };

52
interface/resources/qml/hifi/commerce/wallet/sendMoney/SendMoney.qml
View file

@ -105,7 +105,8 @@ Item {
// Send Money Home BEGIN
Item {
id: sendMoneyHome;
visible: root.currentActiveView === "sendMoneyHome";
z: 996;
visible: root.currentActiveView === "sendMoneyHome" || root.currentActiveView === "chooseRecipientConnection" || root.currentActiveView === "chooseRecipientNearby";
anchors.fill: parent;
anchors.topMargin: root.parentAppTitleBarHeight;
anchors.bottomMargin: root.parentAppNavBarHeight;
@ -299,9 +300,18 @@ Item {
// Choose Recipient Connection BEGIN
Rectangle {
id: chooseRecipientConnection;
z: 997;
visible: root.currentActiveView === "chooseRecipientConnection";
anchors.fill: parent;
color: "#AAAAAA";
color: "#80000000";
// This object is always used in a popup or full-screen Wallet section.
// This MouseArea is used to prevent a user from being
// able to click on a button/mouseArea underneath the popup/section.
MouseArea {
anchors.fill: parent;
propagateComposedEvents: false;
}
ListModel {
id: connectionsModel;
@ -314,6 +324,8 @@ Item {
anchors.centerIn: parent;
width: parent.width - 30;
height: parent.height - 30;
color: "#FFFFFF";
radius: 8;
RalewaySemiBold {
id: chooseRecipientText_connections;
@ -322,11 +334,11 @@ Item {
anchors.top: parent.top;
anchors.topMargin: 26;
anchors.left: parent.left;
anchors.leftMargin: 20;
anchors.leftMargin: 36;
width: paintedWidth;
height: 30;
// Text size
size: 22;
size: 18;
// Style
color: hifi.colors.baseGray;
}
@ -334,6 +346,7 @@ Item {
HiFiGlyphs {
id: closeGlyphButton_connections;
text: hifi.glyphs.close;
color: hifi.colors.lightGrayText;
size: 26;
anchors.top: parent.top;
anchors.topMargin: 10;
@ -363,7 +376,7 @@ Item {
height: 40;
// Anchors
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.leftMargin: 36;
anchors.right: parent.right;
anchors.rightMargin: 16;
anchors.top: chooseRecipientText_connections.bottom;
@ -374,8 +387,9 @@ Item {
colorScheme: hifi.colorSchemes.faintGray;
hasClearButton: true;
hasRoundedBorder: true;
roundedBorderRadius: filterBar.height/2;
anchors.fill: parent;
placeholderText: "filter recipients";
centerPlaceholderGlyph: hifi.glyphs.search;
onTextChanged: {
buildFilteredConnectionsModel();
@ -461,17 +475,28 @@ Item {
// Choose Recipient Nearby BEGIN
Rectangle {
id: chooseRecipientNearby;
z: 997;
color: "#80000000";
property string selectedRecipient;
visible: root.currentActiveView === "chooseRecipientNearby";
anchors.fill: parent;
color: "#AAAAAA";
// This object is always used in a popup or full-screen Wallet section.
// This MouseArea is used to prevent a user from being
// able to click on a button/mouseArea underneath the popup/section.
MouseArea {
anchors.fill: parent;
propagateComposedEvents: false;
}
Rectangle {
anchors.centerIn: parent;
width: parent.width - 30;
height: parent.height - 30;
color: "#FFFFFF";
radius: 8;
RalewaySemiBold {
text: "Choose Recipient:";
@ -483,7 +508,7 @@ Item {
width: paintedWidth;
height: 30;
// Text size
size: 22;
size: 18;
// Style
color: hifi.colors.baseGray;
}
@ -491,6 +516,7 @@ Item {
HiFiGlyphs {
id: closeGlyphButton_nearby;
text: hifi.glyphs.close;
color: hifi.colors.lightGrayText;
size: 26;
anchors.top: parent.top;
anchors.topMargin: 10;
@ -676,9 +702,9 @@ Item {
// Choose Recipient Nearby END
// Send Money Screen BEGIN
Rectangle {
Item {
id: sendMoneyStep;
z: 997;
z: 996;
property string referrer; // either "connections" or "nearby"
property string selectedRecipientNodeID;
@ -688,12 +714,12 @@ Item {
visible: root.currentActiveView === "sendMoneyStep";
anchors.fill: parent;
color: "#AAAAAA";
Rectangle {
anchors.centerIn: parent;
width: parent.width - 30;
height: parent.height - 30;
color: "#AAAAAA";
RalewaySemiBold {
id: sendMoneyText_sendMoneyStep;
@ -806,7 +832,7 @@ Item {
anchors.right: parent.right;
height: 50;
// Style
leftPlaceholderGlyph: hifi.glyphs.hfc;
leftPermanentGlyph: hifi.glyphs.hfc;
activeFocusOnPress: true;
activeFocusOnTab: true;
@ -1049,6 +1075,7 @@ Item {
HiFiGlyphs {
id: closeGlyphButton_paymentSuccess;
text: hifi.glyphs.close;
color: lightGrayText;
size: 26;
anchors.top: parent.top;
anchors.topMargin: 10;
@ -1234,6 +1261,7 @@ Item {
HiFiGlyphs {
id: closeGlyphButton_paymentFailure;
text: hifi.glyphs.close;
color: hifi.colors.lightGrayText;
size: 26;
anchors.top: parent.top;
anchors.topMargin: 10;

16
scripts/system/commerce/wallet.js
View file

@ -591,10 +591,16 @@
getConnectionData(false);
break;
case 'enable_ChooseRecipientNearbyMode':
Script.update.connect(updateOverlays);
if (!isUpdateOverlaysWired) {
Script.update.connect(updateOverlays);
isUpdateOverlaysWired = true;
}
break;
case 'disable_ChooseRecipientNearbyMode':
Script.update.disconnect(updateOverlays);
if (isUpdateOverlaysWired) {
Script.update.disconnect(updateOverlays);
isUpdateOverlaysWired = false;
}
removeOverlays();
break;
default:
@ -675,14 +681,18 @@
}
}
var isWired = false;
var isUpdateOverlaysWired = false;
function off() {
if (isWired) { // It is not ok to disconnect these twice, hence guard.
Users.usernameFromIDReply.disconnect(usernameFromIDReply);
Script.update.disconnect(updateOverlays);
Controller.mousePressEvent.disconnect(handleMouseEvent);
Controller.mouseMoveEvent.disconnect(handleMouseMoveEvent);
isWired = false;
}
if (isUpdateOverlaysWired) {
Script.update.disconnect(updateOverlays);
isUpdateOverlaysWired = false;
}
triggerMapping.disable(); // It's ok if we disable twice.
triggerPressMapping.disable(); // see above
removeOverlays();