From db3a59fb7a863d464926b5b3438a3578e081dcef Mon Sep 17 00:00:00 2001 From: Peter Hartmann Date: Wed, 7 Apr 2021 09:44:21 +0200 Subject: [PATCH] style My Devices some more --- examples/iot-dashboard/BoxWithButtons.cpp | 5 +--- examples/iot-dashboard/BoxWithButtons.h | 11 --------- examples/iot-dashboard/MyDevices.cpp | 28 +++++++++++++---------- examples/iot-dashboard/RoundedIcon.cpp | 18 +++++++++++---- examples/iot-dashboard/RoundedIcon.h | 6 ++--- examples/iot-dashboard/Skin.cpp | 4 ++++ 6 files changed, 38 insertions(+), 34 deletions(-) diff --git a/examples/iot-dashboard/BoxWithButtons.cpp b/examples/iot-dashboard/BoxWithButtons.cpp index b0d3d63d..d76c5b37 100644 --- a/examples/iot-dashboard/BoxWithButtons.cpp +++ b/examples/iot-dashboard/BoxWithButtons.cpp @@ -6,8 +6,6 @@ #include -QSK_SUBCONTROL( BigRoundedIcon, Panel ) - QSK_SUBCONTROL( BoxWithButtons, Panel ) QSK_SUBCONTROL( IndoorTemperature, Panel ) @@ -24,8 +22,7 @@ BoxWithButtons::BoxWithButtons( const QString& title, bool isBright, QQuickItem* QString iconFile = title.toLower(); iconFile = iconFile.replace( ' ', '-' ); - auto* icon = new BigRoundedIcon( iconFile, isBright, layout ); - icon->setFixedSize( 68, 68 ); // ### fix properly + new RoundedIcon( iconFile, isBright, false, layout ); auto* titleAndValue = new QskLinearBox( Qt::Vertical, layout ); titleAndValue->setMargins( {0, 10, 0, 0} ); diff --git a/examples/iot-dashboard/BoxWithButtons.h b/examples/iot-dashboard/BoxWithButtons.h index a7fa257b..7f5c96d1 100644 --- a/examples/iot-dashboard/BoxWithButtons.h +++ b/examples/iot-dashboard/BoxWithButtons.h @@ -6,17 +6,6 @@ #include -class BigRoundedIcon : public RoundedIcon -{ - public: - QSK_SUBCONTROLS( Panel ) - - BigRoundedIcon( const QString& iconName, bool isBright, QQuickItem* parent = nullptr ) - : RoundedIcon( iconName, isBright, parent ) - { - } -}; - class BoxWithButtons : public Box { public: diff --git a/examples/iot-dashboard/MyDevices.cpp b/examples/iot-dashboard/MyDevices.cpp index 2dc78a76..967c4bb7 100644 --- a/examples/iot-dashboard/MyDevices.cpp +++ b/examples/iot-dashboard/MyDevices.cpp @@ -21,9 +21,9 @@ namespace setDefaultAlignment( Qt::AlignCenter ); setAutoAddChildren( false ); - m_icon = new RoundedIcon( QString(), isBright, this ); + m_icon = new RoundedIcon( QString(), isBright, true, this ); + m_icon->setSkinState( m_icon->skinState() | RoundedIcon::Small ); m_icon->setOpacity( 0.15 ); - m_icon->setFixedWidth( 60 ); addItem( m_icon ); auto* textLabel = new QskTextLabel( name, this ); @@ -44,7 +44,10 @@ namespace { QskLinearBox::updateLayout(); - m_graphicLabel->setSize( {36, 36} ); + // We cannot use the icon from RoundedIcon here because + // it would inherit the transparency + const qreal size = metric( RoundedIcon::Icon | QskAspect::Size ); + m_graphicLabel->setSize( {size, size} ); m_graphicLabel->setPosition( { m_icon->position().x() + ( m_icon->width() - m_graphicLabel->width() ) / 2, ( m_icon->position().y() + m_icon->height() - m_graphicLabel->height() ) / 2 } ); } @@ -59,17 +62,18 @@ namespace MyDevices::MyDevices( QQuickItem* parent ) : Box( "My devices", parent ) { - auto* content = new QskGridBox( this ); + auto* gridBox = new QskGridBox( this ); + gridBox->setSpacing( 15 ); - auto* lamps = new Device( "Lamps", true, content ); - content->addItem( lamps, 0, 0 ); + auto* lamps = new Device( "Lamps", true, gridBox ); + gridBox->addItem( lamps, 0, 0 ); - auto* musicSystem = new Device( "Music System", false, content ); - content->addItem( musicSystem, 0, 1 ); + auto* musicSystem = new Device( "Music System", false, gridBox ); + gridBox->addItem( musicSystem, 0, 1 ); - auto* ac = new Device( "AC", false, content ); - content->addItem( ac, 1, 0 ); + auto* ac = new Device( "AC", false, gridBox ); + gridBox->addItem( ac, 1, 0 ); - auto* router = new Device( "Router", true, content ); - content->addItem( router, 1, 1 ); + auto* router = new Device( "Router", true, gridBox ); + gridBox->addItem( router, 1, 1 ); } diff --git a/examples/iot-dashboard/RoundedIcon.cpp b/examples/iot-dashboard/RoundedIcon.cpp index 20c868d3..3d59c0e0 100644 --- a/examples/iot-dashboard/RoundedIcon.cpp +++ b/examples/iot-dashboard/RoundedIcon.cpp @@ -7,22 +7,31 @@ #include QSK_SUBCONTROL( RoundedIcon, Panel ) +QSK_SUBCONTROL( RoundedIcon, Icon ) QSK_STATE( RoundedIcon, Bright, ( QskAspect::FirstUserState << 1 ) ) +QSK_STATE( RoundedIcon, Small, ( QskAspect::FirstUserState << 2 ) ) -RoundedIcon::RoundedIcon( const QString& iconName, bool isBright, QQuickItem* parent ) +RoundedIcon::RoundedIcon( const QString& iconName, bool isBright, bool isSmall, QQuickItem* parent ) : QskBox( parent ) , m_iconName( iconName ) { setPanel( true ); setPolishOnResize( true ); + if( isSmall ) + { + setSkinState( skinState() | Small ); + } + + setSizePolicy( QskSizePolicy::Minimum, QskSizePolicy::Constrained ); + const qreal size = metric( RoundedIcon::Panel | QskAspect::Size ); + setFixedWidth( size ); + if( isBright ) { setSkinState( Bright ); } - setSizePolicy( QskSizePolicy::Minimum, QskSizePolicy::Constrained ); - QString fileName = ":/images/" + iconName + ".png"; if( QFile::exists( fileName ) ) @@ -37,7 +46,8 @@ void RoundedIcon::updateLayout() { if( m_graphicLabel ) { - m_graphicLabel->setSize( {36, 36} ); + const qreal size = metric( Icon | QskAspect::Size ); + m_graphicLabel->setSize( {size, size} ); m_graphicLabel->setPosition( { ( width() - m_graphicLabel->width() ) / 2, ( height() - m_graphicLabel->height() ) / 2 } ); } } diff --git a/examples/iot-dashboard/RoundedIcon.h b/examples/iot-dashboard/RoundedIcon.h index 45cbcfd8..e724df50 100644 --- a/examples/iot-dashboard/RoundedIcon.h +++ b/examples/iot-dashboard/RoundedIcon.h @@ -11,10 +11,10 @@ class RoundedIcon : public QskBox Q_OBJECT public: - QSK_SUBCONTROLS( Panel ) - QSK_STATES( Bright ) // just to differentiate between orange and purple + QSK_SUBCONTROLS( Panel, Icon ) + QSK_STATES( Bright, Small ) // to differentiate between orange and purple and small vs. big - RoundedIcon( const QString& iconName, bool isBright, QQuickItem* parent = nullptr ); + RoundedIcon( const QString& iconName, bool isBright, bool isSmall, QQuickItem* parent = nullptr ); QskAspect::Subcontrol effectiveSubcontrol( QskAspect::Subcontrol subControl ) const override diff --git a/examples/iot-dashboard/Skin.cpp b/examples/iot-dashboard/Skin.cpp index ce96e4bc..8650b154 100644 --- a/examples/iot-dashboard/Skin.cpp +++ b/examples/iot-dashboard/Skin.cpp @@ -101,9 +101,13 @@ void Skin::initHints( const Palette& palette ) // content in boxes (indoor temperature, humidity etc.): ed.setPadding( BoxWithButtons::Panel, 8 ); + ed.setBoxShape( RoundedIcon::Panel, 6 ); ed.setVGradient( RoundedIcon::Panel | RoundedIcon::Bright, "#ff7d34", "#ff3122" ); ed.setVGradient( RoundedIcon::Panel, "#6776FF", "#6100FF" ); + ed.setMetric( RoundedIcon::Panel | QskAspect::Size, 68 ); + ed.setMetric( RoundedIcon::Panel | RoundedIcon::Small | QskAspect::Size, 60 ); + ed.setMetric( RoundedIcon::Icon | QskAspect::Size, 36 ); // palette dependent skin hints: ed.setGradient( MenuBar::Panel, palette.menuBar );