more diagram style

examples/iot-dashboard/Diagram.cpp

@@ -12,6 +12,8 @@
 
 #include <cmath>
 
+QSK_SUBCONTROL( WeekdayLabel, Panel )
+QSK_SUBCONTROL( WeekdayLabel, Text )
 QSK_SUBCONTROL( WeekdayBox, Panel )
 
 QSK_SUBCONTROL( CaptionColorBox, Panel )
@@ -21,6 +23,8 @@ QSK_STATE( CaptionItem, Water, ( QskAspect::FirstUserState << 1 ) )
 QSK_STATE( CaptionItem, Electricity, ( QskAspect::FirstUserState << 2 ) )
 QSK_STATE( CaptionItem, Gas, ( QskAspect::FirstUserState << 3 ) )
 
+QSK_SUBCONTROL( CaptionBox, Panel )
+
 QSK_SUBCONTROL( Diagram, Panel )
 
 CaptionItem::CaptionItem( QskAspect::State state, QQuickItem* parent )
@@ -138,33 +142,26 @@ Diagram::Diagram( QQuickItem* parent )
     setAutoAddChildren( false );
     setAutoLayoutChildren( true );
 
-    m_weekdays->setDefaultAlignment( Qt::AlignCenter );
     m_weekdays->setSpacing( 0 );
     QStringList weekdays = {"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"};
 
     for( int i = 0; i < segments; ++i )
     {
         auto* box = new WeekdayBox( m_weekdays );
-//        box->setBoxBorderColorsHint( QskBox::Panel, {"#f4f4f4"} );
-//        box->setBoxBorderMetricsHint( QskBox::Panel, {0, 0, 3, 3} );
         m_weekdays->addItem( box, 0, i );
-        auto* label = new QskTextLabel( weekdays.at( i ), m_weekdays );
+        auto* label = new WeekdayLabel( weekdays.at( i ), m_weekdays );
-        label->setFontRole( QskSkin::TinyFont );
-        label->setMargins( {0, 5, 0, 10} );
-        label->setAlignment( Qt::AlignCenter );
         m_weekdays->addItem( label, 1, i );
     }
 
     addItem( m_weekdays, Qt::AlignBottom );
 
-    m_caption = new QskLinearBox( Qt::Horizontal, this );
+    m_captionBox = new CaptionBox( this );
-    addItem( m_caption, Qt::AlignRight );
+    addItem( m_captionBox, Qt::AlignRight );
-    m_caption->setSizePolicy( QskSizePolicy::Maximum, QskSizePolicy::Maximum );
+    m_captionBox->setSizePolicy( QskSizePolicy::Maximum, QskSizePolicy::Maximum );
-    m_caption->setMargins( {10, 10, 20, 0} );
+    m_captionBox->setSpacing( 30 );
-    m_caption->setSpacing( 30 );
+    m_captionBox->addItem( new CaptionItem( CaptionItem::Water, this ) );
-    m_caption->addItem( new CaptionItem( CaptionItem::Water, this ) );
+    m_captionBox->addItem( new CaptionItem( CaptionItem::Electricity, this ) );
-    m_caption->addItem( new CaptionItem( CaptionItem::Electricity, this ) );
+    m_captionBox->addItem( new CaptionItem( CaptionItem::Gas, this ) );
-    m_caption->addItem( new CaptionItem( CaptionItem::Gas, this ) );
 
     addItem( m_content );
 }
@@ -173,10 +170,10 @@ void Diagram::updateLayout()
 {
     auto* firstWeekday = static_cast<QskControl*>( m_weekdays->itemAt( 1, 0 ) );
     qreal w = size().width();
-    qreal h = size().height() - ( m_caption->size().height() + firstWeekday->size().height() );
+    qreal h = size().height() - ( m_captionBox->size().height() + firstWeekday->size().height() );
 
     m_content->setSize( { w, h } );
-    m_content->setPosition( { 0, m_caption->size().height() } );
+    m_content->setPosition( { 0, m_captionBox->size().height() } );
     m_content->update();
 }
 

examples/iot-dashboard/Diagram.h

@@ -3,11 +3,42 @@
 
 #include "Box.h"
 
+#include <QskTextLabel.h>
+
 #include <QQuickPaintedItem>
 
 class DiagramContent;
 class QskGridBox;
 
+class WeekdayLabel : public QskTextLabel
+{
+        Q_OBJECT
+
+    public:
+        QSK_SUBCONTROLS( Panel, Text )
+
+        WeekdayLabel( const QString& text, QQuickItem* parent ) : QskTextLabel( text, parent )
+        {
+            setPanel( true );
+        }
+
+        QskAspect::Subcontrol effectiveSubcontrol(
+            QskAspect::Subcontrol subControl ) const override final
+        {
+            if( subControl == QskTextLabel::Panel )
+            {
+                return Panel;
+            }
+
+            if( subControl == QskTextLabel::Text )
+            {
+                return Text;
+            }
+
+            return subControl;
+        }
+};
+
 class WeekdayBox : public QskBox
 {
         Q_OBJECT
@@ -65,6 +96,30 @@ class CaptionItem : public QskLinearBox
         CaptionItem( QskAspect::State state, QQuickItem* parent );
 };
 
+class CaptionBox : public QskLinearBox
+{
+        Q_OBJECT
+
+    public:
+        QSK_SUBCONTROLS( Panel )
+
+        CaptionBox( QQuickItem* parent ) : QskLinearBox( Qt::Horizontal, parent )
+        {
+            setPanel( true );
+        }
+
+        QskAspect::Subcontrol effectiveSubcontrol(
+            QskAspect::Subcontrol subControl ) const override final
+        {
+            if( subControl == QskBox::Panel )
+            {
+                return Panel;
+            }
+
+            return subControl;
+        }
+};
+
 class Diagram : public Box
 {
         Q_OBJECT
@@ -87,7 +142,7 @@ class Diagram : public Box
         }
 
     private:
-        QskLinearBox* m_caption;
+        QskLinearBox* m_captionBox;
         QskGridBox* m_weekdays;
         DiagramContent* m_content;
 };

examples/iot-dashboard/Skin.cpp

@@ -120,6 +120,12 @@ void Skin::initHints( const Palette& palette )
 
     ed.setPadding( Diagram::Panel, 0 );
 
+    ed.setFontRole( WeekdayLabel::Text, QskSkin::TinyFont );
+    ed.setPadding( WeekdayLabel::Panel, {0, 5, 0, 10} );
+    ed.setAlignment( WeekdayLabel::Text, Qt::AlignCenter );
+
+    ed.setPadding( CaptionBox::Panel, {10, 10, 20, 0} );
+
     // palette dependent skin hints:
     ed.setGradient( MenuBar::Panel, palette.menuBar );
     ed.setGradient( MainContent::Panel, palette.mainContent );