mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-10 10:17:28 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improved visits pages titles

Browse source
This commit is contained in:
Alejandro Celaya 2020-05-10 20:17:17 +02:00
parent fb0f14fc16
commit 3a53298417
6 changed files with 16 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/tags/helpers/Tag.js
View file

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './Tag.scss';
import { colorGeneratorType } from '../../utils/services/ColorGenerator'; import { colorGeneratorType } from '../../utils/services/ColorGenerator';
import './Tag.scss';
const propTypes = { const propTypes = {
text: PropTypes.string, text: PropTypes.string,
@ -17,12 +17,12 @@ const Tag = ({
children, children,
clearable, clearable,
colorGenerator, colorGenerator,
onClick = () => {}, onClick,
onClose = () => {}, onClose,
}) => ( }) => (
<span <span
className="badge tag" className="badge tag"
style={{ backgroundColor: colorGenerator.getColorForKey(text), cursor: clearable ? 'auto' : 'pointer' }} style={{ backgroundColor: colorGenerator.getColorForKey(text), cursor: clearable || !onClick ? 'auto' : 'pointer' }}
onClick={onClick} onClick={onClick}
> >
{children || text} {children || text}

1
src/tags/helpers/Tag.scss
View file

@ -1,6 +1,5 @@
.tag { .tag {
color: #fff; color: #fff;
cursor: pointer;
} }
.tag:not(:last-child) { .tag:not(:last-child) {

4
src/visits/TagVisits.js
View file

@ -22,7 +22,7 @@ const propTypes = {
settings: SettingsType, settings: SettingsType,
}; };
const TagVisits = (VisitsStats) => { const TagVisits = (VisitsStats, colorGenerator) => {
const TagVisitsComp = ({ const TagVisitsComp = ({
history, history,
match, match,
@ -51,7 +51,7 @@ const TagVisits = (VisitsStats) => {
return ( return (
<VisitsStats getVisits={loadVisits} cancelGetVisits={cancelGetTagVisits} visitsInfo={tagVisits}> <VisitsStats getVisits={loadVisits} cancelGetVisits={cancelGetTagVisits} visitsInfo={tagVisits}>
<TagVisitsHeader tagVisits={tagVisits} goBack={history.goBack} /> <TagVisitsHeader tagVisits={tagVisits} goBack={history.goBack} colorGenerator={colorGenerator} />
</VisitsStats> </VisitsStats>
); );
}; };

12
src/visits/TagVisitsHeader.js
View file

@ -1,5 +1,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Tag from '../tags/helpers/Tag';
import { colorGeneratorType } from '../utils/services/ColorGenerator';
import VisitsHeader from './VisitsHeader'; import VisitsHeader from './VisitsHeader';
import { TagVisitsType } from './reducers/tagVisits'; import { TagVisitsType } from './reducers/tagVisits';
import './ShortUrlVisitsHeader.scss'; import './ShortUrlVisitsHeader.scss';
@ -7,15 +9,17 @@ import './ShortUrlVisitsHeader.scss';
const propTypes = { const propTypes = {
tagVisits: TagVisitsType.isRequired, tagVisits: TagVisitsType.isRequired,
goBack: PropTypes.func.isRequired, goBack: PropTypes.func.isRequired,
colorGenerator: colorGeneratorType,
}; };
const TagVisitsHeader = ({ tagVisits, goBack }) => { const TagVisitsHeader = ({ tagVisits, goBack, colorGenerator }) => {
const { visits, tag } = tagVisits; const { visits, tag } = tagVisits;
const visitsStatsTitle = ( const visitsStatsTitle = (
<React.Fragment> <span className="d-flex align-items-center justify-content-center">
Visits for {tag} <span className="mr-2">Visits for</span>
</React.Fragment> <Tag text={tag} colorGenerator={colorGenerator} />
</span>
); );
return <VisitsHeader title={visitsStatsTitle} goBack={goBack} visits={visits} />; return <VisitsHeader title={visitsStatsTitle} goBack={goBack} visits={visits} />;

2
src/visits/VisitsHeader.js
View file

@ -30,7 +30,7 @@ const VisitsHeader = ({ visits, goBack, shortUrl, children, title }) => (
<ShortUrlVisitsCount visitsCount={visits.length} shortUrl={shortUrl} /> <ShortUrlVisitsCount visitsCount={visits.length} shortUrl={shortUrl} />
</span> </span>
</h2> </h2>
<h3 className="text-center d-block d-sm-none mb-0 mt-2"> <h3 className="text-center d-block d-sm-none mb-0 mt-3">
<small>{title}</small> <small>{title}</small>
</h3> </h3>

2
src/visits/services/provideServices.js
View file

@ -19,7 +19,7 @@ const provideServices = (bottle, connect) => {
[ 'shortUrlVisits', 'shortUrlDetail', 'mercureInfo', 'settings' ], [ 'shortUrlVisits', 'shortUrlDetail', 'mercureInfo', 'settings' ],
[ 'getShortUrlVisits', 'getShortUrlDetail', 'cancelGetShortUrlVisits', 'createNewVisit', 'loadMercureInfo' ] [ 'getShortUrlVisits', 'getShortUrlDetail', 'cancelGetShortUrlVisits', 'createNewVisit', 'loadMercureInfo' ]
)); ));
bottle.serviceFactory('TagVisits', TagVisits, 'VisitsStats'); bottle.serviceFactory('TagVisits', TagVisits, 'VisitsStats', 'ColorGenerator');
bottle.decorator('TagVisits', connect( bottle.decorator('TagVisits', connect(
[ 'tagVisits', 'mercureInfo', 'settings' ], [ 'tagVisits', 'mercureInfo', 'settings' ],
[ 'getTagVisits', 'cancelGetTagVisits', 'createNewVisit', 'loadMercureInfo' ] [ 'getTagVisits', 'cancelGetTagVisits', 'createNewVisit', 'loadMercureInfo' ]