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

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

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

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

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