From c54db18bbea28278dc1fe9a72757972a503f79f8 Mon Sep 17 00:00:00 2001 From: Collin Barrett Date: Sat, 15 Sep 2018 16:48:21 -0500 Subject: [PATCH] initial software icon support ref #470 --- src/FilterLists.Web/ClientApp/imgs/imgs.d.ts | 9 ++++++ .../imgs/software/1-uBlock-Origin.svg | 24 +++++++++++++++ .../imgs/software/2-Adblock-Plus.svg | 13 ++++++++ .../ClientApp/imgs/software/3-AdGuard.png | Bin 0 -> 1310 bytes .../home/components/listsTable/ListsTable.tsx | 10 +++---- .../components/listsTable/SoftwareIcon.tsx | 28 ++++++++++++++++++ 6 files changed, 79 insertions(+), 5 deletions(-) create mode 100644 src/FilterLists.Web/ClientApp/imgs/imgs.d.ts create mode 100644 src/FilterLists.Web/ClientApp/imgs/software/1-uBlock-Origin.svg create mode 100644 src/FilterLists.Web/ClientApp/imgs/software/2-Adblock-Plus.svg create mode 100644 src/FilterLists.Web/ClientApp/imgs/software/3-AdGuard.png create mode 100644 src/FilterLists.Web/ClientApp/modules/home/components/listsTable/SoftwareIcon.tsx 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 0000000000000000000000000000000000000000..a438223fcf63b785e10b8f3b92f4abd7140dac57 GIT binary patch literal 1310 zcmX9+2~bm46wL-jNF0W-1tnr+F)S_#f`AjGvKkNw2}l5ugb*NXvPDJ$HXvJvqC`Qb z1;?!xMVo|dBms;-CN8!QnB z1dh5dm=5oCtB(a5c5VEh0SE-@ENy>m$bMcyjKulO@G+)rI~-^d$1l4RO|rTeQr80= z9$eKPhLjj9bvvZ+hQD-)3j|}Ou5nWLw((OCgb24YKr+?JQu?NMehcgJ*a^tb=-gY` z$H~!BS3a!7b+{LHMX#)^@O$V`o2d@u_b|$I$?+Xq0RfY^5J8K!E%-mH+X6E;LG#kvS>~9DqQMhI&xG6KbzbG(k>{ zo(GXyeHM_+(S!li@LUhbIk4JySF@oU5`HpP6?eyohDze3Zop*Vkvc`;Q>tU;YN`iSplyQ_4XqT%E&+m!?5O7I7b2U#J&hMsYsY4QEq*UeZOJnt* zYqd(@1Caz78PY(kK$iqYfg7;$v=NX~)t?T2*6Mi>0U?cpC8odT!E*>g1UQ%Jl0Y~# zWhs1tUS?-tmL>#X<2$y&4i_ivWgn7zLzgT~D98luM|I3>O(-CwDk<<64r!`A;175X z+5r}lfjq<;hxnzs#4qF-rwsx?tLWo28jgS!0G_E1;;I6maB=BnWgi!AXW+30T7dH) z2liB@pU6-`ml8qp*i${^HxHKqNobL+2?Kn#!dKYG=65sxpB&)KR`}KGvq1ugg&B(y z6KG;bxO$j9;09@t;!V~)wkVj?sbYE*1M$X6|MBzNe?KkHkFZ`n6up0a=Z|Sj^tfL?#I&S_#f6jkfh8W^J*1goUJHU z|M&~grm02?Yb4&{{tMJEcrQ03Dx`d!Wp28sNBuL*PN#tBJWO58i5tDo=k3iV#{C+w zQ`VF1SY*QApLXN1IY;it`kWf9owO0@{ol3O$2@N}pUwTedHJr~^WGYJPlCmO%~!uy zM;plSTfE;_>msyow{B)q2O!gj4 z?rKPRfgdcW$*zAEc{oFOd}GG;^XmS5LAZTj9eYlDZgAH@?u+)wkh-tm?_lZ*KHAi{ zi_6r^{iSoxHCOuHtary)+SxcgPzY1o@7!IF#mdu1(_Fg}^^M<{GM?PJb>ZTogW=X# z3EwlwE#fFH$kX<^=wkJ+sx9cCJdfMKHLtY8Tg}ZKLeYY-2+oD|Yy7tPW3eti3_Cl@ zh~L|p+$LcqGG1Phw&ie>E&6!#OB~UR5FP2`>afq{b;^4Zhb5ICz!W+Uh)tNvgKcfb zEx4Zp`zxv_m+LI`Bc4yTFI%5EiEqJ7I$aXuBOek%%Sl~LTaAL7xP_LJi+f~zl%USX zkx<&XaKGsB(&mb54f{6#mY=U9d6;hYv=Ar=V|m(As^|t2rU^j}i3%16vMT=rW;#?l literal 0 HcmV?d00001 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