diff --git a/examples/iotdashboard/BoxWithButtons.cpp b/examples/iotdashboard/BoxWithButtons.cpp index 7ad4ccce..1cdc57cc 100644 --- a/examples/iotdashboard/BoxWithButtons.cpp +++ b/examples/iotdashboard/BoxWithButtons.cpp @@ -44,9 +44,9 @@ BoxWithButtons::BoxWithButtons( const QString& title, const QString& value, auto* layout = new QskLinearBox( Qt::Horizontal, this ); layout->setSpacing( 20 ); - QString iconFile = title.toLower(); - iconFile = iconFile.replace( ' ', '-' ); - new RoundedIcon( iconFile, isBright, false, layout ); + auto iconLabel = new RoundedIcon( isBright, layout ); + iconLabel->setIcon( title ); + iconLabel->setFixedSize( 68, 68 ); auto titleAndValue = new QskLinearBox( Qt::Vertical, layout ); titleAndValue->setPanel( true ); @@ -58,5 +58,7 @@ BoxWithButtons::BoxWithButtons( const QString& title, const QString& value, auto valueLabel = new QskTextLabel( value, titleAndValue ); valueLabel->setSubcontrolProxy( QskTextLabel::Text, ValueText ); + layout->addStretch( 1 ); + new UpAndDownBox( layout ); } diff --git a/examples/iotdashboard/MyDevices.cpp b/examples/iotdashboard/MyDevices.cpp index e947275b..8db92b8c 100644 --- a/examples/iotdashboard/MyDevices.cpp +++ b/examples/iotdashboard/MyDevices.cpp @@ -21,48 +21,18 @@ namespace public: Device( const QString& name, bool isBright, QQuickItem* parent ) : QskLinearBox( Qt::Vertical, parent ) - , m_name( name ) { setDefaultAlignment( Qt::AlignCenter ); - setAutoAddChildren( false ); - m_icon = new RoundedIcon( QString(), isBright, true, this ); - m_icon->setSkinState( m_icon->skinState() | RoundedIcon::Small ); - m_icon->setOpacity( 0.15 ); - addItem( m_icon ); + auto icon = new RoundedIcon( isBright, this ); + icon->setPale( true ); + icon->setIcon( name ); + icon->setFixedSize( 68, 68 ); - auto* textLabel = new QskTextLabel( name, this ); + auto textLabel = new QskTextLabel( name, this ); textLabel->setFontRole( QskSkin::TinyFont ); textLabel->setAlignment( Qt::AlignHCenter ); - addItem( textLabel ); - - auto fileName = name.toLower(); - fileName.replace( ' ', '-' ); - fileName = ":/images/" + fileName + ".png"; - QImage image( fileName ); - auto graphic = QskGraphic::fromImage( image ); - m_graphicLabel = new QskGraphicLabel( graphic, this ); } - - protected: - void updateLayout() override - { - QskLinearBox::updateLayout(); - - // We cannot use the icon from RoundedIcon here because - // it would inherit the transparency - const qreal size = metric( RoundedIcon::Icon | QskAspect::Size ); - - const qreal x = m_icon->x() + ( m_icon->width() - m_graphicLabel->width() ) / 2; - const qreal y = ( m_icon->y() + m_icon->height() - m_graphicLabel->height() ) / 2; - - m_graphicLabel->setGeometry( x, y, size, size ); - } - - private: - QString m_name; - RoundedIcon* m_icon; - QskGraphicLabel* m_graphicLabel; }; } diff --git a/examples/iotdashboard/RoundedIcon.cpp b/examples/iotdashboard/RoundedIcon.cpp index b3fdaab9..9f1f738c 100644 --- a/examples/iotdashboard/RoundedIcon.cpp +++ b/examples/iotdashboard/RoundedIcon.cpp @@ -5,69 +5,42 @@ #include "RoundedIcon.h" -#include #include -#include - #include -#include QSK_SUBCONTROL( RoundedIcon, Panel ) -QSK_SUBCONTROL( RoundedIcon, Icon ) +QSK_SUBCONTROL( RoundedIcon, PalePanel ) + QSK_STATE( RoundedIcon, Bright, ( QskAspect::FirstUserState << 1 ) ) -QSK_STATE( RoundedIcon, Small, ( QskAspect::FirstUserState << 2 ) ) -RoundedIcon::RoundedIcon( const QString& iconName, - bool isBright, bool isSmall, QQuickItem* parent ) - : QskBox( parent ) +RoundedIcon::RoundedIcon( bool isBright, QQuickItem* parent ) + : QskGraphicLabel( parent ) { - setPanel( true ); - setPolishOnResize( true ); - setSubcontrolProxy( QskBox::Panel, Panel ); - - if( isSmall ) - { - setSkinState( skinState() | Small ); - } - - setSizePolicy( QskSizePolicy::Minimum, QskSizePolicy::Constrained ); - const qreal size = metric( RoundedIcon::Panel | QskAspect::Size ); - setFixedWidth( size ); + setAlignment( Qt::AlignCenter ); + setFillMode( QskGraphicLabel::Pad ); if( isBright ) - { setSkinState( Bright ); - } - const QString fileName( ":/images/" + iconName + ".png" ); - - if( QFile::exists( fileName ) ) - { - QImage image( fileName ); - auto graphic = QskGraphic::fromImage( image ); - m_graphicLabel = new QskGraphicLabel( graphic, this ); - } + setPanel( true ); + setPale( false ); } -void RoundedIcon::updateLayout() +void RoundedIcon::setPale( bool on ) { - if( m_graphicLabel ) - { - const auto size = metric( Icon | QskAspect::Size ); - - QRectF r( 0.0, 0.0, size, size ); - r.moveCenter( rect().center() ); - - m_graphicLabel->setGeometry( r ); - } + setSubcontrolProxy( QskGraphicLabel::Panel, on ? PalePanel : Panel ); } -QSizeF RoundedIcon::contentsSizeHint( Qt::SizeHint /*which*/, const QSizeF& size ) const +void RoundedIcon::setIcon( const QString& iconName ) { - QSizeF ret = size; - ret.setHeight( size.width() ); + // we should use a graphic provider, TODO ... - return ret; + QString fileName = ":/images/"; + fileName += iconName.toLower().replace( ' ', '-' ); + fileName += ".png"; + + const QImage image( fileName ); + setGraphic( QskGraphic::fromImage( image ) ); } #include "moc_RoundedIcon.cpp" diff --git a/examples/iotdashboard/RoundedIcon.h b/examples/iotdashboard/RoundedIcon.h index 79ab20c8..2e8c8bd6 100644 --- a/examples/iotdashboard/RoundedIcon.h +++ b/examples/iotdashboard/RoundedIcon.h @@ -5,25 +5,20 @@ #pragma once -#include +#include class QskGraphicLabel; -class RoundedIcon : public QskBox +class RoundedIcon : public QskGraphicLabel { Q_OBJECT public: - QSK_SUBCONTROLS( Panel, Icon ) - QSK_STATES( Bright, Small ) // to differentiate between orange and purple and small vs. big + QSK_SUBCONTROLS( Panel, PalePanel ) + QSK_STATES( Bright ) // to differentiate between orange and purple - RoundedIcon( const QString& iconName, - bool isBright, bool isSmall, QQuickItem* parent = nullptr ); + RoundedIcon( bool isBright, QQuickItem* parent = nullptr ); - protected: - void updateLayout() override; - QSizeF contentsSizeHint( Qt::SizeHint, const QSizeF& ) const override; - - private: - QskGraphicLabel* m_graphicLabel = nullptr; + void setIcon( const QString& ); + void setPale( bool ); }; diff --git a/examples/iotdashboard/Skin.cpp b/examples/iotdashboard/Skin.cpp index 0040518a..a02ff359 100644 --- a/examples/iotdashboard/Skin.cpp +++ b/examples/iotdashboard/Skin.cpp @@ -127,7 +127,7 @@ void Skin::initHints( const Palette& palette ) ed.setPadding( Box::Panel, 15 ); ed.setMetric( ShadowPositioner::Panel | QskAspect::Size, 15 ); - ed.setBoxShape( ShadowPositioner::Panel, {6, 6, 6, 6} ); + ed.setBoxShape( ShadowPositioner::Panel, 6 ); // content in boxes (indoor temperature, humidity etc.): @@ -136,24 +136,35 @@ void Skin::initHints( const Palette& palette ) 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 ); + for ( auto subControl : { RoundedIcon::Panel, RoundedIcon::PalePanel } ) + { + ed.setBoxShape( subControl, 6 ); + + QskGradient normal( QskGradient::Vertical, "#6776FF", "#6100FF" ); + QskGradient bright( QskGradient::Vertical, "#ff7d34", "#ff3122" ); + + if ( subControl == RoundedIcon::PalePanel ) + { + const uint alpha = 38; + normal.setAlpha( alpha ); + bright.setAlpha( alpha ); + } + + ed.setGradient( subControl, normal ); + ed.setGradient( subControl | RoundedIcon::Bright, bright ); + } ed.setFontRole( BoxWithButtons::ValueText, QskSkin::HugeFont ); ed.setColor( BoxWithButtons::ValueText, "#929cb2" ); - ed.setPadding( BoxWithButtons::ValuePanel, {0, 10, 0, 0} ); + ed.setPadding( BoxWithButtons::ValuePanel, 0, 10, 0, 0 ); - ed.setStrutSize( RoundButton::Panel, {27, 38} ); - ed.setBoxShape( RoundButton::Panel, {0, 0, 30, 30} ); - ed.setBoxShape( RoundButton::Panel | RoundButton::Top, {30, 30, 0, 0} ); + ed.setStrutSize( RoundButton::Panel, 27, 38 ); + ed.setBoxShape( RoundButton::Panel, 0, 0, 30, 30 ); + ed.setBoxShape( RoundButton::Panel | RoundButton::Top, 30, 30, 0, 0 ); // diagram: - ed.setBoxBorderMetrics( UsageDiagramBox::DaysBox, {0, 0, 3, 3} ); + ed.setBoxBorderMetrics( UsageDiagramBox::DaysBox, 0, 0, 3, 3 ); ed.setFontRole( UsageDiagramBox::DayText, QskSkin::TinyFont ); ed.setStrutSize( UsageDiagramLegend::Symbol, 8, 8 ); diff --git a/examples/iotdashboard/TopBar.cpp b/examples/iotdashboard/TopBar.cpp index cd74d22b..50da3d05 100644 --- a/examples/iotdashboard/TopBar.cpp +++ b/examples/iotdashboard/TopBar.cpp @@ -84,7 +84,7 @@ TopBar::TopBar( QQuickItem* parent ) setPanel( true ); setSubcontrolProxy( QskBox::Panel, Panel ); - setSizePolicy( QskSizePolicy::Preferred, QskSizePolicy::Fixed ); + initSizePolicy( QskSizePolicy::Preferred, QskSizePolicy::Fixed ); const QStringList itemStrings = { "Living Room", "Bedroom", "Bathroom", "Kitchen" }; const int progressValues[] = {25, 45, 15, 86}; diff --git a/examples/iotdashboard/UsageBox.cpp b/examples/iotdashboard/UsageBox.cpp index 60d18930..79a02370 100644 --- a/examples/iotdashboard/UsageBox.cpp +++ b/examples/iotdashboard/UsageBox.cpp @@ -27,32 +27,30 @@ namespace UsageBox::UsageBox( QQuickItem* parent ) : Box( "Usage", parent ) { - auto* content = new QskLinearBox( Qt::Vertical, this ); - - auto* today = new QskLinearBox( Qt::Horizontal, content ); - auto* todayText = new QskTextLabel( "Usage today", today ); + auto today = new QskLinearBox( Qt::Horizontal, this ); + auto todayText = new QskTextLabel( "Usage today", today ); todayText->setFontRole( QskSkin::SmallFont ); new SeparatorLabel( today ); - auto* todayValue = new QskTextLabel( "0,5 kwH", today ); + auto todayValue = new QskTextLabel( "0,5 kwH", today ); todayValue->setFontRole( QskSkin::SmallFont ); - auto* month = new QskLinearBox( Qt::Horizontal, content ); - auto* monthText = new QskTextLabel( "Usage this month", month ); + auto month = new QskLinearBox( Qt::Horizontal, this ); + auto monthText = new QskTextLabel( "Usage this month", month ); monthText->setFontRole( QskSkin::SmallFont ); new SeparatorLabel( month ); - auto* monthValue = new QskTextLabel( "66 kwH", month ); + auto monthValue = new QskTextLabel( "66 kwH", month ); monthValue->setFontRole( QskSkin::SmallFont ); - auto* total = new QskLinearBox( Qt::Horizontal, content ); - auto* totalText = new QskTextLabel( "Total working hours", total ); + auto total = new QskLinearBox( Qt::Horizontal, this ); + auto totalText = new QskTextLabel( "Total working hours", total ); totalText->setFontRole( QskSkin::SmallFont ); new SeparatorLabel( total ); - auto* totalValue = new QskTextLabel( "125 hrs", total ); + auto totalValue = new QskTextLabel( "125 hrs", total ); totalValue->setFontRole( QskSkin::SmallFont ); }