style My Devices some more

examples/iot-dashboard/BoxWithButtons.cpp

@@ -6,8 +6,6 @@
 
 #include <QskTextLabel.h>
 
-QSK_SUBCONTROL( BigRoundedIcon, Panel )
-
 QSK_SUBCONTROL( BoxWithButtons, Panel )
 
 QSK_SUBCONTROL( IndoorTemperature, Panel )
@@ -24,8 +22,7 @@ BoxWithButtons::BoxWithButtons( const QString& title, bool isBright, QQuickItem*
 
     QString iconFile = title.toLower();
     iconFile = iconFile.replace( ' ', '-' );
-    auto* icon = new BigRoundedIcon( iconFile, isBright, layout );
+    new RoundedIcon( iconFile, isBright, false, layout );
-    icon->setFixedSize( 68, 68 ); // ### fix properly
 
     auto* titleAndValue = new QskLinearBox( Qt::Vertical, layout );
     titleAndValue->setMargins( {0, 10, 0, 0} );

examples/iot-dashboard/BoxWithButtons.h

@@ -6,17 +6,6 @@
 
 #include <QskBoxShapeMetrics.h>
 
-class BigRoundedIcon : public RoundedIcon
-{
-    public:
-        QSK_SUBCONTROLS( Panel )
-
-        BigRoundedIcon( const QString& iconName, bool isBright, QQuickItem* parent = nullptr )
-            : RoundedIcon( iconName, isBright, parent )
-        {
-        }
-};
-
 class BoxWithButtons : public Box
 {
     public:

examples/iot-dashboard/MyDevices.cpp

@@ -21,9 +21,9 @@ namespace
                 setDefaultAlignment( Qt::AlignCenter );
                 setAutoAddChildren( false );
 
-                m_icon = new RoundedIcon( QString(), isBright, this );
+                m_icon = new RoundedIcon( QString(), isBright, true, this );
+                m_icon->setSkinState( m_icon->skinState() | RoundedIcon::Small );
                 m_icon->setOpacity( 0.15 );
-                m_icon->setFixedWidth( 60 );
                 addItem( m_icon );
 
                 auto* textLabel = new QskTextLabel( name, this );
@@ -44,7 +44,10 @@ namespace
             {
                 QskLinearBox::updateLayout();
 
-                m_graphicLabel->setSize( {36, 36} );
+                // We cannot use the icon from RoundedIcon here because
+                // it would inherit the transparency
+                const qreal size = metric( RoundedIcon::Icon | QskAspect::Size );
+                m_graphicLabel->setSize( {size, size} );
                 m_graphicLabel->setPosition( { m_icon->position().x() + ( m_icon->width() - m_graphicLabel->width() ) / 2,
                                                ( m_icon->position().y() + m_icon->height() - m_graphicLabel->height() ) / 2 } );
             }
@@ -59,17 +62,18 @@ namespace
 MyDevices::MyDevices( QQuickItem* parent )
     : Box( "My devices", parent )
 {
-    auto* content = new QskGridBox( this );
+    auto* gridBox = new QskGridBox( this );
+    gridBox->setSpacing( 15 );
 
-    auto* lamps = new Device( "Lamps", true, content );
+    auto* lamps = new Device( "Lamps", true, gridBox );
-    content->addItem( lamps, 0, 0 );
+    gridBox->addItem( lamps, 0, 0 );
 
-    auto* musicSystem = new Device( "Music System", false, content );
+    auto* musicSystem = new Device( "Music System", false, gridBox );
-    content->addItem( musicSystem, 0, 1 );
+    gridBox->addItem( musicSystem, 0, 1 );
 
-    auto* ac = new Device( "AC", false, content );
+    auto* ac = new Device( "AC", false, gridBox );
-    content->addItem( ac, 1, 0 );
+    gridBox->addItem( ac, 1, 0 );
 
-    auto* router = new Device( "Router", true, content );
+    auto* router = new Device( "Router", true, gridBox );
-    content->addItem( router, 1, 1 );
+    gridBox->addItem( router, 1, 1 );
 }

examples/iot-dashboard/RoundedIcon.cpp

@@ -7,22 +7,31 @@
 #include <QImage>
 
 QSK_SUBCONTROL( RoundedIcon, Panel )
+QSK_SUBCONTROL( RoundedIcon, Icon )
 QSK_STATE( RoundedIcon, Bright, ( QskAspect::FirstUserState << 1 ) )
+QSK_STATE( RoundedIcon, Small, ( QskAspect::FirstUserState << 2 ) )
 
-RoundedIcon::RoundedIcon( const QString& iconName, bool isBright, QQuickItem* parent )
+RoundedIcon::RoundedIcon( const QString& iconName, bool isBright, bool isSmall, QQuickItem* parent )
     : QskBox( parent )
     , m_iconName( iconName )
 {
     setPanel( true );
     setPolishOnResize( true );
 
+    if( isSmall )
+    {
+        setSkinState( skinState() | Small );
+    }
+
+    setSizePolicy( QskSizePolicy::Minimum, QskSizePolicy::Constrained );
+    const qreal size = metric( RoundedIcon::Panel | QskAspect::Size );
+    setFixedWidth( size );
+
     if( isBright )
     {
         setSkinState( Bright );
     }
 
-    setSizePolicy( QskSizePolicy::Minimum, QskSizePolicy::Constrained );
-
     QString fileName = ":/images/" + iconName + ".png";
 
     if( QFile::exists( fileName ) )
@@ -37,7 +46,8 @@ void RoundedIcon::updateLayout()
 {
     if( m_graphicLabel )
     {
-        m_graphicLabel->setSize( {36, 36} );
+        const qreal size = metric( Icon | QskAspect::Size );
+        m_graphicLabel->setSize( {size, size} );
         m_graphicLabel->setPosition( { ( width() - m_graphicLabel->width() ) / 2, ( height() - m_graphicLabel->height() ) / 2 } );
     }
 }

examples/iot-dashboard/RoundedIcon.h

@@ -11,10 +11,10 @@ class RoundedIcon : public QskBox
         Q_OBJECT
 
     public:
-        QSK_SUBCONTROLS( Panel )
+        QSK_SUBCONTROLS( Panel, Icon )
-        QSK_STATES( Bright ) // just to differentiate between orange and purple
+        QSK_STATES( Bright, Small ) // to differentiate between orange and purple and small vs. big
 
-        RoundedIcon( const QString& iconName, bool isBright, QQuickItem* parent = nullptr );
+        RoundedIcon( const QString& iconName, bool isBright, bool isSmall, QQuickItem* parent = nullptr );
 
         QskAspect::Subcontrol effectiveSubcontrol(
             QskAspect::Subcontrol subControl ) const override

examples/iot-dashboard/Skin.cpp

@@ -101,9 +101,13 @@ void Skin::initHints( const Palette& palette )
 
     // content in boxes (indoor temperature, humidity etc.):
     ed.setPadding( BoxWithButtons::Panel, 8 );
+
     ed.setBoxShape( RoundedIcon::Panel, 6 );
     ed.setVGradient( RoundedIcon::Panel | RoundedIcon::Bright, "#ff7d34", "#ff3122" );
     ed.setVGradient( RoundedIcon::Panel, "#6776FF", "#6100FF" );
+    ed.setMetric( RoundedIcon::Panel | QskAspect::Size, 68 );
+    ed.setMetric( RoundedIcon::Panel | RoundedIcon::Small | QskAspect::Size, 60 );
+    ed.setMetric( RoundedIcon::Icon | QskAspect::Size, 36 );
 
     // palette dependent skin hints:
     ed.setGradient( MenuBar::Panel, palette.menuBar );