diff --git a/src/QmlControls/ToolStrip.qml b/src/QmlControls/ToolStrip.qml index 42e42602b76a52080337952521f8d4ebe6f82b8d..95abb2985b61628aa23f422fe0c6098565964fb5 100644 --- a/src/QmlControls/ToolStrip.qml +++ b/src/QmlControls/ToolStrip.qml @@ -14,6 +14,7 @@ import QtQuick.Layouts 1.11 import QGroundControl.ScreenTools 1.0 import QGroundControl.Palette 1.0 +// Tool Strip not tested for mobile devices! Rectangle { id: _root color: qgcPal.window @@ -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 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 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 enableSwitchButton: false /// enable horizontal vertical button ? @@ -42,7 +43,7 @@ Rectangle { readonly property real _margin: ScreenTools.defaultFontPixelWidth / 2 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 @@ -72,16 +73,20 @@ Rectangle { anchors.left: parent.left columnSpacing: _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 QGCLabel { text: title font.pointSize: ScreenTools.mobile ? ScreenTools.smallFontPointSize : ScreenTools.defaultFontPointSize - Layout.alignment: toolStripGrid.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter - } @@ -93,12 +98,14 @@ Rectangle { } GridLayout { + id: modelButtonsGrid rows: toolStripGrid.horizontal ? 1 : model.length columns: toolStripGrid.horizontal ? model.length : 1 columnSpacing: _buttonSpacing rowSpacing: _buttonSpacing + Repeater { id: repeater @@ -149,56 +156,58 @@ Rectangle { Rectangle { id: buttonRect - anchors.left: parent.left - anchors.top: parent.top height: _buttonWidthHeight width: _buttonWidthHeight color: _showHighlight ? _repeaterPal.buttonHighlight : _repeaterPal.window clip: true radius: ScreenTools.defaultFontPixelWidth/2 - QGCColoredImage { - id: buttonImage - height: _buttonWidthHeight-buttonLabel.height - width: _buttonWidthHeight-buttonLabel.height - anchors.centerIn: parent - source: _source - sourceSize.height: _buttonWidthHeight-buttonLabel.height - sourceSize.width: _buttonWidthHeight-buttonLabel.height - fillMode: Image.PreserveAspectCrop - mipmap: true - smooth: true - color: _showHighlight ? _repeaterPal.buttonHighlightText : _repeaterPal.text - - RotationAnimation on rotation { - id: imageRotation - loops: Animation.Infinite - from: 0 - to: 360 - duration: 500 - running: false - } + Column { + + anchors.horizontalCenter: parent.horizontalCenter + + QGCColoredImage { + id: buttonImage + height: _buttonWidthHeight-buttonLabel.height + width: _buttonWidthHeight-buttonLabel.height + source: _source + anchors.horizontalCenter: parent.horizontalCenter + sourceSize.height: _buttonWidthHeight-buttonLabel.height + sourceSize.width: _buttonWidthHeight-buttonLabel.height + fillMode: Image.PreserveAspectCrop + mipmap: true + smooth: true + color: _showHighlight ? _repeaterPal.buttonHighlightText : _repeaterPal.text + + RotationAnimation on rotation { + id: imageRotation + loops: Animation.Infinite + from: 0 + to: 360 + duration: 500 + running: false + } - NumberAnimation on opacity { - id: opacityAnimation - running: false - from: 0 - to: 1.0 - loops: Animation.Infinite - duration: 2000 + NumberAnimation on opacity { + id: opacityAnimation + running: false + from: 0 + to: 1.0 + loops: Animation.Infinite + duration: 2000 + } } - } - QGCLabel { - id: buttonLabel - anchors.horizontalCenter: parent.horizontalCenter - anchors.bottom: parent.bottom - font.pointSize: ScreenTools.smallFontPointSize - text: modelData.name - color: _showHighlight ? _repeaterPal.buttonHighlightText : _repeaterPal.text - enabled: _buttonEnabled - } + QGCLabel { + id: buttonLabel + anchors.horizontalCenter: parent.horizontalCenter + font.pointSize: ScreenTools.smallFontPointSize + text: modelData.name + color: _showHighlight ? _repeaterPal.buttonHighlightText : _repeaterPal.text + enabled: _buttonEnabled + } + } QGCMouseArea { anchors.fill: parent @@ -249,40 +258,42 @@ Rectangle { // switch button, tool strip horizontal <-> vertical Rectangle { id: switchButtonRect - height: _buttonWidthHeight - width: _buttonWidthHeight + height: enableSwitchButton ? _buttonWidthHeight : 0 + width: enableSwitchButton ? _buttonWidthHeight : 0 color: _showHighlight ? _switchButtonPal.buttonHighlight : _switchButtonPal.window - visible: enableSwitchButton + visible: enableSwitchButton radius: ScreenTools.defaultFontPixelWidth/2 + clip: true property bool _hovered: false property bool _showHighlight: (enableSwitchButton && _hovered) QGCPalette { id: _switchButtonPal; colorGroupEnabled: enableSwitchButton } - QGCColoredImage { - id: switchButtonImage - height: _buttonWidthHeight-switchButtonLabel.height - width: _buttonWidthHeight-switchButtonLabel.height - anchors.top: parent.top - anchors.centerIn: parent - source: "/res/clockwise-arrow.svg" - sourceSize.height: _buttonWidthHeight-switchButtonLabel.height - sourceSize.width: _buttonWidthHeight-switchButtonLabel.height - fillMode: Image.PreserveAspectCrop - mipmap: true - smooth: true - color: switchButtonRect._showHighlight ? _switchButtonPal.buttonHighlightText : _switchButtonPal.text - } + Column { + anchors.horizontalCenter: parent.horizontalCenter + QGCColoredImage { + id: switchButtonImage + height: _buttonWidthHeight-switchButtonLabel.height + width: _buttonWidthHeight-switchButtonLabel.height + source: "/res/clockwise-arrow.svg" + anchors.horizontalCenter: parent.horizontalCenter + sourceSize.height: _buttonWidthHeight-switchButtonLabel.height + sourceSize.width: _buttonWidthHeight-switchButtonLabel.height + fillMode: Image.PreserveAspectCrop + mipmap: true + smooth: true + color: switchButtonRect._showHighlight ? _switchButtonPal.buttonHighlightText : _switchButtonPal.text + } - QGCLabel { - id: switchButtonLabel - anchors.horizontalCenter: parent.horizontalCenter - anchors.bottom: parent.bottom - font.pointSize: ScreenTools.smallFontPointSize - text: toolStripGrid.horizontal ? "Vert" : "Hor" - color: switchButtonRect._showHighlight ? _switchButtonPal.buttonHighlightText : _switchButtonPal.text - enabled: enableSwitchButton + QGCLabel { + id: switchButtonLabel + anchors.horizontalCenter: parent.horizontalCenter + font.pointSize: ScreenTools.smallFontPointSize + text: toolStripGrid.horizontal ? "Vert" : "Hor" + color: switchButtonRect._showHighlight ? _switchButtonPal.buttonHighlightText : _switchButtonPal.text + enabled: enableSwitchButton + } } QGCMouseArea {