diff --git a/libs/sdk-ui-dashboard/src/presentation/widget/insight/ViewModeDashboardInsight/InsightDrillDialog/InsightDrillDialog.tsx b/libs/sdk-ui-dashboard/src/presentation/widget/insight/ViewModeDashboardInsight/InsightDrillDialog/InsightDrillDialog.tsx index f91b03fd1ca..6a76a0f5ce5 100644 --- a/libs/sdk-ui-dashboard/src/presentation/widget/insight/ViewModeDashboardInsight/InsightDrillDialog/InsightDrillDialog.tsx +++ b/libs/sdk-ui-dashboard/src/presentation/widget/insight/ViewModeDashboardInsight/InsightDrillDialog/InsightDrillDialog.tsx @@ -8,6 +8,7 @@ import { IInsightWidgetDescriptionConfiguration, } from "@gooddata/sdk-model"; import { + Button, FullScreenOverlay, Overlay, OverlayController, @@ -218,16 +219,16 @@ function InsightDrillDialogDescriptionButton({ const { formatMessage } = useIntl(); return ( -
setIsOpen((open) => !open)} - aria-label={formatMessage({ id: "widget.options.description" })} - > - -
+ ariaLabel={formatMessage({ id: "widget.options.description" })} + value={} + /> ); } diff --git a/libs/sdk-ui-dashboard/styles/scss/drillDialog.scss b/libs/sdk-ui-dashboard/styles/scss/drillDialog.scss index 2a1449bf986..d3e363dedc3 100644 --- a/libs/sdk-ui-dashboard/styles/scss/drillDialog.scss +++ b/libs/sdk-ui-dashboard/styles/scss/drillDialog.scss @@ -177,7 +177,6 @@ $description-width-mobile: 320px; &.gd-ff-drill-description { max-height: 100%; - overflow: hidden; flex-shrink: 1; } } @@ -202,49 +201,51 @@ $description-width-mobile: 320px; .drill-dialog-insight-container-button { position: absolute; top: 10px; - left: 10px; + left: 0; z-index: zIndexes.$drill-dialog-description-button; + transition: all 0.3s ease-in-out; - display: flex; - width: var(--gd-button-M); - height: var(--gd-button-M); - padding: var(--spacing-6px) var(--spacing-10px); - justify-content: center; - align-items: center; - gap: var(--spacing-5px); - flex-shrink: 0; + &.gd-button-icon-only { + width: 32px; + height: 32px; + padding-right: 0; - border-radius: var(--gd-button-borderRadius); - border: 1px solid var(--gd-palette-complementary-4); - background: var(--gd-palette-complementary-0); - cursor: pointer; - transition: all 0.3s ease-in-out; + span { + display: block; + margin: auto; + text-align: center; + } - &.drill-dialog-insight-container-button--open { - border-radius: 3px; - border: 1px solid var(--gd-palette-complementary-5); - background: var(--gd-palette-complementary-3); + &:hover span svg path { + fill: var(--gd-palette-primary-base); + } - /* Shadow/Button/Secondary/Active */ - box-shadow: 0 2px 0 0 var(--gd-palette-complementary-9-t85) inset; + span svg path { + fill: var(--gd-palette-complementary-7); + } + } + + &.drill-dialog-insight-container-button--open { + left: 10px; } &.drill-dialog-insight-container-button--open.drill-dialog-insight-container-button--mobile { - left: $description-width-mobile + 10px; + left: min($description-width-mobile + 10px, calc(100vw - 60px)); } } .drill-dialog-insight-container-description { width: 0; - height: 100%; + margin-top: -20px; + height: calc(100% + 40px); flex-shrink: 0; - border-right: 1px solid var(--gd-palette-complementary-3); overflow: hidden; overflow-y: auto; transition: width 0.3s ease-in-out; position: relative; &.drill-dialog-insight-container-description--open { + border-right: 1px solid var(--gd-palette-complementary-3); width: $description-width; .drill-dialog-insight-container-description-content { @@ -254,17 +255,22 @@ $description-width-mobile: 320px; &.drill-dialog-insight-container-description--open.drill-dialog-insight-container-description--mobile { width: $description-width-mobile; + max-width: calc(100vw - 70px); .drill-dialog-insight-container-description-content { width: $description-width-mobile; + max-width: calc(100vw - 70px); } } &.drill-dialog-insight-container-description--mobile { + margin-top: 0; + height: auto; background: var(--gd-palette-complementary-0); position: absolute; + top: -20px; left: 0; - bottom: 0; + bottom: -20px; z-index: zIndexes.$drill-dialog-description; }