From 445b26be397fc3a5e0000b1732021ceea21ae6f7 Mon Sep 17 00:00:00 2001 From: Peter Hartmann Date: Wed, 7 Apr 2021 11:33:39 +0200 Subject: [PATCH] more diagram style --- examples/iot-dashboard/Diagram.cpp | 31 ++++++++-------- examples/iot-dashboard/Diagram.h | 57 +++++++++++++++++++++++++++++- examples/iot-dashboard/Skin.cpp | 6 ++++ 3 files changed, 76 insertions(+), 18 deletions(-) diff --git a/examples/iot-dashboard/Diagram.cpp b/examples/iot-dashboard/Diagram.cpp index d2449c61..6676ff7c 100644 --- a/examples/iot-dashboard/Diagram.cpp +++ b/examples/iot-dashboard/Diagram.cpp @@ -12,6 +12,8 @@ #include +QSK_SUBCONTROL( WeekdayLabel, Panel ) +QSK_SUBCONTROL( WeekdayLabel, Text ) QSK_SUBCONTROL( WeekdayBox, Panel ) QSK_SUBCONTROL( CaptionColorBox, Panel ) @@ -21,6 +23,8 @@ QSK_STATE( CaptionItem, Water, ( QskAspect::FirstUserState << 1 ) ) QSK_STATE( CaptionItem, Electricity, ( QskAspect::FirstUserState << 2 ) ) QSK_STATE( CaptionItem, Gas, ( QskAspect::FirstUserState << 3 ) ) +QSK_SUBCONTROL( CaptionBox, Panel ) + QSK_SUBCONTROL( Diagram, Panel ) CaptionItem::CaptionItem( QskAspect::State state, QQuickItem* parent ) @@ -138,33 +142,26 @@ Diagram::Diagram( QQuickItem* parent ) setAutoAddChildren( false ); setAutoLayoutChildren( true ); - m_weekdays->setDefaultAlignment( Qt::AlignCenter ); m_weekdays->setSpacing( 0 ); QStringList weekdays = {"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"}; for( int i = 0; i < segments; ++i ) { auto* box = new WeekdayBox( m_weekdays ); -// box->setBoxBorderColorsHint( QskBox::Panel, {"#f4f4f4"} ); -// box->setBoxBorderMetricsHint( QskBox::Panel, {0, 0, 3, 3} ); m_weekdays->addItem( box, 0, i ); - auto* label = new QskTextLabel( weekdays.at( i ), m_weekdays ); - label->setFontRole( QskSkin::TinyFont ); - label->setMargins( {0, 5, 0, 10} ); - label->setAlignment( Qt::AlignCenter ); + auto* label = new WeekdayLabel( weekdays.at( i ), m_weekdays ); m_weekdays->addItem( label, 1, i ); } addItem( m_weekdays, Qt::AlignBottom ); - m_caption = new QskLinearBox( Qt::Horizontal, this ); - addItem( m_caption, Qt::AlignRight ); - m_caption->setSizePolicy( QskSizePolicy::Maximum, QskSizePolicy::Maximum ); - m_caption->setMargins( {10, 10, 20, 0} ); - m_caption->setSpacing( 30 ); - m_caption->addItem( new CaptionItem( CaptionItem::Water, this ) ); - m_caption->addItem( new CaptionItem( CaptionItem::Electricity, this ) ); - m_caption->addItem( new CaptionItem( CaptionItem::Gas, this ) ); + m_captionBox = new CaptionBox( this ); + addItem( m_captionBox, Qt::AlignRight ); + m_captionBox->setSizePolicy( QskSizePolicy::Maximum, QskSizePolicy::Maximum ); + m_captionBox->setSpacing( 30 ); + m_captionBox->addItem( new CaptionItem( CaptionItem::Water, this ) ); + m_captionBox->addItem( new CaptionItem( CaptionItem::Electricity, this ) ); + m_captionBox->addItem( new CaptionItem( CaptionItem::Gas, this ) ); addItem( m_content ); } @@ -173,10 +170,10 @@ void Diagram::updateLayout() { auto* firstWeekday = static_cast( m_weekdays->itemAt( 1, 0 ) ); qreal w = size().width(); - qreal h = size().height() - ( m_caption->size().height() + firstWeekday->size().height() ); + qreal h = size().height() - ( m_captionBox->size().height() + firstWeekday->size().height() ); m_content->setSize( { w, h } ); - m_content->setPosition( { 0, m_caption->size().height() } ); + m_content->setPosition( { 0, m_captionBox->size().height() } ); m_content->update(); } diff --git a/examples/iot-dashboard/Diagram.h b/examples/iot-dashboard/Diagram.h index 48af25a0..9cbf9b56 100644 --- a/examples/iot-dashboard/Diagram.h +++ b/examples/iot-dashboard/Diagram.h @@ -3,11 +3,42 @@ #include "Box.h" +#include + #include class DiagramContent; class QskGridBox; +class WeekdayLabel : public QskTextLabel +{ + Q_OBJECT + + public: + QSK_SUBCONTROLS( Panel, Text ) + + WeekdayLabel( const QString& text, QQuickItem* parent ) : QskTextLabel( text, parent ) + { + setPanel( true ); + } + + QskAspect::Subcontrol effectiveSubcontrol( + QskAspect::Subcontrol subControl ) const override final + { + if( subControl == QskTextLabel::Panel ) + { + return Panel; + } + + if( subControl == QskTextLabel::Text ) + { + return Text; + } + + return subControl; + } +}; + class WeekdayBox : public QskBox { Q_OBJECT @@ -65,6 +96,30 @@ class CaptionItem : public QskLinearBox CaptionItem( QskAspect::State state, QQuickItem* parent ); }; +class CaptionBox : public QskLinearBox +{ + Q_OBJECT + + public: + QSK_SUBCONTROLS( Panel ) + + CaptionBox( QQuickItem* parent ) : QskLinearBox( Qt::Horizontal, parent ) + { + setPanel( true ); + } + + QskAspect::Subcontrol effectiveSubcontrol( + QskAspect::Subcontrol subControl ) const override final + { + if( subControl == QskBox::Panel ) + { + return Panel; + } + + return subControl; + } +}; + class Diagram : public Box { Q_OBJECT @@ -87,7 +142,7 @@ class Diagram : public Box } private: - QskLinearBox* m_caption; + QskLinearBox* m_captionBox; QskGridBox* m_weekdays; DiagramContent* m_content; }; diff --git a/examples/iot-dashboard/Skin.cpp b/examples/iot-dashboard/Skin.cpp index 284acf1a..a77c0732 100644 --- a/examples/iot-dashboard/Skin.cpp +++ b/examples/iot-dashboard/Skin.cpp @@ -120,6 +120,12 @@ void Skin::initHints( const Palette& palette ) ed.setPadding( Diagram::Panel, 0 ); + ed.setFontRole( WeekdayLabel::Text, QskSkin::TinyFont ); + ed.setPadding( WeekdayLabel::Panel, {0, 5, 0, 10} ); + ed.setAlignment( WeekdayLabel::Text, Qt::AlignCenter ); + + ed.setPadding( CaptionBox::Panel, {10, 10, 20, 0} ); + // palette dependent skin hints: ed.setGradient( MenuBar::Panel, palette.menuBar ); ed.setGradient( MainContent::Panel, palette.mainContent );