From 47870d5785ceafe0a76a0eecc09f246ddca9e2a0 Mon Sep 17 00:00:00 2001 From: Skidder Date: Tue, 19 Dec 2023 19:48:02 +0100 Subject: [PATCH] use webgen's empty component --- components/nav.ts | 4 ++-- pages/_legacy/music/edit.ts | 10 +++++----- pages/admin/review.ts | 4 ++-- pages/hosting/views/FileBrowser.ts | 4 ++-- pages/hosting/views/menu.ts | 4 ++-- pages/hosting/views/profile.ts | 10 +++++----- pages/hosting/views/wizard.ts | 2 +- pages/shared/list.ts | 4 ++-- pages/shared/navigation.ts | 10 +++++----- pages/user/oauth.ts | 7 +++---- 10 files changed, 29 insertions(+), 30 deletions(-) diff --git a/components/nav.ts b/components/nav.ts index 4beab952..3afcbc07 100644 --- a/components/nav.ts +++ b/components/nav.ts @@ -1,6 +1,6 @@ import { API } from "shared/mod.ts"; import { delay } from "std/async/delay.ts"; -import { BasicLabel, Box, Button, ButtonStyle, Component, Custom, Grid, Horizontal, Image, Label, MIcon, Spacer, Vertical, createElement } from "webgen/mod.ts"; +import { BasicLabel, Box, Button, ButtonStyle, Component, Custom, Empty, Grid, Horizontal, Image, Label, MIcon, Spacer, Vertical, createElement } from "webgen/mod.ts"; import { IsLoggedIn, activeUser, permCheck, showProfilePicture } from "../pages/_legacy/helper.ts"; import './nav.css'; import { activeLogo, pages } from "./pages.ts"; @@ -88,7 +88,7 @@ export function DynaNavigation(type: "Home" | "Music" | "Settings" | "Hosting" | await API.user.mail.resendVerifyEmail.post(); await delay(1000); }) - ).addClass("email-banner", type.toLowerCase()) : Box().removeFromLayout(), + ).addClass("email-banner", type.toLowerCase()) : Empty(), ) .setMargin("0.5rem auto") .setGap("0.4rem"), diff --git a/pages/_legacy/music/edit.ts b/pages/_legacy/music/edit.ts index 077f9267..cf097b0b 100644 --- a/pages/_legacy/music/edit.ts +++ b/pages/_legacy/music/edit.ts @@ -1,5 +1,5 @@ import { API, LoadingSpinner, Navigation, createActionList, createBreadcrumb, createTagList, stupidErrorAlert } from "shared/mod.ts"; -import { Body, Box, Grid, Horizontal, Label, Spacer, State, Vertical, WebGen, isMobile } from "webgen/mod.ts"; +import { Body, Empty, Grid, Horizontal, Label, Spacer, State, Vertical, WebGen, isMobile } from "webgen/mod.ts"; import '../../../assets/css/main.css'; import '../../../assets/css/music.css'; import { DynaNavigation } from "../../../components/nav.ts"; @@ -72,7 +72,7 @@ Body(Vertical( await API.music.id(drop._id).type.post(DropType.Private); location.reload(); }, - } : Box().removeFromLayout(), + } : Empty(), Permissions.canSubmit(drop) ? { id: "publish", @@ -82,7 +82,7 @@ Body(Vertical( await API.music.id(drop._id).type.post(DropType.UnderReview); location.reload(); }, - } : Box().removeFromLayout(), + } : Empty(), Permissions.canTakedown(drop) ? { id: "takedown", @@ -92,7 +92,7 @@ Body(Vertical( await API.music.id(drop._id).type.post(DropType.Private); location.reload(); }, - } : Box().removeFromLayout() + } : Empty() ] }) .addClass( @@ -105,7 +105,7 @@ Body(Vertical( Grid( showPreviewImage(drop).addClass("image-preview") ).setEvenColumns(1, "10rem") - : Box().removeFromLayout() + : Empty() ).asRefComponent(), createBreadcrumb(menu), createTagList(menu) diff --git a/pages/admin/review.ts b/pages/admin/review.ts index 98cde596..ffff9ea2 100644 --- a/pages/admin/review.ts +++ b/pages/admin/review.ts @@ -1,5 +1,5 @@ import { API, LoadingSpinner, Navigation, createActionList, createBreadcrumb, createTagList, stupidErrorAlert } from "shared/mod.ts"; -import { Body, Box, Button, ButtonStyle, Color, Entry, Grid, Horizontal, Label, Spacer, Vertical, WebGen, isMobile } from "webgen/mod.ts"; +import { Body, Button, ButtonStyle, Color, Empty, Entry, Grid, Horizontal, Label, Spacer, Vertical, WebGen, isMobile } from "webgen/mod.ts"; import '../../assets/css/main.css'; import '../../assets/css/music.css'; import { DynaNavigation } from "../../components/nav.ts"; @@ -94,7 +94,7 @@ Body(Vertical( Grid( showPreviewImage(drop).addClass("image-preview") ).setEvenColumns(1, "10rem") - : Box().removeFromLayout() + : Empty() ).asRefComponent(), createBreadcrumb(menu), createTagList(menu) diff --git a/pages/hosting/views/FileBrowser.ts b/pages/hosting/views/FileBrowser.ts index d6e89691..30cf3363 100644 --- a/pages/hosting/views/FileBrowser.ts +++ b/pages/hosting/views/FileBrowser.ts @@ -3,7 +3,7 @@ import { createDownloadStream } from "shared/libs/streamSaver.ts"; import { Progress } from "shared/Progress.ts"; import { ProgressTracker } from "shared/upload.ts"; import { format } from "std/fmt/bytes.ts"; -import { asPointer, BasicLabel, BIcon, Box, Button, ButtonStyle, Color, Entry, Grid, IconButton, Label, MIcon, ref, refMerge } from "webgen/mod.ts"; +import { asPointer, BasicLabel, BIcon, Box, Button, ButtonStyle, Color, Empty, Entry, Grid, IconButton, Label, MIcon, ref, refMerge } from "webgen/mod.ts"; import { SidecarResponse } from "../../../spec/music.ts"; import { mapFiletoIcon } from "../constants.ts"; import { downloadFile, listFiles, messageQueueSidecar } from "../loading.ts"; @@ -149,7 +149,7 @@ export function FileBrowser() { .addColumn("Type", (data) => data.fileMimeType !== undefined ? Label(fileTypeName(data.fileMimeType)) : Label("Folder")) .addColumn("Size", (data) => data.size !== undefined ? Label(format(parseInt(data.size))).addClass('text-align-right') : Box()) .addColumn("", (data) => Grid( - data.uploadingRatio !== undefined ? Progress(data.uploadingRatio).addClass("fileProgressBar") : Box().removeFromLayout(), + data.uploadingRatio !== undefined ? Progress(data.uploadingRatio).addClass("fileProgressBar") : Empty(), data.fileMimeType && [ "text/yaml", "application/json", "text/plain" ].includes(data.fileMimeType.split(";")[ 0 ]) && data.uploadingRatio === undefined ? IconButton(MIcon("file_open"), "Open file") .addClass("table-button") diff --git a/pages/hosting/views/menu.ts b/pages/hosting/views/menu.ts index 6d7f592f..1b4dcd68 100644 --- a/pages/hosting/views/menu.ts +++ b/pages/hosting/views/menu.ts @@ -3,7 +3,7 @@ import { calculateUptime } from "shared/uptime.ts"; import { debounce } from "std/async/debounce.ts"; import { delay } from "std/async/delay.ts"; import { WEEK } from "std/datetime/constants.ts"; -import { asPointer, BasicLabel, Box, Button, Cache, Color, Entry, Grid, Image, isMobile, Label, MIcon, ref, refMerge, State, StateHandler, TextInput } from "webgen/mod.ts"; +import { asPointer, BasicLabel, Box, Button, Cache, Color, Empty, Entry, Grid, Image, isMobile, Label, MIcon, ref, refMerge, State, StateHandler, TextInput } from "webgen/mod.ts"; import { createCachedLoader, createIndexPaginationLoader } from "webgen/network.ts"; import { templateArtwork } from "../../../assets/imports.ts"; import locations from "../../../data/locations.json" with { type: "json" }; @@ -283,7 +283,7 @@ function addonBrowser(server: StateHandler): RenderItem { .onPromiseClick(() => loadMore()) ) .setJustify("center") - : Box().removeFromLayout() + : Empty() ).asRefComponent() ).setGap() ) diff --git a/pages/hosting/views/profile.ts b/pages/hosting/views/profile.ts index 0fb04f5b..b4084585 100644 --- a/pages/hosting/views/profile.ts +++ b/pages/hosting/views/profile.ts @@ -1,7 +1,7 @@ import { confettiFromElement } from "shared/libs/canvasConfetti.ts"; import { API, stupidErrorAlert } from "shared/mod.ts"; import { format } from "std/fmt/bytes.ts"; -import { Box, Button, ButtonStyle, Color, Entry, Grid, Label, MediaQuery, Pointable, Vertical } from "webgen/mod.ts"; +import { Box, Button, ButtonStyle, Color, Empty, Entry, Grid, Label, MediaQuery, Pointable, Vertical } from "webgen/mod.ts"; import { MB, state } from "../data.ts"; import { refreshState } from "../loading.ts"; import './profile.css'; @@ -47,7 +47,7 @@ export const profileView = () => refreshState(); } }) : - Box().removeFromLayout() + Empty() ) .addClass("shop"), Box( @@ -75,7 +75,7 @@ export const profileView = () => refreshState(); } }) : - Box().removeFromLayout() + Empty() ) .addClass("shop"), Box( @@ -103,7 +103,7 @@ export const profileView = () => refreshState(); } }) : - Box().removeFromLayout() + Empty() ) .addClass("shop"), Box( @@ -131,7 +131,7 @@ export const profileView = () => refreshState(); } }) : - Box().removeFromLayout() + Empty() ) .addClass("shop") ) diff --git a/pages/hosting/views/wizard.ts b/pages/hosting/views/wizard.ts index 7d80a4fc..c47b29f6 100644 --- a/pages/hosting/views/wizard.ts +++ b/pages/hosting/views/wizard.ts @@ -1,6 +1,6 @@ import { API, displayError, LoadingSpinner, SliderInput } from "shared/mod.ts"; import { format } from "std/fmt/bytes.ts"; -import { BasicLabel, Box, Dialog, DropDownInput, Grid, Label, Page, refMerge, TextInput, Vertical, Wizard } from "webgen/mod.ts"; +import { BasicLabel, Box, DropDownInput, Grid, Label, Page, refMerge, TextInput, Vertical, Wizard } from "webgen/mod.ts"; import locations from "../../../data/locations.json" with { type: "json" }; import { ServerCreate, serverCreate } from "../../../spec/music.ts"; import { creationState, MB, state } from "../data.ts"; diff --git a/pages/shared/list.ts b/pages/shared/list.ts index cbbdf07c..574fd2cb 100644 --- a/pages/shared/list.ts +++ b/pages/shared/list.ts @@ -1,4 +1,4 @@ -import { Box, Button, CenterV, Component, Horizontal, Label, MIcon, Pointable, Pointer, State, Vertical, asPointer } from "webgen/mod.ts"; +import { Box, Button, CenterV, Component, Empty, Horizontal, Label, MIcon, Pointable, Pointer, State, Vertical, asPointer } from "webgen/mod.ts"; import { LoadingSpinner } from "./components.ts"; import { External, displayError } from "./restSpec.ts"; @@ -58,7 +58,7 @@ export const HeavyList = (items: Pointable | 'loading' | T[]>, this.wrapper.append( Vertical( ...val.length == 0 ? [ this.placeholder ] : val.map(x => map(x)), - this.paging.$enabled.map(() => this.paging.enabled ? Button("Load More").setMargin("0 0 var(--gap)").onPromiseClick(() => this.loadMore(val.length - 2, this.paging.limit + 1)) : Box().removeFromLayout()).asRefComponent().removeFromLayout(), + this.paging.$enabled.map(() => this.paging.enabled ? Button("Load More").setMargin("0 0 var(--gap)").onPromiseClick(() => this.loadMore(val.length - 2, this.paging.limit + 1)) : Empty()).asRefComponent().removeFromLayout(), ) .setGap("var(--gap)") .draw() diff --git a/pages/shared/navigation.ts b/pages/shared/navigation.ts index b40064c7..b728e790 100644 --- a/pages/shared/navigation.ts +++ b/pages/shared/navigation.ts @@ -1,5 +1,5 @@ import { assert } from "std/assert/assert.ts"; -import { Box, Component, Entry, Grid, Label, MIcon, Pointable, Pointer, Taglist, Vertical, asPointer, isMobile, isPointer } from "webgen/mod.ts"; +import { Box, Component, Empty, Entry, Grid, Label, MIcon, Pointable, Pointer, Taglist, Vertical, asPointer, isMobile, isPointer } from "webgen/mod.ts"; import { HeavyList } from "./list.ts"; import './navigation.css'; @@ -106,7 +106,7 @@ class MenuImpl extends Component { return item; if (asPointer(item.hidden).getValue()) - return Box().removeFromLayout(); + return Empty(); const entry = Entry(item.replacement ? asPointer(item.replacement).getValue() : item).addClass(isMobile.map(mobile => mobile ? "small" : "desktop")); const click = this.createClickHandler(item); @@ -183,7 +183,7 @@ function defaultHeader(menu: MenuImpl) { } function defaultFooter(menu: MenuImpl) { - return isMobile.map(mobile => mobile && menu.rootNode.actions ? Box(createActionList(menu)).addClass(asPointer(menu.rootNode.actions).map(it => it.length == 0 ? "remove-from-layout" : "normal"), "sticky-footer") : Box().removeFromLayout()).asRefComponent().removeFromLayout(); + return isMobile.map(mobile => mobile && menu.rootNode.actions ? Box(createActionList(menu)).addClass(asPointer(menu.rootNode.actions).map(it => it.length == 0 ? "remove-from-layout" : "normal"), "sticky-footer") : Empty()).asRefComponent().removeFromLayout(); } export function createActionList(menu: MenuImpl) { @@ -191,7 +191,7 @@ export function createActionList(menu: MenuImpl) { } export function createTagList(menu: MenuImpl) { - if (!menu.rootNode.categories) return Box().removeFromLayout(); + if (!menu.rootNode.categories) return Empty(); const index = asPointer(0); index.listen((val, oldVal) => { if (oldVal != undefined) { @@ -209,7 +209,7 @@ export function createTagList(menu: MenuImpl) { const [ rootId ] = path.split("/"); const unprefixed = path.replace(rootId, ""); const visible = unprefixed == "/"; - return visible && menu.rootNode.categories ? Taglist(menu.rootNode.categories.map(it => it.title), index) : Box().removeFromLayout(); + return visible && menu.rootNode.categories ? Taglist(menu.rootNode.categories.map(it => it.title), index) : Empty(); }).asRefComponent(); } diff --git a/pages/user/oauth.ts b/pages/user/oauth.ts index 4b43ed7d..17f8d33d 100644 --- a/pages/user/oauth.ts +++ b/pages/user/oauth.ts @@ -1,6 +1,6 @@ import { Footer } from "shared/footer.ts"; import { API, LoadingSpinner, stupidErrorAlert } from "shared/mod.ts"; -import { Box, Button, ButtonStyle, Color, Grid, Horizontal, Image, Label, MIcon, Spacer, State, Vertical, View, WebGen, isMobile } from "webgen/mod.ts"; +import { Body, Box, Button, ButtonStyle, Color, Grid, Horizontal, Image, Label, MIcon, Spacer, State, Vertical, WebGen, isMobile } from "webgen/mod.ts"; import '../../assets/css/main.css'; import { dots, templateArtwork } from "../../assets/imports.ts"; import { DynaNavigation } from "../../components/nav.ts"; @@ -97,13 +97,12 @@ const list = state.$loaded.map(loaded => { return LoadingSpinner(); }).asRefComponent(); -View(() => Vertical( +Body(Vertical( DynaNavigation("Home"), Box().addClass("background-image"), list.addClass("auth-area"), Footer() -)) - .appendOn(document.body); +)); async function authorize() { await API.oauth.authorize(params.clientId!, params.scope!, params.redirectUri!)