Add snapshots UI
This commit is contained in:
parent
3c1cb67a27
commit
157b2148cb
4 changed files with 248 additions and 13 deletions
|
@ -7,5 +7,7 @@
|
||||||
<file>qml/CanvasFrame.qml</file>
|
<file>qml/CanvasFrame.qml</file>
|
||||||
<file>qml/BrowsePanel.qml</file>
|
<file>qml/BrowsePanel.qml</file>
|
||||||
<file>qml/LoadSavePanel.qml</file>
|
<file>qml/LoadSavePanel.qml</file>
|
||||||
|
<file>qml/VerticalTabPanel.qml</file>
|
||||||
|
<file>qml/SnapshotsPanel.qml</file>
|
||||||
</qresource>
|
</qresource>
|
||||||
</RCC>
|
</RCC>
|
||||||
|
|
123
utils/fgqcanvas/qml/SnapshotsPanel.qml
Normal file
123
utils/fgqcanvas/qml/SnapshotsPanel.qml
Normal file
|
@ -0,0 +1,123 @@
|
||||||
|
import QtQuick 2.0
|
||||||
|
import FlightGear 1.0 as FG
|
||||||
|
|
||||||
|
Item {
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: savePanel
|
||||||
|
width: parent.width - 8
|
||||||
|
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.topMargin: 8
|
||||||
|
anchors.bottom: parent.bottom
|
||||||
|
anchors.bottomMargin: 8
|
||||||
|
|
||||||
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
|
|
||||||
|
border.color: "#9f9f9f"
|
||||||
|
border.width: 1
|
||||||
|
color: "#5f5f5f"
|
||||||
|
opacity: 0.8
|
||||||
|
layer.enabled: true
|
||||||
|
|
||||||
|
InputLine {
|
||||||
|
id: saveTitleInput
|
||||||
|
width: parent.width
|
||||||
|
label: "Title"
|
||||||
|
anchors {
|
||||||
|
top: parent.top
|
||||||
|
topMargin: 8
|
||||||
|
left: parent.left
|
||||||
|
leftMargin: 8
|
||||||
|
right: saveButton.left
|
||||||
|
rightMargin: 8
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
Button {
|
||||||
|
id: saveButton
|
||||||
|
label: "Save"
|
||||||
|
enabled: (saveTitleInput.text != "")
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: 8
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.topMargin: 8
|
||||||
|
|
||||||
|
onClicked: {
|
||||||
|
_application.saveSnapshot(saveTitleInput.text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
ListView {
|
||||||
|
id: savedList
|
||||||
|
model: _application.snapshots
|
||||||
|
width: parent.width - 30
|
||||||
|
anchors.top: saveTitleInput.bottom
|
||||||
|
anchors.topMargin: 8
|
||||||
|
anchors.bottom: parent.bottom
|
||||||
|
anchors.bottomMargin: 8
|
||||||
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
|
|
||||||
|
delegate: Item {
|
||||||
|
width: parent.width
|
||||||
|
height:delegateFrame.height + 8
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: delegateBackFrame
|
||||||
|
color: "#1f1f1f"
|
||||||
|
width: delegateFrame.width
|
||||||
|
height: delegateFrame.height
|
||||||
|
|
||||||
|
|
||||||
|
Button {
|
||||||
|
id: deleteButton
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: 8
|
||||||
|
label: "Delete"
|
||||||
|
onClicked: {
|
||||||
|
// _application.deleteConfig(model.index)
|
||||||
|
// _application.deleteConfig
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: delegateFrame
|
||||||
|
width: parent.width
|
||||||
|
|
||||||
|
height: configLabel.implicitHeight + 20
|
||||||
|
|
||||||
|
opacity: 1.0
|
||||||
|
color: "#3f3f3f"
|
||||||
|
|
||||||
|
Text {
|
||||||
|
id: configLabel
|
||||||
|
text: modelData['name']
|
||||||
|
color: "white"
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.leftMargin: 8
|
||||||
|
}
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
anchors.fill: parent
|
||||||
|
onClicked: {
|
||||||
|
_application.restoreSnapshot(model.index);
|
||||||
|
}
|
||||||
|
|
||||||
|
drag.target: delegateFrame
|
||||||
|
drag.axis: Drag.XAxis
|
||||||
|
drag.minimumX: -delegateFrame.width
|
||||||
|
drag.maximumX: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
} // of visible rect
|
||||||
|
} // of delegate item
|
||||||
|
|
||||||
|
}
|
||||||
|
} // of frame rect
|
||||||
|
}
|
105
utils/fgqcanvas/qml/VerticalTabPanel.qml
Normal file
105
utils/fgqcanvas/qml/VerticalTabPanel.qml
Normal file
|
@ -0,0 +1,105 @@
|
||||||
|
import QtQuick 2.0
|
||||||
|
|
||||||
|
Item {
|
||||||
|
id: root
|
||||||
|
property int activeTab: -1
|
||||||
|
property var tabs: []
|
||||||
|
property var titles: []
|
||||||
|
property int __panelWidth: 200
|
||||||
|
|
||||||
|
readonly property int panelWidth: __panelWidth
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: contentBox
|
||||||
|
x: parent.width - width // can't use an anchors, for dragability
|
||||||
|
|
||||||
|
height: parent.height
|
||||||
|
width: (activeTab >= 0) ? __panelWidth : 0
|
||||||
|
color: "#1f1f1f"
|
||||||
|
Behavior on width {
|
||||||
|
enabled: !splitterDrag.drag.active
|
||||||
|
NumberAnimation {
|
||||||
|
duration: 250
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
clip: true
|
||||||
|
|
||||||
|
Loader {
|
||||||
|
anchors.fill: parent
|
||||||
|
sourceComponent: (activeTab >= 0) ? tabs[activeTab] : null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: splitter
|
||||||
|
width: 2
|
||||||
|
height: parent.height
|
||||||
|
anchors.right: contentBox.left
|
||||||
|
|
||||||
|
color: "orange"
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
id: splitterDrag
|
||||||
|
height: parent.height
|
||||||
|
width: parent.width* 3
|
||||||
|
|
||||||
|
drag.target: contentBox
|
||||||
|
drag.axis: Drag.XAxis
|
||||||
|
drag.minimumX: 0
|
||||||
|
drag.maximumX: root.width
|
||||||
|
|
||||||
|
onMouseXChanged: {
|
||||||
|
__panelWidth = root.width - contentBox.x
|
||||||
|
}
|
||||||
|
|
||||||
|
// enabled when open?
|
||||||
|
|
||||||
|
// click to toggle open / close
|
||||||
|
|
||||||
|
cursorShape: Qt.SizeHorCursor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Column {
|
||||||
|
anchors.right: splitter.left
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.topMargin: 20
|
||||||
|
spacing: 1
|
||||||
|
|
||||||
|
Repeater {
|
||||||
|
model: tabs
|
||||||
|
Rectangle {
|
||||||
|
readonly property bool tabIsActive: (model.index == activeTab)
|
||||||
|
width: tabLabel.implicitHeight + 10
|
||||||
|
height: tabLabel.implicitWidth + 20
|
||||||
|
|
||||||
|
color: "#3f3f3f"
|
||||||
|
border.width: 1
|
||||||
|
border.color: "#5f5f5f"
|
||||||
|
|
||||||
|
Text {
|
||||||
|
anchors.centerIn: parent
|
||||||
|
id: tabLabel
|
||||||
|
text: titles[model.index]
|
||||||
|
rotation: 90
|
||||||
|
color: tabIsActive ? "orange" : tabMouse.containsMouse ? "#afafaf" : "#9f9f9f"
|
||||||
|
transformOrigin: Item.Center
|
||||||
|
}
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
id: tabMouse
|
||||||
|
hoverEnabled: true
|
||||||
|
anchors.fill: parent
|
||||||
|
onClicked: {
|
||||||
|
if (parent.tabIsActive) {
|
||||||
|
activeTab = -1
|
||||||
|
} else {
|
||||||
|
activeTab = model.index
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} // rectangle
|
||||||
|
} // of repeater
|
||||||
|
}
|
||||||
|
}
|
|
@ -42,20 +42,25 @@ Rectangle {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
BrowsePanel {
|
VerticalTabPanel {
|
||||||
anchors.top: parent.top
|
anchors.fill: parent
|
||||||
anchors.bottom: parent.bottom
|
tabs: [browsePanel, configPanel, snapshotsPanel]
|
||||||
width: 400
|
titles: ["Connect", "Load / Save", "Snapshots"]
|
||||||
visible: __uiVisible
|
|
||||||
opacity: __uiOpacity
|
|
||||||
}
|
}
|
||||||
|
|
||||||
LoadSavePanel {
|
Component {
|
||||||
anchors.top: parent.top
|
id: browsePanel
|
||||||
anchors.bottom: parent.bottom
|
BrowsePanel { }
|
||||||
anchors.right: parent.right
|
|
||||||
width: 400
|
|
||||||
visible: __uiVisible
|
|
||||||
opacity: __uiOpacity
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Component {
|
||||||
|
id: configPanel
|
||||||
|
LoadSavePanel { }
|
||||||
|
}
|
||||||
|
|
||||||
|
Component {
|
||||||
|
id: snapshotsPanel
|
||||||
|
SnapshotsPanel { }
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue