Skip to content

Q
qgroundcontrol
Commit 86978aa1 authored by Valentin Platzgummer's avatar Valentin Platzgummer
Browse files
Options

ToolStrip.qml working

parent b9bb4442
Show whitespace changes
Inline Side-by-side
Showing with 82 additions and 71 deletions
src/QmlControls/ToolStrip.qml
View file @ 86978aa1
...@@ -14,6 +14,7 @@ import QtQuick.Layouts 1.11 ...@@ -14,6 +14,7 @@ import QtQuick.Layouts 1.11
import QGroundControl.ScreenTools 1.0 import QGroundControl.ScreenTools 1.0
import QGroundControl.Palette 1.0 import QGroundControl.Palette 1.0
// Tool Strip not tested for mobile devices!
Rectangle { Rectangle {
id: _root id: _root
color: qgcPal.window color: qgcPal.window
...@@ -30,7 +31,7 @@ Rectangle { ...@@ -30,7 +31,7 @@ Rectangle {
property var animateImage ///< List of bool values, one for each button in strip - true: animate image, false: static image property var animateImage ///< List of bool values, one for each button in strip - true: animate image, false: static image
property var buttonEnabled ///< List of bool values, one for each button in strip - true: button enabled, false: button disabled property var buttonEnabled ///< List of bool values, one for each button in strip - true: button enabled, false: button disabled
property var buttonVisible ///< List of bool values, one for each button in strip - true: button visible, false: button invisible property var buttonVisible ///< List of bool values, one for each button in strip - true: button visible, false: button invisible
property real maxHeight ///< Maximum height for control, determines whether text is hidden to make control shorter property var maxHeight /// legacy parameter, does not have any impact
property bool horizontal: false /// toolstrip horizontal or vertical ? property bool horizontal: false /// toolstrip horizontal or vertical ?
property bool enableSwitchButton: false /// enable horizontal vertical button ? property bool enableSwitchButton: false /// enable horizontal vertical button ?
...@@ -42,7 +43,7 @@ Rectangle { ...@@ -42,7 +43,7 @@ Rectangle {
readonly property real _margin: ScreenTools.defaultFontPixelWidth / 2 readonly property real _margin: ScreenTools.defaultFontPixelWidth / 2
readonly property real _buttonSpacing: ScreenTools.defaultFontPixelHeight / 4 readonly property real _buttonSpacing: ScreenTools.defaultFontPixelHeight / 4
readonly property real _buttonWidthHeight: ScreenTools.isMobile ? ScreenTools.minTouchPixels : ScreenTools.defaultFontPixelWidth * 8 readonly property real _buttonWidthHeight: ScreenTools.isMobile ? ScreenTools.minTouchPixels : ScreenTools.defaultFontPixelWidth * 6
Component.onCompleted: toolStripGrid.horizontal = _root.horizontal Component.onCompleted: toolStripGrid.horizontal = _root.horizontal
...@@ -72,16 +73,20 @@ Rectangle { ...@@ -72,16 +73,20 @@ Rectangle {
anchors.left: parent.left anchors.left: parent.left
columnSpacing: _buttonSpacing columnSpacing: _buttonSpacing
rowSpacing: _buttonSpacing rowSpacing: _buttonSpacing
rows: toolStripGrid.horizontal ? 1 : model.length
columns: toolStripGrid.horizontal ? model.length : 1 // Lable + Separator + GridLayout + Spearator + Switch Button
property int numItems: enableSwitchButton ? 5 : 3
rows: toolStripGrid.horizontal ? 1 : numItems
columns: toolStripGrid.horizontal ? numItems : 1
horizontalItemAlignment: Grid.AlignHCenter
verticalItemAlignment: Grid.AlignVCenter
property bool horizontal property bool horizontal
QGCLabel { QGCLabel {
text: title text: title
font.pointSize: ScreenTools.mobile ? ScreenTools.smallFontPointSize : ScreenTools.defaultFontPointSize font.pointSize: ScreenTools.mobile ? ScreenTools.smallFontPointSize : ScreenTools.defaultFontPointSize
Layout.alignment: toolStripGrid.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
} }
...@@ -93,12 +98,14 @@ Rectangle { ...@@ -93,12 +98,14 @@ Rectangle {
} }
GridLayout { GridLayout {
id: modelButtonsGrid
rows: toolStripGrid.horizontal ? 1 : model.length rows: toolStripGrid.horizontal ? 1 : model.length
columns: toolStripGrid.horizontal ? model.length : 1 columns: toolStripGrid.horizontal ? model.length : 1
columnSpacing: _buttonSpacing columnSpacing: _buttonSpacing
rowSpacing: _buttonSpacing rowSpacing: _buttonSpacing
Repeater { Repeater {
id: repeater id: repeater
...@@ -149,20 +156,22 @@ Rectangle { ...@@ -149,20 +156,22 @@ Rectangle {
Rectangle { Rectangle {
id: buttonRect id: buttonRect
anchors.left: parent.left
anchors.top: parent.top
height: _buttonWidthHeight height: _buttonWidthHeight
width: _buttonWidthHeight width: _buttonWidthHeight
color: _showHighlight ? _repeaterPal.buttonHighlight : _repeaterPal.window color: _showHighlight ? _repeaterPal.buttonHighlight : _repeaterPal.window
clip: true clip: true
radius: ScreenTools.defaultFontPixelWidth/2 radius: ScreenTools.defaultFontPixelWidth/2
Column {
anchors.horizontalCenter: parent.horizontalCenter
QGCColoredImage { QGCColoredImage {
id: buttonImage id: buttonImage
height: _buttonWidthHeight-buttonLabel.height height: _buttonWidthHeight-buttonLabel.height
width: _buttonWidthHeight-buttonLabel.height width: _buttonWidthHeight-buttonLabel.height
anchors.centerIn: parent
source: _source source: _source
anchors.horizontalCenter: parent.horizontalCenter
sourceSize.height: _buttonWidthHeight-buttonLabel.height sourceSize.height: _buttonWidthHeight-buttonLabel.height
sourceSize.width: _buttonWidthHeight-buttonLabel.height sourceSize.width: _buttonWidthHeight-buttonLabel.height
fillMode: Image.PreserveAspectCrop fillMode: Image.PreserveAspectCrop
...@@ -191,14 +200,14 @@ Rectangle { ...@@ -191,14 +200,14 @@ Rectangle {
QGCLabel { QGCLabel {
id: buttonLabel id: buttonLabel
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
font.pointSize: ScreenTools.smallFontPointSize font.pointSize: ScreenTools.smallFontPointSize
text: modelData.name text: modelData.name
color: _showHighlight ? _repeaterPal.buttonHighlightText : _repeaterPal.text color: _showHighlight ? _repeaterPal.buttonHighlightText : _repeaterPal.text
enabled: _buttonEnabled enabled: _buttonEnabled
} }
}
QGCMouseArea { QGCMouseArea {
anchors.fill: parent anchors.fill: parent
...@@ -249,24 +258,26 @@ Rectangle { ...@@ -249,24 +258,26 @@ Rectangle {
// switch button, tool strip horizontal <-> vertical // switch button, tool strip horizontal <-> vertical
Rectangle { Rectangle {
id: switchButtonRect id: switchButtonRect
height: _buttonWidthHeight height: enableSwitchButton ? _buttonWidthHeight : 0
width: _buttonWidthHeight width: enableSwitchButton ? _buttonWidthHeight : 0
color: _showHighlight ? _switchButtonPal.buttonHighlight : _switchButtonPal.window color: _showHighlight ? _switchButtonPal.buttonHighlight : _switchButtonPal.window
visible: enableSwitchButton visible: enableSwitchButton
radius: ScreenTools.defaultFontPixelWidth/2 radius: ScreenTools.defaultFontPixelWidth/2
clip: true
property bool _hovered: false property bool _hovered: false
property bool _showHighlight: (enableSwitchButton && _hovered) property bool _showHighlight: (enableSwitchButton && _hovered)
QGCPalette { id: _switchButtonPal; colorGroupEnabled: enableSwitchButton } QGCPalette { id: _switchButtonPal; colorGroupEnabled: enableSwitchButton }
Column {
anchors.horizontalCenter: parent.horizontalCenter
QGCColoredImage { QGCColoredImage {
id: switchButtonImage id: switchButtonImage
height: _buttonWidthHeight-switchButtonLabel.height height: _buttonWidthHeight-switchButtonLabel.height
width: _buttonWidthHeight-switchButtonLabel.height width: _buttonWidthHeight-switchButtonLabel.height
anchors.top: parent.top
anchors.centerIn: parent
source: "/res/clockwise-arrow.svg" source: "/res/clockwise-arrow.svg"
anchors.horizontalCenter: parent.horizontalCenter
sourceSize.height: _buttonWidthHeight-switchButtonLabel.height sourceSize.height: _buttonWidthHeight-switchButtonLabel.height
sourceSize.width: _buttonWidthHeight-switchButtonLabel.height sourceSize.width: _buttonWidthHeight-switchButtonLabel.height
fillMode: Image.PreserveAspectCrop fillMode: Image.PreserveAspectCrop
...@@ -278,12 +289,12 @@ Rectangle { ...@@ -278,12 +289,12 @@ Rectangle {
QGCLabel { QGCLabel {
id: switchButtonLabel id: switchButtonLabel
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
font.pointSize: ScreenTools.smallFontPointSize font.pointSize: ScreenTools.smallFontPointSize
text: toolStripGrid.horizontal ? "Vert" : "Hor" text: toolStripGrid.horizontal ? "Vert" : "Hor"
color: switchButtonRect._showHighlight ? _switchButtonPal.buttonHighlightText : _switchButtonPal.text color: switchButtonRect._showHighlight ? _switchButtonPal.buttonHighlightText : _switchButtonPal.text
enabled: enableSwitchButton enabled: enableSwitchButton
} }
}
QGCMouseArea { QGCMouseArea {
anchors.fill: parent anchors.fill: parent
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment