maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-26 06:47:17 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use IconArrowHead on PaginationLinks

Browse source
This commit is contained in:
Jenni Nurmi 2018-11-14 14:54:05 +02:00
parent f4a14c50f3
commit c0dd47fd02
4 changed files with 26 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/components/PaginationLinks/NextPageIcon.js
View file

@ -1,33 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
const NextPageIcon = props => {
const { className } = props;
return (
<svg
className={className}
width="11"
height="15"
viewBox="0 0 11 15"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.6 14c-.17 0-.34-.065-.458-.192-.214-.228-.182-.57.07-.764L8.472 7.5 1.21 1.955c-.252-.194-.284-.535-.07-.763.214-.23.592-.257.846-.064l7.8 5.958c.135.104.212.255.212.414 0 .16-.077.31-.212.414l-7.8 5.958c-.113.086-.25.128-.388.128"
fillRule="evenodd"
/>
</svg>
);
};
const { string } = PropTypes;
NextPageIcon.defaultProps = {
className: null,
};
NextPageIcon.propTypes = {
className: string,
};
export default NextPageIcon;

20
src/components/PaginationLinks/PaginationLinks.css
View file

@ -17,15 +17,6 @@
/* Reset <a> tag sizing */
line-height: 0;
font-size: 0;
/* Color for svg icons */
fill: var(--marketplaceColor);
stroke: var(--marketplaceColor);
&:hover {
fill: var(--marketplaceColorDark);
stroke: var(--marketplaceColorDark);
}
}
.prev {
@ -37,6 +28,17 @@
padding-left: 33px;
}
.arrowIcon {
/* Color for svg icons */
fill: var(--marketplaceColor);
stroke: var(--marketplaceColor);
&:hover {
fill: var(--marketplaceColorDark);
stroke: var(--marketplaceColorDark);
}
}
.disabled,
.disabled:hover {
fill: var(--matterColorAnti);

24
src/components/PaginationLinks/PaginationLinks.js
View file

@ -3,12 +3,10 @@ import PropTypes from 'prop-types';
import { injectIntl, intlShape } from 'react-intl';
import classNames from 'classnames';
import range from 'lodash/range';
import { NamedLink } from '../../components';
import { IconArrowHead, NamedLink } from '../../components';
import { stringify } from '../../util/urlHelpers';
import { propTypes } from '../../util/types';
import NextPageIcon from './NextPageIcon';
import PrevPageIcon from './PrevPageIcon';
import css from './PaginationLinks.css';
const { string, object } = PropTypes;
@ -77,13 +75,17 @@ export const PaginationLinksComponent = props => {
to={{ search: stringify(prevSearchParams) }}
title={intl.formatMessage({ id: 'PaginationLinks.previous' })}
>
<PrevPageIcon className={css.icon} />
<IconArrowHead direction="left" size="big" rootClassName={css.arrowIcon} />
</NamedLink>
);
const prevLinkDisabled = (
<div className={classNames(css.disabled, css.prev)}>
<PrevPageIcon className={css.icon} />
<div className={css.prev}>
<IconArrowHead
direction="left"
size="big"
rootClassName={classNames(css.arrowIcon, css.disabled)}
/>
</div>
);
@ -96,13 +98,17 @@ export const PaginationLinksComponent = props => {
to={{ search: stringify(nextSearchParams) }}
title={intl.formatMessage({ id: 'PaginationLinks.next' })}
>
<NextPageIcon className={css.icon} />
<IconArrowHead direction="right" size="big" rootClassName={css.arrowIcon} />
</NamedLink>
);
const nextLinkDisabled = (
<div className={classNames(css.disabled, css.next)}>
<NextPageIcon className={css.icon} />
<div className={css.next}>
<IconArrowHead
direction="right"
size="big"
rootClassName={classNames(css.arrowIcon, css.disabled)}
/>
</div>
);

33
src/components/PaginationLinks/PrevPageIcon.js
View file

@ -1,33 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
const PrevPageIcon = props => {
const { className } = props;
return (
<svg
className={className}
width="11"
height="15"
viewBox="0 0 11 15"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.4 1c.17 0 .34.065.458.192.214.228.182.57-.07.764L2.528 7.5l7.26 5.545c.252.194.284.535.07.763-.214.23-.592.257-.846.064l-7.8-5.958C1.077 7.81 1 7.66 1 7.5c0-.16.077-.31.212-.414l7.8-5.958C9.125 1.042 9.262 1 9.4 1"
fillRule="evenodd"
/>
</svg>
);
};
const { string } = PropTypes;
PrevPageIcon.defaultProps = {
className: null,
};
PrevPageIcon.propTypes = {
className: string,
};
export default PrevPageIcon;