add new button class to better style it

examples/iot-dashboard/DaytimeSkin.cpp

@@ -7,6 +7,7 @@
 #include "QskShadowedRectangle.h"
 #include "QskShadowedRectangleSkinlet.h"
 #include "PieChartPainted.h"
+#include "UpAndDownButton.h"
 
 #include <QskBoxBorderMetrics.h>
 #include <QskBoxBorderColors.h>
@@ -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 );

examples/iot-dashboard/Humidity.cpp

@@ -1,6 +1,7 @@
 #include "Humidity.h"
 #include "DaytimeSkin.h"
 #include "RoundedIcon.h"
+#include "UpAndDownButton.h"
 
 #include <QskBoxShapeMetrics.h>
 #include <QskGraphic.h>
@@ -34,31 +35,5 @@ Humidity::Humidity( QQuickItem* parent )
     value->setFontRole( QskSkin::HugeFont );
     value->setTextColor( "#929CB2" );
 
-    auto* buttons = new QskLinearBox( Qt::Vertical, layout );
+    auto* buttons = new UpAndDownButton( 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} );
 }

examples/iot-dashboard/IndoorTemperature.cpp

@@ -1,6 +1,7 @@
 #include "IndoorTemperature.h"
 #include "DaytimeSkin.h"
 #include "RoundedIcon.h"
+#include "UpAndDownButton.h"
 
 #include <QskBoxShapeMetrics.h>
 #include <QskGraphic.h>
@@ -35,31 +36,5 @@ IndoorTemperature::IndoorTemperature( QQuickItem* parent )
     value->setFontRole( QskSkin::HugeFont );
     value->setTextColor( "#929CB2" );
 
-    auto* buttons = new QskLinearBox( Qt::Vertical, layout );
+    auto* buttons = new UpAndDownButton( 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} );
 }

examples/iot-dashboard/NighttimeSkin.cpp

@@ -7,6 +7,7 @@
 #include "QskShadowedRectangle.h"
 #include "QskShadowedRectangleSkinlet.h"
 #include "PieChartPainted.h"
+#include "UpAndDownButton.h"
 
 #include <QskBoxBorderMetrics.h>
 #include <QskBoxBorderColors.h>
@@ -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 );

examples/iot-dashboard/UpAndDownButton.cpp

@@ -0,0 +1,57 @@
+#include "UpAndDownButton.h"
+
+#include <QskBoxShapeMetrics.h>
+#include <QskGraphic.h>
+#include <QskGraphicIO.h>
+#include <QskPushButton.h>
+
+#include <QImage>
+
+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 );
+}

examples/iot-dashboard/UpAndDownButton.h

@@ -0,0 +1,28 @@
+#ifndef UPANDDOWNBUTTON_H
+#define UPANDDOWNBUTTON_H
+
+#include <QskLinearBox.h>
+#include <QskPushButton.h>
+
+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

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 += \