Merge pull request #10108 from davidkelly/dk/PalImprovementsMostlyZach

Dk/pal improvements mostly zach

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 ? hifi.colors.checkboxCheckedRed : hifi.colors.checkboxChecked
                 border.width: 2
-                border.color: hifi.colors.checkboxCheckedBorder
+                border.color: isRedCheck? hifi.colors.checkboxCheckedBorderRed : hifi.colors.checkboxCheckedBorder
                 visible: checked && !pressed || !checked && pressed
             }
 

interface/resources/qml/hifi/ComboDialog.qml

@@ -14,11 +14,12 @@ import QtQuick.Controls 1.4
 import "../styles-uit"
 
 Item {
-    property var dialogTitleText;
+    property var dialogTitleText : "";
-    property var optionTitleText;
+    property var optionTitleText: "";
-    property var optionBodyText;
+    property var optionBodyText: "";
-    property var optionValues;
+    property var optionValues: [];
-    property var selectedOptionIndex;
+    property var selectedOptionIndex: 0;
+    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;
@@ -42,12 +51,12 @@ Item {
         id: dialogContainer;
         color: "white";
         anchors.centerIn: dialogBackground;
-        width: dialogWidth;
+        width: combo.dialogWidth;
-        height: dialogHeight;
+        height: combo.dialogHeight;
 
         RalewayRegular {
             id: dialogTitle;
-            text: dialogTitleText;
+            text: combo.dialogTitleText;
             anchors.top: parent.top;
             anchors.topMargin: 20;
             anchors.left: parent.left;
@@ -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;
+                            callbackFunction(optionValue);
-                            UserActivityLogger.palAction("set_availability", optionValue);
+                            combo.visible = false;
-                            print('Setting availability:', optionValue);
                         }
                     }
                 }
@@ -137,18 +148,10 @@ Item {
         }
     }
 
-    MouseArea {
-        anchors.fill: parent
-        acceptedButtons: Qt.LeftButton
-        onClicked: {
-            combo.visible = false;
-        }
-    }
-
     function populateComboListViewModel() {
         comboListViewModel.clear();
         optionTitleText.forEach(function(titleText, index) {
             comboListViewModel.insert(index, {"titleText": titleText, "bodyText": optionBodyText[index], "optionValue": optionValues[index]});
         });
     }
-}
+}

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;
@@ -506,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);
@@ -605,7 +612,7 @@ Rectangle {
                                      "Bold names in the list are <b>avatar display names</b>.<br>" +
                                      "<font color='purple'>Purple borders around profile pictures are <b>connections</b></font>.<br>" +
                                      "<font color='green'>Green borders around profile pictures are <b>friends</b>.</font><br>" +
-                                     "(TEMPORARY LANGUAGE) In some situations, you can also see others' usernames.<br>" +
+                                     "Others can find you and see your username according to your <b>availability</b> settings.<br>" +
                                      "If you can see someone's username, you can GoTo them by selecting them in the PAL, then clicking their name.<br>" +
                                      "<br>If someone's display name isn't set, a unique <b>session display name</b> is assigned to them.<br>" +
                                      "<br>Administrators of this domain can also see the <b>username</b> or <b>machine ID</b> associated with each avatar present.");
@@ -942,7 +949,7 @@ Rectangle {
         }
         Item {
             id: upperRightInfoContainer;
-            width: 160;
+            width: 200;
             height: parent.height;
             anchors.top: parent.top;
             anchors.right: parent.right;
@@ -953,59 +960,53 @@ Rectangle {
                 // Text size
                 size: hifi.fontSizes.tabularData;
                 // Anchors
-                anchors.top: availabilityComboBox.bottom;
+                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 {
+            Rectangle {
+                property var availabilityStrings: ["Everyone", "Friends and Connections", "Friends Only", "Appear Offline"];
                 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" : availabilityComboBox.determineAvailabilityString();
+                    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",
+                        popupComboDialog("Set your availability:",
-                        ["Everyone", "Friends and Connections", "Friends Only", "Appear Offline"],
+                        availabilityComboBox.availabilityStrings,
-                        ["You will be invisible in everyone's 'People' list.\nAnyone will be able to jump to your location if the domain allows.",
+                        ["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.",
+                        "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.",
-                        "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.",
+                        "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.",
-                        "You will not be visible in the 'People' list of any other users."],
+                        "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;
-            }*/
+                    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));
                 }
             }
         }

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"