diff --git a/src/qqq/components/widgets/CompositeWidget.tsx b/src/qqq/components/widgets/CompositeWidget.tsx index 0834268..b7347ff 100644 --- a/src/qqq/components/widgets/CompositeWidget.tsx +++ b/src/qqq/components/widgets/CompositeWidget.tsx @@ -22,6 +22,7 @@ import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData"; import {Box, Skeleton} from "@mui/material"; +import parse from "html-react-parser"; import {BlockData} from "qqq/components/widgets/blocks/BlockModels"; import WidgetBlock from "qqq/components/widgets/WidgetBlock"; import React from "react"; @@ -32,6 +33,8 @@ export interface CompositeData blocks: BlockData[]; styleOverrides?: any; layout?: string; + overlayHtml?: string; + overlayStyleOverrides?: any; } @@ -97,20 +100,34 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP boxStyle.borderRadius = "0.5rem"; boxStyle.background = "#FFFFFF"; } - if (data?.styleOverrides) { boxStyle = {...boxStyle, ...data.styleOverrides}; } - return ( - { - data.blocks.map((block: BlockData, index) => ( - - - - )) - } - ); + let overlayStyle: any = {}; + + if (data?.overlayStyleOverrides) + { + overlayStyle = {...overlayStyle, ...data.overlayStyleOverrides}; + } + + return ( + <> + { + data?.overlayHtml && + {parse(data.overlayHtml)} + } + + { + data.blocks.map((block: BlockData, index) => ( + + + + )) + } + + + ); } diff --git a/src/qqq/styles/qqq-override-styles.css b/src/qqq/styles/qqq-override-styles.css index ef5d407..c1de29c 100644 --- a/src/qqq/styles/qqq-override-styles.css +++ b/src/qqq/styles/qqq-override-styles.css @@ -787,3 +787,20 @@ input[type="search"]::-webkit-search-results-decoration { margin: 2rem 1rem; } + +/* default styles for a block widget overlay */ +.blockWidgetOverlay +{ + font-weight: 400; + position: relative; + top: 15px; + height: 0; + display: flex; + font-size: 14px; + flex-direction: column; + align-items: center; +} +.blockWidgetOverlay a +{ + color: #0062FF !important; +}