Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-08 16:58:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -24,10 +24,13 @@ TextField {
property bool isSearchField: false property bool isSearchField: false
property string label: "" property string label: ""
property real controlHeight: height + (textFieldLabel.visible ? textFieldLabel.height + 1 : 0) property real controlHeight: height + (textFieldLabel.visible ? textFieldLabel.height + 1 : 0)
property bool hasDefocusedBorder: false;
property bool hasRoundedBorder: false property bool hasRoundedBorder: false
property int roundedBorderRadius: 4
property bool error: false; property bool error: false;
property bool hasClearButton: false; property bool hasClearButton: false;
property string leftPlaceholderGlyph: ""; property string leftPermanentGlyph: "";
property string centerPlaceholderGlyph: "";
placeholderText: textField.placeholderText placeholderText: textField.placeholderText
@ -101,12 +104,12 @@ TextField {
} }
} }
border.color: textField.error ? hifi.colors.redHighlight : 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 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 { HiFiGlyphs {
text: textField.leftPlaceholderGlyph; text: textField.leftPermanentGlyph;
color: textColor; color: textColor;
size: hifi.fontSizes.textFieldSearchIcon; size: hifi.fontSizes.textFieldSearchIcon;
anchors.left: parent.left; anchors.left: parent.left;
@ -115,6 +118,15 @@ TextField {
visible: text; 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 { HiFiGlyphs {
text: hifi.glyphs.search text: hifi.glyphs.search
color: textColor color: textColor
@ -145,7 +157,7 @@ TextField {
placeholderTextColor: isFaintGrayColorScheme ? hifi.colors.lightGrayText : hifi.colors.lightGray placeholderTextColor: isFaintGrayColorScheme ? hifi.colors.lightGrayText : hifi.colors.lightGray
selectedTextColor: hifi.colors.black selectedTextColor: hifi.colors.black
selectionColor: hifi.colors.primaryHighlight 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 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 userName;
property string profilePicUrl; property string profilePicUrl;
height: 65; height: 75;
width: parent.width; width: parent.width;
Rectangle { Rectangle {
id: mainContainer; id: mainContainer;
// Style // Style
color: root.isSelected ? hifi.colors.faintGray : hifi.colors.white; color: root.isSelected ? hifi.colors.faintGray80 : hifi.colors.white;
// Size // Size
anchors.left: parent.left; anchors.left: parent.left;
anchors.right: parent.right; anchors.right: parent.right;
@ -49,7 +49,7 @@ Item {
anchors.verticalCenter: parent.verticalCenter; anchors.verticalCenter: parent.verticalCenter;
anchors.left: parent.left; anchors.left: parent.left;
anchors.leftMargin: 36; anchors.leftMargin: 36;
height: root.height - 15; height: 50;
width: visible ? height : 0; width: visible ? height : 0;
clip: true; clip: true;
Image { Image {
@ -83,15 +83,15 @@ Item {
RalewaySemiBold { RalewaySemiBold {
id: userName; id: userName;
anchors.left: avatarImage.right; anchors.left: avatarImage.right;
anchors.leftMargin: 16; anchors.leftMargin: 12;
anchors.top: parent.top; anchors.top: parent.top;
anchors.bottom: parent.bottom; anchors.bottom: parent.bottom;
anchors.right: chooseButton.visible ? chooseButton.left : parent.right; anchors.right: chooseButton.visible ? chooseButton.left : parent.right;
anchors.rightMargin: chooseButton.visible ? 10 : 0; anchors.rightMargin: chooseButton.visible ? 10 : 0;
// Text size // Text size
size: 20; size: 18;
// Style // Style
color: hifi.colors.baseGray; color: hifi.colors.blueAccent;
text: root.userName; text: root.userName;
elide: Text.ElideRight; elide: Text.ElideRight;
// Alignment // Alignment
@ -107,9 +107,9 @@ Item {
colorScheme: hifi.colorSchemes.dark; colorScheme: hifi.colorSchemes.dark;
anchors.verticalCenter: parent.verticalCenter; anchors.verticalCenter: parent.verticalCenter;
anchors.right: parent.right; anchors.right: parent.right;
anchors.rightMargin: 24; anchors.rightMargin: 28;
height: root.height - 20; height: 35;
width: 110; width: 100;
text: "CHOOSE"; text: "CHOOSE";
onClicked: { onClicked: {
var msg = { method: 'chooseConnection', userName: root.userName, profilePicUrl: root.profilePicUrl }; 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 // Send Money Home BEGIN
Item { Item {
id: sendMoneyHome; id: sendMoneyHome;
visible: root.currentActiveView === "sendMoneyHome"; z: 996;
visible: root.currentActiveView === "sendMoneyHome" || root.currentActiveView === "chooseRecipientConnection" || root.currentActiveView === "chooseRecipientNearby";
anchors.fill: parent; anchors.fill: parent;
anchors.topMargin: root.parentAppTitleBarHeight; anchors.topMargin: root.parentAppTitleBarHeight;
anchors.bottomMargin: root.parentAppNavBarHeight; anchors.bottomMargin: root.parentAppNavBarHeight;
@ -299,9 +300,18 @@ Item {
// Choose Recipient Connection BEGIN // Choose Recipient Connection BEGIN
Rectangle { Rectangle {
id: chooseRecipientConnection; id: chooseRecipientConnection;
z: 997;
visible: root.currentActiveView === "chooseRecipientConnection"; visible: root.currentActiveView === "chooseRecipientConnection";
anchors.fill: parent; 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 { ListModel {
id: connectionsModel; id: connectionsModel;
@ -314,6 +324,8 @@ Item {
anchors.centerIn: parent; anchors.centerIn: parent;
width: parent.width - 30; width: parent.width - 30;
height: parent.height - 30; height: parent.height - 30;
color: "#FFFFFF";
radius: 8;
RalewaySemiBold { RalewaySemiBold {
id: chooseRecipientText_connections; id: chooseRecipientText_connections;
@ -322,11 +334,11 @@ Item {
anchors.top: parent.top; anchors.top: parent.top;
anchors.topMargin: 26; anchors.topMargin: 26;
anchors.left: parent.left; anchors.left: parent.left;
anchors.leftMargin: 20; anchors.leftMargin: 36;
width: paintedWidth; width: paintedWidth;
height: 30; height: 30;
// Text size // Text size
size: 22; size: 18;
// Style // Style
color: hifi.colors.baseGray; color: hifi.colors.baseGray;
} }
@ -334,6 +346,7 @@ Item {
HiFiGlyphs { HiFiGlyphs {
id: closeGlyphButton_connections; id: closeGlyphButton_connections;
text: hifi.glyphs.close; text: hifi.glyphs.close;
color: hifi.colors.lightGrayText;
size: 26; size: 26;
anchors.top: parent.top; anchors.top: parent.top;
anchors.topMargin: 10; anchors.topMargin: 10;
@ -363,7 +376,7 @@ Item {
height: 40; height: 40;
// Anchors // Anchors
anchors.left: parent.left; anchors.left: parent.left;
anchors.leftMargin: 16; anchors.leftMargin: 36;
anchors.right: parent.right; anchors.right: parent.right;
anchors.rightMargin: 16; anchors.rightMargin: 16;
anchors.top: chooseRecipientText_connections.bottom; anchors.top: chooseRecipientText_connections.bottom;
@ -374,8 +387,9 @@ Item {
colorScheme: hifi.colorSchemes.faintGray; colorScheme: hifi.colorSchemes.faintGray;
hasClearButton: true; hasClearButton: true;
hasRoundedBorder: true; hasRoundedBorder: true;
roundedBorderRadius: filterBar.height/2;
anchors.fill: parent; anchors.fill: parent;
placeholderText: "filter recipients"; centerPlaceholderGlyph: hifi.glyphs.search;
onTextChanged: { onTextChanged: {
buildFilteredConnectionsModel(); buildFilteredConnectionsModel();
@ -461,17 +475,28 @@ Item {
// Choose Recipient Nearby BEGIN // Choose Recipient Nearby BEGIN
Rectangle { Rectangle {
id: chooseRecipientNearby; id: chooseRecipientNearby;
z: 997;
color: "#80000000";
property string selectedRecipient; property string selectedRecipient;
visible: root.currentActiveView === "chooseRecipientNearby"; visible: root.currentActiveView === "chooseRecipientNearby";
anchors.fill: parent; 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 { Rectangle {
anchors.centerIn: parent; anchors.centerIn: parent;
width: parent.width - 30; width: parent.width - 30;
height: parent.height - 30; height: parent.height - 30;
color: "#FFFFFF";
radius: 8;
RalewaySemiBold { RalewaySemiBold {
text: "Choose Recipient:"; text: "Choose Recipient:";
@ -483,7 +508,7 @@ Item {
width: paintedWidth; width: paintedWidth;
height: 30; height: 30;
// Text size // Text size
size: 22; size: 18;
// Style // Style
color: hifi.colors.baseGray; color: hifi.colors.baseGray;
} }
@ -491,6 +516,7 @@ Item {
HiFiGlyphs { HiFiGlyphs {
id: closeGlyphButton_nearby; id: closeGlyphButton_nearby;
text: hifi.glyphs.close; text: hifi.glyphs.close;
color: hifi.colors.lightGrayText;
size: 26; size: 26;
anchors.top: parent.top; anchors.top: parent.top;
anchors.topMargin: 10; anchors.topMargin: 10;
@ -676,9 +702,9 @@ Item {
// Choose Recipient Nearby END // Choose Recipient Nearby END
// Send Money Screen BEGIN // Send Money Screen BEGIN
Rectangle { Item {
id: sendMoneyStep; id: sendMoneyStep;
z: 997; z: 996;
property string referrer; // either "connections" or "nearby" property string referrer; // either "connections" or "nearby"
property string selectedRecipientNodeID; property string selectedRecipientNodeID;
@ -688,12 +714,12 @@ Item {
visible: root.currentActiveView === "sendMoneyStep"; visible: root.currentActiveView === "sendMoneyStep";
anchors.fill: parent; anchors.fill: parent;
color: "#AAAAAA";
Rectangle { Rectangle {
anchors.centerIn: parent; anchors.centerIn: parent;
width: parent.width - 30; width: parent.width - 30;
height: parent.height - 30; height: parent.height - 30;
color: "#AAAAAA";
RalewaySemiBold { RalewaySemiBold {
id: sendMoneyText_sendMoneyStep; id: sendMoneyText_sendMoneyStep;
@ -806,7 +832,7 @@ Item {
anchors.right: parent.right; anchors.right: parent.right;
height: 50; height: 50;
// Style // Style
leftPlaceholderGlyph: hifi.glyphs.hfc; leftPermanentGlyph: hifi.glyphs.hfc;
activeFocusOnPress: true; activeFocusOnPress: true;
activeFocusOnTab: true; activeFocusOnTab: true;
@ -1049,6 +1075,7 @@ Item {
HiFiGlyphs { HiFiGlyphs {
id: closeGlyphButton_paymentSuccess; id: closeGlyphButton_paymentSuccess;
text: hifi.glyphs.close; text: hifi.glyphs.close;
color: lightGrayText;
size: 26; size: 26;
anchors.top: parent.top; anchors.top: parent.top;
anchors.topMargin: 10; anchors.topMargin: 10;
@ -1234,6 +1261,7 @@ Item {
HiFiGlyphs { HiFiGlyphs {
id: closeGlyphButton_paymentFailure; id: closeGlyphButton_paymentFailure;
text: hifi.glyphs.close; text: hifi.glyphs.close;
color: hifi.colors.lightGrayText;
size: 26; size: 26;
anchors.top: parent.top; anchors.top: parent.top;
anchors.topMargin: 10; anchors.topMargin: 10;

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

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