style shadow boxes

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 );
 

examples/iot-dashboard/MainContent.cpp

@@ -13,12 +13,16 @@
 #include <QskBoxBorderMetrics.h>
 #include <QskBoxShapeMetrics.h>
 #include <QskGridBox.h>
+#include <QskSetup.h>
+#include <QskSkin.h>
 #include <QskTextLabel.h>
 
 #include "src/shadowedrectangle.h"
 
 #include <QTimer>
 
+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->setColor( Qt::transparent );
-        r->shadow()->setSize( 15 );
+        r->shadow()->setColor( color( ShadowPositioner::Panel ) );
-        r->setColor( Qt::white ); // ### opacity should only be for the shadow, not the background
+
+        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 );
+        auto shape = boxShapeHint( ShadowPositioner::Panel );
-        r->corners()->setBottomLeft( 6 );
+        r->corners()->setTopLeft( shape.radius( Qt::TopLeftCorner ).width() );
-        r->corners()->setBottomRight( 6 );
+        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 );
     }
 }

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;

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 );
 }

examples/iot-dashboard/Skin.h

@@ -10,9 +10,9 @@ class Skin : public QskSkin
         class Palette
         {
             public:
-                Palette( QskGradient menuBar, QskGradient mainContent, QskGradient box,
+                Palette( const QskGradient& menuBar, const QskGradient& mainContent, const QskGradient& box,
-                         QColor lightDisplay, QColor pieChart, QskGradient roundButton,
+                         const QColor& lightDisplay, const QColor& pieChart, const QskGradient& roundButton,
-                         QColor weekdayBox, QColor text )
+                         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 )
         {
         }