From 639b5583c8f6a523bff3546c5a73ff39ee47068e Mon Sep 17 00:00:00 2001 From: Peter Hartmann Date: Wed, 31 Mar 2021 10:25:50 +0200 Subject: [PATCH] style round progress bars --- .../iot-dashboard/CircularProgressBar.cpp | 11 +++- examples/iot-dashboard/CircularProgressBar.h | 4 +- examples/iot-dashboard/PieChartPainted.cpp | 2 +- examples/iot-dashboard/PieChartPainted.h | 4 +- examples/iot-dashboard/Skin.cpp | 13 ++++- examples/iot-dashboard/TopBar.cpp | 50 +++++++++++++------ examples/iot-dashboard/TopBar.h | 15 +++++- 7 files changed, 76 insertions(+), 23 deletions(-) diff --git a/examples/iot-dashboard/CircularProgressBar.cpp b/examples/iot-dashboard/CircularProgressBar.cpp index c9999716..cd3cfc79 100644 --- a/examples/iot-dashboard/CircularProgressBar.cpp +++ b/examples/iot-dashboard/CircularProgressBar.cpp @@ -2,11 +2,18 @@ #include -CircularProgressBar::CircularProgressBar( const QGradient& gradient, int progress, QQuickItem* parent ) +CircularProgressBar::CircularProgressBar( const QskGradient& gradient, int progress, QQuickItem* parent ) : QQuickPaintedItem( parent ) - , m_gradient( gradient ) , m_progress( progress ) { + // This is a bit hackish, but let's do this properly + // once QSkinny has an arch renderer in place + QLinearGradient g( 0, 0, 30, 0 ); + QGradientStop stop1( 0.0, gradient.colorAt( 0 ) ); + QGradientStop stop2( 1.0, gradient.colorAt( 1 ) ); + g.setStops( {stop1, stop2} ); + m_gradient = g; + connect( this, &QQuickPaintedItem::contentsSizeChanged, [this]() { auto size = contentsSize(); diff --git a/examples/iot-dashboard/CircularProgressBar.h b/examples/iot-dashboard/CircularProgressBar.h index 2b6af788..09487f6d 100644 --- a/examples/iot-dashboard/CircularProgressBar.h +++ b/examples/iot-dashboard/CircularProgressBar.h @@ -1,13 +1,15 @@ #ifndef CIRCULARPROGRESSBAR_H #define CIRCULARPROGRESSBAR_H +#include + #include #include class CircularProgressBar : public QQuickPaintedItem { public: - CircularProgressBar( const QGradient& gradient, int progress, QQuickItem* parent = nullptr ); + CircularProgressBar( const QskGradient& gradient, int progress, QQuickItem* parent = nullptr ); virtual void paint( QPainter* painter ) override; diff --git a/examples/iot-dashboard/PieChartPainted.cpp b/examples/iot-dashboard/PieChartPainted.cpp index ce06aa8f..40babdfd 100644 --- a/examples/iot-dashboard/PieChartPainted.cpp +++ b/examples/iot-dashboard/PieChartPainted.cpp @@ -73,7 +73,7 @@ class ProgressBarAnimator : public QskAnimator CircularProgressBar* m_progressBar; }; -PieChartPainted::PieChartPainted( const QColor& color, const QGradient& gradient, int progress, int /*value*/, QQuickItem* parent ) +PieChartPainted::PieChartPainted( const QColor& color, const QskGradient& gradient, int progress, int /*value*/, QQuickItem* parent ) : QskControl( parent ) , m_color( color ) , m_gradient( gradient ) diff --git a/examples/iot-dashboard/PieChartPainted.h b/examples/iot-dashboard/PieChartPainted.h index 00fcb36b..1a39b894 100644 --- a/examples/iot-dashboard/PieChartPainted.h +++ b/examples/iot-dashboard/PieChartPainted.h @@ -15,7 +15,7 @@ class PieChartPainted : public QskControl public: QSK_SUBCONTROLS( Panel ) - PieChartPainted( const QColor& color, const QGradient& gradient, int progress, int value, QQuickItem* parent = nullptr ); + PieChartPainted( const QColor& color, const QskGradient& gradient, int progress, int value, QQuickItem* parent = nullptr ); QskAspect::Subcontrol effectiveSubcontrol( QskAspect::Subcontrol subControl ) const override final; @@ -25,7 +25,7 @@ class PieChartPainted : public QskControl private: QColor m_color; - QGradient m_gradient; + QskGradient m_gradient; CircularProgressBar* m_progressBar; QskTextLabel* m_progressLabel; ProgressBarAnimator* m_animator; diff --git a/examples/iot-dashboard/Skin.cpp b/examples/iot-dashboard/Skin.cpp index 440487d5..c0790b5f 100644 --- a/examples/iot-dashboard/Skin.cpp +++ b/examples/iot-dashboard/Skin.cpp @@ -76,12 +76,23 @@ void Skin::initHints( const Palette& palette ) ed.setPadding( TopBar::Panel, {25, 35, 25, 0} ); + ed.setColor( TopBarItem::Item1 | QskAspect::TextColor, "#ff3122" ); + ed.setColor( TopBarItem::Item2 | QskAspect::TextColor, "#6776ff" ); + ed.setColor( TopBarItem::Item3 | QskAspect::TextColor, "#f99055" ); + ed.setColor( TopBarItem::Item4 | QskAspect::TextColor, "#6776ff" ); + + ed.setGradient( TopBarItem::Item1, { Qt::Horizontal, "#FF5C00", "#FF3122" } ); + ed.setGradient( TopBarItem::Item2, { Qt::Horizontal, "#6776FF", "#6100FF" } ); + ed.setGradient( TopBarItem::Item3, { Qt::Horizontal, "#FFCE50", "#FF3122" } ); + ed.setGradient( TopBarItem::Item4, { Qt::Horizontal, "#6776FF", "#6100FF" } ); + + ed.setColor( MenuBarLabel::Text, Qt::white ); ed.setFontRole( MenuBarLabel::Text, QskSkin::SmallFont ); ed.setAlignment( MenuBarGraphicLabel::Graphic, Qt::AlignCenter ); - + // palette dependent skin hints: ed.setGradient( MenuBar::Panel, palette.menuBar ); ed.setGradient( MainContent::Panel, palette.mainContent ); ed.setGradient( Box::Panel, palette.box ); diff --git a/examples/iot-dashboard/TopBar.cpp b/examples/iot-dashboard/TopBar.cpp index bea3f9a0..a42c494b 100644 --- a/examples/iot-dashboard/TopBar.cpp +++ b/examples/iot-dashboard/TopBar.cpp @@ -6,9 +6,35 @@ #include +QSK_SUBCONTROL( TopBarItem, Item1 ) +QSK_SUBCONTROL( TopBarItem, Item2 ) +QSK_SUBCONTROL( TopBarItem, Item3 ) +QSK_SUBCONTROL( TopBarItem, Item4 ) + QSK_SUBCONTROL( TopBar, Panel ) -TopBarItem::TopBarItem( const QString& name, const QColor& textColor, const QGradient& gradient, int progress, int value, QQuickItem* parent ) : QskLinearBox( Qt::Vertical, parent ), +namespace +{ + QskAspect::Subcontrol subcontrolForIndex( int index ) + { + switch( index ) + { + case 0: + return TopBarItem::Item1; + + case 1: + return TopBarItem::Item2; + + case 2: + return TopBarItem::Item3; + + default: + return TopBarItem::Item4; + } + } +} + +TopBarItem::TopBarItem( int index, const QString& name, const QskGradient& gradient, int progress, int value, QQuickItem* parent ) : QskLinearBox( Qt::Vertical, parent ), m_name( name ) { setAutoLayoutChildren( true ); @@ -16,10 +42,13 @@ TopBarItem::TopBarItem( const QString& name, const QColor& textColor, const QGra setSpacing( 15 ); auto* textLabel = new QskTextLabel( name, this ); - textLabel->setFontRole( QskSkin::SmallFont ); // ### style + textLabel->setFontRole( QskSkin::SmallFont ); auto* pieChartAndDisplay = new QskLinearBox( Qt::Horizontal, this ); pieChartAndDisplay->setSpacing( 10 ); + + QskAspect::Subcontrol subcontrol = subcontrolForIndex( index ); + QColor textColor = color( subcontrol | QskAspect::TextColor ); /*auto* pieChart =*/ new PieChartPainted( textColor, gradient, progress, value, pieChartAndDisplay ); auto* display = new QskLinearBox( Qt::Vertical, pieChartAndDisplay ); display->setSpacing( 0 ); @@ -40,25 +69,16 @@ TopBar::TopBar( QQuickItem* parent ) : QskLinearBox( Qt::Horizontal, parent ) setSizePolicy( QskSizePolicy::Preferred, QskSizePolicy::Fixed ); QStringList itemStrings = { "Living Room", "Bedroom", "Bathroom", "Kitchen" }; - QColor textColors[] = {"#ff3122", "#6776ff", "#f99055", "#6776ff"}; - QColor gradientColors[] = {"#FF5C00", "#FF3122", - "#6776FF", "#6100FF", - "#FFCE50", "#FF3122", -// "#00ff00", "#ffffff", // ### remove - "#6776FF", "#6100FF" - }; int progressValues[] = {25, 45, 15, 86}; int values[] = {175, 205, 115, 289}; - for( int a = 0; a < itemStrings.count(); a++ ) + for( int i = 0; i < itemStrings.count(); i++ ) { - QLinearGradient gradient( 0, 0, 30, 0 ); // ### do this properly and dependent on the size - QGradientStop stop1( 0.0, gradientColors[2 * a] ); - QGradientStop stop2( 1.0, gradientColors[2 * a + 1] ); - gradient.setStops( {stop1, stop2} ); + QskAspect::Subcontrol subcontrol = subcontrolForIndex( i ); + QskGradient gradient = gradientHint( subcontrol ); - auto* item = new TopBarItem( itemStrings.at( a ), textColors[a], gradient, progressValues[a], values[a], this ); + auto* item = new TopBarItem( i, itemStrings.at( i ), gradient, progressValues[i], values[i], this ); m_entries.append( item ); } diff --git a/examples/iot-dashboard/TopBar.h b/examples/iot-dashboard/TopBar.h index e7f3510d..a8983f58 100644 --- a/examples/iot-dashboard/TopBar.h +++ b/examples/iot-dashboard/TopBar.h @@ -8,7 +8,20 @@ class TopBarItem : public QskLinearBox Q_OBJECT public: - TopBarItem( const QString& name, const QColor& textColor, const QGradient& gradient, int progress, int value, QQuickItem* parent ); + QSK_SUBCONTROLS( Item1, Item2, Item3, Item4 ) + + TopBarItem( int index, const QString& name, const QskGradient& gradient, int progress, int value, QQuickItem* parent ); + + QskAspect::Subcontrol effectiveSubcontrol( + QskAspect::Subcontrol subControl ) const override final + { + if( subControl == QskLinearBox::Panel ) + { + return Panel; + } + + return subControl; + } private: QString m_name;