From f148bca1c06f856c6505f5826f13f27a168a7d2e Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Fri, 31 Mar 2017 16:27:37 -0700 Subject: [PATCH 1/4] More progress on ComboDialog --- interface/resources/qml/hifi/ComboDialog.qml | 31 +++++++++------- interface/resources/qml/hifi/Pal.qml | 39 +++++++++++++++----- 2 files changed, 46 insertions(+), 24 deletions(-) diff --git a/interface/resources/qml/hifi/ComboDialog.qml b/interface/resources/qml/hifi/ComboDialog.qml index f5bb7dcfcc..7f50f37d54 100644 --- a/interface/resources/qml/hifi/ComboDialog.qml +++ b/interface/resources/qml/hifi/ComboDialog.qml @@ -19,6 +19,7 @@ Item { property var optionBodyText; property var optionValues; property var selectedOptionIndex; + property var callbackFunction; property int dialogWidth; property int dialogHeight; property int comboOptionTextSize: 18; @@ -31,6 +32,14 @@ Item { populateComboListViewModel(); } + MouseArea { + anchors.fill: parent + acceptedButtons: Qt.LeftButton + onClicked: { + combo.visible = false; + } + } + Rectangle { id: dialogBackground; anchors.fill: parent; @@ -69,6 +78,7 @@ Item { anchors.bottom: parent.bottom; anchors.left: parent.left; anchors.right: parent.right; + clip: true; model: comboListViewModel; delegate: comboListViewDelegate; @@ -77,7 +87,7 @@ Item { Rectangle { id: comboListViewItemContainer; // Size - height: childrenRect.height + 10; + height: optionTitle.height + optionBody.height + 20; width: dialogContainer.width; color: selectedOptionIndex === index ? '#cee6ff' : 'white'; Rectangle { @@ -100,9 +110,11 @@ Item { id: optionTitle; text: titleText; anchors.top: parent.top; + anchors.topMargin: 7; anchors.left: comboOptionSelected.right; - anchors.leftMargin: 20; + anchors.leftMargin: 10; anchors.right: parent.right; + anchors.rightMargin: 10; height: 30; size: comboOptionTextSize; wrapMode: Text.WordWrap; @@ -112,10 +124,10 @@ Item { id: optionBody; text: bodyText; anchors.top: optionTitle.bottom; - anchors.bottom: parent.bottom; anchors.left: comboOptionSelected.right; anchors.leftMargin: 25; anchors.right: parent.right; + anchors.rightMargin: 10; size: comboOptionTextSize; wrapMode: Text.WordWrap; } @@ -127,9 +139,8 @@ Item { onEntered: comboListViewItemContainer.color = hifi.colors.blueHighlight onExited: comboListViewItemContainer.color = selectedOptionIndex === index ? '#cee6ff' : 'white'; onClicked: { - GlobalServices.findableBy = optionValue; - UserActivityLogger.palAction("set_availability", optionValue); - print('Setting availability:', optionValue); + callbackFunction(optionValue); + combo.visible = false; } } } @@ -137,14 +148,6 @@ Item { } } - MouseArea { - anchors.fill: parent - acceptedButtons: Qt.LeftButton - onClicked: { - combo.visible = false; - } - } - function populateComboListViewModel() { comboListViewModel.clear(); optionTitleText.forEach(function(titleText, index) { diff --git a/interface/resources/qml/hifi/Pal.qml b/interface/resources/qml/hifi/Pal.qml index 06360ce183..b7d31e06da 100644 --- a/interface/resources/qml/hifi/Pal.qml +++ b/interface/resources/qml/hifi/Pal.qml @@ -56,7 +56,7 @@ Rectangle { ComboDialog { id: comboDialog; z: 999; // Force the ComboDialog on top of everything else - dialogWidth: parent.width - 100; + dialogWidth: parent.width - 50; dialogHeight: parent.height - 100; } function letterbox(headerGlyph, headerText, message) { @@ -66,7 +66,13 @@ Rectangle { letterboxMessage.visible = true; letterboxMessage.popupRadius = 0; } + function popupComboDialogCallback(availability) { + GlobalServices.findableBy = availability; + UserActivityLogger.palAction("set_availability", availability); + print('Setting availability:', JSON.stringify(GlobalServices.findableBy)); + } function popupComboDialog(dialogTitleText, optionTitleText, optionBodyText, optionValues) { + comboDialog.callbackFunction = popupComboDialogCallback; comboDialog.dialogTitleText = dialogTitleText; comboDialog.optionTitleText = optionTitleText; comboDialog.optionBodyText = optionBodyText; @@ -961,29 +967,42 @@ Rectangle { horizontalAlignment: Text.AlignHCenter; verticalAlignment: Text.AlignTop; } - /*Rectangle { + Rectangle { + property var availabilityStrings: ["Everyone", "Friends and Connections", "Friends Only", "Appear Offline"]; id: availabilityComboBox; + color: hifi.colors.textFieldLightBackground // Anchors anchors.top: parent.top; anchors.horizontalCenter: parent.horizontalCenter; // Size width: parent.width; height: 40; + RalewayRegular { + text: myData.userName === "Unknown user" ? "Login to Set" : availabilityStrings[GlobalServices.findableBy]; + anchors.fill: parent; + anchors.leftMargin: 10; + horizontalAlignment: Text.AlignLeft; + size: 16; + } MouseArea { - anchors.fill: parent + anchors.fill: parent; + enabled: myData.userName ==! "Unknown user"; + hoverEnabled: true; onClicked: { - popupComboDialog("Set your list visibility", - ["Everyone", "Friends and Connections", "Friends Only", "Appear Offline"], - ["You will be invisible in everyone's 'People' list.\nAnyone will be able to jump to your location if the domain allows.", + popupComboDialog("Set your availability:", + availabilityComboBox.availabilityStrings, + ["Your username will be visible in everyone's 'Nearby' list.\nAnyone will be able to jump to your location from within the 'Nearby' list.", "You will be visible in the 'People' list only for those with whom you are connected or friends.\nThey will be able to jump to your location if the domain allows.", "You will be visible in the 'People' list only for those with whom you are friends.\nThey will be able to jump to your location if the domain allows.", - "You will not be visible in the 'People' list of any other users."], + "You will not be visible in the 'People' list of any other users. Only domain admins will be able to see your username in the 'Nearby' list."], ["all", "connections", "friends", "none"]); } + onEntered: availabilityComboBox.color = hifi.colors.lightGrayText; + onExited: availabilityComboBox.color = hifi.colors.textFieldLightBackground; } - }*/ + } - HifiControlsUit.ComboBox { + /*HifiControlsUit.ComboBox { function determineAvailabilityIndex() { return ['all', 'connections', 'friends', 'none'].indexOf(GlobalServices.findableBy) } @@ -1007,7 +1026,7 @@ Rectangle { UserActivityLogger.palAction("set_availability", availabilityComboBoxListItems.get(currentIndex).value); print('Setting availability:', JSON.stringify(GlobalServices.findableBy)); } - } + }*/ } } From 4629accc9c39607801820547e113e65c5ea833ec Mon Sep 17 00:00:00 2001 From: David Kelly Date: Mon, 3 Apr 2017 15:35:53 -0700 Subject: [PATCH 2/4] style updates --- .../resources/qml/controls-uit/CheckBox.qml | 8 ++-- interface/resources/qml/hifi/ComboDialog.qml | 18 ++++---- interface/resources/qml/hifi/Pal.qml | 46 ++++++------------- 3 files changed, 27 insertions(+), 45 deletions(-) diff --git a/interface/resources/qml/controls-uit/CheckBox.qml b/interface/resources/qml/controls-uit/CheckBox.qml index 60e136d13a..bb138e07c6 100644 --- a/interface/resources/qml/controls-uit/CheckBox.qml +++ b/interface/resources/qml/controls-uit/CheckBox.qml @@ -19,12 +19,11 @@ Original.CheckBox { property int colorScheme: hifi.colorSchemes.light readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light - + property bool isRedCheck: false property int boxSize: 14 readonly property int boxRadius: 3 readonly property int checkSize: Math.max(boxSize - 8, 10) readonly property int checkRadius: 2 - activeFocusOnPress: true style: CheckBoxStyle { @@ -37,6 +36,7 @@ Original.CheckBox { border.color: pressed || hovered ? hifi.colors.checkboxCheckedBorder : (checkBox.isLightColorScheme ? hifi.colors.checkboxLightFinish : hifi.colors.checkboxDarkFinish) + gradient: Gradient { GradientStop { position: 0.2 @@ -68,9 +68,9 @@ Original.CheckBox { height: checkSize radius: checkRadius anchors.centerIn: parent - color: hifi.colors.checkboxChecked + color: isRedCheck ? "#FF0000" : hifi.colors.checkboxChecked border.width: 2 - border.color: hifi.colors.checkboxCheckedBorder + border.color: isRedCheck? "#D00000" : hifi.colors.checkboxCheckedBorder visible: checked && !pressed || !checked && pressed } diff --git a/interface/resources/qml/hifi/ComboDialog.qml b/interface/resources/qml/hifi/ComboDialog.qml index 7f50f37d54..8905ed9c17 100644 --- a/interface/resources/qml/hifi/ComboDialog.qml +++ b/interface/resources/qml/hifi/ComboDialog.qml @@ -14,11 +14,11 @@ import QtQuick.Controls 1.4 import "../styles-uit" Item { - property var dialogTitleText; - property var optionTitleText; - property var optionBodyText; - property var optionValues; - property var selectedOptionIndex; + property var dialogTitleText : ""; + property var optionTitleText: ""; + property var optionBodyText: ""; + property var optionValues: []; + property var selectedOptionIndex: 0; property var callbackFunction; property int dialogWidth; property int dialogHeight; @@ -51,12 +51,12 @@ Item { id: dialogContainer; color: "white"; anchors.centerIn: dialogBackground; - width: dialogWidth; - height: dialogHeight; + width: combo.dialogWidth; + height: combo.dialogHeight; RalewayRegular { id: dialogTitle; - text: dialogTitleText; + text: combo.dialogTitleText; anchors.top: parent.top; anchors.topMargin: 20; anchors.left: parent.left; @@ -154,4 +154,4 @@ Item { comboListViewModel.insert(index, {"titleText": titleText, "bodyText": optionBodyText[index], "optionValue": optionValues[index]}); }); } -} \ No newline at end of file +} diff --git a/interface/resources/qml/hifi/Pal.qml b/interface/resources/qml/hifi/Pal.qml index b7d31e06da..807a315693 100644 --- a/interface/resources/qml/hifi/Pal.qml +++ b/interface/resources/qml/hifi/Pal.qml @@ -512,6 +512,7 @@ Rectangle { // If this is an "Ignore" checkbox, disable the checkbox if user isn't present. enabled: styleData.role === "ignore" ? (model ? model["isPresent"] : true) : true; boxSize: 24; + isRedCheck: true onClicked: { var newValue = !model[styleData.role]; nearbyUserModel.setProperty(model.userIndex, styleData.role, newValue); @@ -611,7 +612,7 @@ Rectangle { "Bold names in the list are avatar display names.
" + "Purple borders around profile pictures are connections.
" + "Green borders around profile pictures are friends.
" + - "(TEMPORARY LANGUAGE) In some situations, you can also see others' usernames.
" + + "In some situations, you can also see others' usernames.
" + "If you can see someone's username, you can GoTo them by selecting them in the PAL, then clicking their name.
" + "
If someone's display name isn't set, a unique session display name is assigned to them.
" + "
Administrators of this domain can also see the username or machine ID associated with each avatar present."); @@ -948,7 +949,7 @@ Rectangle { } Item { id: upperRightInfoContainer; - width: 160; + width: 200; height: parent.height; anchors.top: parent.top; anchors.right: parent.right; @@ -959,7 +960,7 @@ Rectangle { // Text size size: hifi.fontSizes.tabularData; // Anchors - anchors.top: availabilityComboBox.bottom; + anchors.top: myCard.top; anchors.horizontalCenter: parent.horizontalCenter; // Style color: hifi.colors.baseGrayHighlight; @@ -972,13 +973,20 @@ Rectangle { id: availabilityComboBox; color: hifi.colors.textFieldLightBackground // Anchors - anchors.top: parent.top; + anchors.top: availabilityText.bottom; anchors.horizontalCenter: parent.horizontalCenter; // Size width: parent.width; height: 40; + function determineAvailabilityIndex() { + return ['all', 'connections', 'friends', 'none'].indexOf(GlobalServices.findableBy); + } + + function determineAvailabilityString() { + return availabilityStrings[determineAvailabilityIndex()]; + } RalewayRegular { - text: myData.userName === "Unknown user" ? "Login to Set" : availabilityStrings[GlobalServices.findableBy]; + text: myData.userName === "Unknown user" ? "Login to Set" : availabilityComboBox.determineAvailabilityString(); anchors.fill: parent; anchors.leftMargin: 10; horizontalAlignment: Text.AlignLeft; @@ -986,7 +994,7 @@ Rectangle { } MouseArea { anchors.fill: parent; - enabled: myData.userName ==! "Unknown user"; + enabled: myData.userName !== "Unknown user"; hoverEnabled: true; onClicked: { popupComboDialog("Set your availability:", @@ -1001,32 +1009,6 @@ Rectangle { onExited: availabilityComboBox.color = hifi.colors.textFieldLightBackground; } } - - /*HifiControlsUit.ComboBox { - function determineAvailabilityIndex() { - return ['all', 'connections', 'friends', 'none'].indexOf(GlobalServices.findableBy) - } - id: availabilityComboBox; - // Anchors - anchors.top: parent.top; - anchors.horizontalCenter: parent.horizontalCenter; - // Size - width: parent.width; - height: 40; - currentIndex: determineAvailabilityIndex(); - model: ListModel { - id: availabilityComboBoxListItems - ListElement { text: "Everyone"; value: "all"; } - ListElement { text: "All Connections"; value: "connections"; } - ListElement { text: "Friends Only"; value: "friends"; } - ListElement { text: "Appear Offline"; value: "none" } - } - onCurrentIndexChanged: { - GlobalServices.findableBy = availabilityComboBoxListItems.get(currentIndex).value; - UserActivityLogger.palAction("set_availability", availabilityComboBoxListItems.get(currentIndex).value); - print('Setting availability:', JSON.stringify(GlobalServices.findableBy)); - } - }*/ } } From 4d6886d1f489772c4640872e5a8115520156d2f8 Mon Sep 17 00:00:00 2001 From: David Kelly Date: Mon, 3 Apr 2017 17:03:14 -0700 Subject: [PATCH 3/4] cr feedback, plus changed 'People' to 'Connections' in a couple places --- interface/resources/qml/controls-uit/CheckBox.qml | 4 ++-- interface/resources/qml/hifi/Pal.qml | 12 ++++++------ interface/resources/qml/styles-uit/HifiConstants.qml | 3 +++ 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/interface/resources/qml/controls-uit/CheckBox.qml b/interface/resources/qml/controls-uit/CheckBox.qml index bb138e07c6..916a7d4889 100644 --- a/interface/resources/qml/controls-uit/CheckBox.qml +++ b/interface/resources/qml/controls-uit/CheckBox.qml @@ -68,9 +68,9 @@ Original.CheckBox { height: checkSize radius: checkRadius anchors.centerIn: parent - color: isRedCheck ? "#FF0000" : hifi.colors.checkboxChecked + color: isRedCheck ? hifi.colors.checkboxCheckedRed : hifi.colors.checkboxChecked border.width: 2 - border.color: isRedCheck? "#D00000" : hifi.colors.checkboxCheckedBorder + border.color: isRedCheck? hifi.colors.checkboxCheckedBorderRed : hifi.colors.checkboxCheckedBorder visible: checked && !pressed || !checked && pressed } diff --git a/interface/resources/qml/hifi/Pal.qml b/interface/resources/qml/hifi/Pal.qml index 807a315693..a332712ce3 100644 --- a/interface/resources/qml/hifi/Pal.qml +++ b/interface/resources/qml/hifi/Pal.qml @@ -612,7 +612,7 @@ Rectangle { "Bold names in the list are avatar display names.
" + "Purple borders around profile pictures are connections.
" + "Green borders around profile pictures are friends.
" + - "In some situations, you can also see others' usernames.
" + + "Others can find you and see your username according to your availability settings.
" + "If you can see someone's username, you can GoTo them by selecting them in the PAL, then clicking their name.
" + "
If someone's display name isn't set, a unique session display name is assigned to them.
" + "
Administrators of this domain can also see the username or machine ID associated with each avatar present."); @@ -961,11 +961,11 @@ Rectangle { size: hifi.fontSizes.tabularData; // Anchors anchors.top: myCard.top; - anchors.horizontalCenter: parent.horizontalCenter; + anchors.left: parent.left; // Style color: hifi.colors.baseGrayHighlight; // Alignment - horizontalAlignment: Text.AlignHCenter; + horizontalAlignment: Text.AlignLeft; verticalAlignment: Text.AlignTop; } Rectangle { @@ -1000,9 +1000,9 @@ Rectangle { popupComboDialog("Set your availability:", availabilityComboBox.availabilityStrings, ["Your username will be visible in everyone's 'Nearby' list.\nAnyone will be able to jump to your location from within the 'Nearby' list.", - "You will be visible in the 'People' list only for those with whom you are connected or friends.\nThey will be able to jump to your location if the domain allows.", - "You will be visible in the 'People' list only for those with whom you are friends.\nThey will be able to jump to your location if the domain allows.", - "You will not be visible in the 'People' list of any other users. Only domain admins will be able to see your username in the 'Nearby' list."], + "You will be visible in the 'Connections' list only for those with whom you are connected or friends.\nThey will be able to jump to your location if the domain allows.", + "You will be visible in the 'Connections' list only for those with whom you are friends.\nThey will be able to jump to your location if the domain allows.", + "You will not be visible in the 'Connections' list of any other users. Only domain admins will be able to see your username in the 'Nearby' list."], ["all", "connections", "friends", "none"]); } onEntered: availabilityComboBox.color = hifi.colors.lightGrayText; diff --git a/interface/resources/qml/styles-uit/HifiConstants.qml b/interface/resources/qml/styles-uit/HifiConstants.qml index a9d5a0ed2f..386af206e1 100644 --- a/interface/resources/qml/styles-uit/HifiConstants.qml +++ b/interface/resources/qml/styles-uit/HifiConstants.qml @@ -70,6 +70,9 @@ Item { readonly property color indigoAccent: "#9495FF" readonly property color magentaHighlight: "#EF93D1" readonly property color magentaAccent: "#A2277C" + readonly property color checkboxCheckedRed: "#FF0000" + readonly property color checkboxCheckedBorderRed: "#D00000" + // Semitransparent readonly property color darkGray30: "#4d121212" readonly property color darkGray0: "#00121212" From 08ac25473fa27ab4927a16f26c99727213fc75a0 Mon Sep 17 00:00:00 2001 From: David Kelly Date: Tue, 4 Apr 2017 09:53:09 -0700 Subject: [PATCH 4/4] wording change --- interface/resources/qml/hifi/Pal.qml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/interface/resources/qml/hifi/Pal.qml b/interface/resources/qml/hifi/Pal.qml index a332712ce3..66803621ec 100644 --- a/interface/resources/qml/hifi/Pal.qml +++ b/interface/resources/qml/hifi/Pal.qml @@ -1000,9 +1000,9 @@ Rectangle { popupComboDialog("Set your availability:", availabilityComboBox.availabilityStrings, ["Your username will be visible in everyone's 'Nearby' list.\nAnyone will be able to jump to your location from within the 'Nearby' list.", - "You will be visible in the 'Connections' list only for those with whom you are connected or friends.\nThey will be able to jump to your location if the domain allows.", - "You will be visible in the 'Connections' list only for those with whom you are friends.\nThey will be able to jump to your location if the domain allows.", - "You will not be visible in the 'Connections' list of any other users. Only domain admins will be able to see your username in the 'Nearby' list."], + "Your location will be visible in the 'Connections' list only for those with whom you are connected or friends.\nThey will be able to jump to your location if the domain allows.", + "Your location will be visible in the 'Connections' list only for those with whom you are friends.\nThey will be able to jump to your location if the domain allows.", + "Your location will not be visible in the 'Connections' list of any other users. Only domain admins will be able to see your username in the 'Nearby' list."], ["all", "connections", "friends", "none"]); } onEntered: availabilityComboBox.color = hifi.colors.lightGrayText;