diff --git a/examples/iot-dashboard/Box.cpp b/examples/iot-dashboard/Box.cpp index 990790cd..0b4848d5 100644 --- a/examples/iot-dashboard/Box.cpp +++ b/examples/iot-dashboard/Box.cpp @@ -17,14 +17,7 @@ Box::Box( const QString& title, QQuickItem* parent ) { setAutoAddChildren( true ); setAutoLayoutChildren( true ); - setBackgroundColor( Qt::white ); - - setPaddingHint( Panel, 15 ); setPanel( true ); - setBoxShapeHint( QskBox::Panel, 6 ); - QskBoxBorderColors borderColors( "#dddddd" ); - borderColors.setAlpha( 100 ); - setBoxBorderColorsHint( QskBox::Panel, borderColors ); m_label->setFontRole( Skin::TitleFont ); diff --git a/examples/iot-dashboard/MainContent.cpp b/examples/iot-dashboard/MainContent.cpp index 3aff3eea..76856680 100644 --- a/examples/iot-dashboard/MainContent.cpp +++ b/examples/iot-dashboard/MainContent.cpp @@ -13,12 +13,16 @@ #include #include #include +#include +#include #include #include "src/shadowedrectangle.h" #include +QSK_SUBCONTROL( ShadowPositioner, Panel ) + QSK_SUBCONTROL( MainContent, Panel ) QSK_SUBCONTROL( MainContentGridBox, Panel ) @@ -36,14 +40,22 @@ void ShadowPositioner::setGridBox( QskGridBox* gridBox ) { auto* r = new ShadowedRectangle( this ); r->setZ( 5 ); - r->shadow()->setColor( Qt::black ); - r->shadow()->setSize( 15 ); - r->setColor( Qt::white ); // ### opacity should only be for the shadow, not the background + r->setColor( Qt::transparent ); + r->shadow()->setColor( color( ShadowPositioner::Panel ) ); + + connect( qskSetup, &QskSetup::skinChanged, [this, r]() + { + r->shadow()->setColor( color( ShadowPositioner::Panel ) ); + } ); + + r->shadow()->setSize( metric( ShadowPositioner::Panel | QskAspect::Size ) ); r->setOpacity( 0.1 ); - r->corners()->setTopLeft( 6 ); - r->corners()->setTopRight( 6 ); - r->corners()->setBottomLeft( 6 ); - r->corners()->setBottomRight( 6 ); + + auto shape = boxShapeHint( ShadowPositioner::Panel ); + r->corners()->setTopLeft( shape.radius( Qt::TopLeftCorner ).width() ); + r->corners()->setTopRight( shape.radius( Qt::TopRightCorner ).width() ); + r->corners()->setBottomLeft( shape.radius( Qt::BottomLeftCorner ).width() ); + r->corners()->setBottomRight( shape.radius( Qt::BottomRightCorner ).width() ); m_rectangles.append( r ); } } diff --git a/examples/iot-dashboard/MainContent.h b/examples/iot-dashboard/MainContent.h index 0ad9ea66..4fa580cd 100644 --- a/examples/iot-dashboard/MainContent.h +++ b/examples/iot-dashboard/MainContent.h @@ -9,7 +9,10 @@ class ShadowedRectangle; class ShadowPositioner : public QskControl { Q_OBJECT + public: + QSK_SUBCONTROLS( Panel ) + ShadowPositioner( QQuickItem* parent ); void updateLayout() override; diff --git a/examples/iot-dashboard/Skin.cpp b/examples/iot-dashboard/Skin.cpp index 398a1c41..e74bd1cc 100644 --- a/examples/iot-dashboard/Skin.cpp +++ b/examples/iot-dashboard/Skin.cpp @@ -65,6 +65,7 @@ void Skin::initHints( const Palette& palette ) ed.setPadding( MainContentGridBox::Panel, {19, 0, 27, 24} ); + // menu bar: ed.setPadding( MenuBar::Panel, {0, 35, 0, 12} ); @@ -84,6 +85,7 @@ void Skin::initHints( const Palette& palette ) ed.setMetric( MenuBarGraphicLabel::Graphic | QskAspect::Size, 14 ); ed.setAlignment( MenuBarGraphicLabel::Graphic, Qt::AlignCenter ); + // top bar: ed.setPadding( TopBar::Panel, {25, 35, 25, 0} ); @@ -102,6 +104,14 @@ void Skin::initHints( const Palette& palette ) ed.setFontRole( TimeLabel::Text, QskSkin::HugeFont ); ed.setColor( TimeLabel::Text, "#6776FF" ); + + // boxes (including shadow): + ed.setPadding( Box::Panel, 15 ); + + ed.setMetric( ShadowPositioner::Panel | QskAspect::Size, 15 ); + ed.setBoxShape( ShadowPositioner::Panel, {6, 6, 6, 6} ); + + // content in boxes (indoor temperature, humidity etc.): ed.setPadding( BoxWithButtons::Panel, 8 ); @@ -121,6 +131,7 @@ void Skin::initHints( const Palette& palette ) ed.setBoxShape( RoundButton::Panel, {0, 0, 30, 30} ); ed.setBoxShape( RoundButton::Panel | RoundButton::Top, {30, 30, 0, 0} ); + // diagram: ed.setBoxBorderMetrics( WeekdayBox::Panel, {0, 0, 3, 3} ); @@ -138,12 +149,14 @@ void Skin::initHints( const Palette& palette ) ed.setPadding( CaptionBox::Panel, {10, 10, 20, 0} ); + // light intensity: ed.setGradient( LightDisplay::ColdPart, { Qt::Horizontal, "#a7b0ff", "#6776ff" } ); ed.setGradient( LightDisplay::WarmPart, { Qt::Horizontal, "#feeeb7", "#ff3122" } ); ed.setFontRole( LightIntensityValueLabel::Text, QskSkin::LargeFont ); ed.setColor( LightIntensityValueLabel::Text, "#929cb2" ); + // palette dependent skin hints: ed.setGradient( MenuBar::Panel, palette.menuBar ); ed.setGradient( MainContent::Panel, palette.mainContent ); @@ -156,4 +169,5 @@ void Skin::initHints( const Palette& palette ) ed.setBoxBorderColors( WeekdayBox::Panel, palette.weekdayBox ); ed.setColor( QskTextLabel::Text, palette.text ); ed.setColor( WeekdayLabel::Text, palette.text ); + ed.setColor( ShadowPositioner::Panel, palette.shadow ); } diff --git a/examples/iot-dashboard/Skin.h b/examples/iot-dashboard/Skin.h index 842c2353..62fc4e2c 100644 --- a/examples/iot-dashboard/Skin.h +++ b/examples/iot-dashboard/Skin.h @@ -10,9 +10,9 @@ class Skin : public QskSkin class Palette { public: - Palette( QskGradient menuBar, QskGradient mainContent, QskGradient box, - QColor lightDisplay, QColor pieChart, QskGradient roundButton, - QColor weekdayBox, QColor text ) + Palette( const QskGradient& menuBar, const QskGradient& mainContent, const QskGradient& box, + const QColor& lightDisplay, const QColor& pieChart, const QskGradient& roundButton, + const QColor& weekdayBox, const QColor& text, const QColor& shadow ) : menuBar( menuBar ) , mainContent( mainContent ) , box( box ) @@ -21,6 +21,7 @@ class Skin : public QskSkin , roundButton( roundButton ) , weekdayBox( weekdayBox ) , text( text ) + , shadow( shadow ) { } QskGradient menuBar; @@ -31,6 +32,7 @@ class Skin : public QskSkin QskGradient roundButton; QColor weekdayBox; QColor text; + QColor shadow; }; Skin( const Palette& palette, QObject* parent = nullptr ); @@ -52,7 +54,7 @@ class DaytimeSkin : public Skin : Skin( Skin::Palette( {"#6D7BFB"}, {"#fbfbfb"}, {"#ffffff"}, "#ffffff", "#ffffff", {"#f7f7f7"}, - {"#f4f4f4"}, "#000000" ) + {"#f4f4f4"}, Qt::black, Qt::black ) , parent ) { } @@ -65,7 +67,7 @@ class NighttimeSkin : public Skin : Skin( Skin::Palette( {"#2937A7"}, {"#040404"}, {"#000000"}, "#000000", "#000000", {"#0a0a0a"}, - {"#0c0c0c"}, "#ffffff" ) + {"#0c0c0c"}, Qt::white, Qt::white ) , parent ) { }