mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-08-14 16:30:35 +02:00
Style running scripts and available scripts tables
This commit is contained in:
David Rowe
parent
b2314d33ba
commit
d32f743f52
5 changed files with 245 additions and 102 deletions
133
interface/resources/qml/controls-uit/Table.qml
Normal file
133
interface/resources/qml/controls-uit/Table.qml
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
//
|
||||
// Table.qml
|
||||
//
|
||||
// Created by David Rowe on 18 Feb 2016
|
||||
// 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"
|
||||
|
||||
TableView {
|
||||
id: tableView
|
||||
|
||||
property var tableModel: ListModel { }
|
||||
property int colorScheme: hifi.colorSchemes.light
|
||||
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
|
||||
|
||||
model: tableModel
|
||||
|
||||
TableViewColumn {
|
||||
role: "name"
|
||||
}
|
||||
|
||||
anchors { left: parent.left; right: parent.right }
|
||||
|
||||
headerVisible: false
|
||||
|
||||
// Use rectangle to draw border with rounded corners.
|
||||
frameVisible: false
|
||||
Rectangle {
|
||||
color: "#00000000"
|
||||
anchors { fill: parent; margins: -2 }
|
||||
radius: hifi.dimensions.borderRadius
|
||||
border.color: isLightColorScheme ? hifi.colors.lightGrayText : hifi.colors.baseGrayHighlight
|
||||
border.width: 2
|
||||
}
|
||||
anchors.margins: 2 // Shrink TableView to lie within border.
|
||||
|
||||
backgroundVisible: true
|
||||
|
||||
style: TableViewStyle {
|
||||
// Needed in order for rows to keep displaying rows after end of table entries.
|
||||
backgroundColor: treeView.isLightColorScheme ? hifi.colors.tableRowLightEven : hifi.colors.tableRowDarkEven
|
||||
alternateBackgroundColor: treeView.isLightColorScheme ? hifi.colors.tableRowLightOdd : hifi.colors.tableRowDarkOdd
|
||||
}
|
||||
|
||||
rowDelegate: Rectangle {
|
||||
height: (styleData.selected ? 1.8 : 1) * hifi.dimensions.tableRowHeight
|
||||
color: styleData.selected
|
||||
? hifi.colors.primaryHighlight
|
||||
: tableView.isLightColorScheme
|
||||
? (styleData.alternate ? hifi.colors.tableRowLightEven : hifi.colors.tableRowLightOdd)
|
||||
: (styleData.alternate ? hifi.colors.tableRowDarkEven : hifi.colors.tableRowDarkOdd)
|
||||
}
|
||||
|
||||
itemDelegate: Item {
|
||||
anchors {
|
||||
left: parent.left
|
||||
leftMargin: hifi.dimensions.tablePadding
|
||||
right: parent.right
|
||||
rightMargin: hifi.dimensions.tablePadding
|
||||
}
|
||||
|
||||
FiraSansSemiBold {
|
||||
id: textItem
|
||||
text: styleData.value
|
||||
size: hifi.fontSizes.tableText
|
||||
color: colorScheme == hifi.colorSchemes.light
|
||||
? (styleData.selected ? hifi.colors.black : hifi.colors.baseGrayHighlight)
|
||||
: (styleData.selected ? hifi.colors.black : hifi.colors.lightGrayText)
|
||||
anchors {
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
top: parent.top
|
||||
topMargin: 3
|
||||
}
|
||||
|
||||
// FIXME: Put reload item in tableModel passed in from RunningScripts.
|
||||
HiFiGlyphs {
|
||||
id: reloadButton
|
||||
text: "a"
|
||||
color: parent.color
|
||||
anchors {
|
||||
top: parent.top
|
||||
right: stopButton.left
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
MouseArea {
|
||||
anchors { fill: parent; margins: -2 }
|
||||
onClicked: reloadScript(model.url)
|
||||
}
|
||||
}
|
||||
|
||||
// FIXME: Put stop item in tableModel passed in from RunningScripts.
|
||||
HiFiGlyphs {
|
||||
id: stopButton
|
||||
text: "C"
|
||||
color: parent.color
|
||||
anchors {
|
||||
top: parent.top
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
MouseArea {
|
||||
anchors { fill: parent; margins: -2 }
|
||||
onClicked: stopScript(model.url)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// FIXME: Automatically use aux. information from tableModel
|
||||
FiraSansSemiBold {
|
||||
text: tableModel.get(styleData.row).url
|
||||
elide: Text.ElideMiddle
|
||||
size: hifi.fontSizes.tableText
|
||||
color: colorScheme == hifi.colorSchemes.light
|
||||
? (styleData.selected ? hifi.colors.black : hifi.colors.lightGray)
|
||||
: (styleData.selected ? hifi.colors.black : hifi.colors.lightGrayText)
|
||||
anchors {
|
||||
top: textItem.bottom
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
}
|
||||
visible: styleData.selected
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -21,9 +21,9 @@ TextField {
|
|||
property string label: ""
|
||||
|
||||
FontLoader { id: firaSansSemiBold; source: "../../fonts/FiraSans-SemiBold.ttf"; }
|
||||
font.pointSize: 16
|
||||
font.pointSize: hifi.fontSizes.textFieldInput
|
||||
|
||||
style: TextFieldStyle {
|
||||
style: TextFieldStyle {
|
||||
textColor: textField.colorScheme == hifi.colorSchemes.light
|
||||
? (textField.focus ? hifi.colors.black : hifi.colors.lightGray)
|
||||
: (textField.focus ? hifi.colors.white : hifi.colors.lightGrayText)
|
||||
|
|
|
|||
88
interface/resources/qml/controls-uit/Tree.qml
Normal file
88
interface/resources/qml/controls-uit/Tree.qml
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
//
|
||||
// Table.qml
|
||||
//
|
||||
// Created by David Rowe on 17 Feb 2016
|
||||
// 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"
|
||||
|
||||
TreeView {
|
||||
id: treeView
|
||||
|
||||
property var treeModel: ListModel { }
|
||||
property int colorScheme: hifi.colorSchemes.light
|
||||
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
|
||||
|
||||
model: treeModel
|
||||
|
||||
TableViewColumn {
|
||||
role: "display";
|
||||
}
|
||||
|
||||
anchors { left: parent.left; right: parent.right }
|
||||
|
||||
headerVisible: false
|
||||
|
||||
// Use rectangle to draw border with rounded corners.
|
||||
frameVisible: false
|
||||
Rectangle {
|
||||
color: "#00000000"
|
||||
anchors.fill: parent
|
||||
radius: hifi.dimensions.borderRadius
|
||||
border.color: isLightColorScheme ? hifi.colors.lightGrayText : hifi.colors.baseGrayHighlight
|
||||
border.width: 2
|
||||
anchors.margins: -2
|
||||
}
|
||||
anchors.margins: 2 // Shrink TreeView to lie within border.
|
||||
|
||||
backgroundVisible: true
|
||||
|
||||
style: TreeViewStyle {
|
||||
// Needed in order for rows to keep displaying rows after end of table entries.
|
||||
backgroundColor: treeView.isLightColorScheme ? hifi.colors.tableRowLightEven : hifi.colors.tableRowDarkEven
|
||||
alternateBackgroundColor: treeView.isLightColorScheme ? hifi.colors.tableRowLightOdd : hifi.colors.tableRowDarkOdd
|
||||
}
|
||||
|
||||
rowDelegate: Rectangle {
|
||||
height: hifi.dimensions.tableRowHeight
|
||||
color: styleData.selected
|
||||
? hifi.colors.primaryHighlight
|
||||
: treeView.isLightColorScheme
|
||||
? (styleData.alternate ? hifi.colors.tableRowLightEven : hifi.colors.tableRowLightOdd)
|
||||
: (styleData.alternate ? hifi.colors.tableRowDarkEven : hifi.colors.tableRowDarkOdd)
|
||||
}
|
||||
|
||||
itemDelegate: FiraSansSemiBold {
|
||||
anchors {
|
||||
left: parent.left
|
||||
leftMargin: (2 + styleData.depth) * hifi.dimensions.tablePadding
|
||||
right: parent.right
|
||||
rightMargin: hifi.dimensions.tablePadding
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
text: styleData.value
|
||||
size: hifi.fontSizes.tableText
|
||||
color: colorScheme == hifi.colorSchemes.light
|
||||
? (styleData.selected ? hifi.colors.black : hifi.colors.baseGrayHighlight)
|
||||
: (styleData.selected ? hifi.colors.black : hifi.colors.lightGrayText)
|
||||
}
|
||||
|
||||
onDoubleClicked: isExpanded(index) ? collapse(index) : expand(index)
|
||||
|
||||
// FIXME not triggered by double click?
|
||||
onActivated: {
|
||||
var path = scriptsModel.data(index, 0x100)
|
||||
if (path) {
|
||||
loadScript(path)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -101,69 +101,12 @@ Window {
|
|||
}
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
onActiveFocusChanged: if (activeFocus && listView.currentItem) { listView.currentItem.forceActiveFocus(); }
|
||||
|
||||
ListView {
|
||||
id: listView
|
||||
clip: true
|
||||
anchors { fill: parent; margins: 0 }
|
||||
model: runningScriptsModel
|
||||
delegate: FocusScope {
|
||||
id: scope
|
||||
anchors { left: parent.left; right: parent.right }
|
||||
height: scriptName.height + 12 + (ListView.isCurrentItem ? scriptName.height + 6 : 0)
|
||||
Keys.onDownPressed: listView.incrementCurrentIndex()
|
||||
Keys.onUpPressed: listView.decrementCurrentIndex()
|
||||
Rectangle {
|
||||
id: rectangle
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
radius: 3
|
||||
color: scope.ListView.isCurrentItem ? "#79f" :
|
||||
index % 2 ? "#ddd" : "#eee"
|
||||
|
||||
Text {
|
||||
id: scriptName
|
||||
anchors { left: parent.left; leftMargin: 4; top: parent.top; topMargin:6 }
|
||||
text: name
|
||||
}
|
||||
|
||||
Text {
|
||||
id: scriptUrl
|
||||
anchors { left: scriptName.left; right: parent.right; rightMargin: 4; top: scriptName.bottom; topMargin: 6 }
|
||||
text: url
|
||||
elide: Text.ElideMiddle
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: { listView.currentIndex = index; scope.forceActiveFocus(); }
|
||||
}
|
||||
|
||||
Row {
|
||||
anchors.verticalCenter: scriptName.verticalCenter
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 4
|
||||
spacing: 4
|
||||
HifiControls.FontAwesome {
|
||||
text: "\uf021"; size: scriptName.height;
|
||||
MouseArea {
|
||||
anchors { fill: parent; margins: -2; }
|
||||
onClicked: reloadScript(model.url)
|
||||
}
|
||||
}
|
||||
HifiControls.FontAwesome {
|
||||
size: scriptName.height; text: "\uf00d"
|
||||
MouseArea {
|
||||
anchors { fill: parent; margins: -2; }
|
||||
onClicked: stopScript(model.url)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
HifiControls.Table {
|
||||
tableModel: runningScriptsModel
|
||||
height: 185
|
||||
colorScheme: hifi.colorSchemes.dark
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -215,6 +158,8 @@ Window {
|
|||
|
||||
HifiControls.TextField {
|
||||
id: filterEdit
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
focus: true
|
||||
colorScheme: hifi.colorSchemes.dark
|
||||
//placeholderText: "filter"
|
||||
|
|
@ -223,44 +168,13 @@ Window {
|
|||
Component.onCompleted: scriptsModel.filterRegExp = new RegExp("^.*$", "i")
|
||||
}
|
||||
|
||||
TreeView {
|
||||
HifiControls.Tree {
|
||||
id: treeView
|
||||
height: 128
|
||||
headerVisible: false
|
||||
// FIXME doesn't work?
|
||||
onDoubleClicked: isExpanded(index) ? collapse(index) : expand(index)
|
||||
// FIXME not triggered by double click?
|
||||
onActivated: {
|
||||
var path = scriptsModel.data(index, 0x100)
|
||||
if (path) {
|
||||
loadScript(path)
|
||||
}
|
||||
}
|
||||
model: scriptsModel
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
acceptedButtons: Qt.RightButton
|
||||
onClicked: treeView.foo();
|
||||
}
|
||||
|
||||
function foo() {
|
||||
var localRect = Qt.rect(0, 0, width, height);
|
||||
var rect = desktop.mapFromItem(treeView, 0, 0, width, height)
|
||||
console.log("Local Rect " + localRect)
|
||||
console.log("Rect " + rect)
|
||||
console.log("Desktop size " + Qt.size(desktop.width, desktop.height));
|
||||
}
|
||||
|
||||
TableViewColumn {
|
||||
title: "Name";
|
||||
role: "display";
|
||||
// delegate: Text {
|
||||
// text: styleData.value
|
||||
// renderType: Text.QtRendering
|
||||
// elite: styleData.elideMode
|
||||
// }
|
||||
}
|
||||
height: 155
|
||||
treeModel: scriptsModel
|
||||
colorScheme: hifi.colorSchemes.dark
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
}
|
||||
|
||||
HifiControls.TextField {
|
||||
|
|
|
|||
|
|
@ -41,12 +41,17 @@ Item {
|
|||
|
||||
readonly property color white50: "#80ffffff"
|
||||
readonly property color white30: "#4dffffff"
|
||||
readonly property color white25: "#40ffffff"
|
||||
readonly property color baseGrayHighlight15: "#26575757"
|
||||
readonly property color baseGrayHighlight40: "#66575757"
|
||||
readonly property color darkGray30: "#4d121212"
|
||||
readonly property color darkGray0: "#00121212"
|
||||
readonly property color faintGray50: "#80e3e3e3"
|
||||
readonly property color baseGrayShadow60: "#99252525"
|
||||
readonly property color tableRowLightOdd: white50
|
||||
readonly property color tableRowLightEven: "#1a575757"
|
||||
readonly property color tableRowDarkOdd: "#80393939"
|
||||
readonly property color tableRowDarkEven: "#a6181818"
|
||||
}
|
||||
|
||||
Item {
|
||||
|
|
@ -63,6 +68,8 @@ Item {
|
|||
readonly property vector2d contentMargin: Qt.vector2d(12, 24)
|
||||
readonly property vector2d contentSpacing: Qt.vector2d(8, 12)
|
||||
readonly property real textPadding: 8
|
||||
readonly property real tablePadding: 12
|
||||
readonly property real tableRowHeight: largeScreen ? 26 : 23
|
||||
}
|
||||
|
||||
Item {
|
||||
|
|
@ -72,6 +79,7 @@ Item {
|
|||
readonly property real sectionName: dimensions.largeScreen? 11 : 9
|
||||
readonly property real inputLabel: dimensions.largeScreen? 11 : 9
|
||||
readonly property real textFieldInput: dimensions.largeScreen? 13.5 : 11
|
||||
readonly property real tableText: dimensions.largeScreen? 13.5 : 11
|
||||
readonly property real buttonLabel: dimensions.largeScreen? 12 : 10
|
||||
readonly property real button: dimensions.largeScreen? 12 : 10
|
||||
readonly property real listItem: dimensions.largeScreen? 11 : 9
|
||||
|
|
|
|||
Loading…
Reference in a new issue