prehistoric-systems/FilterLists
1
0
Fork 0
mirror of https://github.com/collinbarrett/FilterLists.git synced 2026-03-11 09:04:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

show tags in details expanders on mobile

Browse source 
ref #65
This commit is contained in:
Collin M. Barrett 2018-08-25 13:41:02 -05:00
parent dfe2520c8c
commit ee2c88428b
2 changed files with 28 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/FilterLists.Web/ClientApp/components/Home.tsx
View file

@ -101,7 +101,7 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
Cell: (cell: any) => <div>{cell.value.map(
(e: any) => <span className="badge" style={{
backgroundColor: `#${e.colorHex}`,
color: Home.getContrast(`${e.colorHex}`)
color: ListDetails.getContrast(`${e.colorHex}`)
}} title={e.description}>{e.name}</span>)}</div>,
width: 100,
headerClassName: "d-none d-lg-block",
@ -176,15 +176,6 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
}}
className="-striped -highlight"/>;
}
//https://stackoverflow.com/a/11868398/2343739
private static getContrast(hexcolor: string) {
const r = parseInt(hexcolor.substr(0, 2), 16);
const g = parseInt(hexcolor.substr(2, 2), 16);
const b = parseInt(hexcolor.substr(4, 2), 16);
const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
return (yiq >= 128) ? "black" : "white";
}
}
interface IListDto {

27
src/FilterLists.Web/ClientApp/components/ListDetails.tsx
View file

@ -31,6 +31,15 @@ export default class ListDetails extends React.Component<any, any> {
</div>
: <div>Loading...</div>;
}
//https://stackoverflow.com/a/11868398/2343739
public static getContrast(hexcolor: string) {
const r = parseInt(hexcolor.substr(0, 2), 16);
const g = parseInt(hexcolor.substr(2, 2), 16);
const b = parseInt(hexcolor.substr(4, 2), 16);
const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
return (yiq >= 128) ? "black" : "white";
}
}
function FilterListDetails(props: any) {
@ -51,6 +60,7 @@ function FilterListDetails(props: any) {
function ListInfo(props: any) {
return <div className="col-9">
<Tags tags={props.details.tags}/>
<Description description={props.details.description} url={props.details.descriptionSourceUrl}/>
<ul className="list-group list-group-flush">
<Languages languages={props.details.languages}/>
@ -78,6 +88,16 @@ function ListUrls(props: any) {
</div>;
}
function Tags(props: any) {
return props.tags.length > 0
? <div className="d-block d-sm-none">{props.tags.map(
(tag: any) => <span className="badge" style={{
backgroundColor: `#${tag.colorHex}`,
color: ListDetails.getContrast(`${tag.colorHex}`)
}} title={tag.description}>{tag.name}</span>)}</div>
: null;
}
function Description(props: any) {
return props.description
? (props.url
@ -318,6 +338,7 @@ interface IFilterListDetailsDto {
ruleCount: number;
submissionUrl: string;
syntax: IListSyntaxDto[];
tags: IListTagDto[];
updatedDate: string;
viewUrl: string;
}
@ -347,6 +368,12 @@ interface IListSyntaxDto {
supportedSoftware: ISyntaxSupportedSoftwareDto[];
}
interface IListTagDto {
name: string;
colorHex: string;
description: string;
}
interface ISyntaxSupportedSoftwareDto {
homeUrl: string;
name: string;