From 6a20d8bc32a55f159f46c5f283fb23435370b795 Mon Sep 17 00:00:00 2001 From: Peter Hartmann Date: Wed, 30 Sep 2020 11:57:07 +0200 Subject: [PATCH] add new button class to better style it --- examples/iot-dashboard/DaytimeSkin.cpp | 2 + examples/iot-dashboard/Humidity.cpp | 29 +--------- examples/iot-dashboard/IndoorTemperature.cpp | 29 +--------- examples/iot-dashboard/NighttimeSkin.cpp | 2 + examples/iot-dashboard/UpAndDownButton.cpp | 57 ++++++++++++++++++++ examples/iot-dashboard/UpAndDownButton.h | 28 ++++++++++ examples/iot-dashboard/iot-dashboard.pro | 2 + 7 files changed, 95 insertions(+), 54 deletions(-) create mode 100644 examples/iot-dashboard/UpAndDownButton.cpp create mode 100644 examples/iot-dashboard/UpAndDownButton.h diff --git a/examples/iot-dashboard/DaytimeSkin.cpp b/examples/iot-dashboard/DaytimeSkin.cpp index 89392897..1a8ab670 100644 --- a/examples/iot-dashboard/DaytimeSkin.cpp +++ b/examples/iot-dashboard/DaytimeSkin.cpp @@ -7,6 +7,7 @@ #include "QskShadowedRectangle.h" #include "QskShadowedRectangleSkinlet.h" #include "PieChartPainted.h" +#include "UpAndDownButton.h" #include #include @@ -56,6 +57,7 @@ void DaytimeSkin::initHints() setGradient( Box::Panel, {"#ffffff"} ); setColor( LightDisplay::Panel, "#ffffff" ); setColor( PieChartPainted::Panel, "#ffffff" ); + setGradient( RoundButton::Panel, {"#f7f7f7"} ); QColor color( Qt::white ); color.setAlphaF( 0.09 ); diff --git a/examples/iot-dashboard/Humidity.cpp b/examples/iot-dashboard/Humidity.cpp index 250cc963..bb39a30b 100644 --- a/examples/iot-dashboard/Humidity.cpp +++ b/examples/iot-dashboard/Humidity.cpp @@ -1,6 +1,7 @@ #include "Humidity.h" #include "DaytimeSkin.h" #include "RoundedIcon.h" +#include "UpAndDownButton.h" #include #include @@ -34,31 +35,5 @@ Humidity::Humidity( QQuickItem* parent ) value->setFontRole( QskSkin::HugeFont ); value->setTextColor( "#929CB2" ); - auto* buttons = new QskLinearBox( Qt::Vertical, layout ); - buttons->setSizePolicy( Qt::Horizontal, QskSizePolicy::Fixed ); - buttons->setSpacing( 0 ); - - QImage upImage( ":/images/up.png" ); - auto upGraphic = QskGraphic::fromImage( upImage ); - upGraphic.setDefaultSize( {10, 5.71} ); - auto* upButton = new QskPushButton( buttons ); - upButton->setBoxShapeHint( QskPushButton::Panel, {30, 30, 0, 0} ); - upButton->setSizePolicy( QskSizePolicy::Fixed, QskSizePolicy::Expanding ); - upButton->setFixedWidth( 42 ); - upButton->setFixedHeight( 46.31 ); - upButton->setGradientHint( QskPushButton::Panel, {"#f7f7f7"} ); - upButton->setGraphic( upGraphic ); - upButton->setGraphicSourceSize( {10, 5.71} ); - - QImage downImage( ":/images/down.png" ); - auto downGraphic = QskGraphic::fromImage( downImage ); - downGraphic.setDefaultSize( {10, 5.71} ); - auto* downButton = new QskPushButton( buttons ); - downButton->setBoxShapeHint( QskPushButton::Panel, {0, 0, 30, 30} ); - downButton->setSizePolicy( QskSizePolicy::Fixed, QskSizePolicy::Expanding ); - downButton->setFixedWidth( 42 ); - downButton->setFixedHeight( 46.31 ); - downButton->setGradientHint( QskPushButton::Panel, {"#f7f7f7"} ); - downButton->setGraphic( downGraphic ); - downButton->setGraphicSourceSize( {10, 5.71} ); + auto* buttons = new UpAndDownButton( layout ); } diff --git a/examples/iot-dashboard/IndoorTemperature.cpp b/examples/iot-dashboard/IndoorTemperature.cpp index 940bc5a3..3a8d5e9c 100644 --- a/examples/iot-dashboard/IndoorTemperature.cpp +++ b/examples/iot-dashboard/IndoorTemperature.cpp @@ -1,6 +1,7 @@ #include "IndoorTemperature.h" #include "DaytimeSkin.h" #include "RoundedIcon.h" +#include "UpAndDownButton.h" #include #include @@ -35,31 +36,5 @@ IndoorTemperature::IndoorTemperature( QQuickItem* parent ) value->setFontRole( QskSkin::HugeFont ); value->setTextColor( "#929CB2" ); - auto* buttons = new QskLinearBox( Qt::Vertical, layout ); - buttons->setSizePolicy( Qt::Horizontal, QskSizePolicy::Fixed ); - buttons->setSpacing( 0 ); - - QImage upImage( ":/images/up.png" ); - auto upGraphic = QskGraphic::fromImage( upImage ); - upGraphic.setDefaultSize( {10, 5.71} ); - auto* upButton = new QskPushButton( buttons ); - upButton->setBoxShapeHint( QskPushButton::Panel, {30, 30, 0, 0} ); - upButton->setSizePolicy( QskSizePolicy::Fixed, QskSizePolicy::Expanding ); - upButton->setFixedWidth( 42 ); - upButton->setFixedHeight( 46.31 ); - upButton->setGradientHint( QskPushButton::Panel, {"#f7f7f7"} ); - upButton->setGraphic( upGraphic ); - upButton->setGraphicSourceSize( {10, 5.71} ); - - QImage downImage( ":/images/down.png" ); - auto downGraphic = QskGraphic::fromImage( downImage ); - downGraphic.setDefaultSize( {10, 5.71} ); - auto* downButton = new QskPushButton( buttons ); - downButton->setBoxShapeHint( QskPushButton::Panel, {0, 0, 30, 30} ); - downButton->setSizePolicy( QskSizePolicy::Fixed, QskSizePolicy::Expanding ); - downButton->setFixedWidth( 42 ); - downButton->setFixedHeight( 46.31 ); - downButton->setGradientHint( QskPushButton::Panel, {"#f7f7f7"} ); - downButton->setGraphic( downGraphic ); - downButton->setGraphicSourceSize( {10, 5.71} ); + auto* buttons = new UpAndDownButton( layout ); } diff --git a/examples/iot-dashboard/NighttimeSkin.cpp b/examples/iot-dashboard/NighttimeSkin.cpp index 7c0e1f3c..b82fc581 100644 --- a/examples/iot-dashboard/NighttimeSkin.cpp +++ b/examples/iot-dashboard/NighttimeSkin.cpp @@ -7,6 +7,7 @@ #include "QskShadowedRectangle.h" #include "QskShadowedRectangleSkinlet.h" #include "PieChartPainted.h" +#include "UpAndDownButton.h" #include #include @@ -56,6 +57,7 @@ void NighttimeSkin::initHints() setGradient( Box::Panel, {"#000000"} ); setColor( LightDisplay::Panel, "#000000" ); setColor( PieChartPainted::Panel, "#000000" ); + setGradient( RoundButton::Panel, {"#0a0a0a"} ); QColor color( Qt::white ); color.setAlphaF( 0.09 ); diff --git a/examples/iot-dashboard/UpAndDownButton.cpp b/examples/iot-dashboard/UpAndDownButton.cpp new file mode 100644 index 00000000..e4d43597 --- /dev/null +++ b/examples/iot-dashboard/UpAndDownButton.cpp @@ -0,0 +1,57 @@ +#include "UpAndDownButton.h" + +#include +#include +#include +#include + +#include + +QSK_SUBCONTROL( RoundButton, Panel ) + +RoundButton::RoundButton( Qt::Edge edge, QQuickItem* parent ) + : QskPushButton( parent ) +{ + setSizePolicy( QskSizePolicy::Fixed, QskSizePolicy::Expanding ); + setFixedWidth( 42 ); + setFixedHeight( 46.31 ); + + QskGraphic graphic; + + if( edge == Qt::TopEdge ) + { + setBoxShapeHint( RoundButton::Panel, {30, 30, 0, 0} ); + QImage upImage( ":/images/up.png" ); + graphic = QskGraphic::fromImage( upImage ); + } + else + { + setBoxShapeHint( RoundButton::Panel, {0, 0, 30, 30} ); + QImage downImage( ":/images/down.png" ); + graphic = QskGraphic::fromImage( downImage ); + } + + graphic.setDefaultSize( {10, 5.71} ); + setGraphic( graphic ); + setGraphicSourceSize( {10, 5.71} ); +} + +QskAspect::Subcontrol RoundButton::effectiveSubcontrol( QskAspect::Subcontrol subControl ) const +{ + if( subControl == QskPushButton::Panel ) + { + return RoundButton::Panel; + } + + return subControl; +} + +UpAndDownButton::UpAndDownButton( QQuickItem* parent ) + : QskLinearBox( Qt::Vertical, parent ) +{ + setSizePolicy( Qt::Horizontal, QskSizePolicy::Fixed ); + setSpacing( 0 ); + + auto* upButton = new RoundButton( Qt::TopEdge, this ); + auto* downButton = new RoundButton( Qt::BottomEdge, this ); +} diff --git a/examples/iot-dashboard/UpAndDownButton.h b/examples/iot-dashboard/UpAndDownButton.h new file mode 100644 index 00000000..90c06cb1 --- /dev/null +++ b/examples/iot-dashboard/UpAndDownButton.h @@ -0,0 +1,28 @@ +#ifndef UPANDDOWNBUTTON_H +#define UPANDDOWNBUTTON_H + +#include +#include + +class RoundButton : QskPushButton +{ + Q_OBJECT + + public: + QSK_SUBCONTROLS( Panel ) + + RoundButton( Qt::Edge edge, QQuickItem* parent ); + + QskAspect::Subcontrol effectiveSubcontrol( + QskAspect::Subcontrol subControl ) const override final; +}; + +class UpAndDownButton : public QskLinearBox +{ + Q_OBJECT + + public: + UpAndDownButton( QQuickItem* parent ); +}; + +#endif // UPANDDOWNBUTTON_H diff --git a/examples/iot-dashboard/iot-dashboard.pro b/examples/iot-dashboard/iot-dashboard.pro index 9c44f3ee..1dc43a53 100644 --- a/examples/iot-dashboard/iot-dashboard.pro +++ b/examples/iot-dashboard/iot-dashboard.pro @@ -19,6 +19,7 @@ SOURCES += \ QskShadowedRectangleSkinlet.cpp \ RoundedIcon.cpp \ TopBar.cpp \ + UpAndDownButton.cpp \ Usage.cpp \ main.cpp \ MainWindow.cpp @@ -43,6 +44,7 @@ HEADERS += \ QskShadowedRectangleSkinlet.h \ RoundedIcon.h \ TopBar.h \ + UpAndDownButton.h \ Usage.h HEADERS += \