peranger/qskinny
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IOT dashboard: Make MenuBar buttons and allow switching

Browse Source
This commit is contained in:
Peter Hartmann 2022-12-22 18:15:04 +01:00 committed by uwerat
parent 8a91e3c54c
commit 31f2d0c93a
5 changed files with 120 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
examples/iotdashboard/MainItem.cpp
View File

@ -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"

17
examples/iotdashboard/MainItem.h
View File

@ -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;
};

53
examples/iotdashboard/MenuBar.cpp
View File

@ -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"

46
examples/iotdashboard/MenuBar.h
View File

@ -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 )
: 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;
};

32
examples/iotdashboard/Skin.cpp
View File

@ -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: