From f50995533672387fa95946dfe6d24781e4c9d499 Mon Sep 17 00:00:00 2001 From: Gus Grubba Date: Thu, 6 Jun 2019 07:31:01 -0400 Subject: [PATCH] Tweaking toolstrip layout --- src/FlightMap/Images/ZoomMinus.svg | 30 ++++---- src/FlightMap/Images/ZoomPlus.svg | 26 +++---- src/QmlControls/QGCHoverButton.qml | 118 +++++++++++------------------ src/QmlControls/ToolStrip.qml | 1 + 4 files changed, 74 insertions(+), 101 deletions(-) diff --git a/src/FlightMap/Images/ZoomMinus.svg b/src/FlightMap/Images/ZoomMinus.svg index 38fa49759..cfe816575 100644 --- a/src/FlightMap/Images/ZoomMinus.svg +++ b/src/FlightMap/Images/ZoomMinus.svg @@ -1,15 +1,15 @@ - - - - - - - - - + + + + + + + + + diff --git a/src/FlightMap/Images/ZoomPlus.svg b/src/FlightMap/Images/ZoomPlus.svg index f9a45974c..b664f85bd 100644 --- a/src/FlightMap/Images/ZoomPlus.svg +++ b/src/FlightMap/Images/ZoomPlus.svg @@ -1,13 +1,13 @@ - - - - - - - - + + + + + + + + diff --git a/src/QmlControls/QGCHoverButton.qml b/src/QmlControls/QGCHoverButton.qml index f34bfa302..43d1d8f92 100644 --- a/src/QmlControls/QGCHoverButton.qml +++ b/src/QmlControls/QGCHoverButton.qml @@ -8,26 +8,25 @@ import QGroundControl.Palette 1.0 // TODO: use QT palette Button { - id: button - width: columnItem.contentWidth + contentLayoutItem.margins * 2 + id: button + width: contentLayoutItem.contentWidth + (contentMargins * 2) height: width - flat: true + flat: true - property color borderColor: qgcPal.windowShadeDark + property color borderColor: qgcPal.windowShadeDark - property alias radius: buttonBkRect.radius - property alias fontPointSize: innerText.font.pointSize - property alias imageSource: innerImage.source - property alias contentWidth: innerText.contentWidth + property alias radius: buttonBkRect.radius + property alias fontPointSize: innerText.font.pointSize + property alias imageSource: innerImage.source + property alias contentWidth: innerText.contentWidth - property real imageScale: 0.8 - property real borderWidth: 0 + property real imageScale: 0.6 + property real borderWidth: 0 property real contentMargins: innerText.height * 0.1 - property color _currentColor: qgcPal.button - property color _currentContentColor: qgcPal.buttonText + property color _currentColor: qgcPal.button + property color _currentContentColor: qgcPal.buttonText - QGCPalette { id: qgcPal } QGCPalette { id: qgcPalDisabled; colorGroupEnabled: false } // Initial state @@ -35,70 +34,43 @@ Button { // Update state on status changed onEnabledChanged: state = "Default" - property real _contentVDist: innerImage.height/innerText.contentHeight - // Content Icon + Text contentItem: Item { - id: contentLayoutItem - anchors.fill: parent - anchors.margins: contentMargins - + id: contentLayoutItem + anchors.fill: parent + anchors.margins: contentMargins Column { - id: columnItem - anchors.fill: parent - - Item { - width: parent.width - height: (contentLayoutItem.height - innerText.height) - Image { - id: innerImage - - anchors.centerIn: parent - - height: parent.height * imageScale - width: parent.width * imageScale - - 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 - } + anchors.centerIn: parent + spacing: contentMargins * 2 + QGCColoredImage { + id: innerImage + height: contentLayoutItem.height * imageScale + width: contentLayoutItem.width * imageScale + smooth: true + mipmap: true + color: _currentContentColor + fillMode: Image.PreserveAspectFit + antialiasing: true + sourceSize.height: height + sourceSize.width: width + anchors.horizontalCenter: parent.horizontalCenter } - - Text { - id: innerText - text: button.text - color: _currentContentColor - width: parent.width - font.family: ScreenTools.normalFontFamily - font.pointSize: ScreenTools.defaultFontPointSize - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter + QGCLabel { + id: innerText + text: button.text + color: _currentContentColor + anchors.horizontalCenter: parent.horizontalCenter } - } // Column - content - } // Item - content + } + } background: Rectangle { - id: buttonBkRect - anchors.fill: parent - color: _currentColor - visible: !flat - - border.width: borderWidth - border.color: borderColor + id: buttonBkRect + color: _currentColor + visible: !flat + border.width: borderWidth + border.color: borderColor + anchors.fill: parent } // Change the colors based on button states @@ -142,11 +114,11 @@ Button { // Process hover events MouseArea { - enabled: !ScreenTools.isMobile - hoverEnabled: true + enabled: !ScreenTools.isMobile + hoverEnabled: true propagateComposedEvents: true preventStealing: true - anchors.fill: button + anchors.fill: button onEntered: { button.state = 'Hovering'; } onExited: { button.state = 'Default'; } // Propagate events down diff --git a/src/QmlControls/ToolStrip.qml b/src/QmlControls/ToolStrip.qml index 742e0133f..a293dd6e7 100644 --- a/src/QmlControls/ToolStrip.qml +++ b/src/QmlControls/ToolStrip.qml @@ -47,6 +47,7 @@ Rectangle { anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right + spacing: ScreenTools.defaultFontPixelWidth * 0.25 Repeater { id: repeater -- 2.22.0