Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-01-22 18:56:21 +01:00
Code Issues Projects Releases Packages Wiki Activity

web/PageNavTab: use icon prop instead of slot

Browse source
This commit is contained in:
wukko 2024-11-20 14:15:34 +06:00
parent a0616841bf
commit 1833a95027
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
3 changed files with 62 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
web/src/components/subnav/PageNavTab.svelte
View file

@ -3,25 +3,26 @@
import IconChevronRight from "@tabler/icons-svelte/IconChevronRight.svelte"; import IconChevronRight from "@tabler/icons-svelte/IconChevronRight.svelte";
export let tabPath: string; export let path: string;
export let tabTitle: string; export let title: string;
export let icon: ConstructorOfATypedSvelteComponent;
export let iconColor: "gray" | "blue" | "green" = "gray"; export let iconColor: "gray" | "blue" | "green" = "gray";
$: isActive = $page.url.pathname === tabPath; $: isActive = $page.url.pathname === path;
</script> </script>
<a <a
class="subnav-tab" class="subnav-tab"
href={tabPath} href={path}
class:active={isActive} class:active={isActive}
role="button" role="button"
> >
<div class="subnav-tab-left"> <div class="subnav-tab-left">
<div class="tab-icon" style="background: var(--{iconColor})"> <div class="tab-icon" style="background: var(--{iconColor})">
<slot></slot> <svelte:component this={icon} />
</div> </div>
<div class="subnav-tab-text"> <div class="subnav-tab-text">
{tabTitle} {title}
</div> </div>
</div> </div>
<div class="subnav-tab-chevron"> <div class="subnav-tab-chevron">

45
web/src/routes/about/+layout.svelte
View file

@ -23,43 +23,38 @@
<svelte:fragment slot="navigation"> <svelte:fragment slot="navigation">
<PageNavSection> <PageNavSection>
<PageNavTab <PageNavTab
tabPath="/about/general" path="/about/general"
tabTitle={$t("about.page.general")} title={$t("about.page.general")}
icon={IconComet}
iconColor="blue" iconColor="blue"
> />
<IconComet />
</PageNavTab>
<PageNavTab <PageNavTab
tabPath="/about/community" path="/about/community"
tabTitle={$t("about.page.community")} title={$t("about.page.community")}
icon={IconUsersGroup}
iconColor="green" iconColor="green"
> />
<IconUsersGroup />
</PageNavTab>
</PageNavSection> </PageNavSection>
<PageNavSection> <PageNavSection>
<PageNavTab <PageNavTab
tabPath="/about/terms" path="/about/terms"
tabTitle={$t("about.page.terms")} title={$t("about.page.terms")}
icon={IconChecklist}
iconColor="gray" iconColor="gray"
> />
<IconChecklist />
</PageNavTab>
<PageNavTab <PageNavTab
tabPath="/about/privacy" path="/about/privacy"
tabTitle={$t("about.page.privacy")} title={$t("about.page.privacy")}
icon={IconLock}
iconColor="gray" iconColor="gray"
> />
<IconLock />
</PageNavTab>
<PageNavTab <PageNavTab
tabPath="/about/credits" path="/about/credits"
tabTitle={$t("about.page.credits")} title={$t("about.page.credits")}
icon={IconLicense}
iconColor="gray" iconColor="gray"
> />
<IconLicense />
</PageNavTab>
</PageNavSection> </PageNavSection>
</svelte:fragment> </svelte:fragment>

76
web/src/routes/settings/+layout.svelte
View file

@ -20,7 +20,9 @@
import IconWorld from "@tabler/icons-svelte/IconWorld.svelte"; import IconWorld from "@tabler/icons-svelte/IconWorld.svelte";
import IconSettingsBolt from "@tabler/icons-svelte/IconSettingsBolt.svelte"; import IconSettingsBolt from "@tabler/icons-svelte/IconSettingsBolt.svelte";
$: versionText = $version ? `v${$version.version}-${$version.commit.slice(0, 8)}` : '\xa0'; $: versionText = $version
? `v${$version.version}-${$version.commit.slice(0, 8)}`
: "\xa0";
</script> </script>
<PageNav <PageNav
@ -32,68 +34,60 @@
<svelte:fragment slot="navigation"> <svelte:fragment slot="navigation">
<PageNavSection> <PageNavSection>
<PageNavTab <PageNavTab
tabPath="/settings/appearance" path="/settings/appearance"
tabTitle={$t("settings.page.appearance")} title={$t("settings.page.appearance")}
icon={IconSunHigh}
iconColor="blue" iconColor="blue"
> />
<IconSunHigh />
</PageNavTab>
<PageNavTab <PageNavTab
tabPath="/settings/privacy" path="/settings/privacy"
tabTitle={$t("settings.page.privacy")} title={$t("settings.page.privacy")}
icon={IconLock}
iconColor="blue" iconColor="blue"
> />
<IconLock />
</PageNavTab>
</PageNavSection> </PageNavSection>
<PageNavSection> <PageNavSection>
<PageNavTab <PageNavTab
tabPath="/settings/video" path="/settings/video"
tabTitle={$t("settings.page.video")} title={$t("settings.page.video")}
icon={IconMovie}
iconColor="green" iconColor="green"
> />
<IconMovie />
</PageNavTab>
<PageNavTab <PageNavTab
tabPath="/settings/audio" path="/settings/audio"
tabTitle={$t("settings.page.audio")} title={$t("settings.page.audio")}
icon={IconMusic}
iconColor="green" iconColor="green"
> />
<IconMusic />
</PageNavTab>
<PageNavTab <PageNavTab
tabPath="/settings/download" path="/settings/download"
tabTitle={$t("settings.page.download")} title={$t("settings.page.download")}
icon={IconFileDownload}
iconColor="green" iconColor="green"
> />
<IconFileDownload />
</PageNavTab>
</PageNavSection> </PageNavSection>
<PageNavSection> <PageNavSection>
<PageNavTab <PageNavTab
tabPath="/settings/instances" path="/settings/instances"
tabTitle={$t("settings.page.instances")} title={$t("settings.page.instances")}
icon={IconWorld}
iconColor="gray" iconColor="gray"
> />
<IconWorld />
</PageNavTab>
<PageNavTab <PageNavTab
tabPath="/settings/advanced" path="/settings/advanced"
tabTitle={$t("settings.page.advanced")} title={$t("settings.page.advanced")}
icon={IconSettingsBolt}
iconColor="gray" iconColor="gray"
> />
<IconSettingsBolt />
</PageNavTab>
{#if $settings.advanced.debug} {#if $settings.advanced.debug}
<PageNavTab <PageNavTab
tabPath="/settings/debug" path="/settings/debug"
tabTitle={$t("settings.page.debug")} title={$t("settings.page.debug")}
icon={IconBug}
iconColor="gray" iconColor="gray"
> />
<IconBug />
</PageNavTab>
{/if} {/if}
</PageNavSection> </PageNavSection>
</svelte:fragment> </svelte:fragment>