From 31f2d0c93a4f98da3e730bc2d2f81a20d920bf7b Mon Sep 17 00:00:00 2001 From: Peter Hartmann Date: Thu, 22 Dec 2022 18:15:04 +0100 Subject: [PATCH] IOT dashboard: Make MenuBar buttons and allow switching --- examples/iotdashboard/MainItem.cpp | 45 +++++++++++++++++++++++-- examples/iotdashboard/MainItem.h | 17 ++++++++++ examples/iotdashboard/MenuBar.cpp | 53 +++++++++++++++++------------- examples/iotdashboard/MenuBar.h | 46 +++++++------------------- examples/iotdashboard/Skin.cpp | 32 +++++++++--------- 5 files changed, 120 insertions(+), 73 deletions(-) diff --git a/examples/iotdashboard/MainItem.cpp b/examples/iotdashboard/MainItem.cpp index 7a09d05e..215a5019 100644 --- a/examples/iotdashboard/MainItem.cpp +++ b/examples/iotdashboard/MainItem.cpp @@ -13,6 +13,32 @@ #include #include +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" diff --git a/examples/iotdashboard/MainItem.h b/examples/iotdashboard/MainItem.h index 48928e92..8169e854 100644 --- a/examples/iotdashboard/MainItem.h +++ b/examples/iotdashboard/MainItem.h @@ -6,12 +6,24 @@ #include +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; }; diff --git a/examples/iotdashboard/MenuBar.cpp b/examples/iotdashboard/MenuBar.cpp index 4d3c0ef4..dea0f1ea 100644 --- a/examples/iotdashboard/MenuBar.cpp +++ b/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( MenuItem, Panel ) + +QSK_SUBCONTROL( MenuButton, Panel ) +QSK_SUBCONTROL( MenuButton, Text ) +QSK_SUBCONTROL( MenuButton, Graphic ) + QSK_SUBCONTROL( MenuBar, Panel ) -QSK_STATE( MenuItem, Active, ( QskAspect::FirstUserState << 1 ) ) - -MenuItem::MenuItem( const QString& name, QQuickItem* parent ) - : QskLinearBox( Qt::Horizontal, parent ) +MenuButton::MenuButton( const QString& name, QQuickItem* parent ) + : QskPushButton( name, 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 ); - 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 ); + setGraphicSource( name ); } 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 ); - m_entries.append( entry ); + auto* button = new MenuButton( m_entryStrings.at( i ), this ); + + 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" diff --git a/examples/iotdashboard/MenuBar.h b/examples/iotdashboard/MenuBar.h index b141f260..bef86d13 100644 --- a/examples/iotdashboard/MenuBar.h +++ b/examples/iotdashboard/MenuBar.h @@ -7,6 +7,7 @@ #include #include +#include #include 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 ) - : 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 ); + MenuButton( 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; - uint m_activeEntry = 0; + QList< MenuButton* > m_entries; + uint m_currentIndex; }; diff --git a/examples/iotdashboard/Skin.cpp b/examples/iotdashboard/Skin.cpp index 779871e0..3b9086dc 100644 --- a/examples/iotdashboard/Skin.cpp +++ b/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.setAlignment( MenuBarGraphicLabel::Graphic, Qt::AlignCenter ); + ed.setPadding( MenuBar::Panel, {0, 35, 0, 12} ); + + 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: