implement top bar

examples/iot-dashboard/DaytimeSkin.cpp

@@ -12,9 +12,10 @@
 
 namespace
 {
-    static inline QFont qskFont( qreal pointSize )
+    static inline QFont qskFont( qreal pointSize, bool semiBold = false )
     {
-        QFont font("Proxima Nova"); // the other one is Proxima Nova Lt
+        QString family = semiBold ? "Proxima Nova Lt" : "Proxima Nova";
+        QFont font(family);
         font.setPointSizeF( pointSize /*/ qskDpiScaled( 1.0 )*/ );
         return font;
     }
@@ -36,8 +37,9 @@ void DaytimeSkin::initHints()
     setFont( QskSkin::DefaultFont, qskFont( 12 ) );
     setFont( QskSkin::TinyFont, qskFont( 12 ) );
     setFont( QskSkin::SmallFont, qskFont( 10 ) );
+    setFont( QskSkin::MediumFont, qskFont( 13 ) );
     setFont( QskSkin::LargeFont, qskFont( 14 ) );
-    setFont( QskSkin::HugeFont, qskFont( 36 ) );
+    setFont( QskSkin::HugeFont, qskFont( 36, true ) );
 
     QColor color(Qt::white);
     color.setAlphaF(0.09);

examples/iot-dashboard/MainContent.cpp

@@ -2,32 +2,36 @@
 
 #include "Card.h"
 #include "PieChart.h"
+#include "TopBar.h"
 
 #include <QskTextLabel.h>
 
 MainContent::MainContent( QQuickItem *parent ) : QskLinearBox( Qt::Horizontal, parent )
 {
     setSizePolicy( QskSizePolicy::Expanding, QskSizePolicy::Expanding );
+    setDefaultAlignment(Qt::AlignTop);
 
-    for( int a = 0; a < 4; ++a )
-    {
-        auto* column = new QskLinearBox( Qt::Vertical, this );
-        m_columns.append( column );
-    }
+    auto* topBar = new TopBar(this);
 
-    auto* pieChart =  new PieChart;
-    QVector< float > angles = { 60, 90, 150, 60 };
-    pieChart->setAngles( angles );
-    addCard( "Sample usage", pieChart, 0 );
+//    for( int a = 0; a < 4; ++a )
+//    {
+//        auto* column = new QskLinearBox( Qt::Vertical, this );
+//        m_columns.append( column );
+//    }
 
-    auto* barGraph = new QskTextLabel( "here bar graph" );
-    addCard( "Power consumption", barGraph, 0 );
+//    auto* pieChart =  new PieChart;
+//    QVector< float > angles = { 60, 90, 150, 60 };
+//    pieChart->setAngles( angles );
+//    addCard( "Sample usage", pieChart, 0 );
 
-    auto* statistics = new QskTextLabel( "here detailed statistics" );
-    addCard( "Detailed statistics", statistics, 1 );
+//    auto* barGraph = new QskTextLabel( "here bar graph" );
+//    addCard( "Power consumption", barGraph, 0 );
 
-    auto* users = new QskTextLabel( "here users" );
-    addCard( "Users", users, 1 );
+//    auto* statistics = new QskTextLabel( "here detailed statistics" );
+//    addCard( "Detailed statistics", statistics, 1 );
+
+//    auto* users = new QskTextLabel( "here users" );
+//    addCard( "Users", users, 1 );
 }
 
 void MainContent::addCard( const QString &title, QskControl *content, int column )

examples/iot-dashboard/TopBar.cpp

@@ -0,0 +1,45 @@
+#include "TopBar.h"
+
+#include <QskSkin.h>
+#include <QskTextLabel.h>
+
+#include <QTime>
+
+TopBarItem::TopBarItem( const QString& name, QQuickItem* parent ) : QskLinearBox( Qt::Vertical, parent ),
+    m_name( name )
+{
+    setAutoLayoutChildren( true );
+    setAutoAddChildren( true );
+    setFixedSize( {140, 40} );
+    setMargins({0, 0, 0, 0});
+    setPadding({30, 0, 30, 0});
+    setSpacing(6);
+
+    auto* textLabel = new QskTextLabel( name, this );
+    textLabel->setFontRole(QskSkin::SmallFont); // ### style
+}
+
+TopBar::TopBar(QQuickItem *parent) : QskLinearBox(Qt::Horizontal, parent)
+{
+    setAutoLayoutChildren(true);
+    setAutoAddChildren(true);
+    setSizePolicy(QskSizePolicy::Preferred, QskSizePolicy::Fixed);
+
+    QStringList itemStrings = { "Living Room", "Bedroom", "Bathroom", "Kitchen" };
+
+    for( const auto itemString : itemStrings )
+    {
+        auto* item = new TopBarItem( itemString, this );
+        m_entries.append(item);
+    }
+
+    auto* timeControl = new QskLinearBox(Qt::Vertical, this);
+    auto* timeTitle = new QskTextLabel("Current time", timeControl); // ### make bold or so
+    timeTitle->setFontRole(QskSkin::TinyFont);
+
+    auto now = QTime::currentTime();
+    auto timeString = now.toString();
+    auto* timeDisplay = new QskTextLabel(timeString, timeControl);
+    timeDisplay->setFontRole(QskSkin::HugeFont);
+    timeDisplay->setTextColor("#6776FF");
+}

examples/iot-dashboard/TopBar.h

@@ -0,0 +1,25 @@
+#pragma once
+
+#include <QskLinearBox.h>
+
+class TopBarItem : public QskLinearBox
+{
+    Q_OBJECT
+
+public:
+    TopBarItem( const QString& name, QQuickItem* parent );
+
+private:
+    QString m_name;
+};
+
+class TopBar : public QskLinearBox
+{
+    Q_OBJECT
+
+public:
+    TopBar(QQuickItem* parent);
+
+private:
+    QList< TopBarItem* > m_entries;
+};

examples/iot-dashboard/iot-dashboard.pro

@@ -7,6 +7,7 @@ SOURCES += \
     MenuBar.cpp \
     PieChart.cpp \
     PieChartSkinlet.cpp \
+    TopBar.cpp \
     main.cpp \
     MainWindow.cpp
 
@@ -17,7 +18,8 @@ HEADERS += \
     MainWindow.h \
     MenuBar.h \
     PieChart.h \
-    PieChartSkinlet.h
+    PieChartSkinlet.h \
+    TopBar.h
 
 RESOURCES += \
     images.qrc \