diff --git a/interface/resources/qml/controls-uit/CheckBox.qml b/interface/resources/qml/controls-uit/CheckBox.qml index 60e136d13a..916a7d4889 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 ? 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 } diff --git a/interface/resources/qml/hifi/ComboDialog.qml b/interface/resources/qml/hifi/ComboDialog.qml index f5bb7dcfcc..8905ed9c17 100644 --- a/interface/resources/qml/hifi/ComboDialog.qml +++ b/interface/resources/qml/hifi/ComboDialog.qml @@ -14,11 +14,12 @@ 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; 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; - 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; @@ -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,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]}); }); } -} \ No newline at end of file +} diff --git a/interface/resources/qml/hifi/Pal.qml b/interface/resources/qml/hifi/Pal.qml index 06360ce183..66803621ec 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; @@ -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 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.
" + + "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."); @@ -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.horizontalCenter: parent.horizontalCenter; + anchors.top: myCard.top; + 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", - ["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.", - "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."], + 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.", + "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"]); } - } - }*/ - - 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)); + onEntered: availabilityComboBox.color = hifi.colors.lightGrayText; + onExited: availabilityComboBox.color = hifi.colors.textFieldLightBackground; } } } 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"