From cabd97cb39d22b2e9c0a7bc4e68a0f8092804ed3 Mon Sep 17 00:00:00 2001 From: Misode Date: Wed, 30 Jun 2021 05:36:26 +0200 Subject: [PATCH] Update home page and logo in header --- src/app/Main.tsx | 6 +- src/app/components/Header.tsx | 10 ++- src/app/components/Icons.tsx | 5 ++ src/app/components/ToolCard.tsx | 18 ++++++ src/app/components/index.ts | 2 + src/app/pages/Home.tsx | 39 +++++------ src/app/pages/Worldgen.tsx | 21 ++++++ src/app/pages/index.ts | 4 ++ src/config.json | 3 + src/styles/global.css | 111 ++++++++++++++++++-------------- 10 files changed, 140 insertions(+), 79 deletions(-) create mode 100644 src/app/components/Icons.tsx create mode 100644 src/app/components/ToolCard.tsx create mode 100644 src/app/pages/Worldgen.tsx create mode 100644 src/app/pages/index.ts diff --git a/src/app/Main.tsx b/src/app/Main.tsx index 26c133dc..275b8988 100644 --- a/src/app/Main.tsx +++ b/src/app/Main.tsx @@ -7,9 +7,7 @@ import '../styles/nodes.css' import { Analytics } from './Analytics' import { Header } from './components' import { loadLocale, locale, Locales } from './Locales' -import { FieldSettings } from './pages/FieldSettings' -import { Generator } from './pages/Generator' -import { Home } from './pages/Home' +import { FieldSettings, Generator, Home, Worldgen } from './pages' import type { VersionId } from './Schemas' import { Store } from './Store' import { cleanUrl } from './Utils' @@ -68,7 +66,7 @@ function Main() { - + diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx index 42faf327..9106ee9f 100644 --- a/src/app/components/Header.tsx +++ b/src/app/components/Header.tsx @@ -1,7 +1,8 @@ import { getCurrentUrl, Link } from 'preact-router' -import { Btn, BtnMenu, Octicon } from '.' +import { Btn, BtnMenu, Icons, Octicon } from '.' import config from '../../config.json' import { locale } from '../Locales' +import { cleanUrl } from '../Utils' const Themes: Record = { system: 'device_desktop', @@ -19,10 +20,13 @@ type HeaderProps = { } export function Header({ lang, title, theme, changeTheme, language, changeLanguage }: HeaderProps) { const loc = locale.bind(null, lang) + const id = getCurrentUrl().replace(/^\//, '').replace(/\/$/, '') + const category = config.models.find(m => m.id === id)?.category + return
- - {Octicon.three_bars} + + {Icons.home}

{title}

diff --git a/src/app/components/Icons.tsx b/src/app/components/Icons.tsx new file mode 100644 index 00000000..eecc5478 --- /dev/null +++ b/src/app/components/Icons.tsx @@ -0,0 +1,5 @@ +export const Icons = { + home: , + report: , + sounds: , +} diff --git a/src/app/components/ToolCard.tsx b/src/app/components/ToolCard.tsx new file mode 100644 index 00000000..bdbd924a --- /dev/null +++ b/src/app/components/ToolCard.tsx @@ -0,0 +1,18 @@ +import type { ComponentChildren } from 'preact' +import { Icons } from './Icons' + +type ToolCardProps = { + title: string, + link: string, + icon?: keyof typeof Icons, + children?: ComponentChildren, +} +export function ToolCard({ title, link, icon, children }: ToolCardProps) { + return + {icon && Icons[icon]} +
+

{title}

+ {children} +
+ +} diff --git a/src/app/components/index.ts b/src/app/components/index.ts index 2b1c7c05..3c6a0fb3 100644 --- a/src/app/components/index.ts +++ b/src/app/components/index.ts @@ -4,7 +4,9 @@ export * from './BtnInput' export * from './BtnMenu' export * from './ErrorPanel' export * from './Header' +export * from './Icons' export * from './Octicon' export * from './PreviewPanel' export * from './SourcePanel' +export * from './ToolCard' export * from './Tree' diff --git a/src/app/pages/Home.tsx b/src/app/pages/Home.tsx index 7cbf030f..7dd18c00 100644 --- a/src/app/pages/Home.tsx +++ b/src/app/pages/Home.tsx @@ -1,6 +1,5 @@ -import { Link } from 'preact-router' import config from '../../config.json' -import { Octicon } from '../components/Octicon' +import { ToolCard } from '../components' import { locale } from '../Locales' import { cleanUrl } from '../Utils' @@ -8,31 +7,25 @@ type HomeProps = { lang: string, changeTitle: (title: string) => unknown, path?: string, - category?: string, } -export function Home({ lang, changeTitle, category }: HomeProps) { +export function Home({ lang, changeTitle }: HomeProps) { const loc = locale.bind(null, lang) - changeTitle(category ? loc('title.generator_category', loc(category)) : loc('title.home')) + changeTitle(loc('title.home')) return
-
-
    - {config.models.filter(m => typeof m.category !== 'string').map(m =>
  • - - {loc(m.id)} - {m.category && Octicon.chevron_right} - -
    • )} -
- {(category && config.models.some(m => m.category === category)) && -
    - {config.models.filter(m => m.category === category).map(m =>
  • - - {loc(m.id)} - -
    • )} -
} -
+ {config.models.filter(m => typeof m.category !== 'string').map(m => + + )} +
+ +

Analyse your performance reports

+ + +

Browse through and mix all the vanilla sounds

+ + +

Convert your 1.16 data packs to 1.17

+
} diff --git a/src/app/pages/Worldgen.tsx b/src/app/pages/Worldgen.tsx new file mode 100644 index 00000000..34be4345 --- /dev/null +++ b/src/app/pages/Worldgen.tsx @@ -0,0 +1,21 @@ +import config from '../../config.json' +import { ToolCard } from '../components' +import { locale } from '../Locales' +import { cleanUrl } from '../Utils' + +type WorldgenProps = { + lang: string, + changeTitle: (title: string) => unknown, + path?: string, +} +export function Worldgen({ lang, changeTitle }: WorldgenProps) { + const loc = locale.bind(null, lang) + changeTitle(loc('title.generator_category', loc('worldgen'))) + return
+
+ {config.models.filter(m => m.category === 'worldgen').map(m => + + )} +
+
+} diff --git a/src/app/pages/index.ts b/src/app/pages/index.ts new file mode 100644 index 00000000..668a5523 --- /dev/null +++ b/src/app/pages/index.ts @@ -0,0 +1,4 @@ +export * from './FieldSettings' +export * from './Generator' +export * from './Home' +export * from './Worldgen' diff --git a/src/config.json b/src/config.json index 437b413a..7524c413 100644 --- a/src/config.json +++ b/src/config.json @@ -102,6 +102,7 @@ "name": "Dimension", "path": "dimension", "schema": "dimension", + "category": "worldgen", "minVersion": "1.16" }, { @@ -109,12 +110,14 @@ "name": "Dimension Type", "path": "dimension_type", "schema": "dimension_type", + "category": "worldgen", "minVersion": "1.16" }, { "id": "world", "name": "World Settings", "schema": "world_settings", + "category": "worldgen", "minVersion": "1.16" }, { diff --git a/src/styles/global.css b/src/styles/global.css index 5e21eb9e..fd7d2dfe 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,8 +1,9 @@ :root { --background-1: #1b1b1b; --background-2: #252525; - --background-3: #3d3d3d; - --background-4: #464646; + --background-3: #2f2f2f; + --background-4: #3d3d3d; + --background-5: #464646; --text-1: #ffffff; --text-2: #dcdcdc; --text-3: #c3c3c3; @@ -20,8 +21,9 @@ :root[data-theme=light] { --background-1: #fafafa; --background-2: #e2e2e2; - --background-3: #cccccc; - --background-4: #d6d6d6; + --background-3: #d4d3d3; + --background-4: #cccccc; + --background-5: #d6d6d6; --text-1: #000000; --text-2: #505050; --text-3: #6a6a6a; @@ -40,8 +42,9 @@ :root[data-theme=system] { --background-1: #fafafa; --background-2: #e2e2e2; - --background-3: #cccccc; - --background-4: #d6d6d6; + --background-3: #d4d3d3; + --background-4: #cccccc; + --background-5: #d6d6d6; --text-1: #000000; --text-2: #505050; --text-3: #6a6a6a; @@ -107,16 +110,31 @@ body[data-panel="settings"] header { .home-link { margin: 0 8px 0 0; - height: 32px; - fill: var(--nav); } .home-link svg { + display: block; width: 32px; height: 32px; padding: 2px; } +.home-link svg rect:nth-child(2n) { + transition: transform 0.2s; +} + +.home-link:hover rect:nth-child(2) { + transform: translateX(-8px); +} + +.home-link:hover rect:nth-child(4) { + transform: translateX(-11px); +} + +.home-link:hover rect:nth-child(6) { + transform: translateX(-6px); +} + nav ul { display: flex; align-items: center; @@ -289,7 +307,7 @@ main.has-preview { outline: none; font-size: 1rem; white-space: nowrap; - background-color: var(--background-3); + background-color: var(--background-4); box-shadow: 0 1px 7px -2px #000; color: var(--text-2); fill: var(--text-2); @@ -305,7 +323,7 @@ main.has-preview { } .btn:not(.btn-input):hover { - background-color: var(--background-4); + background-color: var(--background-5); } .btn.no-pointer { @@ -398,7 +416,7 @@ main.has-preview { padding: 0 8px; border-top-left-radius: 24px; border-bottom-left-radius: 24px; - background-color: var(--background-3); + background-color: var(--background-4); box-shadow: 0 0 7px -3px #000; user-select: none; -webkit-user-select: none; @@ -409,7 +427,7 @@ main.has-preview { } .popup-actions:hover { - background-color: var(--background-4); + background-color: var(--background-5); } .popup-action { @@ -470,49 +488,44 @@ main.has-preview { font-size: 20px; } -.generators-list { +.home { + max-width: 960px; + margin: 0 auto; +} + +.tool-card { display: flex; - flex-direction: column; - list-style-type: none; -} - -.generators-list:not(:last-child) { - margin-right: 20px -} - -.generators-card { - margin-bottom: 10px; - padding: 8px 15px; - cursor: pointer; + padding: 10px; + margin-bottom: 8px; + color: var(--text-2); + background-color: var(--background-2); + box-shadow: 1px 1px 7px -3px #000; + border-radius: 6px; text-decoration: none; - text-transform: capitalize; - border-radius: 3px; - background-color: var(--nav-faded); - color: var(--text-1); - fill: var(--text-1); - display: flex; - align-items: center; - justify-content: space-between; - user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - transition: margin 0.2s; } -.generators-card * { - pointer-events: none; +.tool-card:hover { + background-color: var(--background-3); } -.generators-card:hover, -.generators-card.selected { - background-color: var(--nav-faded-hover); - margin-left: 8px; - margin-right: -8px; +.tool-card svg { + width: 32px; + height: 32px; + flex-shrink: 0; + margin-right: 8px; } -.generators-card svg { - margin-left: 10px; +.tool-card h3 { + font-weight: unset; +} + +.tool-card p { + color: var(--text-3); +} + +hr { + margin: 12px 0; + border: none; } .settings { @@ -522,7 +535,7 @@ main.has-preview { .settings p { color: var(--nav); padding: 8px; - border-bottom: 2px solid var(--background-3); + border-bottom: 2px solid var(--background-4); } .field-list { @@ -535,7 +548,7 @@ main.has-preview { display: flex; justify-content: space-between; padding: 4px 0; - border-bottom: 1px solid var(--background-3); + border-bottom: 1px solid var(--background-4); } .field-prop {