From 33affe9b8b9dc69583611e5fdef4d55b42e3f3fd Mon Sep 17 00:00:00 2001 From: Hamcha Date: Tue, 16 Jun 2020 17:08:44 +0200 Subject: [PATCH] Tabs and loadings --- assets/images/speen.svg | 56 +++++++++++++++++++++++++++ lib/App.tsx | 16 +++++--- lib/components/TabItem.tsx | 5 --- lib/components/TabList.tsx | 28 ++++++++++++++ lib/components/WikiPage.tsx | 49 ++++++++++++++---------- style/main.scss | 76 ++++++++++++++++++++++++++++++++++--- 6 files changed, 195 insertions(+), 35 deletions(-) create mode 100644 assets/images/speen.svg delete mode 100644 lib/components/TabItem.tsx create mode 100644 lib/components/TabList.tsx diff --git a/assets/images/speen.svg b/assets/images/speen.svg new file mode 100644 index 0000000..6562bbf --- /dev/null +++ b/assets/images/speen.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/lib/App.tsx b/lib/App.tsx index aacb660..799bcc2 100644 --- a/lib/App.tsx +++ b/lib/App.tsx @@ -1,15 +1,21 @@ import * as React from "react"; -import TabItem from "./components/TabItem"; import WikiPage from "./components/WikiPage"; +import TabList, { TabListItem } from "./components/TabList"; +import { useState } from "react"; export default function App() { + const [tabs, setTabs] = useState([ + { page: "Guide_to_medicine" }, + // { page: "Guide_to_chemistry" }, + ]); + const [activeTab, setActiveTab] = useState(0); return ( - +
- + {tabs.map((tab, i) => ( + + ))}
); diff --git a/lib/components/TabItem.tsx b/lib/components/TabItem.tsx deleted file mode 100644 index 292b4d6..0000000 --- a/lib/components/TabItem.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import * as React from "react"; - -export default function TabItem({ name }) { - return

{name}

; -} diff --git a/lib/components/TabList.tsx b/lib/components/TabList.tsx new file mode 100644 index 0000000..d80a273 --- /dev/null +++ b/lib/components/TabList.tsx @@ -0,0 +1,28 @@ +import * as React from "react"; + +export interface TabListItem { + page: string; +} + +export interface TabListProps { + tabs: TabListItem[]; + active: number; +} + +function TabItem({ name, active }) { + return ( +
+ {name.replace(/_/gi, " ")} +
+ ); +} + +export default function TabList({ tabs, active }: TabListProps) { + return ( + + ); +} diff --git a/lib/components/WikiPage.tsx b/lib/components/WikiPage.tsx index cbeec33..f5144ff 100644 --- a/lib/components/WikiPage.tsx +++ b/lib/components/WikiPage.tsx @@ -3,6 +3,7 @@ import { darken, ColorFmt, lighten } from "../darkmode"; import * as React from "react"; import { useState, useEffect, useRef } from "react"; import userscript from "../userscript"; +import speen from "~/assets/images/speen.svg"; function fixup(html: string): string { // Convert relative links to absolute @@ -27,19 +28,12 @@ function fixup(html: string): string { td.setAttribute("bgcolor", darken(bgcolor, ColorFmt.HEX).slice(1)); }); node.querySelectorAll("*[style]").forEach((td: HTMLElement) => { - const inlineCSS = td.getAttribute("style"); - let bgcolor = null; - if (inlineCSS.includes("background-color:")) { - bgcolor = td.style.backgroundColor; - } else if (inlineCSS.includes("background:")) { - bgcolor = td.style.background; - } else { - return; + if (td.style.backgroundColor != "") { + td.style.backgroundColor = darken(td.style.backgroundColor, ColorFmt.RGB); + } + if (td.style.background != "") { + td.style.backgroundColor = darken(td.style.background, ColorFmt.RGB); } - td.setAttribute( - "style", - inlineCSS + ";background-color:" + darken(bgcolor, ColorFmt.RGB) - ); }); // Lighten fgcolors @@ -53,13 +47,13 @@ function fixup(html: string): string { // Remove fixed widths node.querySelectorAll("table[width]").forEach((td) => { - const width = td.getAttribute("width"); - if (width.includes("%")) { - // Leave it alone - return; - } td.setAttribute("width", "100%"); }); + node.querySelectorAll("table[style]").forEach((td: HTMLTableElement) => { + if (td.style.width != "") { + td.style.width = "100%"; + } + }); // Group headers and content so stickies don't overlap node.querySelectorAll("h3,h2").forEach((h3) => { @@ -92,7 +86,7 @@ function fixup(html: string): string { return node.innerHTML; } -export default function WikiPage({ page }) { +export default function WikiPage({ page, visible }) { const [data, setData] = useState({ loaded: false, html: "" }); const containerRef = useRef(null); @@ -108,18 +102,33 @@ export default function WikiPage({ page }) { // Page fetched, instance userscript useEffect(() => { if (data.loaded) { - console.log("Injecting userscript!"); userscript(containerRef.current, page); } }, [data]); if (!data.loaded) { - return

You start skimming through the manual...

; + return ( +
+

+ You start skimming through the manual... +

+
+ +
+
+ ); } else { return (
); diff --git a/style/main.scss b/style/main.scss index 60b18a5..93ca723 100644 --- a/style/main.scss +++ b/style/main.scss @@ -1,3 +1,5 @@ +$nanotrasen: #384e68; + html, body { margin: 0; @@ -21,8 +23,6 @@ body { } } -$nanotrasen: #384e68; - #app { height: 100%; display: grid; @@ -40,12 +40,62 @@ $nanotrasen: #384e68; grid-template-rows: 40px 1fr; } +::-webkit-scrollbar { + width: 14pt; +} + +::-webkit-scrollbar-track { + background: linear-gradient( + to bottom, + darken($nanotrasen, 0%), + darken($nanotrasen, 10%), + darken($nanotrasen, 0%) + ); + border: 1px solid lighten($nanotrasen, 10%); +} + +::-webkit-scrollbar-thumb { + border-radius: 2px; + background: linear-gradient( + to bottom, + lighten($nanotrasen, 20%), + lighten($nanotrasen, 30%), + lighten($nanotrasen, 20%) + ); + border: 1px solid lighten($nanotrasen, 10%); +} + #tabs { grid-row: 2; - padding: 10pt; overflow-y: scroll; z-index: 1; + padding-top: 10pt; .page { + &.waiting { + display: flex; + flex-direction: column; + height: 100%; + .speen { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + img { + flex: 1; + width: 50%; + height: 50%; + opacity: 0.9; + } + } + } + + p, + h2, + h3, + h4 { + padding-left: 10pt; + padding-right: 10pt; + } a[href] { color: white; } @@ -56,7 +106,7 @@ $nanotrasen: #384e68; position: sticky; top: -10pt; background: $nanotrasen; - padding: 5px 10px; + padding: 10px; z-index: 999; } #toctitle h2 { @@ -69,6 +119,22 @@ $nanotrasen: #384e68; } } -#tablist { +$tab-active: lighten($nanotrasen, 10%); + +.tab-list { grid-row: 1; + display: flex; + border-bottom: 2px solid $tab-active; + + .tab { + max-width: 200px; + flex: 1; + display: flex; + align-items: center; + justify-content: center; + + &.active { + background-color: $tab-active; + } + } }