ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-04-23 14:07:14 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

i18n package filters and cta label (#369)

Browse source 
* #365 i18n for package filters

* #364 i18n for package card cta label

---------

Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>
This commit is contained in:
Neil 2023-03-31 15:51:30 +08:00 committed by GitHub
parent 54041d2b60
commit 4256cf676e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 37 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
modules/desktop/src/components/package-card/package-state-button.svelte
View file

@ -8,17 +8,6 @@
console.log("do nothing");
};
const getLabel = (state: PackageStates): string => {
return {
[PackageStates.AVAILABLE]: $t("package.install-label").toUpperCase(),
[PackageStates.INSTALLED]: $t("package.installed-label").toUpperCase(),
[PackageStates.INSTALLING]: $t("package.installing-label").toUpperCase(),
[PackageStates.UNINSTALLED]: $t("package.reinstall-label").toUpperCase(),
[PackageStates.NEEDS_UPDATE]: $t("package.needs-update-label").toUpperCase(),
[PackageStates.UPDATING]: $t("package.needs-update-label").toUpperCase()
}[state];
};
const getColor = (state: PackageStates): "primary" | "secondary" | "black" => {
if (state === PackageStates.INSTALLED) {
return "black";
@ -28,6 +17,8 @@
}
return "primary";
};
$: ctaLabel = $t(`package.cta-${pkg.state}`);
</script>
<Button
@ -39,16 +30,16 @@
{#if pkg.state === PackageStates.INSTALLED}
<div class="flex items-center justify-center">
<i class="icon-check-circle mr-2 flex" />
<span>{getLabel(pkg.state)}</span>
<span>{ctaLabel}</span>
</div>
{:else if pkg.state === PackageStates.AVAILABLE || pkg.state === PackageStates.INSTALLING}
<div class="flex items-center justify-between">
<span class="ml-1">{getLabel(pkg.state)}</span>
<span class="ml-1">{ctaLabel}</span>
<i class="icon-downward-arrow mr-1 flex" />
</div>
{:else}
<div class="flex items-center justify-center">
{getLabel(pkg.state)}
{ctaLabel}
</div>
{/if}
</Button>

13
modules/desktop/src/components/search-popup-results/search-popup-results.svelte
View file

@ -43,17 +43,6 @@
const onClose = () => {
term = '';
};
const getCTALabel = (state: PackageStates): string => {
return {
[PackageStates.AVAILABLE]: $t("package.install-label").toUpperCase(),
[PackageStates.INSTALLED]: $t("package.installed-label").toUpperCase(),
[PackageStates.INSTALLING]: $t("package.installing-label").toUpperCase(),
[PackageStates.UNINSTALLED]: $t("package.reinstall-label").toUpperCase(),
[PackageStates.NEEDS_UPDATE]: $t("package.needs-update-label").toUpperCase(),
}[state];
};
</script>
<section class={term ? 'show' : ''}>
@ -73,7 +62,7 @@
<div class={pkg.state === PackageStates.INSTALLING ? 'animate-pulse' : ''}>
<PackageResult
{pkg}
ctaLabel={getCTALabel(pkg.state)}
ctaLabel={$t(`package.cta-${pkg.state}`)}
ctaColor={pkg.state === PackageStates.INSTALLED ? "green": "secondary"}
onClick={async () => {
try {

18
modules/desktop/src/components/side-menu/side-menu.svelte
View file

@ -3,7 +3,7 @@
import { PackageStates, SideMenuOptions } from '$libs/types';
import { packagesStore } from '$libs/stores';
import MenuButton from './menu-button.svelte';
import { t } from '$libs/translations';
const { packages } = packagesStore;
export let activeOption:SideMenuOptions;
@ -23,43 +23,43 @@
/>
<hr/>
{#if needsUpdateCount}
<MenuButton label="Updates available" icon="update"
<MenuButton label={$t("tags.updates_available")} icon="update"
active={activeOption === SideMenuOptions.installed_updates_available}
on:click={() => selectToggle(SideMenuOptions.installed_updates_available)}
/>
<hr/>
{/if}
<MenuButton label="Recently updated" icon="back-in-time"
<MenuButton label={$t("tags.recently_updated")} icon="back-in-time"
active={activeOption === SideMenuOptions.recently_updated}
on:click={() => selectToggle(SideMenuOptions.recently_updated)}
/>
<hr/>
<MenuButton label="New packages" icon="birthday-cake"
<MenuButton label={$t("tags.new_packages")} icon="birthday-cake"
active={activeOption === SideMenuOptions.new_packages}
on:click={() => selectToggle(SideMenuOptions.new_packages)}
/>
<hr/>
<MenuButton label="Popular" icon="bar-chart"
<MenuButton label={$t("tags.popular")} icon="bar-chart"
active={activeOption === SideMenuOptions.popular}
on:click={() => selectToggle(SideMenuOptions.popular)}
/>
<hr/>
<MenuButton label="Featured" icon="lightbulb"
<MenuButton label={$t("tags.featured")} icon="lightbulb"
active={activeOption === SideMenuOptions.featured}
on:click={() => selectToggle(SideMenuOptions.featured)}
/>
<hr/>
<MenuButton label="Essentials" icon="square"
<MenuButton label={$t("tags.essentials")} icon="square"
active={activeOption === SideMenuOptions.essentials}
on:click={() => selectToggle(SideMenuOptions.essentials)}
/>
<hr/>
<MenuButton label="Star-struct" icon="star-full"
<MenuButton label={$t("tags.star_struct")} icon="star-full"
active={activeOption === SideMenuOptions.star_struct}
on:click={() => selectToggle(SideMenuOptions.star_struct)}
/>
<hr/>
<MenuButton label="Made by tea" icon="tea-logo-iconasset-1"
<MenuButton label={$t("tags.made_by_tea")} icon="tea-logo-iconasset-1"
active={activeOption === SideMenuOptions.made_by_tea}
on:click={() => selectToggle(SideMenuOptions.made_by_tea)}
/>

20
modules/desktop/src/libs/translations/translations.json
View file

@ -35,7 +35,13 @@
"install-tea-label": "Install tea cli",
"update-tea-label": "Update now",
"install-tea-cli": "This app requires our command-line interface",
"update-tea-cli": "An update is available for tea cli"
"update-tea-cli": "An update is available for tea cli",
"cta-AVAILABLE": "INSTALL",
"cta-INSTALLED": "INSTALLED",
"cta-INSTALLING": "INSTALLING",
"cta-UNINSTALLED": "RE-INSTALL",
"cta-NEEDS_UPDATE": "UPDATE",
"cta-UPDATING": "UPDATING"
},
"script": {
"top-list-title": "Top scripts this week",
@ -70,6 +76,7 @@
"most-recent": "Most recent"
},
"common": {
"home": "home",
"all": "All",
"articles": "Articles",
"workshops": "Workshops"
@ -89,6 +96,17 @@
"essentials": "Essentials",
"star_struct": "Star-struct Heavyweights",
"made_by_tea": "Made by Tea.xyz"
},
"tags": {
"all": "all",
"updates_available": "Updates available",
"recently_updated": "Recently updated",
"new_packages": "New packages",
"popular": "Popular",
"featured": "Featured",
"essentials": "Essentials",
"star_struct": "Star-struct",
"made_by_tea": "Made by Tea.xyz"
}
}
}

5
modules/desktop/src/routes/packages/[slug]/+page.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts">
import '$appcss';
import { t } from '$libs/translations';
import { page } from '$app/stores';
// import PageHeader from '$components/page-header/page-header.svelte';
@ -65,10 +66,10 @@
const tab = url.searchParams.get("tab");
</script>
<header class="mx-16 py-5 mb-10 text-gray border border-x-0 border-t-0">
<a class="hover:text-white hover:opacity-80 cursor-default" href="/">home</a>
<a class="hover:text-white hover:opacity-80 cursor-default" href="/">{$t("common.home")}</a>
>
{#if tab !== "all"}
<a class="hover:text-white hover:opacity-80 cursor-default" href={`/?tab=${tab || "all"}`}>{tab || "all"}</a>
<a class="hover:text-white hover:opacity-80 cursor-default" href={`/?tab=${tab || "all"}`}>{$t(`tags.${tab}`) || "all"}</a>
>
{/if}
<span class="text-white">{pkg.full_name}</span>