diff --git a/src/FilterLists.Web/ClientApp/imgs/imgs.d.ts b/src/FilterLists.Web/ClientApp/imgs/imgs.d.ts new file mode 100644 index 000000000..1090848f7 --- /dev/null +++ b/src/FilterLists.Web/ClientApp/imgs/imgs.d.ts @@ -0,0 +1,9 @@ +declare module "*.svg" { + const content: any; + export default content; +} + +declare module "*.png" { + const content: any; + export default content; +} \ No newline at end of file diff --git a/src/FilterLists.Web/ClientApp/imgs/software/1-uBlock-Origin.svg b/src/FilterLists.Web/ClientApp/imgs/software/1-uBlock-Origin.svg new file mode 100644 index 000000000..96e2a57e8 --- /dev/null +++ b/src/FilterLists.Web/ClientApp/imgs/software/1-uBlock-Origin.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/FilterLists.Web/ClientApp/imgs/software/2-Adblock-Plus.svg b/src/FilterLists.Web/ClientApp/imgs/software/2-Adblock-Plus.svg new file mode 100644 index 000000000..3a36f9219 --- /dev/null +++ b/src/FilterLists.Web/ClientApp/imgs/software/2-Adblock-Plus.svg @@ -0,0 +1,13 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/FilterLists.Web/ClientApp/imgs/software/3-AdGuard.png b/src/FilterLists.Web/ClientApp/imgs/software/3-AdGuard.png new file mode 100644 index 000000000..a438223fc Binary files /dev/null and b/src/FilterLists.Web/ClientApp/imgs/software/3-AdGuard.png differ diff --git a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx index 9f2332dbb..400493b3e 100644 --- a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx +++ b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx @@ -6,6 +6,7 @@ import ReactTable from "react-table" import "react-table/react-table.css" import "./listsTable.css"; import * as moment from "moment"; +import { SoftwareIcon } from "./SoftwareIcon"; import { getContrast } from "../../../../utils/GetContrast"; import { DetailsExpander } from "../../components"; @@ -36,11 +37,10 @@ export const ListsTable = (props: IProps) => { filterMethod: (f: any, r: any) => r[f.id].toUpperCase().includes(f.value.toUpperCase()), sortMethod: (a: any, b: any) => a.toUpperCase() > b.toUpperCase() ? 1 : -1, - Cell: (c: any) =>

{c.value}

, - style: { overflow: "visible" } + Cell: (c: any) =>

{c.value}

}, { - Header: "Software Support", + Header: "Software", accessor: "softwareIds", filterable: true, filterMethod: (f: any, r: any) => @@ -54,8 +54,8 @@ export const ListsTable = (props: IProps) => { {props.software.map((s: any, i) => )} , sortable: false, - Cell: () => null, - width: 250, + Cell: (c: any) => c.value.map((s: number, i: any) => ), + width: 212, headerClassName: "d-none d-md-block", className: "d-none d-md-block", show: props.columnVisibility.filter( diff --git a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/SoftwareIcon.tsx b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/SoftwareIcon.tsx new file mode 100644 index 000000000..06f219a53 --- /dev/null +++ b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/SoftwareIcon.tsx @@ -0,0 +1,28 @@ +import * as React from "react"; +import img1 from "../../../../imgs/software/1-uBlock-Origin.svg"; +import img2 from "../../../../imgs/software/2-Adblock-Plus.svg"; +import img3 from "../../../../imgs/software/3-AdGuard.png"; + +interface IProps { + id: number; +} + +export const SoftwareIcon = (props: IProps) => { + return icons[props.id] + ? {icons[props.id].imageTitle} + : null; +}; + +interface IIcon { + image: any; + imageTitle: string; +} + +const icons: { [id: number]: IIcon; } = { + 1: { image: img1, imageTitle: "uBlock Origin" }, + 2: { image: img2, imageTitle: "Adblock Plus" }, + 3: { image: img3, imageTitle: "AdGuard" } +}; \ No newline at end of file