IOT dashboard: Make MenuBar buttons and allow switching

examples/iotdashboard/MainItem.cpp

@@ -13,6 +13,32 @@
 #include <QGuiApplication>
 #include <QQuickWindow>
 
+namespace
+{
+    Qsk::Direction direction( const int from, const int to )
+    {
+        if( from < Cube::Top ) // side
+        {
+            if( to < Cube::Top ) // side to side
+            {
+                return ( to > from ) ? Qsk::LeftToRight : Qsk::RightToLeft; // ### 2x case
+            }
+            else
+            {
+                return ( to == Cube::Top ) ? Qsk::BottomToTop : Qsk::TopToBottom; // ### 2x case
+            }
+        }
+        else if( from == Cube::Top )
+        {
+            return Qsk::TopToBottom; // ### 2x case
+        }
+        else
+        {
+            return Qsk::BottomToTop; // ### 2x case
+        }
+    }
+}
+
 Cube::Cube( QQuickItem* parent )
     : QskStackBox( false, parent )
 {
@@ -66,6 +92,7 @@ MainItem::MainItem( QQuickItem* parent )
     , m_cube( new Cube( this ) )
     , m_mainLayout( new QskLinearBox( Qt::Horizontal, m_cube ) )
     , m_otherLayout( new QskLinearBox( Qt::Horizontal, m_cube ) )
+    , m_currentIndex( 0 )
 {
     setAutoLayoutChildren( true );
     setAcceptedMouseButtons( Qt::LeftButton );
@@ -79,10 +106,12 @@ MainItem::MainItem( QQuickItem* parent )
 
     m_otherLayout->setSpacing( 0 );
 
-    (void) new MenuBar( m_mainLayout );
+    m_mainMenuBar = new MenuBar( m_mainLayout );
+    connect( m_mainMenuBar, &MenuBar::pageChangeRequested, this, &MainItem::switchToPage );
     (void) new DashboardPage( m_mainLayout );
 
-    (void) new MenuBar( m_otherLayout );
+    m_otherMenuBar = new MenuBar( m_otherLayout );
+    connect( m_otherMenuBar, &MenuBar::pageChangeRequested, this, &MainItem::switchToPage );
     (void) new RoomsPage( m_otherLayout );
 
     m_cube->addItem( m_mainLayout );
@@ -137,4 +166,16 @@ bool MainItem::gestureFilter( QQuickItem* item, QEvent* event )
     return recognizer.processEvent( item, event, false );
 }
 
+void MainItem::switchToPage( const int index )
+{
+    if( m_currentIndex == index )
+        return;
+
+    const auto d = direction( m_currentIndex, index );
+    m_cube->startAnimation( d );
+    m_mainMenuBar->setActivePage( index );
+    m_otherMenuBar->setActivePage( index );
+    m_currentIndex = index;
+}
+
 #include "moc_MainItem.cpp"

examples/iotdashboard/MainItem.h

@@ -6,12 +6,24 @@
 
 #include <QQuickWindow>
 
+class MenuBar;
 class QskBox;
 class QskLinearBox;
 
 class Cube : public QskStackBox
 {
+    Q_OBJECT
+
     public:
+        enum {
+            Left,
+            Front,
+            Right,
+            Back,
+            Top,
+            Bottom
+        } Position;
+
         explicit Cube( QQuickItem* parent = nullptr );
         void startAnimation( Qsk::Direction direction );
 };
@@ -28,8 +40,13 @@ class MainItem : public QskControl
         void gestureEvent( QskGestureEvent* ) override final;
 
     private:
+        void switchToPage( const int index );
+
+        MenuBar* m_mainMenuBar;
+        MenuBar* m_otherMenuBar;
         Cube* m_cube;
         QskLinearBox* m_mainLayout;
         QskLinearBox* m_otherLayout;
         QskPanGestureRecognizer m_panRecognizer;
+        int m_currentIndex;
 };

examples/iotdashboard/MenuBar.cpp

@@ -6,33 +6,29 @@
 #include "MenuBar.h"
 
 QSK_SUBCONTROL( MenuBarTopLabel, Graphic )
