djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Visual improvements

Browse source
This commit is contained in:
dominik-zeglen 2019-12-20 17:03:20 +01:00
parent 1f3cbfda82
commit dab5dca615
3 changed files with 47 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/Filter/Filter.tsx
View file

@ -4,7 +4,6 @@ import Popper from "@material-ui/core/Popper";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import { fade } from "@material-ui/core/styles/colorManipulator"; import { fade } from "@material-ui/core/styles/colorManipulator";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
@ -97,14 +96,8 @@ const Filter: React.FC<FilterProps> = props => {
onClick={() => setFilterMenuOpened(!isFilterMenuOpened)} onClick={() => setFilterMenuOpened(!isFilterMenuOpened)}
> >
<Typography className={classes.addFilterText}> <Typography className={classes.addFilterText}>
<FormattedMessage defaultMessage="Add Filter" description="button" /> <FormattedMessage defaultMessage="Filters" description="button" />
</Typography> </Typography>
<ArrowDropDownIcon
color="primary"
className={classNames(classes.addFilterIcon, {
[classes.rotate]: isFilterMenuOpened
})}
/>
</ButtonBase> </ButtonBase>
<Popper <Popper
className={classes.popover} className={classes.popover}

43
src/components/FilterBar/FilterBar.tsx
View file

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
import makeStyles from "@material-ui/core/styles/makeStyles"; import makeStyles from "@material-ui/core/styles/makeStyles";
import Button from "@material-ui/core/Button";
import { FilterProps } from "../../types"; import { FilterProps } from "../../types";
import { IFilter } from "../Filter/types"; import { IFilter } from "../Filter/types";
@ -8,8 +9,6 @@ import FilterTabs, { FilterTab } from "../TableFilter";
import { SearchBarProps } from "../SearchBar"; import { SearchBarProps } from "../SearchBar";
import SearchInput from "../SearchBar/SearchInput"; import SearchInput from "../SearchBar/SearchInput";
import Filter from "../Filter"; import Filter from "../Filter";
import Link from "../Link";
import Hr from "../Hr";
export interface FilterBarProps<TKeys extends string = string> export interface FilterBarProps<TKeys extends string = string>
extends FilterProps<TKeys>, extends FilterProps<TKeys>,
@ -20,14 +19,15 @@ export interface FilterBarProps<TKeys extends string = string>
const useStyles = makeStyles( const useStyles = makeStyles(
theme => ({ theme => ({
root: { root: {
borderBottom: `1px solid ${theme.palette.divider}`,
display: "flex", display: "flex",
flexWrap: "wrap", flexWrap: "wrap",
padding: theme.spacing(1, 3) padding: theme.spacing(1, 3)
}, },
tabActions: { tabActionButton: {
borderBottom: `1px solid ${theme.palette.divider}`, marginLeft: theme.spacing(2),
padding: theme.spacing(1, 3, 2), paddingLeft: theme.spacing(3),
textAlign: "right" paddingRight: theme.spacing(3)
} }
}), }),
{ {
@ -93,30 +93,33 @@ const FilterBar: React.FC<FilterBarProps> = props => {
placeholder={searchPlaceholder} placeholder={searchPlaceholder}
onSearchChange={onSearchChange} onSearchChange={onSearchChange}
/> />
</div> {displayTabAction &&
{displayTabAction === null ? ( (displayTabAction === "save" ? (
<Hr /> <Button
) : ( className={classes.tabActionButton}
<div className={classes.tabActions}> color="primary"
{displayTabAction === "save" ? ( onClick={onTabSave}
<Link onClick={onTabSave}> >
<FormattedMessage <FormattedMessage
defaultMessage="Save Custom Search" defaultMessage="Save Search"
description="button" description="button"
/> />
</Link> </Button>
) : ( ) : (
displayTabAction === "delete" && ( displayTabAction === "delete" && (
<Link onClick={onTabDelete}> <Button
className={classes.tabActionButton}
color="primary"
onClick={onTabDelete}
>
<FormattedMessage <FormattedMessage
defaultMessage="Delete Search" defaultMessage="Delete Search"
description="button" description="button"
/> />
</Link> </Button>
) )
)} ))}
</div> </div>
)}
</> </>
); );
}; };

43
src/components/SearchBar/SearchBar.tsx
View file

@ -1,11 +1,10 @@
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
import makeStyles from "@material-ui/core/styles/makeStyles"; import makeStyles from "@material-ui/core/styles/makeStyles";
import Button from "@material-ui/core/Button";
import { SearchPageProps, TabPageProps } from "@saleor/types"; import { SearchPageProps, TabPageProps } from "@saleor/types";
import FilterTabs, { FilterTab } from "../TableFilter"; import FilterTabs, { FilterTab } from "../TableFilter";
import Link from "../Link";
import Hr from "../Hr";
import SearchInput from "./SearchInput"; import SearchInput from "./SearchInput";
export interface SearchBarProps extends SearchPageProps, TabPageProps { export interface SearchBarProps extends SearchPageProps, TabPageProps {
@ -16,14 +15,15 @@ export interface SearchBarProps extends SearchPageProps, TabPageProps {
const useStyles = makeStyles( const useStyles = makeStyles(
theme => ({ theme => ({
root: { root: {
borderBottom: `1px solid ${theme.palette.divider}`,
display: "flex", display: "flex",
flexWrap: "wrap", flexWrap: "wrap",
padding: theme.spacing(1, 3) padding: theme.spacing(1, 3)
}, },
tabActions: { tabActionButton: {
borderBottom: `1px solid ${theme.palette.divider}`, marginLeft: theme.spacing(2),
padding: theme.spacing(1, 3, 2), paddingLeft: theme.spacing(3),
textAlign: "right" paddingRight: theme.spacing(3)
} }
}), }),
{ {
@ -81,30 +81,33 @@ const SearchBar: React.FC<SearchBarProps> = props => {
placeholder={searchPlaceholder} placeholder={searchPlaceholder}
onSearchChange={onSearchChange} onSearchChange={onSearchChange}
/> />
</div> {displayTabAction &&
{displayTabAction === null ? ( (displayTabAction === "save" ? (
<Hr /> <Button
) : ( className={classes.tabActionButton}
<div className={classes.tabActions}> color="primary"
{displayTabAction === "save" ? ( onClick={onTabSave}
<Link onClick={onTabSave}> >
<FormattedMessage <FormattedMessage
defaultMessage="Save Custom Search" defaultMessage="Save Search"
description="button" description="button"
/> />
</Link> </Button>
) : ( ) : (
displayTabAction === "delete" && ( displayTabAction === "delete" && (
<Link onClick={onTabDelete}> <Button
className={classes.tabActionButton}
color="primary"
onClick={onTabDelete}
>
<FormattedMessage <FormattedMessage
defaultMessage="Delete Search" defaultMessage="Delete Search"
description="button" description="button"
/> />
</Link> </Button>
) )
)} ))}
</div> </div>
)}
</> </>
); );
}; };