add box around each section

examples/iot-dashboard/Card.cpp

@@ -1,12 +1,26 @@
 #include "Card.h"
+#include "DaytimeSkin.h"
 
+#include <QskBoxBorderColors.h>
+#include <QskBoxBorderMetrics.h>
+#include <QskBoxShapeMetrics.h>
 #include <QskTextLabel.h>
 
-Card::Card(const QString &title, QskControl *content, QQuickItem *parent ) : QskLinearBox( Qt::Vertical, parent ),
+Card::Card( const QString& title, QQuickItem* parent )
-    m_title( title )
+    : QskLinearBox( Qt::Vertical, parent )
+    , m_title( title )
+    , m_label( new QskTextLabel( m_title, this ) )
 {
-    m_label = new QskTextLabel( m_title, this );
+    setAutoAddChildren( true );
-    m_content = content;
+    setAutoLayoutChildren( true );
-    m_content->setParentItem( this ); // ### maybe do it differently
+
-    m_content->setParent( this );
+    setMarginsHint( Panel | QskAspect::Padding, 15 );
+    setPanel( true );
+    setBoxShapeHint( QskBox::Panel, 6 );
+    setBoxBorderMetricsHint( QskBox::Panel, 2 );
+    QskBoxBorderColors borderColors( "#dddddd" );
+    borderColors.setAlpha( 100 );
+    setBoxBorderColorsHint( QskBox::Panel, borderColors );
+
+    m_label->setFontRole( DaytimeSkin::TitleFont );
 }

examples/iot-dashboard/Card.h

@@ -7,10 +7,10 @@ class QskTextLabel;
 
 class Card : public QskLinearBox
 {
-public:
+    public:
-    Card( const QString& title, QskControl* content, QQuickItem* parent );
+        Card( const QString& title, QQuickItem* parent );
 
-private:
+    private:
         QString m_title;
         QskTextLabel* m_label;
         QskControl* m_content;

examples/iot-dashboard/MainContent.cpp

@@ -29,9 +29,9 @@ MainContent::MainContent( QQuickItem* parent ) : QskLinearBox( Qt::Vertical, par
     gridBox->setPanel( true );
     gridBox->setBoxShapeHint( QskBox::Panel, 6 );
     gridBox->setBoxBorderMetricsHint( QskBox::Panel, 2 );
-    QskBoxBorderColors borderColors( "#dddddd" );
+//    QskBoxBorderColors borderColors( "#dddddd" );
-    borderColors.setAlpha( 100 );
+//    borderColors.setAlpha( 100 );
-    gridBox->setBoxBorderColorsHint( QskBox::Panel, borderColors );
+//    gridBox->setBoxBorderColorsHint( QskBox::Panel, borderColors );
 
     auto* usage = new Usage( gridBox );
     gridBox->addItem( usage, 0, 0, 2, 1 );
@@ -51,8 +51,3 @@ MainContent::MainContent( QQuickItem* parent ) : QskLinearBox( Qt::Vertical, par
     auto* lightIntensity = new LightIntensity( gridBox );
     gridBox->addItem( lightIntensity, 2, 2 );
 }
-
-void MainContent::addCard( const QString& title, QskControl* content, int column )
-{
-    new Card( title, content, m_columns.at( column ) );
-}

examples/iot-dashboard/MainContent.h

@@ -7,12 +7,10 @@ class MainContent : public QskLinearBox
 {
         Q_OBJECT
 
-public:
+    public:
         MainContent( QQuickItem* parent );
 
-private:
+    private:
-    void addCard( const QString& title, QskControl* content, int column = -1 );
-
         QList< QskLinearBox* > m_columns;
 };
 

examples/iot-dashboard/Usage.cpp

@@ -3,37 +3,32 @@
 
 #include <QskTextLabel.h>
 
-Usage::Usage(QQuickItem *parent)
+Usage::Usage( QQuickItem* parent )
-    : QskLinearBox(Qt::Vertical, parent)
+    : Card( "Usage", parent )
 {
-    setMargins(17);
+    auto* content = new QskLinearBox( Qt::Vertical, this );
 
-    auto* title = new QskTextLabel("Usage", this);
+    auto* today = new QskLinearBox( Qt::Horizontal, content );
-    title->setFontRole(DaytimeSkin::TitleFont);
+    auto* todayText = new QskTextLabel( "Usage today", today );
+    todayText->setFontRole( QskSkin::SmallFont );
+    auto* todaySpacer = new QskTextLabel( "_____", today );
+    todaySpacer->setTextColor( "#dddddd" );
+    auto* todayValue = new QskTextLabel( "0,5 kwH", today );
+    todayValue->setFontRole( QskSkin::SmallFont );
 
-    auto* content = new QskLinearBox(Qt::Vertical, this);
+    auto* month = new QskLinearBox( Qt::Horizontal, content );
+    auto* monthText = new QskTextLabel( "Usage this month", month );
+    monthText->setFontRole( QskSkin::SmallFont );
+    auto* monthSpacer = new QskTextLabel( "_____", month );
+    monthSpacer->setTextColor( "#dddddd" );
+    auto* monthValue = new QskTextLabel( "66 kwH", month );
+    monthValue->setFontRole( QskSkin::SmallFont );
 
-    auto* today = new QskLinearBox(Qt::Horizontal, content);
+    auto* total = new QskLinearBox( Qt::Horizontal, content );
-    auto* todayText = new QskTextLabel("Usage today", today);
+    auto* totalText = new QskTextLabel( "Total working hours", total );
-    todayText->setFontRole(QskSkin::SmallFont);
+    totalText->setFontRole( QskSkin::SmallFont );
-    auto* todaySpacer = new QskTextLabel("_____", today);
+    auto* totalSpacer = new QskTextLabel( "_____", total );
-    todaySpacer->setTextColor("#dddddd");
+    totalSpacer->setTextColor( "#dddddd" );
-    auto* todayValue = new QskTextLabel("0,5 kwH", today);
+    auto* totalValue = new QskTextLabel( "125 hrs", total );
-    todayValue->setFontRole(QskSkin::SmallFont);
+    totalValue->setFontRole( QskSkin::SmallFont );
-
-    auto* month = new QskLinearBox(Qt::Horizontal, content);
-    auto* monthText = new QskTextLabel("Usage this month", month);
-    monthText->setFontRole(QskSkin::SmallFont);
-    auto* monthSpacer = new QskTextLabel("_____", month);
-    monthSpacer->setTextColor("#dddddd");
-    auto* monthValue = new QskTextLabel("66 kwH", month);
-    monthValue->setFontRole(QskSkin::SmallFont);
-
-    auto* total = new QskLinearBox(Qt::Horizontal, content);
-    auto* totalText = new QskTextLabel("Total working hours", total);
-    totalText->setFontRole(QskSkin::SmallFont);
-    auto* totalSpacer = new QskTextLabel("_____", total);
-    totalSpacer->setTextColor("#dddddd");
-    auto* totalValue = new QskTextLabel("125 hrs", total);
-    totalValue->setFontRole(QskSkin::SmallFont);
 }

examples/iot-dashboard/Usage.h

@@ -1,12 +1,13 @@
 #ifndef USAGE_H
 #define USAGE_H
 
+#include "Card.h"
 #include <QskLinearBox.h>
 
-class Usage : public QskLinearBox
+class Usage : public Card
 {
-public:
+    public:
-    Usage( QQuickItem* parent);
+        Usage( QQuickItem* parent );
 };
 
 #endif // USAGE_H