From 7a2cae9505e3ddfeeb0ce82be35b63176b07aca0 Mon Sep 17 00:00:00 2001
From: Anton Kulyk <kuliks.anton@gmail.com>
Date: Tue, 11 Oct 2022 14:35:55 +0100
Subject: [PATCH] Tweak data app page style (#25875)
* tweak header status based on isDataApp
* get isDataApp from proper source, use to stop the whole show / hide business
* Fix hardcoded color
Co-authored-by: Kyle Doherty <5248953+kdoh@users.noreply.github.com>
---
.../components/Dashboard/Dashboard.jsx | 2 ++
.../components/Dashboard/Dashboard.styled.jsx | 9 ++++++--
.../components/DashboardHeader.styled.tsx | 22 +++++++++++--------
.../dashboard/components/DashboardHeader.tsx | 4 +++-
4 files changed, 25 insertions(+), 12 deletions(-)
diff --git a/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.jsx b/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.jsx
index d649a7604cf..26c92ce32c2 100644
--- a/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.jsx
+++ b/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.jsx
@@ -270,6 +270,7 @@ class Dashboard extends Component {
<HeaderContainer
isFullscreen={isFullscreen}
isNightMode={shouldRenderAsNightMode}
+ isDataApp={dashboard.is_app_page}
>
<DashboardHeader
{...this.props}
@@ -280,6 +281,7 @@ class Dashboard extends Component {
onSharingClick={this.onSharingClick}
onToggleAddQuestionSidebar={this.onToggleAddQuestionSidebar}
showAddQuestionSidebar={showAddQuestionSidebar}
+ isDataApp={dashboard.is_app_page}
/>
{shouldRenderParametersWidgetInEditMode && (
diff --git a/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.styled.jsx b/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.styled.jsx
index 8b418e1e02b..8b01f52ff04 100644
--- a/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.styled.jsx
+++ b/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.styled.jsx
@@ -63,11 +63,16 @@ export const DashboardBody = styled.div`
`;
export const HeaderContainer = styled.header`
- background-color: white;
- border-bottom: 1px solid ${color("border")};
position: relative;
z-index: 2;
+ ${({ isDataApp }) =>
+ !isDataApp &&
+ css`
+ background-color: ${color("bg-white")};
+ border-bottom: 1px solid ${color("border")};
+ `}
+
${({ isFullscreen }) =>
isFullscreen &&
css`
diff --git a/frontend/src/metabase/dashboard/components/DashboardHeader.styled.tsx b/frontend/src/metabase/dashboard/components/DashboardHeader.styled.tsx
index 8f577c7451b..2ec2b84f83e 100644
--- a/frontend/src/metabase/dashboard/components/DashboardHeader.styled.tsx
+++ b/frontend/src/metabase/dashboard/components/DashboardHeader.styled.tsx
@@ -86,15 +86,19 @@ export const HeaderContent = styled.div<HeaderContentProps>`
opacity: ${props => (props.showSubHeader ? "1x" : "0")};
}
- &:hover,
- &:focus-within {
- ${HeaderCaptionContainer} {
- top: 0;
- }
- ${HeaderLastEditInfoLabel} {
- opacity: 1;
- }
- }
+ ${({ showSubHeader }) =>
+ showSubHeader &&
+ css`
+ &:hover,
+ &:focus-within {
+ ${HeaderCaptionContainer} {
+ top: 0;
+ }
+ ${HeaderLastEditInfoLabel} {
+ opacity: 1;
+ }
+ }
+ `}
${breakpointMaxSmall} {
padding-top: 0;
diff --git a/frontend/src/metabase/dashboard/components/DashboardHeader.tsx b/frontend/src/metabase/dashboard/components/DashboardHeader.tsx
index cf3e008394a..4d7f146ba21 100644
--- a/frontend/src/metabase/dashboard/components/DashboardHeader.tsx
+++ b/frontend/src/metabase/dashboard/components/DashboardHeader.tsx
@@ -113,6 +113,8 @@ const DashboardHeader = ({
return () => clearTimeout(timerId);
});
+ const isDataApp = dashboard.is_app_page;
+
return (
<div>
{isEditing && (
@@ -135,7 +137,7 @@ const DashboardHeader = ({
className={cx("QueryBuilder-section", headerClassName)}
ref={header}
>
- <HeaderContent showSubHeader={showSubHeader}>
+ <HeaderContent showSubHeader={!isDataApp && showSubHeader}>
<HeaderCaptionContainer>
<HeaderCaption
key={dashboard.name}
--
GitLab