Skip to content
Snippets Groups Projects
Unverified Commit 1d900799 authored by Maz Ameli's avatar Maz Ameli Committed by GitHub
Browse files

Datasets educational modal restyling (#19168) 

* restyle the dataset education modal

* restructure the modal code and styling

* add t tags to strings
parent 252fa25c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/metabase/query_builder/components/NewDatasetModal/NewDatasetModal.jsx
+ 29
− 22
View file @ 1d900799
import React from "react";
import { t, jt } from "ttag";
import { t } from "ttag";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { turnQuestionIntoDataset } from "metabase/query_builder/actions";
import Button from "metabase/components/Button";
import Link from "metabase/components/Link";
import ModalContent from "metabase/components/ModalContent";
import {
DatasetFeatureOverview,
DatasetFeaturesContainer,
FeatureOverviewContainer,
DatasetImg,
DatasetTitle,
DatasetValueProp,
} from "./NewDatasetModal.styled";
const propTypes = {
......@@ -30,9 +33,12 @@ function NewDatasetModal({ turnQuestionIntoDataset, onClose }) {
return (
<ModalContent
title={t`Create datasets to make it easier for everyone to explore.`}
footer={[
<Button key="cancel" onClick={onClose}>{t`Cancel`}</Button>,
<Link
className="text-brand"
key="cancel"
onClick={onClose}
>{t`Cancel`}</Link>,
<Button
key="action"
primary
......@@ -40,23 +46,24 @@ function NewDatasetModal({ turnQuestionIntoDataset, onClose }) {
>{t`Turn this into a dataset`}</Button>,
]}
>
<DatasetFeaturesContainer>
<DatasetFeatureOverview icon="dataset">
{jt`You’ll see them in the ${(
<strong>{t`Datasets section`}</strong>
)} when creating a new question.`}
</DatasetFeatureOverview>
<DatasetFeatureOverview icon="folder">
{jt`Easily ${(
<strong>{t`open a dataset from its collection`}</strong>
)} or via Search to start a new question.`}
</DatasetFeatureOverview>
<DatasetFeatureOverview icon="label">
{jt`You can ${(
<strong>{t`customize a dataset’s metadata`}</strong>
)} to make it even easier to explore the data.`}
</DatasetFeatureOverview>
</DatasetFeaturesContainer>
<FeatureOverviewContainer>
<DatasetImg src="app/img/dataset-illustration.svg" />
<DatasetTitle>{t`Datasets`}</DatasetTitle>
<ul>
<DatasetValueProp>
{t`Let you update column descriptions and customize metadata to create
great starting points for exploration.`}
</DatasetValueProp>
<DatasetValueProp>
{t`Show up higher in search results and get highlighted when other
users start new questions to promote reuse.`}
</DatasetValueProp>
<DatasetValueProp>
{t`Live in collections to keep them separate from messy database
schemas.`}
</DatasetValueProp>
</ul>
</FeatureOverviewContainer>
</ModalContent>
);
}
......
frontend/src/metabase/query_builder/components/NewDatasetModal/NewDatasetModal.styled.jsx
+ 17
− 35
View file @ 1d900799
import React from "react";
import { PropTypes } from "prop-types";
import styled from "styled-components";
import { color, lighten } from "metabase/lib/colors";
import { color } from "metabase/lib/colors";
import { space } from "metabase/styled-components/theme";
import Icon from "metabase/components/Icon";
const FeatureOverviewContainer = styled.div`
padding-right: ${space(1)};
export const FeatureOverviewContainer = styled.div`
padding-top: ${space(3)};
padding-left: ${space(2)};
padding-right: ${space(2)};
`;
const FeatureIconContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
background-color: ${lighten(color("brand", 0.5))};
width: 100px;
height: 100px;
export const DatasetImg = styled.img`
padding-top: ${space(2)};
`;
const FeatureDescription = styled.p`
color: ${color("text-dark")};
export const DatasetTitle = styled.h2`
margin-top: ${space(3)};
margin-bottom: ${space(2)};
`;
DatasetFeatureOverview.propTypes = {
icon: PropTypes.string.isRequired,
children: PropTypes.node.isRequired,
};
export function DatasetFeatureOverview({ icon, children }) {
return (
<FeatureOverviewContainer>
<FeatureIconContainer>
<Icon name={icon} color={color("brand")} size={40} />
</FeatureIconContainer>
<FeatureDescription>{children}</FeatureDescription>
</FeatureOverviewContainer>
);
}
export const DatasetFeaturesContainer = styled.div`
display: flex;
justify-content: space-between;
export const DatasetValueProp = styled.li`
color: ${color("text-dark")};
list-style-type: disc;
margin-left: ${space(2)};
padding-bottom: ${space(2)};
font-size: 14;
line-height: 22px;
`;
frontend/src/metabase/query_builder/components/QueryModals.jsx
+ 1
− 1
View file @ 1d900799
......@@ -204,7 +204,7 @@ export default class QueryModals extends React.Component {
/>
</Modal>
) : modal === MODAL_TYPES.TURN_INTO_DATASET ? (
<Modal onClose={onCloseModal}>
<Modal small onClose={onCloseModal}>
<NewDatasetModal onClose={onCloseModal} />
</Modal>
) : null;
......
resources/frontend_client/app/img/dataset-illustration.svg 0 → 100644
+ 1
− 0
View file @ 1d900799
<svg width="97" height="98" viewBox="0 0 97 98" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity=".1" fill-rule="evenodd" clip-rule="evenodd" d="M25 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V2zm0 26a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V28zm28-2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V28a2 2 0 0 0-2-2H53zM25 54a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V54zm2 24a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V80a2 2 0 0 0-2-2H27zM0 80a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V80zm2-28a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V54a2 2 0 0 0-2-2H2zM0 28a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V28zm53 50a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V80a2 2 0 0 0-2-2H53zm24 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H79a2 2 0 0 1-2-2V80zm2-28a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V54a2 2 0 0 0-2-2H79zm-2-24a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H79a2 2 0 0 1-2-2V28zm2-28a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H79zM51 54a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H53a2 2 0 0 1-2-2V54zm2-54a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H53z" fill="#509EE3"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.715.286H4.286a4 4 0 0 0-4 4v11.428a4 4 0 0 0 4 4h11.429a4 4 0 0 0 4-4V4.286a4 4 0 0 0-4-4zm-13.429 4a2 2 0 0 1 2-2h11.429a2 2 0 0 1 2 2v11.428a2 2 0 0 1-2 2H4.286a2 2 0 0 1-2-2V4.286zm5.143-.072H4.215v3.214h3.214V4.214zm4.178 0H8.393v3.214h3.214V4.214zm.965 0h3.214v3.214h-3.214V4.214zM7.429 8.393H4.215v3.214h3.214V8.393zm.964 0h3.214v3.214H8.393V8.393zm7.393 0h-3.214v3.214h3.214V8.393zM4.215 12.57h3.214v3.215H4.215V12.57zm7.393 0H8.393v3.215h3.214V12.57zm.964 0h3.214v3.215h-3.214V12.57z" fill="#509EE3"/></svg>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment