add tag colors by tag

ref #65
This commit is contained in:
Collin M. Barrett 2018-08-22 14:12:04 -05:00
parent 65f835f5e7
commit 4a348eb809
4 changed files with 50 additions and 2 deletions

View file

@ -0,0 +1,14 @@
using AutoMapper;
using FilterLists.Data.Entities;
using FilterLists.Services.FilterList.Models;
using JetBrains.Annotations;
namespace FilterLists.Services.FilterList.MappingProfiles
{
[UsedImplicitly]
public class ListTagDtoMappingProfile : Profile
{
public ListTagDtoMappingProfile() =>
CreateMap<Tag, ListTagDto>().ForMember(d => d.ColorHex, c => c.MapFrom(m => TagColors.Colors[(int)m.Id]));
}
}

View file

@ -7,5 +7,6 @@ public class ListTagDto
{
public string Name { get; set; }
public string Description { get; set; }
public string ColorHex { get; set; }
}
}

View file

@ -0,0 +1,33 @@
using System.Collections.Generic;
using System.Collections.ObjectModel;
namespace FilterLists.Services.FilterList
{
public static class TagColors
{
//https://stackoverflow.com/a/4382138/2343739
public static readonly IList<string> Colors = new ReadOnlyCollection<string>(new List<string>
{
"FFB300", // Vivid Yellow
"803E75", // Strong Purple
"FF6800", // Vivid Orange
"A6BDD7", // Very Light Blue
"C10020", // Vivid Red
"CEA262", // Grayish Yellow
"817066", // Medium Gray
"007D34", // Vivid Green
"F6768E", // Strong Purplish Pink
"00538A", // Strong Blue
"FF7A5C", // Strong Yellowish Pink
"53377A", // Strong Violet
"FF8E00", // Vivid Orange Yellow
"B32851", // Strong Purplish Red
"F4C800", // Vivid Greenish Yellow
"7F180D", // Strong Reddish Brown
"93AA00", // Vivid Yellowish Green
"593315", // Deep Yellowish Brown
"F13A13", // Vivid Reddish Orange
"232C16" // Dark Olive Green
});
}
}

View file

@ -100,8 +100,8 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
.toUpperCase().includes(filter.value.toUpperCase()),
sortMethod: (a: any, b: any) => a.join().toUpperCase() > b.join().toUpperCase() ? 1 : -1,
Cell: (cell: any) => <div>{cell.value.map(
(e: any) => <span className="badge badge-warning" title={e.description}>{e.name}</span>)
}</div>,
(e: any) => <span className="badge" style={{ color: "#{e.colorHex}" }} title={e
.description}>{e.name}</span>)}</div>,
width: 100,
headerClassName: "d-none d-lg-block",
className: "d-none d-lg-block"