mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 01:20:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Finished design on tags list page

Browse source
This commit is contained in:
Alejandro Celaya 2018-08-18 11:15:00 +02:00
parent 63ddef2d81
commit f1ee467af4
2 changed files with 46 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/tags/TagsList.js
View file

@ -2,10 +2,13 @@ import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { pick, splitEvery } from 'ramda'; import { pick, splitEvery } from 'ramda';
import { listTags } from './reducers/tagsList'; import { listTags } from './reducers/tagsList';
import './TagsList.scss'; import { Card, CardBody } from 'reactstrap';
import { Card } from 'reactstrap';
import ColorGenerator from '../utils/ColorGenerator'; import ColorGenerator from '../utils/ColorGenerator';
import MuttedMessage from '../utils/MuttedMessage'; import MuttedMessage from '../utils/MuttedMessage';
import editIcon from '@fortawesome/fontawesome-free-solid/faPencilAlt';
import deleteIcon from '@fortawesome/fontawesome-free-solid/faTrash';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import './TagsList.scss';
const { round } = Math; const { round } = Math;
@ -36,15 +39,23 @@ export class TagsList extends React.Component {
{tagsGroups.map((group, index) => ( {tagsGroups.map((group, index) => (
<div key={index} className="col-md-6 col-xl-3"> <div key={index} className="col-md-6 col-xl-3">
{group.map(tag => ( {group.map(tag => (
<div <Card className="tags-list__tag-card" key={tag}>
style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} <CardBody className="tags-list__tag-card-body">
className="tags-list__tag-container" <button className="btn btn-light btn-sm tags-list__btn">
key={tag} <FontAwesomeIcon icon={deleteIcon} />
> </button>
<Card body className="tags-list__tag-card"> <button className="btn btn-light btn-sm tags-list__btn">
<h5 className="tags-list__tag-title">{tag}</h5> <FontAwesomeIcon icon={editIcon} />
</Card> </button>
</div> <h5 className="tags-list__tag-title">
<div
style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
className="tags-list__tag-bullet"
/>
{tag}
</h5>
</CardBody>
</Card>
))} ))}
</div> </div>
))} ))}

33
src/tags/TagsList.scss
View file

@ -1,18 +1,33 @@
.tags-list__tag-container {
border-radius: .26rem;
}
.tags-list__tag-card.tags-list__tag-card { .tags-list__tag-card.tags-list__tag-card {
padding: .75rem 2.5rem 0.75rem 1rem;
background-color: #eeeeee; background-color: #eeeeee;
margin-bottom: .5rem; margin-bottom: .5rem;
transition: background-color 200ms, color 200ms;
} }
.tags-list__tag-card.tags-list__tag-card:hover { .tags-list__tag-card-body.tags-list__tag-card-body {
background-color: transparent; padding: .75rem;
color: #fff;
} }
.tags-list__tag-title { .tags-list__tag-title {
margin: 0; margin: 0;
line-height: 31px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding-right: 5px;
}
.tags-list__tag-bullet {
$width: 20px;
border-radius: 50%;
width: $width;
height: $width;
display: inline-block;
vertical-align: -4px;
margin-right: 7px;
}
.tags-list__btn {
float: right;
}
.tags-list__btn:not(:last-child) {
margin-left: 2px;
} }