-QSK_SUBCONTROL( MenuBarGraphicLabel, Graphic )
+
-QSK_SUBCONTROL( MenuBarLabel, Text )
+QSK_SUBCONTROL( MenuButton, Panel )
-QSK_SUBCONTROL( MenuItem, Panel )
+QSK_SUBCONTROL( MenuButton, Text )
+QSK_SUBCONTROL( MenuButton, Graphic )
+
 QSK_SUBCONTROL( MenuBar, Panel )
 
-QSK_STATE( MenuItem, Active, ( QskAspect::FirstUserState << 1 ) )
+MenuButton::MenuButton( const QString& name, QQuickItem* parent )
-
+    : QskPushButton( name, parent )
-MenuItem::MenuItem( const QString& name, QQuickItem* parent )
-    : QskLinearBox( Qt::Horizontal, parent )
 {
+    setCheckable( true );
     initSizePolicy( QskSizePolicy::Fixed, QskSizePolicy::Fixed );
-    setSpacing( 6 );
 
-    setAcceptHoverEvents( true );
+    setSubcontrolProxy( QskPushButton::Panel, MenuButton::Panel );
+    setSubcontrolProxy( QskPushButton::Text, MenuButton::Text );
+    setSubcontrolProxy( QskPushButton::Graphic, MenuButton::Graphic );
 
-    setPanel( true );
+    setGraphicSource( name );
-    setSubcontrolProxy( QskBox::Panel, MenuItem::Panel );
-
-    auto graphicLabel = new MenuBarGraphicLabel( name, this );
-    graphicLabel->setSizePolicy( QskSizePolicy::Fixed, QskSizePolicy::Fixed );
-    graphicLabel->setFixedWidth( metric( MenuBarGraphicLabel::Graphic | QskAspect::Size ) );
-
-    new MenuBarLabel( name, this );
 }
 
 MenuBar::MenuBar( QQuickItem* parent )
     : QskLinearBox( Qt::Vertical, parent )
+    , m_currentIndex( 0 )
 {
     setPanel( true );
     setSubcontrolProxy( QskBox::Panel, MenuBar::Panel );
@@ -46,17 +42,30 @@ MenuBar::MenuBar( QQuickItem* parent )
 
     m_entryStrings = { "Dashboard", "Rooms", "Devices", "Statistics", "Storage", "Members" };
 
-    for( const auto& entryString : qAsConst( m_entryStrings ) )
+    for( int i = 0; i < m_entryStrings.count(); ++i )
     {
-        auto* entry = new MenuItem( entryString, this );
+        auto* button = new MenuButton( m_entryStrings.at( i ), this );
-        m_entries.append( entry );
+
+        connect( button, &QskPushButton::pressed, this, [ this, i ]()
+        {
+            Q_EMIT pageChangeRequested( i );
+        } );
+
+        m_entries.append( button );
     }
 
-    m_entries.at( m_activeEntry )->setSkinStateFlag( MenuItem::Active );
+    m_entries.at( m_currentIndex )->setChecked( true );
 
     addSpacer( 0, 1 ); // fill the space at the bottom
 
-    new MenuItem( "Logout", this );
+    new MenuButton( "Logout", this );
+}
+
+void MenuBar::setActivePage( const int index )
+{
+    m_entries.at( m_currentIndex )->setChecked( false );
+    m_currentIndex = index;
+    m_entries.at( m_currentIndex )->setChecked( true );
 }
 
 #include "moc_MenuBar.cpp"

examples/iotdashboard/MenuBar.h

@@ -7,6 +7,7 @@
 
 #include <QskGraphicLabel.h>
 #include <QskLinearBox.h>
+#include <QskPushButton.h>
 #include <QskTextLabel.h>
 
 class MenuBarTopLabel final : public QskGraphicLabel
@@ -23,43 +24,14 @@ class MenuBarTopLabel final : public QskGraphicLabel
     }
 };
 
