From 02e50ce298854bacb1cd5ab876d367682aacffbb Mon Sep 17 00:00:00 2001
From: Peter Hartmann <peter@edelhirsch.io>
Date: Wed, 7 Apr 2021 15:11:20 +0200
Subject: [PATCH] style round button

---
 examples/iot-dashboard/Skin.cpp            |  9 ++++++--
 examples/iot-dashboard/UpAndDownButton.cpp | 26 ++++++++++------------
 examples/iot-dashboard/UpAndDownButton.h   |  3 ++-
 examples/iot-dashboard/images.qrc          |  4 ++--
 4 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/examples/iot-dashboard/Skin.cpp b/examples/iot-dashboard/Skin.cpp
index e11ed558..0ec64cb6 100644
--- a/examples/iot-dashboard/Skin.cpp
+++ b/examples/iot-dashboard/Skin.cpp
@@ -100,8 +100,6 @@ void Skin::initHints( const Palette& palette )
     ed.setColor( TimeLabel::Text, "#6776FF" );
 
     // content in boxes (indoor temperature, humidity etc.):
-    ed.setFontRole( ButtonValueLabel::Text, QskSkin::HugeFont );
-    ed.setColor( ButtonValueLabel::Text, "#929cb2" );
     ed.setPadding( BoxWithButtons::Panel, 8 );
 
     ed.setBoxShape( RoundedIcon::Panel, 6 );
@@ -111,6 +109,13 @@ void Skin::initHints( const Palette& palette )
     ed.setMetric( RoundedIcon::Panel | RoundedIcon::Small | QskAspect::Size, 60 );
     ed.setMetric( RoundedIcon::Icon | QskAspect::Size, 36 );
 
+    ed.setFontRole( ButtonValueLabel::Text, QskSkin::HugeFont );
+    ed.setColor( ButtonValueLabel::Text, "#929cb2" );
+
+    ed.setStrutSize( RoundButton::Panel, {27, 38} );
+    ed.setBoxShape( RoundButton::Panel, {0, 0, 30, 30} );
+    ed.setBoxShape( RoundButton::Panel | RoundButton::Top, {30, 30, 0, 0} );
+
     // diagram:
     ed.setBoxBorderMetrics( WeekdayBox::Panel, {0, 0, 3, 3} );
 
diff --git a/examples/iot-dashboard/UpAndDownButton.cpp b/examples/iot-dashboard/UpAndDownButton.cpp
index d5f9ce9b..07135c78 100644
--- a/examples/iot-dashboard/UpAndDownButton.cpp
+++ b/examples/iot-dashboard/UpAndDownButton.cpp
@@ -9,31 +9,29 @@
 
 QSK_SUBCONTROL( RoundButton, Panel )
 
-RoundButton::RoundButton( Qt::Edge edge, QQuickItem* parent )
+QSK_STATE( RoundButton, Top, ( QskAspect::FirstUserState << 1 ) )
+
+RoundButton::RoundButton( QskAspect::Placement placement, QQuickItem* parent )
     : QskPushButton( parent )
 {
     setSizePolicy( QskSizePolicy::Fixed, QskSizePolicy::Expanding );
-    setFixedWidth( 42 );
-    setFixedHeight( 46.31 );
 
     QskGraphic graphic;
+    QImage image;
 
-    if( edge == Qt::TopEdge )
+    if( placement == QskAspect::Top )
     {
-        setBoxShapeHint( RoundButton::Panel, {30, 30, 0, 0} );
-        QImage upImage( ":/images/up.png" );
-        graphic = QskGraphic::fromImage( upImage );
+        setSkinStateFlag( Top );
+        image.load( ":/images/up.svg" );
     }
     else
     {
-        setBoxShapeHint( RoundButton::Panel, {0, 0, 30, 30} );
-        QImage downImage( ":/images/down.png" );
-        graphic = QskGraphic::fromImage( downImage );
+        image.load( ":/images/down.svg" );
     }
 
-    graphic.setDefaultSize( {10, 5.71} );
+    setGraphicSourceSize( image.size() );
+    graphic = QskGraphic::fromImage( image );
     setGraphic( graphic );
-    setGraphicSourceSize( {10, 5.71} );
 }
 
 QskAspect::Subcontrol RoundButton::effectiveSubcontrol( QskAspect::Subcontrol subControl ) const
@@ -52,6 +50,6 @@ UpAndDownButton::UpAndDownButton( QQuickItem* parent )
     setSizePolicy( Qt::Horizontal, QskSizePolicy::Fixed );
     setSpacing( 0 );
 
-    /*auto* upButton =*/ new RoundButton( Qt::TopEdge, this );
-    /*auto* downButton =*/ new RoundButton( Qt::BottomEdge, this );
+    new RoundButton( QskAspect::Top, this );
+    new RoundButton( QskAspect::Bottom, this );
 }
diff --git a/examples/iot-dashboard/UpAndDownButton.h b/examples/iot-dashboard/UpAndDownButton.h
index 90c06cb1..5ee7fa6d 100644
--- a/examples/iot-dashboard/UpAndDownButton.h
+++ b/examples/iot-dashboard/UpAndDownButton.h
@@ -10,8 +10,9 @@ class RoundButton : QskPushButton
 
     public:
         QSK_SUBCONTROLS( Panel )
+        QSK_STATES( Top )
 
-        RoundButton( Qt::Edge edge, QQuickItem* parent );
+        RoundButton( QskAspect::Placement placement, QQuickItem* parent );
 
         QskAspect::Subcontrol effectiveSubcontrol(
             QskAspect::Subcontrol subControl ) const override final;
diff --git a/examples/iot-dashboard/images.qrc b/examples/iot-dashboard/images.qrc
index f98310f0..f1db9634 100644
--- a/examples/iot-dashboard/images.qrc
+++ b/examples/iot-dashboard/images.qrc
@@ -10,8 +10,8 @@
         <file>images/logout.png</file>
         <file>images/indoor-temperature.png</file>
         <file>images/humidity.png</file>
-        <file>images/up.png</file>
-        <file>images/down.png</file>
+        <file>images/up.svg</file>
+        <file>images/down.svg</file>
         <file>images/lamps.png</file>
         <file>images/music-system.png</file>
         <file>images/ac.png</file>