improve menu bar

examples/iot-dashboard/DaytimeSkin.cpp

@@ -1,5 +1,6 @@
 #include "DaytimeSkin.h"
 
+#include "MenuBar.h"
 #include "PieChart.h"
 #include "PieChartSkinlet.h"
 
@@ -38,6 +39,10 @@ void DaytimeSkin::initHints()
     setFont( QskSkin::LargeFont, qskFont( 14 ) );
     setFont( QskSkin::HugeFont, qskFont( 36 ) );
 
+    QColor color(Qt::white);
+    color.setAlphaF(0.09);
+    setGradient( MenuItem::Panel | QskControl::Hovered, color );
+
     setBoxBorderMetrics( PieChart::Panel, 2 );
     setGradient( PieChart::Panel, Qt::blue );
     setBoxBorderColors( PieChart::Panel, Qt::green );

examples/iot-dashboard/MenuBar.cpp

@@ -8,30 +8,63 @@
 
 #include <QtGui/QImage>
 
+QSK_SUBCONTROL( MenuItem, Panel )
+
 MenuItem::MenuItem( const QString& name, QQuickItem* parent ) : QskLinearBox( Qt::Horizontal, parent ),
     m_name( name )
 {
     setAutoLayoutChildren( true );
     setAutoAddChildren( true );
-    setPreferredWidth( 140 );
+    setFixedSize( {140, 40} );
+    setMargins({0, 0, 0, 0});
+    setPadding({30, 0, 30, 0});
+    setSpacing(6);
 
-    QString fileName = ":/images/" + name.toLower() + ".png";
+    setAcceptHoverEvents(true);
+    setPanel(true);
+
+    QString fileName = ":/images/" + name.toLower() + ".png"; // width: 14
     QImage image( fileName );
     auto graphic = QskGraphic::fromImage( image );
     auto* graphicLabel = new QskGraphicLabel( graphic, this );
     graphicLabel->setSizePolicy(QskSizePolicy::Fixed, QskSizePolicy::Fixed);
-//    graphicLabel->setFixedSize( 32, 32 );
+    graphicLabel->setFixedWidth(14);
+    graphicLabel->setAlignment(Qt::AlignCenter);
 
     auto* textLabel = new QskTextLabel( name, this );
     textLabel->setTextColor( Qt::white ); // ### style
-    textLabel->setFontRole(QskSkin::SmallFont);
+    textLabel->setFontRole(QskSkin::SmallFont); // ### style
 }
 
+QskAspect::Subcontrol MenuItem::effectiveSubcontrol( QskAspect::Subcontrol subControl ) const
+{
+    if ( subControl == QskBox::Panel )
+        return MenuItem::Panel;
+
+    return subControl;
+}
+
+void MenuItem::setActive(bool active)
+{
+    QColor color;
+
+    if(active) {
+        color = Qt::white;
+        color.setAlphaF(0.14);
+    } else {
+        color = Qt::transparent;
+    }
+    setBackgroundColor(color);
+}
+
+
 MenuBar::MenuBar( QQuickItem *parent ) : QskLinearBox( Qt::Vertical, parent )
 {
     setSizePolicy( QskSizePolicy::Minimum, QskSizePolicy::Preferred );
     setAutoLayoutChildren( true );
     setAutoAddChildren( true );
+    setSpacing(8);
+    setMargins({0, 35, 0, 12});
 
     setBackgroundColor( "#6D7BFB" ); // ### style
 
@@ -39,15 +72,22 @@ MenuBar::MenuBar( QQuickItem *parent ) : QskLinearBox( Qt::Vertical, parent )
     QImage image(mainIcon);
     auto graphic = QskGraphic::fromImage( image );
     auto* graphicLabel = new QskGraphicLabel( graphic, this );
-    graphicLabel->setMargins( { 50, 35, 50, 50 });
+    graphicLabel->setAlignment(Qt::AlignTop);
+    graphicLabel->setMargins( { 50, 0, 50, 54 });
+    graphicLabel->setSizePolicy(QskSizePolicy::Fixed, QskSizePolicy::Fixed);
 
 
-    m_entries = { "Dashboard", "Rooms", "Devices", "Statistics", "Storage", "Members" };
+    m_entryStrings = { "Dashboard", "Rooms", "Devices", "Statistics", "Storage", "Members" };
 
-    for( const auto entry : m_entries )
+    for( const auto entryString : m_entryStrings )
     {
-        auto* menuItem = new MenuItem( entry, this );
+        auto* entry = new MenuItem( entryString, this );
+        m_entries.append(entry);
     }
 
+    m_entries.at(m_activeEntry)->setActive(true);
+
     addSpacer( 0, 1 ); // fill the space at the bottom
+
+    new MenuItem( "Logout", this );
 }

examples/iot-dashboard/MenuBar.h

@@ -8,10 +8,17 @@ class MenuItem : public QskLinearBox
     Q_OBJECT
 
 public:
+    QSK_SUBCONTROLS( Panel )
+
     MenuItem( const QString& name, QQuickItem* parent );
 
+    QskAspect::Subcontrol effectiveSubcontrol( QskAspect::Subcontrol subControl ) const override final;
+
+    void setActive(bool active);
+
 private:
     QString m_name;
+    bool m_isActive = false;
 };
 
 class MenuBar : public QskLinearBox
@@ -22,7 +29,9 @@ public:
     MenuBar( QQuickItem* parent );
 
 private:
-    QList< QString > m_entries;
+    QList< QString > m_entryStrings;
+    QList< MenuItem* > m_entries;
+    uint m_activeEntry = 0;
 };
 
 #endif // MENUBAR_H