style more elements inside diagram

examples/iot-dashboard/Diagram.cpp

@@ -14,18 +14,42 @@
 
 QSK_SUBCONTROL( WeekdayBox, Panel )
 
-CaptionItem::CaptionItem( const QColor& color, const QString& text, QQuickItem* parent )
+QSK_SUBCONTROL( CaptionColorBox, Panel )
+
+QSK_SUBCONTROL( CaptionItem, Panel )
+QSK_STATE( CaptionItem, Water, ( QskAspect::FirstUserState << 1 ) )
+QSK_STATE( CaptionItem, Electricity, ( QskAspect::FirstUserState << 2 ) )
+QSK_STATE( CaptionItem, Gas, ( QskAspect::FirstUserState << 3 ) )
+
+QSK_SUBCONTROL( Diagram, Panel )
+
+CaptionItem::CaptionItem( QskAspect::State state, QQuickItem* parent )
     : QskLinearBox( Qt::Horizontal, parent )
 {
     setSpacing( 10 );
-    auto* box = new QskBox( true, this );
+    auto* box = new CaptionColorBox( this );
-    box->setGradientHint( QskBox::Panel, color );
+    box->setSkinState( state );
+
+    QString text;
+
+    if( state == CaptionItem::Water )
+    {
+        text = "Water";
+    }
+    else if( state == CaptionItem::Electricity )
+    {
+        text = "Electricity";
+    }
+    else if( state == CaptionItem::Gas )
+    {
+        text = "Gas";
+    }
 
     auto* textLabel = new QskTextLabel( text, this );
     textLabel->setFontRole( QskSkin::TinyFont );
 
-    box->setFixedSize( 8, 8 );
+    const qreal size = metric( CaptionColorBox::Panel | QskAspect::Size );
-    box->setBoxShapeHint( QskBox::Panel, 4 );
+    box->setFixedSize( {size, size} );
 }
 
 namespace
@@ -111,8 +135,6 @@ Diagram::Diagram( QQuickItem* parent )
     , m_weekdays( new QskGridBox( this ) )
     , m_content( new DiagramContent( this ) )
 {
-    setPaddingHint( Panel, 0 );
-
     setAutoAddChildren( false );
     setAutoLayoutChildren( true );
 
@@ -140,9 +162,9 @@ Diagram::Diagram( QQuickItem* parent )
     m_caption->setSizePolicy( QskSizePolicy::Maximum, QskSizePolicy::Maximum );
     m_caption->setMargins( {10, 10, 20, 0} );
     m_caption->setSpacing( 30 );
-    m_caption->addItem( new CaptionItem( "#6776ff", "Water", this ) );
+    m_caption->addItem( new CaptionItem( CaptionItem::Water, this ) );
-    m_caption->addItem( new CaptionItem( "#ff3122", "Electricity", this ) );
+    m_caption->addItem( new CaptionItem( CaptionItem::Electricity, this ) );
-    m_caption->addItem( new CaptionItem( "#ff7d34", "Gas", this ) );
+    m_caption->addItem( new CaptionItem( CaptionItem::Gas, this ) );
 
     addItem( m_content );
 }

examples/iot-dashboard/Diagram.h

@@ -31,11 +31,38 @@ class WeekdayBox : public QskBox
         }
 };
 
+class CaptionColorBox : public QskBox
+{
+        Q_OBJECT
+
+    public:
+        QSK_SUBCONTROLS( Panel )
+
+        CaptionColorBox( QQuickItem* parent ) : QskBox( true, parent )
+        {
+        }
+
+        QskAspect::Subcontrol effectiveSubcontrol(
+            QskAspect::Subcontrol subControl ) const override final
+        {
+            if( subControl == QskBox::Panel )
+            {
+                return Panel;
+            }
+
+            return subControl;
+        }
+};
+
 class CaptionItem : public QskLinearBox
 {
         Q_OBJECT
+
     public:
-        CaptionItem( const QColor& color, const QString& text, QQuickItem* parent );
+        QSK_SUBCONTROLS( Panel )
+        QSK_STATES( Water, Electricity, Gas )
+
+        CaptionItem( QskAspect::State state, QQuickItem* parent );
 };
 
 class Diagram : public Box
@@ -43,9 +70,22 @@ class Diagram : public Box
         Q_OBJECT
 
     public:
+        QSK_SUBCONTROLS( Panel )
+
         Diagram( QQuickItem* parent );
         void updateLayout() override;
 
+        QskAspect::Subcontrol effectiveSubcontrol(
+            QskAspect::Subcontrol subControl ) const override final
+        {
+            if( subControl == QskBox::Panel )
+            {
+                return Panel;
+            }
+
+            return subControl;
+        }
+
     private:
         QskLinearBox* m_caption;
         QskGridBox* m_weekdays;

examples/iot-dashboard/Skin.cpp

@@ -112,6 +112,14 @@ void Skin::initHints( const Palette& palette )
     // diagram:
     ed.setBoxBorderMetrics( WeekdayBox::Panel, {0, 0, 3, 3} );
 
+    ed.setMetric( CaptionColorBox::Panel | QskAspect::Size, 8 );
+    ed.setBoxShape( CaptionColorBox::Panel | QskAspect::Size, 4 );
+    ed.setGradient( CaptionColorBox::Panel | CaptionItem::Water, {"#6776ff"} );
+    ed.setGradient( CaptionColorBox::Panel | CaptionItem::Electricity, {"#ff3122"} );
+    ed.setGradient( CaptionColorBox::Panel | CaptionItem::Gas, {"#ff7d34"} );
+
+    ed.setPadding( Diagram::Panel, 0 );
+
     // palette dependent skin hints:
     ed.setGradient( MenuBar::Panel, palette.menuBar );
     ed.setGradient( MainContent::Panel, palette.mainContent );