mirror of
https://github.com/overte-org/overte.git
synced 2025-04-08 07:12:40 +02:00
Move some things around so ComboBox works (and layout improves)
This commit is contained in:
Zach Fox
parent
c24b8b47a9
commit
05c34fb3ee
3 changed files with 86 additions and 308 deletions
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 != ""
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue