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

Merge pull request #7504 from mavlink/toolstripLayout 

Tweaking toolstrip layout
QGC4.4
Gus Grubba 6 years ago committed by GitHub
parent
f6a19404c5 f509955336
commit
08d6d73f6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 74 additions and 101 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. 30
      src/FlightMap/Images/ZoomMinus.svg
  2. 26
      src/FlightMap/Images/ZoomPlus.svg
  3. 118
      src/QmlControls/QGCHoverButton.qml
  4. 1
      src/QmlControls/ToolStrip.qml

30
src/FlightMap/Images/ZoomMinus.svg
Unescape View File

@ -1,15 +1,15 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-269 361 72 72" style="enable-background:new -269 361 72 72;" xml:space="preserve"> viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
<style type="text/css"> <style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;} .st0{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
.st1{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;} .st1{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;}
.st2{fill:none;} .st2{fill:none;}
.st3{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-miterlimit:10;} .st3{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-miterlimit:10;}
</style> </style>
<circle class="st0" cx="-236.2" cy="393.9" r="11.2"/> <circle class="st0" cx="31" cy="31.2" r="17.5"/>
<line class="st1" x1="-218.6" y1="411.3" x2="-228.1" y2="401.8"/> <line class="st1" x1="58.5" y1="58.3" x2="43.6" y2="43.5"/>
<line class="st2" x1="-242.5" y1="393.9" x2="-229.9" y2="393.9"/> <line class="st2" x1="21.2" y1="31.2" x2="40.8" y2="31.2"/>
<line class="st3" x1="-242.5" y1="394" x2="-229.9" y2="393.9"/> <line class="st3" x1="21.2" y1="31.3" x2="40.8" y2="31.2"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 885 B

After

Width:  |  Height:  |  Size: 839 B

26
src/FlightMap/Images/ZoomPlus.svg
Unescape View File

@ -1,13 +1,13 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-269 361 72 72" style="enable-background:new -269 361 72 72;" xml:space="preserve"> viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
<style type="text/css"> <style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;} .st0{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
.st1{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;} .st1{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;}
.st2{fill:#FFFFFF;} .st2{fill:#FFFFFF;}
</style> </style>
<circle class="st0" cx="-236.2" cy="393.9" r="11.2"/> <circle class="st0" cx="31" cy="31.2" r="17.5"/>
<line class="st1" x1="-218.6" y1="411.3" x2="-228.1" y2="401.8"/> <line class="st1" x1="58.5" y1="58.3" x2="43.6" y2="43.5"/>
<path class="st2" d="M-237.3,400.2V395h-5.2v-2.2h5.2v-5.2h2.2v5.2h5.2v2.2h-5.2v5.2H-237.3z"/> <path class="st2" d="M29.3,41v-8.1h-8.1v-3.4h8.1v-8.1h3.4v8.1h8.1v3.4h-8.1V41H29.3z"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 781 B

After

Width:  |  Height:  |  Size: 740 B

118
src/QmlControls/QGCHoverButton.qml
Unescape View File

@ -8,26 +8,25 @@ import QGroundControl.Palette 1.0
// TODO: use QT palette // TODO: use QT palette
Button { Button {
id: button id: button
width: columnItem.contentWidth + contentLayoutItem.margins * 2 width: contentLayoutItem.contentWidth + (contentMargins * 2)
height: width height: width
flat: true flat: true
property color borderColor: qgcPal.windowShadeDark property color borderColor: qgcPal.windowShadeDark
property alias radius: buttonBkRect.radius property alias radius: buttonBkRect.radius
property alias fontPointSize: innerText.font.pointSize property alias fontPointSize: innerText.font.pointSize
property alias imageSource: innerImage.source property alias imageSource: innerImage.source
property alias contentWidth: innerText.contentWidth property alias contentWidth: innerText.contentWidth
property real imageScale: 0.8 property real imageScale: 0.6
property real borderWidth: 0 property real borderWidth: 0
property real contentMargins: innerText.height * 0.1 property real contentMargins: innerText.height * 0.1
property color _currentColor: qgcPal.button property color _currentColor: qgcPal.button
property color _currentContentColor: qgcPal.buttonText property color _currentContentColor: qgcPal.buttonText
QGCPalette { id: qgcPal }
QGCPalette { id: qgcPalDisabled; colorGroupEnabled: false } QGCPalette { id: qgcPalDisabled; colorGroupEnabled: false }
// Initial state // Initial state
@ -35,70 +34,43 @@ Button {
// Update state on status changed // Update state on status changed
onEnabledChanged: state = "Default" onEnabledChanged: state = "Default"
property real _contentVDist: innerImage.height/innerText.contentHeight
// Content Icon + Text // Content Icon + Text
contentItem: Item { contentItem: Item {
id: contentLayoutItem id: contentLayoutItem
anchors.fill: parent anchors.fill: parent
anchors.margins: contentMargins anchors.margins: contentMargins
Column { Column {
id: columnItem anchors.centerIn: parent
anchors.fill: parent spacing: contentMargins * 2
QGCColoredImage {
Item { id: innerImage
width: parent.width height: contentLayoutItem.height * imageScale
height: (contentLayoutItem.height - innerText.height) width: contentLayoutItem.width * imageScale
Image { smooth: true
id: innerImage mipmap: true
color: _currentContentColor
anchors.centerIn: parent fillMode: Image.PreserveAspectFit
antialiasing: true
height: parent.height * imageScale sourceSize.height: height
width: parent.width * imageScale sourceSize.width: width
anchors.horizontalCenter: parent.horizontalCenter
visible: false
smooth: true
antialiasing: true
mipmap: true
fillMode: Image.PreserveAspectFit
sourceSize.height: height
sourceSize.width: width
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
}
ColorOverlay {
id: imageOverlay
anchors.fill: innerImage
source: innerImage
color: _currentContentColor
}
} }
QGCLabel {
Text { id: innerText
id: innerText text: button.text
text: button.text color: _currentContentColor
color: _currentContentColor anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
font.family: ScreenTools.normalFontFamily
font.pointSize: ScreenTools.defaultFontPointSize
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
} }
} // Column - content }
} // Item - content }
background: Rectangle { background: Rectangle {
id: buttonBkRect id: buttonBkRect
anchors.fill: parent color: _currentColor
color: _currentColor visible: !flat
visible: !flat border.width: borderWidth
border.color: borderColor
border.width: borderWidth anchors.fill: parent
border.color: borderColor
} }
// Change the colors based on button states // Change the colors based on button states
@ -142,11 +114,11 @@ Button {
// Process hover events // Process hover events
MouseArea { MouseArea {
enabled: !ScreenTools.isMobile enabled: !ScreenTools.isMobile
hoverEnabled: true hoverEnabled: true
propagateComposedEvents: true propagateComposedEvents: true
preventStealing: true preventStealing: true
anchors.fill: button anchors.fill: button
onEntered: { button.state = 'Hovering'; } onEntered: { button.state = 'Hovering'; }
onExited: { button.state = 'Default'; } onExited: { button.state = 'Default'; }
// Propagate events down // Propagate events down

1
src/QmlControls/ToolStrip.qml
Unescape View File

@ -47,6 +47,7 @@ Rectangle {
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: ScreenTools.defaultFontPixelWidth * 0.25
Repeater { Repeater {
id: repeater id: repeater

Write Preview
Loading…
Cancel
Save