0x1eef/wimi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add improvements

Browse source
This commit is contained in:
0x1eef 2024-09-02 13:27:15 -03:00
parent 372881cead
commit b5d643f8f1
7 changed files with 59 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
share/wimi/CHANGELOG
View file

@ -2,8 +2,31 @@
** vNEXT ** vNEXT
**** Refresh flag icons **** Replace ISP details with location details
The flag icons have been improved We now show the location details associated with an IP -
usually a city and country
**** Add ~src/fonts/kanit-regular.ttf~
Add a custom font
**** Center-align content
Align content to the center.
Both horizontal and vertical
**** Apply minimum width
A minimum width is now applied
to ~browseraction.html~ via ~App.tsx~
**** Remove horizontal scrollbar
Remove a horizontal scrollbar that could appear
when the extension's browser action appeared for
the first time
**** Change primary color
Change the primary / background color to ~#FFF~
**** Re-import flag icons
The flag icons have been re-imported
** v0.6.1 ** v0.6.1

10
src/css/index.css
View file

@ -1,11 +1,17 @@
:root { :root {
/* Colors */ /* Colors */
--primary-color: #E3F2FD; --primary-color: #FFF;
--secondary-color: #333333; --secondary-color: #333333;
--accent-color: #007BFF; --accent-color: #007BFF;
} }
#root { @font-face {
font-family: "Kanit Regular";
src: url("/fonts/kanit-regular.ttf") format("truetype");
}
body {
font-family: "Kanit Regular";
background: var(--primary-color); background: var(--primary-color);
color: var(--secondary-color); color: var(--secondary-color);
} }

BIN
src/fonts/kanit-regular.ttf Normal file
View file

Binary file not shown.

4
src/html/browseraction.html
View file

@ -4,8 +4,8 @@
<link rel="stylesheet" href="/css/tail.min.css"/> <link rel="stylesheet" href="/css/tail.min.css"/>
<link rel="stylesheet" href="/css/index.css"/> <link rel="stylesheet" href="/css/index.css"/>
</head> </head>
<body class="h-12 w-full"> <body>
<div id="root"></div> <main></main>
<script src="/js/index.js"></script> <script src="/js/index.js"></script>
</body> </body>
</html> </html>

27
src/js/components/App.tsx
View file

@ -5,26 +5,31 @@ export function App() {
const [response, error] = useWebService(); const [response, error] = useWebService();
if (response) { if (response) {
return ( return (
<div data-testid="response" className="font-sans p-2 flex"> <div data-testid="response" className="h-14 flex flex-col justify-center">
<img className="w-8 h-8" src={`/images/flags/${response.countryCode}.svg`} /> <div className="flex h-full justify-center items-center min-w-48">
<div className="flex flex-col ml-3"> <img className="w-8 h-8" src={`/images/flags/${response.CountryCode}.svg`} />
<span className="text-xs">{response.IPAddress}</span> <div className="flex flex-col ml-3">
<span className="text-xs">{response.ISP}</span> <span className="text-sm">{response.IPAddress}</span>
<span className="text-xs">{response.Location}</span>
</div>
</div> </div>
</div> </div>
); );
} else if (error) { } else if (error) {
return ( return (
<div data-testid="error" className="font-sans p-2 flex items-center w-full h-full"> <div data-testid="error" className="h-14 flex flex-col justify-center">
<img className="w-8 h-8" src={`/images/icon.svg`} /> <div className="p-2 flex items-center w-full h-full min-w-48 justify-center">
<span className="ml-3 text-xs">{t("error")}</span> <img className="w-8 h-8" src={`/images/icon.svg`} />
<span className="ml-3 text-xs">{t("error")}</span>
</div>
</div> </div>
); );
} else { } else {
return ( return (
<div data-testid="loading" className="font-sans p-2 flex items-center w-full h-full"> <div data-testid="loading" className="h-14 flex flex-col justify-center">
<img className="w-8 h-8" src={`/images/icon.svg`} /> <div className="flex flex-col items-center h-full min-w-48 justify-center">
<span className="ml-3 text-xs">{t("loading")}</span> <img className="w-8 h-8" src={`/images/icon.svg`} />
</div>
</div> </div>
); );
} }

2
src/js/index.tsx
View file

@ -2,6 +2,6 @@ import { render } from "preact";
import { App } from "~/components/App"; import { App } from "~/components/App";
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const el: HTMLElement = document.getElementById("root")!; const el: HTMLElement = document.querySelector("main")!;
render(<App />, el); render(<App />, el);
}); });

11
src/js/lib/response.ts
View file

@ -3,8 +3,9 @@ export type TResponse = {
ISP: string; ISP: string;
City: string; City: string;
Country: string; Country: string;
countryCode: string; CountryCode: string;
isTorExitNode: boolean; Location: string;
IsTorExitNode: boolean;
}; };
export type TServerResponse = { export type TServerResponse = {
@ -13,6 +14,7 @@ export type TServerResponse = {
YourCity: string; YourCity: string;
YourCountry: string; YourCountry: string;
YourCountryCode: string; YourCountryCode: string;
YourLocation: string;
YourTorExit: boolean; YourTorExit: boolean;
}; };
@ -23,8 +25,9 @@ export function Response(res: TServerResponse): TResponse {
self.ISP = res.YourISP; self.ISP = res.YourISP;
self.City = res.YourCity; self.City = res.YourCity;
self.Country = res.YourCountry; self.Country = res.YourCountry;
self.countryCode = res.YourCountryCode; self.CountryCode = res.YourCountryCode;
self.isTorExitNode = res.YourTorExit; self.Location = res.YourLocation;
self.IsTorExitNode = res.YourTorExit;
return self; return self;
} }