Skip to content

Commit

Permalink
Merge pull request #5769 from gooddata/SHA_master
Browse files Browse the repository at this point in the history
feat: display tooltip in drilled into visualization
  • Loading branch information
hackerstanislav authored Jan 8, 2025
2 parents 36bd19d + b5df6c3 commit a54f6cd
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 31 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
IInsightWidgetDescriptionConfiguration,
} from "@gooddata/sdk-model";
import {
Button,
FullScreenOverlay,
Overlay,
OverlayController,
Expand Down Expand Up @@ -218,16 +219,16 @@ function InsightDrillDialogDescriptionButton({
const { formatMessage } = useIntl();

return (
<div
className={cx("drill-dialog-insight-container-button", {
<Button
className={cx("gd-button-primary gd-button-icon-only drill-dialog-insight-container-button", {
"is-active": isOpen,
"drill-dialog-insight-container-button--open": isOpen,
"drill-dialog-insight-container-button--mobile": isMobileDevice,
})}
onClick={() => setIsOpen((open) => !open)}
aria-label={formatMessage({ id: "widget.options.description" })}
>
<UiIcon type="question" size={20} />
</div>
ariaLabel={formatMessage({ id: "widget.options.description" })}
value={<UiIcon type="question" size={18} />}
/>
);
}

Expand Down
56 changes: 31 additions & 25 deletions libs/sdk-ui-dashboard/styles/scss/drillDialog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,6 @@ $description-width-mobile: 320px;

&.gd-ff-drill-description {
max-height: 100%;
overflow: hidden;
flex-shrink: 1;
}
}
Expand All @@ -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 {
Expand All @@ -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;
}

Expand Down

0 comments on commit a54f6cd

Please sign in to comment.