diff --git a/examples/iot-dashboard/DaytimeSkin.cpp b/examples/iot-dashboard/DaytimeSkin.cpp index 238098ec..0de60f5e 100644 --- a/examples/iot-dashboard/DaytimeSkin.cpp +++ b/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 ); diff --git a/examples/iot-dashboard/MenuBar.cpp b/examples/iot-dashboard/MenuBar.cpp index 289c840b..455e1b92 100644 --- a/examples/iot-dashboard/MenuBar.cpp +++ b/examples/iot-dashboard/MenuBar.cpp @@ -8,30 +8,63 @@ #include +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 ); } diff --git a/examples/iot-dashboard/MenuBar.h b/examples/iot-dashboard/MenuBar.h index 1f5e5a21..c5b92959 100644 --- a/examples/iot-dashboard/MenuBar.h +++ b/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