zhaohuwei
/
QG4
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Better mobile visuals

QGC4.4
Don Gagne 6 years ago
parent
cc339c979d
commit
54d1057523
1 changed files with 114 additions and 119 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 233
      src/QmlControls/ToolStrip.qml

233
src/QmlControls/ToolStrip.qml
Unescape View File

@ -7,8 +7,8 @@
* *
****************************************************************************/ ****************************************************************************/
import QtQuick 2.3 import QtQuick 2.11
import QtQuick.Controls 1.2 import QtQuick.Controls 1.4
import QGroundControl.ScreenTools 1.0 import QGroundControl.ScreenTools 1.0
import QGroundControl.Palette 1.0 import QGroundControl.Palette 1.0
@ -17,7 +17,7 @@ Rectangle {
id: _root id: _root
color: qgcPal.window color: qgcPal.window
width: ScreenTools.isMobile ? ScreenTools.minTouchPixels : ScreenTools.defaultFontPixelWidth * 7 width: ScreenTools.isMobile ? ScreenTools.minTouchPixels : ScreenTools.defaultFontPixelWidth * 7
height: buttonStripColumn.height + (buttonStripColumn.anchors.margins * 2) height: toolStripColumn.height + (toolStripColumn.anchors.margins * 2)
radius: _radius radius: _radius
border.width: 1 border.width: 1
border.color: qgcPal.globalTheme === QGCPalette.Light ? Qt.rgba(0,0,0,0.35) : Qt.rgba(1,1,1,0.35) border.color: qgcPal.globalTheme === QGCPalette.Light ? Qt.rgba(0,0,0,0.35) : Qt.rgba(1,1,1,0.35)
@ -35,9 +35,7 @@ Rectangle {
readonly property real _radius: ScreenTools.defaultFontPixelWidth / 2 readonly property real _radius: ScreenTools.defaultFontPixelWidth / 2
readonly property real _margin: ScreenTools.defaultFontPixelWidth / 2 readonly property real _margin: ScreenTools.defaultFontPixelWidth / 2
readonly property real _buttonSpacing: ScreenTools.defaultFontPixelWidth readonly property real _buttonSpacing: ScreenTools.defaultFontPixelHeight / 4
property bool _showOptionalElements: !ScreenTools.isTinyScreen
QGCPalette { id: qgcPal } QGCPalette { id: qgcPal }
ExclusiveGroup { id: dropButtonsExclusiveGroup } ExclusiveGroup { id: dropButtonsExclusiveGroup }
@ -57,129 +55,141 @@ Rectangle {
} }
Column { Column {
id: buttonStripColumn id: toolStripColumn
anchors.margins: ScreenTools.defaultFontPixelWidth / 2 anchors.margins: ScreenTools.defaultFontPixelWidth / 2
anchors.top: parent.top anchors.top: parent.top
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
spacing: _buttonSpacing
QGCLabel { QGCLabel {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
text: title text: title
visible: _showOptionalElements font.pointSize: ScreenTools.smallFontPointSize
} }
Item { width: 1; height: _buttonSpacing; visible: _showOptionalElements }
Rectangle { Rectangle {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
height: 1 height: 1
color: qgcPal.text color: qgcPal.text
visible: _showOptionalElements
} }
Repeater { Column {
id: repeater anchors.left: parent.left
anchors.right: parent.right
delegate: Column { spacing: _buttonSpacing
id: buttonColumn
width: buttonStripColumn.width Repeater {
visible: _root.buttonVisible ? _root.buttonVisible[index] : true id: repeater
property bool checked: false delegate: FocusScope {
property ExclusiveGroup exclusiveGroup: dropButtonsExclusiveGroup id: scope
width: toolStripColumn.width
QGCPalette { id: _repeaterPal; colorGroupEnabled: _buttonEnabled } height: buttonRect.height
visible: _root.buttonVisible ? _root.buttonVisible[index] : true
property bool _buttonEnabled: _root.buttonEnabled ? _root.buttonEnabled[index] : true
property var _iconSource: modelData.iconSource property bool checked: false
property var _alternateIconSource: modelData.alternateIconSource property ExclusiveGroup exclusiveGroup: dropButtonsExclusiveGroup
property var _source: (_root.showAlternateIcon && _root.showAlternateIcon[index]) ? _alternateIconSource : _iconSource
property bool rotateImage: _root.rotateImage ? _root.rotateImage[index] : false property bool _buttonEnabled: _root.buttonEnabled ? _root.buttonEnabled[index] : true
property bool animateImage: _root.animateImage ? _root.animateImage[index] : false property var _iconSource: modelData.iconSource
property var _alternateIconSource: modelData.alternateIconSource
onExclusiveGroupChanged: { property var _source: (_root.showAlternateIcon && _root.showAlternateIcon[index]) ? _alternateIconSource : _iconSource
if (exclusiveGroup) { property bool rotateImage: _root.rotateImage ? _root.rotateImage[index] : false
exclusiveGroup.bindCheckable(buttonColumn) property bool animateImage: _root.animateImage ? _root.animateImage[index] : false
} property bool _hovered: false
} property bool _showHighlight: checked || (_buttonEnabled && _hovered)
onRotateImageChanged: { QGCPalette { id: _repeaterPal; colorGroupEnabled: _buttonEnabled }
if (rotateImage) {
imageRotation.running = true onExclusiveGroupChanged: {
} else { if (exclusiveGroup) {
imageRotation.running = false exclusiveGroup.bindCheckable(scope)
button.rotation = 0 }
}
}
onAnimateImageChanged: {
if (animateImage) {
opacityAnimation.running = true
} else {
opacityAnimation.running = false
button.opacity = 1
} }
}
Item { onRotateImageChanged: {
width: 1 if (rotateImage) {
height: _buttonSpacing imageRotation.running = true
visible: index == 0 ? _showOptionalElements : true } else {
} imageRotation.running = false
buttonImage.rotation = 0
}
}
FocusScope { onAnimateImageChanged: {
id: scope if (animateImage) {
anchors.left: parent.left opacityAnimation.running = true
anchors.right: parent.right } else {
height: width * 0.8 opacityAnimation.running = false
buttonImage.opacity = 1
}
}
Rectangle { Rectangle {
anchors.fill: parent id: buttonRect
color: checked ? _repeaterPal.buttonHighlight : _repeaterPal.button anchors.left: parent.left
anchors.right: parent.right
QGCColoredImage { height: buttonColumn.height
id: button color: _showHighlight ? _repeaterPal.buttonHighlight : _repeaterPal.window
height: parent.height
width: height Column {
anchors.centerIn: parent id: buttonColumn
source: _source anchors.left: parent.left
sourceSize.height: height anchors.right: parent.right
fillMode: Image.PreserveAspectFit spacing: -buttonImage.height / 8
mipmap: true
smooth: true QGCColoredImage {
color: checked ? _repeaterPal.buttonHighlightText : _repeaterPal.buttonText id: buttonImage
anchors.left: parent.left
RotationAnimation on rotation { anchors.right: parent.right
id: imageRotation height: width * 0.8
loops: Animation.Infinite //anchors.centerIn: parent
from: 0 source: _source
to: 360 sourceSize.height: height
duration: 500 fillMode: Image.PreserveAspectFit
running: false 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 { QGCLabel {
id: opacityAnimation id: buttonLabel
running: false anchors.horizontalCenter: parent.horizontalCenter
from: 0 font.pointSize: ScreenTools.smallFontPointSize
to: 1.0 text: modelData.name
loops: Animation.Infinite color: _showHighlight ? _repeaterPal.buttonHighlightText : _repeaterPal.text
duration: 2000 enabled: _buttonEnabled
} }
} } // Column
QGCMouseArea { QGCMouseArea {
// Size of mouse area is expanded to make touch easier anchors.fill: parent
anchors.leftMargin: -buttonStripColumn.anchors.margins visible: _buttonEnabled
anchors.rightMargin: -buttonStripColumn.anchors.margins hoverEnabled: true
anchors.left: parent.left preventStealing: true
anchors.right: parent.right
anchors.top: parent.top onContainsMouseChanged: _hovered = containsMouse
height: parent.height + (_showOptionalElements? buttonLabel.height + buttonColumn.spacing : 0) onContainsPressChanged: _hovered = containsPress
visible: _buttonEnabled
preventStealing: true
onClicked: { onClicked: {
scope.focus = true scope.focus = true
@ -205,23 +215,8 @@ Rectangle {
} }
} }
} }
} } // Rectangle
} } // FocusScope
Item {
width: 1
height: ScreenTools.defaultFontPixelHeight * 0.25
visible: _showOptionalElements
}
QGCLabel {
id: buttonLabel
anchors.horizontalCenter: parent.horizontalCenter
font.pointSize: ScreenTools.smallFontPointSize
text: modelData.name
visible: _showOptionalElements
enabled: _buttonEnabled
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save