Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-08 17:17:58 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #12220 from RebeccaStankus/API-Debugger-UI

Browse source 
Updated UI to fit Toolkit Standards
This commit is contained in:
John Conklin II 2018-01-22 10:30:48 -08:00 committed by GitHub
commit 8d028d4bd4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 247 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

289
interface/resources/qml/CurrentAPI.qml
View file

@ -19,7 +19,6 @@ Item {
height: parent.height height: parent.height
property var hideQtMethods: true property var hideQtMethods: true
property var maxUpdateValues: 20 property var maxUpdateValues: 20
property var maxReloadValues: 200 property var maxReloadValues: 200
property var apiMembers: [] property var apiMembers: []
@ -30,7 +29,7 @@ Item {
property Component keyboard property Component keyboard
Rectangle { Rectangle {
color: "white" color: hifi.colors.baseGray
width: parent.width width: parent.width
height: parent.height height: parent.height
} }
@ -51,32 +50,22 @@ Item {
Row { Row {
id: topBar id: topBar
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 8 anchors.leftMargin: 30
anchors.top: parent.top
anchors.topMargin: 30
width: parent.width width: parent.width
height: 50 height: 40
HifiControls.GlyphButton {
id: search
enabled: true
glyph: hifi.glyphs.search
color: hifi.colors.text
size: 48
width: 50
height: 50
onClicked: {
addListElements(searchBar.text);
focus = true;
}
}
HifiControls.GlyphButton { HifiControls.GlyphButton {
id: back; id: back;
enabled: true; enabled: true;
color: hifi.buttons.black
glyph: hifi.glyphs.backward glyph: hifi.glyphs.backward
color: hifi.colors.text size: 40
size: 48 width: 40
width: 30 height: 40
height: 50 anchors.left: search.right
anchors.margins: 2 anchors.leftMargin: 12
onClicked: { onClicked: {
var text = searchBar.text; var text = searchBar.text;
var chain = text.split("."); var chain = text.split(".");
@ -99,17 +88,20 @@ Item {
} }
} }
TextField { HifiControls.TextField {
id: searchBar id: searchBar
focus: true focus: true
font.pixelSize: 16 isSearchField: true
width: 2*(parent.width-back.width-search.width-reload.width-update.width-evaluate.width-addMember.width-16)/3 width: parent.width - 112
height: parent.height height: 40
font.family: ralewayRegular.name colorScheme: hifi.colorSchemes.dark
anchors.left: back.right
anchors.leftMargin: 10
font.family: firaSansSemiBold.name
placeholderText: "Search" placeholderText: "Search"
onAccepted: { onAccepted: {
console.log("Enter Pressed"); console.log("Enter Pressed");
search.clicked(); addListElements(searchBar.text);
} }
onActiveFocusChanged: { onActiveFocusChanged: {
if (activeFocus && HMD.mounted) { if (activeFocus && HMD.mounted) {
@ -120,14 +112,26 @@ Item {
} }
} }
}
HifiControls.Button { Row {
id: topBar2
anchors.left: parent.left
anchors.leftMargin: 30
anchors.top: topBar.bottom
anchors.topMargin: 30
width: parent.width -60
height: 40
HifiControls.GlyphButton {
id: addMember; id: addMember;
enabled: true; enabled: true;
text: "+" color: hifi.buttons.black
width: 50 glyph: hifi.glyphs.maximize
height: 50 width: 40
anchors.margins: 2 height: 40
anchors.top: parent.top
anchors.left: parent.left
onClicked: { onClicked: {
addNewMember(); addNewMember();
updateList.start(); updateList.start();
@ -138,36 +142,48 @@ Item {
HifiControls.Button { HifiControls.Button {
id: evaluate; id: evaluate;
enabled: true; enabled: true;
color: hifi.buttons.black
text: "Eval" text: "Eval"
width: 50 width: 40
height: 50 height: 40
anchors.margins: 2 anchors.left: addMember.right
anchors.leftMargin: 12
onClicked: { onClicked: {
evaluateMember(); evaluateMember();
focus = true; focus = true;
} }
} }
TextField {
HifiControls.TextField {
id: valueBar id: valueBar
focus: true isSearchField: false
font.pixelSize: 16 font.pixelSize: 16
width: (parent.width-back.width-search.width-reload.width-update.width-evaluate.width-addMember.width-16)/3 width: parent.width - 208
height: parent.height height: 40
font.family: ralewayRegular.name colorScheme: hifi.colorSchemes.dark
font.family: firaSansSemiBold.name
placeholderText: "Value" placeholderText: "Value"
textColor: "#4466DD" anchors.left: evaluate.right
anchors.margins: 2 anchors.leftMargin: 12
onActiveFocusChanged: {
if (activeFocus && HMD.mounted) {
keyboard.raised = true;
} else {
keyboard.raised = false;
}
}
} }
HifiControls.GlyphButton { HifiControls.GlyphButton {
id: reload; id: reload;
enabled: false; enabled: false;
color: hifi.buttons.black
glyph: hifi.glyphs.reload glyph: hifi.glyphs.reload
color: hifi.colors.text size: 40
size: 48 width: 40
width: 50 height: 40
height: 50 anchors.right: update.left
anchors.margins: 2 anchors.rightMargin: 12
onClicked: { onClicked: {
reloadListValues(); reloadListValues();
focus = true; focus = true;
@ -177,11 +193,12 @@ Item {
HifiControls.GlyphButton { HifiControls.GlyphButton {
id: update; id: update;
enabled: false; enabled: false;
color: hifi.buttons.black
glyph: hifi.glyphs.playback_play glyph: hifi.glyphs.playback_play
size: 48 size: 40
width: 50 width: 40
height: 50 height: 40
anchors.margins: 2 anchors.right: parent.right
onClicked: { onClicked: {
if (isReloading) { if (isReloading) {
update.glyph = hifi.glyphs.playback_play update.glyph = hifi.glyphs.playback_play
@ -197,25 +214,49 @@ Item {
} }
} }
Rectangle {
id: membersBackground
anchors {
left: parent.left; right: parent.right; top: topBar2.bottom; bottom: bottomBar.top;
margins: 30
}
color: hifi.colors.tableBackgroundDark
border.color: hifi.colors.lightGray
border.width: 2
radius: 5
ListModel { ListModel {
id: memberModel id: memberModel
} }
Component { Component {
id: memberDelegate id: memberDelegate
Item {
id: item
width: parent.width
anchors.left: parent.left
height: 26
clip: true
Rectangle {
width: parent.width
height: parent.height
color: index % 2 == 0 ? hifi.colors.tableRowDarkEven : hifi.colors.tableRowDarkOdd
anchors.verticalCenter: parent.verticalCenter
Row { Row {
id: memberRow id: memberRow
property var isMainKey: apiType === "class"; anchors.bottom: parent.bottom
anchors.verticalCenter: parent.verticalCenter
spacing: 10 spacing: 10
Rectangle {
width: isMainKey ? 20 : 40;
height: parent.height
}
RalewayRegular { FiraSansSemiBold {
property var isMainKey: apiType === "class";
text: apiMember text: apiMember
size: !isMainKey ? 16 : 22 size: isMainKey ? 17 : 15
font.bold: true
anchors.verticalCenter: parent.verticalCenter
color: isMainKey ? hifi.colors.faintGray : hifi.colors.lightGrayText
MouseArea { MouseArea {
width: list.width width: list.width
height: parent.height height: parent.height
@ -231,36 +272,45 @@ Item {
} else { } else {
isolateElement(evaluatingIdx); isolateElement(evaluatingIdx);
} }
} }
} }
} }
FiraSansRegular {
RalewayRegular {
text: apiType text: apiType
size: 14 anchors.left: apiMember.right
color: hifi.colors.baseGrayHighlight anchors.verticalCenter: parent.verticalCenter
size: 13
color: hifi.colors.lightGrayText
} }
RalewayRegular { FiraSansRegular {
text: !apiValue ? "" : apiValue; text: !apiValue ? "" : apiValue;
size: 16 anchors.left: apiType.right
color: "#4466DD" anchors.verticalCenter: parent.verticalCenter
size: 14
color: hifi.colors.primaryHighlight
}
}
} }
} }
} }
Component {
id: highlight
Rectangle { Rectangle {
id: membersBackground
anchors { anchors {
left: parent.left; right: parent.right; top: topBar.bottom; bottom: parent.bottom; left: list.left
margins: hifi.dimensions.contentMargin.x right: scrollBar.left
bottomMargin: hifi.dimensions.contentSpacing.y + 40 leftMargin: 2
rightMargin: 2
} }
color: "white" color: hifi.colors.primaryHighlight
radius: 4 radius: 4
z: 10
opacity: 0.5
}
}
ListView { ListView {
id: list id: list
@ -269,23 +319,16 @@ Item {
left: parent.left left: parent.left
right: scrollBar.left right: scrollBar.left
bottom: parent.bottom bottom: parent.bottom
margins: 4 topMargin: 2
leftMargin: 2
bottomMargin: 2
} }
clip: true clip: true
cacheBuffer: 4000 cacheBuffer: 4000
model: memberModel model: memberModel
delegate: memberDelegate delegate: memberDelegate
highlightMoveDuration: 0 highlightMoveDuration: 0
highlight: highlight
highlight: Rectangle {
anchors {
left: parent ? parent.left : undefined
right: parent ? parent.right : undefined
leftMargin: hifi.dimensions.borderWidth
rightMargin: hifi.dimensions.borderWidth
}
color: "#BBDDFF"
}
onMovementStarted: { onMovementStarted: {
scrollSlider.manual = true; scrollSlider.manual = true;
} }
@ -310,12 +353,11 @@ Item {
top: parent.top top: parent.top
right: parent.right right: parent.right
bottom: parent.bottom bottom: parent.bottom
topMargin: 4 margins: 2
bottomMargin: 4
} }
width: scrolling ? 18 : 0 width: 22
radius: 4 height: parent.height - 4
color: hifi.colors.baseGrayShadow color: hifi.colors.tableScrollBackgroundDark
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
@ -344,14 +386,12 @@ Item {
y = index*(scrollBar.height - scrollSlider.height)/(list.count - 1); y = index*(scrollBar.height - scrollSlider.height)/(list.count - 1);
} }
anchors { anchors.right: parent.right
right: parent.right anchors.margins: 2
rightMargin: 3 width: 18
} height: ((list.height / list.contentHeight) * list.height) < 15 ? 15 : (list.height / list.contentHeight) * list.height
width: 12 radius: 5
height: (list.height / list.contentHeight) * list.height color: hifi.colors.tableScrollHandleDark
radius: width / 4
color: "white"
visible: scrollBar.scrolling; visible: scrollBar.scrolling;
@ -374,17 +414,24 @@ Item {
} }
} }
Row {
id: bottomBar
anchors.left: parent.left
anchors.leftMargin: 30
anchors.bottom: parent.bottom
anchors.bottomMargin: 30
width: parent.width
height: 40
HifiControls.GlyphButton { HifiControls.GlyphButton {
id: clipboard; id: clipboard;
enabled: true; enabled: true;
color: hifi.buttons.black
glyph: hifi.glyphs.scriptNew glyph: hifi.glyphs.scriptNew
size: 38 size: 25
width: 50 width: 40
height: 50 height: 40
anchors.left: parent.left anchors.left: parent.left
anchors.bottom: parent.bottom
anchors.margins: 2
anchors.leftMargin: 8
onClicked: { onClicked: {
var buffer = ""; var buffer = "";
for (var i = 0; i < memberModel.count; i++) { for (var i = 0; i < memberModel.count; i++) {
@ -396,30 +443,15 @@ Item {
} }
} }
HifiControls.Button {
id: debug;
enabled: true;
text: "Debug Script"
width: 120
height: 50
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.margins: 2
anchors.rightMargin: 8
onClicked: {
sendToScript({type: "selectScript"});
}
}
HifiControls.CheckBox { HifiControls.CheckBox {
id: hideQt id: hideQt
colorScheme: hifi.checkbox.dark
boxSize: 25 boxSize: 25
boxRadius: 3 boxRadius: 3
checked: true checked: true
anchors.left: clipboard.right anchors.left: clipboard.right
anchors.leftMargin: 8 anchors.leftMargin: 10
anchors.verticalCenter: clipboard.verticalCenter anchors.verticalCenter: clipboard.verticalCenter
anchors.margins: 2
onClicked: { onClicked: {
hideQtMethods = checked; hideQtMethods = checked;
addListElements(); addListElements();
@ -435,6 +467,23 @@ Item {
text: "Hide Qt Methods" text: "Hide Qt Methods"
} }
HifiControls.Button {
id: debug;
enabled: true;
color: hifi.buttons.black
text: "Debug Script"
width: 120
height: 40
anchors.right: parent.right
anchors.rightMargin: 60
anchors.bottom: parent.bottom
onClicked: {
sendToScript({type: "selectScript"});
}
}
}
HifiControls.Keyboard { HifiControls.Keyboard {
id: keyboard; id: keyboard;
raised: false; raised: false;

4
scripts/developer/utilities/tools/currentAPI.js
View file

@ -28,8 +28,8 @@
var window = new OverlayWindow({ var window = new OverlayWindow({
title: 'API Debugger', title: 'API Debugger',
source: qml, source: qml,
width: 1200, width: 500,
height: 500 height: 700
}); });
window.closed.connect(function () { window.closed.connect(function () {