From 05c34fb3ee5f27dfa99d3737e71a2a8136aab7f8 Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Thu, 30 Mar 2017 15:19:19 -0700 Subject: [PATCH] Move some things around so ComboBox works (and layout improves) --- .../resources/qml/controls-uit/ComboBox.qml | 2 +- .../qml/controls-uit/TabletComboBox.qml | 211 ------------------ interface/resources/qml/hifi/Pal.qml | 181 +++++++-------- 3 files changed, 86 insertions(+), 308 deletions(-) delete mode 100644 interface/resources/qml/controls-uit/TabletComboBox.qml diff --git a/interface/resources/qml/controls-uit/ComboBox.qml b/interface/resources/qml/controls-uit/ComboBox.qml index 2dea535c06..be6a439e57 100644 --- a/interface/resources/qml/controls-uit/ComboBox.qml +++ b/interface/resources/qml/controls-uit/ComboBox.qml @@ -216,7 +216,7 @@ FocusScope { anchors.leftMargin: hifi.dimensions.textPadding anchors.verticalCenter: parent.verticalCenter id: popupText - text: listView.model[index] ? listView.model[index] : "" + text: listView.model[index] ? listView.model[index] : (listView.model.get(index).text ? listView.model.get(index).text : "") size: hifi.fontSizes.textFieldInput color: hifi.colors.baseGray } diff --git a/interface/resources/qml/controls-uit/TabletComboBox.qml b/interface/resources/qml/controls-uit/TabletComboBox.qml deleted file mode 100644 index e58a465298..0000000000 --- a/interface/resources/qml/controls-uit/TabletComboBox.qml +++ /dev/null @@ -1,211 +0,0 @@ -// -// ComboBox.qml -// -// Created by Dante Ruiz on 13 Feb 2017 -// Copyright 2016 High Fidelity, Inc. -// -// Distributed under the Apache License, Version 2.0. -// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html -// - -import QtQuick 2.5 -import QtQuick.Controls 1.4 -import QtQuick.Controls.Styles 1.4 - -import "../styles-uit" -import "../controls-uit" as HifiControls -import "." as VrControls - -FocusScope { - id: root - HifiConstants { id: hifi } - - property alias model: comboBox.model; - property alias comboBox: comboBox - readonly property alias currentText: comboBox.currentText; - property alias currentIndex: comboBox.currentIndex; - - property int colorScheme: hifi.colorSchemes.light - readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light - property string label: "" - property real controlHeight: height + (comboBoxLabel.visible ? comboBoxLabel.height + comboBoxLabel.anchors.bottomMargin : 0) - - readonly property ComboBox control: comboBox - - signal accepted(); - - implicitHeight: comboBox.height; - focus: true - - Rectangle { - id: background - gradient: Gradient { - GradientStop { - position: 0.2 - color: popup.visible - ? (isLightColorScheme ? hifi.colors.dropDownPressedLight : hifi.colors.dropDownPressedDark) - : (isLightColorScheme ? hifi.colors.dropDownLightStart : hifi.colors.dropDownDarkStart) - } - GradientStop { - position: 1.0 - color: popup.visible - ? (isLightColorScheme ? hifi.colors.dropDownPressedLight : hifi.colors.dropDownPressedDark) - : (isLightColorScheme ? hifi.colors.dropDownLightFinish : hifi.colors.dropDownDarkFinish) - } - } - anchors.fill: parent - } - - SystemPalette { id: palette } - - ComboBox { - id: comboBox - anchors.fill: parent - visible: false - height: hifi.fontSizes.textFieldInput + 13 // Match height of TextField control. - } - - FiraSansSemiBold { - id: textField - anchors { - left: parent.left - leftMargin: hifi.dimensions.textPadding - right: dropIcon.left - verticalCenter: parent.verticalCenter - } - size: hifi.fontSizes.textFieldInput - text: comboBox.currentText - elide: Text.ElideRight - color: controlHover.containsMouse || popup.visible ? hifi.colors.baseGray : (isLightColorScheme ? hifi.colors.lightGray : hifi.colors.lightGrayText ) - } - - Item { - id: dropIcon - anchors { right: parent.right; verticalCenter: parent.verticalCenter } - height: background.height - width: height - Rectangle { - width: 1 - height: parent.height - anchors.top: parent.top - anchors.left: parent.left - color: isLightColorScheme ? hifi.colors.faintGray : hifi.colors.baseGray - } - HiFiGlyphs { - anchors { - top: parent.top - topMargin: -11 - horizontalCenter: parent.horizontalCenter - } - size: hifi.dimensions.spinnerSize - text: hifi.glyphs.caratDn - color: controlHover.containsMouse || popup.visible ? hifi.colors.baseGray : (isLightColorScheme ? hifi.colors.lightGray : hifi.colors.lightGrayText) - } - } - - MouseArea { - id: controlHover - hoverEnabled: true - anchors.fill: parent - onClicked: toggleList(); - } - - function toggleList() { - if (popup.visible) { - hideList(); - } else { - showList(); - } - } - - function showList() { - var r = 20//desktop.mapFromItem(root, 0, 0, root.width, root.height); - var y = 200; - var bottom = 0 + scrollView.height; - if (bottom > 720) { - y -= bottom - 720 + 8; - } - scrollView.x = 0; - scrollView.y = 0; - popup.visible = true; - popup.forceActiveFocus(); - listView.currentIndex = root.currentIndex; - scrollView.hoverEnabled = true; - } - - function hideList() { - popup.visible = false; - scrollView.hoverEnabled = false; - root.accepted(); - } - - FocusScope { - id: popup - parent: parent - anchors.fill: parent - visible: false - focus: true - - MouseArea { - anchors.fill: parent - onClicked: hideList(); - } - - function previousItem() { listView.currentIndex = (listView.currentIndex + listView.count - 1) % listView.count; } - function nextItem() { listView.currentIndex = (listView.currentIndex + listView.count + 1) % listView.count; } - function selectCurrentItem() { root.currentIndex = listView.currentIndex; hideList(); } - function selectSpecificItem(index) { root.currentIndex = index; hideList(); } - - Keys.onUpPressed: previousItem(); - Keys.onDownPressed: nextItem(); - Keys.onSpacePressed: selectCurrentItem(); - Keys.onRightPressed: selectCurrentItem(); - Keys.onReturnPressed: selectCurrentItem(); - Keys.onEscapePressed: hideList(); - - ScrollView { - id: scrollView - height: 480 - width: root.width + 4 - property bool hoverEnabled: false; - - ListView { - id: listView - height: textField.height * count * 1.4 - model: root.model - delegate: Rectangle { - width: root.width + 4 - height: popupText.implicitHeight * 1.4 - color: (listView.currentIndex === index) ? hifi.colors.primaryHighlight : - (isLightColorScheme ? hifi.colors.dropDownPressedLight : hifi.colors.dropDownPressedDark) - FiraSansSemiBold { - anchors.left: parent.left - anchors.leftMargin: hifi.dimensions.textPadding - anchors.verticalCenter: parent.verticalCenter - id: popupText - text: listView.model[index] ? listView.model[index] : (listView.model.get(index).text ? listView.model.get(index).text : "") - size: hifi.fontSizes.textFieldInput - color: hifi.colors.baseGray - } - MouseArea { - id: popupHover - anchors.fill: parent; - hoverEnabled: scrollView.hoverEnabled; - onEntered: listView.currentIndex = index; - onClicked: popup.selectSpecificItem(index); - } - } - } - } - } - - HifiControls.Label { - id: comboBoxLabel - text: root.label - colorScheme: root.colorScheme - anchors.left: parent.left - anchors.bottom: parent.top - anchors.bottomMargin: 4 - visible: label != "" - } -} diff --git a/interface/resources/qml/hifi/Pal.qml b/interface/resources/qml/hifi/Pal.qml index a61dcc060f..3fe4cbbb94 100644 --- a/interface/resources/qml/hifi/Pal.qml +++ b/interface/resources/qml/hifi/Pal.qml @@ -29,8 +29,8 @@ Rectangle { // Style color: "#E3E3E3"; // Properties - property int myCardWidth: palContainer.width - upperRightInfoContainer.width; - property int myCardHeight: 82; + property int myCardWidth: width - upperRightInfoContainer.width; + property int myCardHeight: 80; property int rowHeight: 60; property int actionButtonWidth: 55; property int locationColumnWidth: 170; @@ -43,6 +43,7 @@ Rectangle { property bool iAmAdmin: false; property var activeTab: "nearbyTab"; property bool currentlyEditingDisplayName: false + property bool punctuationMode: false; HifiConstants { id: hifi; } @@ -99,94 +100,6 @@ Rectangle { pal.sendToScript({method: 'refreshNearby', params: params}); } - // This is the container for the PAL - Rectangle { - property bool punctuationMode: false; - id: palContainer; - // Size - width: pal.width - 10; - height: pal.height - 10; - // Style - color: "white"; - // Anchors - anchors.centerIn: pal; - - // This contains the current user's NameCard and will contain other information in the future - Rectangle { - id: myInfo; - // Size - width: palContainer.width; - height: myCardHeight; - // Style - color: pal.color; - // Anchors - anchors.top: palContainer.top; - // This NameCard refers to the current user's NameCard (the one above the nearbyTable) - NameCard { - id: myCard; - // Properties - profileUrl: myData.profileUrl; - displayName: myData.displayName; - userName: myData.userName; - audioLevel: myData.audioLevel; - avgAudioLevel: myData.avgAudioLevel; - isMyCard: true; - isPresent: true; - // Size - width: myCardWidth; - height: parent.height; - // Anchors - anchors.top: parent.top - anchors.left: parent.left; - } - Item { - id: upperRightInfoContainer; - width: 160; - height: parent.height; - anchors.top: parent.top; - anchors.right: parent.right; - - RalewayRegular { - id: availabilityText; - text: "set availability"; - // Text size - size: hifi.fontSizes.tabularData; - // Anchors - anchors.top: availabilityComboBox.bottom; - anchors.horizontalCenter: parent.horizontalCenter; - // Style - color: hifi.colors.baseGrayHighlight; - // Alignment - horizontalAlignment: Text.AlignHCenter; - verticalAlignment: Text.AlignTop; - } - HifiControlsUit.TabletComboBox { - 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)); - } - } - } - } Item { id: palTabContainer; // Anchors @@ -214,7 +127,7 @@ Rectangle { } width: parent.width/2; height: parent.height; - color: activeTab == "nearbyTab" ? palContainer.color : "#CCCCCC"; + color: activeTab == "nearbyTab" ? "white" : "#CCCCCC"; MouseArea { anchors.fill: parent; onClicked: { @@ -287,7 +200,7 @@ Rectangle { } width: parent.width/2; height: parent.height; - color: activeTab == "connectionsTab" ? palContainer.color : "#CCCCCC"; + color: activeTab == "connectionsTab" ? "white" : "#CCCCCC"; MouseArea { anchors.fill: parent; onClicked: { @@ -723,7 +636,7 @@ Rectangle { *****************************************/ Rectangle { id: connectionsTab; - color: palContainer.color; + color: "white"; // Anchors anchors { top: tabSelectorContainer.bottom; @@ -979,6 +892,85 @@ Rectangle { } // "Connections" Tab } // palTabContainer + // This contains the current user's NameCard and will contain other information in the future + Rectangle { + id: myInfo; + // Size + width: pal.width; + height: myCardHeight; + // Style + color: pal.color; + // Anchors + anchors.top: pal.top; + anchors.topMargin: 10; + anchors.left: pal.left; + // This NameCard refers to the current user's NameCard (the one above the nearbyTable) + NameCard { + id: myCard; + // Properties + profileUrl: myData.profileUrl; + displayName: myData.displayName; + userName: myData.userName; + audioLevel: myData.audioLevel; + avgAudioLevel: myData.avgAudioLevel; + isMyCard: true; + isPresent: true; + // Size + width: myCardWidth; + height: parent.height; + // Anchors + anchors.top: parent.top + anchors.left: parent.left; + } + Item { + id: upperRightInfoContainer; + width: 160; + height: parent.height; + anchors.top: parent.top; + anchors.right: parent.right; + + RalewayRegular { + id: availabilityText; + text: "set availability"; + // Text size + size: hifi.fontSizes.tabularData; + // Anchors + anchors.top: availabilityComboBox.bottom; + anchors.horizontalCenter: parent.horizontalCenter; + // Style + color: hifi.colors.baseGrayHighlight; + // Alignment + horizontalAlignment: Text.AlignHCenter; + verticalAlignment: Text.AlignTop; + } + 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)); + } + } + } + } + HifiControlsUit.Keyboard { id: keyboard; raised: currentlyEditingDisplayName && HMD.mounted; @@ -1125,9 +1117,6 @@ Rectangle { } } - - } // PAL container - // Timer used when selecting nearbyTable rows that aren't yet present in the model // (i.e. when selecting avatars using edit.js or sphere overlays) Timer {