-class MenuBarGraphicLabel final : public QskGraphicLabel
+class MenuButton final : public QskPushButton
 {
     Q_OBJECT
 
   public:
-    QSK_SUBCONTROLS( Graphic )
+    QSK_SUBCONTROLS( Panel, Text, Graphic )
 
-    MenuBarGraphicLabel( const QString& icon, QQuickItem* parent = nullptr )
+    MenuButton( const QString& name, QQuickItem* parent );
-        : QskGraphicLabel( icon, parent )
-    {
-        setSubcontrolProxy( QskGraphicLabel::Graphic, Graphic );
-    }
-};
-
-class MenuBarLabel final : public QskTextLabel
-{
-    Q_OBJECT
-
-  public:
-    QSK_SUBCONTROLS( Text )
-
-    MenuBarLabel( const QString& text, QQuickItem* parent = nullptr )
-        : QskTextLabel( text, parent )
-    {
-        setSubcontrolProxy( QskTextLabel::Text, Text );
-    }
-};
-
-class MenuItem final : public QskLinearBox
-{
-    Q_OBJECT
-
-  public:
-    QSK_SUBCONTROLS( Panel )
-    QSK_STATES( Active )
-
-    MenuItem( const QString& name, QQuickItem* parent );
 };
 
 class MenuBar final : public QskLinearBox
@@ -71,8 +43,14 @@ class MenuBar final : public QskLinearBox
 
     MenuBar( QQuickItem* parent );
 
+  Q_SIGNALS:
+    void pageChangeRequested( const int index );
+
+  public Q_SLOTS:
+    void setActivePage( const int index );
+
   private:
     QList< QString > m_entryStrings;
-    QList< MenuItem* > m_entries;
+    QList< MenuButton* > m_entries;
-    uint m_activeEntry = 0;
+    uint m_currentIndex;
 };

examples/iotdashboard/Skin.cpp

@@ -87,23 +87,25 @@ void Skin::initHints( const Palette& palette )
 
 
     // menu bar:
-    ed.setPadding( MenuBar::Panel, {0, 35, 0, 12} );
-
-    ed.setStrutSize( MenuItem::Panel | QskAspect::Size, {140, 40} );
-    ed.setPadding( MenuItem::Panel, {30, 16, 30, 16} );
-    QColor color( Qt::white );
-    color.setAlphaF( 0.09 );
-    ed.setGradient( MenuItem::Panel | QskControl::Hovered, color );
-    color.setAlphaF( 0.14 );
-    ed.setGradient( MenuItem::Panel | MenuItem::Active, color );
-
-    ed.setColor( MenuBarLabel::Text, Qt::white );
-    ed.setFontRole( MenuBarLabel::Text, QskSkin::SmallFont );
-
     ed.setMargin( MenuBarTopLabel::Graphic, { 50, 5, 50, 65 } );
 
-    ed.setMetric( MenuBarGraphicLabel::Graphic | QskAspect::Size, 14 );
+    ed.setPadding( MenuBar::Panel, {0, 35, 0, 12} );
-    ed.setAlignment( MenuBarGraphicLabel::Graphic, Qt::AlignCenter );
+
+    ed.setStrutSize( MenuButton::Panel | QskAspect::Size, {140, 40} );
+    QColor color( Qt::white );
+    color.setAlphaF( 0.09 );
+    ed.setGradient( MenuButton::Panel | QskControl::Hovered, color );
+    color.setAlphaF( 0.14 );
+    ed.setGradient( MenuButton::Panel | MenuButton::Checked, color );
+    ed.setSpacing( MenuButton::Panel, 10 );
+
+    ed.setColor( MenuButton::Text, Qt::white );
+    ed.setFontRole( MenuButton::Text, QskSkin::SmallFont );
+    ed.setAlignment( MenuButton::Text, Qt::AlignLeft | Qt::AlignVCenter );
+
+    ed.setPadding( MenuButton::Graphic, { 30, 0, 0, 0 } );
+    ed.setStrutSize( MenuButton::Graphic, { 14, -1 } );
+    ed.setAlignment( MenuButton::Graphic, Qt::AlignCenter );
 
 
     // top bar: