Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: buttons with leading icons #107

Merged
merged 1 commit into from
Feb 6, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/buy.immich.app/routes/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import FullPageLayout from '$lib/components/FullPageLayout.svelte';
import FullPageLayout from '$lib/layouts/FullPageLayout.svelte';
import { getCallbackUrl, ImmichLicense } from '$lib/utils/license';
import { Button, Heading, Icon, Logo, Stack, SupporterBadge, Text } from '@immich/ui';
import { mdiAccount, mdiCheckCircleOutline, mdiServer } from '@mdi/js';
@@ -8,7 +8,7 @@
const userFeatures = ['For an individual', 'Lifetime purchase', 'Supporter status'];
</script>

<FullPageLayout width="md">
<FullPageLayout size="medium">
<Stack gap={4}>
<SupporterBadge effect="always">
<Logo size="large" variant="icon" />
5 changes: 2 additions & 3 deletions apps/buy.immich.app/routes/claim/[[id]]/+page.svelte
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@
import LicenseKey from '$lib/components/LicenseKey.svelte';
import DefaultPageLayout from '$lib/layouts/DefaultPageLayout.svelte';
import { getAuthorizeUrl } from '$lib/utils/oauth';
import { Alert, Button, Heading, Icon, Link, Stack, Text } from '@immich/ui';
import { Alert, Button, Heading, Link, Stack, Text } from '@immich/ui';
import { mdiGithub } from '@mdi/js';
import type { PageData } from './$types';
@@ -83,8 +83,7 @@
{:else}
<section>
<Stack align="start" gap={4}>
<Button onclick={handleLogin} color="secondary" variant="outline">
<Icon icon={mdiGithub} size="2em" />
<Button leadingIcon={mdiGithub} onclick={handleLogin} color="secondary" variant="outline">
<Text>Login with GitHub</Text>
</Button>
{#if errorMessage}
4 changes: 2 additions & 2 deletions apps/get.immich.app/routes/+page.svelte
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
import portainerIcon from '$lib/assets/img/portainer.svg';
import truenasIcon from '$lib/assets/img/truenas-scale.svg';
import unraidIcon from '$lib/assets/img/unraid.svg';
import FullPageLayout from '$lib/components/FullPageLayout.svelte';
import FullPageLayout from '$lib/layouts/FullPageLayout.svelte';
import {
Button,
Card,
@@ -25,7 +25,7 @@
import { mdiAndroid, mdiDocker } from '@mdi/js';
</script>

<FullPageLayout width="lg">
<FullPageLayout size="large">
<Stack gap={8}>
<SupporterBadge effect="always">
<Logo size="large" variant="icon" />
11 changes: 2 additions & 9 deletions apps/get.immich.app/routes/docker-compose/+page.svelte
Original file line number Diff line number Diff line change
@@ -9,7 +9,6 @@
CardTitle,
Field,
Heading,
Icon,
Input,
PasswordInput,
Stack,
@@ -99,14 +98,8 @@
<Text>Generate a docker-compose.yaml file for Immich</Text>
</div>
<div class="flex gap-2 items-center">
<Button shape="round" onclick={() => handleShare()}>
<Icon icon={mdiShareVariantOutline} size="1.5rem" />
<span>Share</span>
</Button>
<Button shape="round" onclick={() => handleDownload()}>
<Icon icon={mdiDownload} size="1.5rem" />
<span>Download</span>
</Button>
<Button leadingIcon={mdiShareVariantOutline} shape="round" onclick={() => handleShare()}>Share</Button>
<Button leadingIcon={mdiDownload} shape="round" onclick={() => handleDownload()}>Download</Button>
</div>
</div>

13 changes: 8 additions & 5 deletions apps/my.immich.app/routes/[...rest]/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import { StorageKey } from '$lib';
import FullPageLayout from '$lib/components/FullPageLayout.svelte';
import FullPageLayout from '$lib/layouts/FullPageLayout.svelte';
import {
Button,
Card,
@@ -9,7 +9,6 @@
CardHeader,
CardTitle,
Heading,
Icon,
Input,
Logo,
Stack,
@@ -47,7 +46,7 @@
};
</script>

<FullPageLayout width="sm">
<FullPageLayout size="small">
<Stack gap={8} class="min-h-[75vh]">
<SupporterBadge effect="always">
<Logo size="large" variant="icon" />
@@ -65,9 +64,13 @@
<Stack gap={4}>
<Input type="text" placeholder="https://demo.immich.app/" bind:value={instanceUrl} oninput={handleChange} />
<div class="flex justify-end">
<Button type="submit" class="w-full sm:w-auto" disabled={saved}>
<Button
leadingIcon={saved ? mdiCheckCircleOutline : undefined}
type="submit"
class="w-full sm:w-auto"
disabled={saved}
>
{#if saved}
<Icon icon={mdiCheckCircleOutline} />
Saved!
{:else}
{targetUrl ? 'Save & Redirect' : 'Save'}
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@
"format:fix": "prettier --write ."
},
"devDependencies": {
"@immich/ui": "^0.15.0",
"@immich/ui": "^0.16.0",
"@sveltejs/adapter-static": "^3.0.6",
"@sveltejs/kit": "^2.12.1",
"@sveltejs/vite-plugin-svelte": "^5.0.2",
16 changes: 4 additions & 12 deletions src/lib/app.css
Original file line number Diff line number Diff line change
@@ -54,11 +54,13 @@
font-family: 'Overpass', sans-serif;
}

:root.dark {
:root.dark,
body.dark {
color-scheme: dark;
}

:root:not(.dark) {
:root:not(.dark),
body:not(.dark) {
color-scheme: light;
}

@@ -72,13 +74,3 @@ body {
margin: 0;
color: #3a3a3a;
}

@layer utilities {
.immich-gradient {
background:
linear-gradient(to bottom right, #ededed 0%, #f0f1fc 50%) bottom right / 50% 50% no-repeat,
linear-gradient(to bottom left, #ededed 0%, #f0f1fc 50%) bottom left / 50% 50% no-repeat,
linear-gradient(to top left, #ededed 0%, #f0f1fc 50%) top left / 50% 50% no-repeat,
linear-gradient(to top right, #ededed 0%, #f0f1fc 50%) top right / 50% 50% no-repeat;
}
}
13 changes: 5 additions & 8 deletions src/lib/components/CodePreview.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { Button, Card, Heading, HStack, Icon } from '@immich/ui';
import { Button, Card, Heading, HStack } from '@immich/ui';
import { mdiPencilOutline, mdiXml } from '@mdi/js';
import type { Snippet } from 'svelte';
import { HighlightSvelte, LineNumbers } from 'svelte-highlight';
@@ -28,23 +28,20 @@
<Heading size="medium">docker-compose.yaml</Heading>
<HStack gap={1} class="lg:border rounded-xl p-1">
<Button
leadingIcon={mdiPencilOutline}
disabled={viewMode === 'children'}
onclick={handleToggle}
size="small"
class={viewMode === 'children' ? 'hidden md:flex' : ''}
>
<Icon icon={mdiPencilOutline} size="1.5em" />
<span>Configure</span>
>Configure
</Button>
<Button
leadingIcon={mdiXml}
disabled={viewMode === 'code'}
onclick={handleToggle}
size="small"
class={viewMode === 'code' ? 'hidden md:flex' : ''}
class={viewMode === 'code' ? 'hidden md:flex' : ''}>View</Button
>
<Icon icon={mdiXml} size="1.5em" />
<span>View</span>
</Button>
</HStack>
</div>
<div class={viewMode === 'children' ? 'px-4 pb-4' : ''}>
19 changes: 2 additions & 17 deletions src/lib/components/Footer.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { Card, Heading, HStack, Icon, IconButton, Link, Stack, Text, theme, Theme, VStack } from '@immich/ui';
import { Card, Heading, HStack, Icon, Link, Stack, Text, ThemeSwitcher, VStack } from '@immich/ui';
import {
mdiAndroid,
mdiApple,
@@ -10,16 +10,8 @@
mdiReddit,
mdiServerOutline,
mdiShoppingOutline,
mdiWeatherNight,
mdiWeatherSunny,
mdiWeb,
} from '@mdi/js';
const handleToggleTheme = () => {
theme.value = theme.value === Theme.Dark ? Theme.Light : Theme.Dark;
};
const themeIcon = $derived(theme.value === Theme.Light ? mdiWeatherSunny : mdiWeatherNight);
</script>

<div class="bg-dark/10 rounded-t-3xl mt-16 p-8">
@@ -122,14 +114,7 @@
<VStack class="text-center">
<Text size="large">This project is available under GNU AGPL v3 license.</Text>
<Text color="muted" variant="italic">Privacy should not be a luxury</Text>
<IconButton
size="large"
shape="round"
color="secondary"
variant="ghost"
icon={themeIcon}
onclick={handleToggleTheme}
/>
<ThemeSwitcher color="secondary" />
</VStack>
</Stack>
</div>
35 changes: 0 additions & 35 deletions src/lib/components/FullPageLayout.svelte

This file was deleted.

53 changes: 21 additions & 32 deletions src/lib/components/Header.svelte
Original file line number Diff line number Diff line change
@@ -2,8 +2,8 @@
import { afterNavigate } from '$app/navigation';
import { page } from '$app/state';
import type { HeaderItem } from '$lib/types';
import { Button, CloseButton, HStack, IconButton, Logo, NavbarItem, syncToDom, theme, Theme } from '@immich/ui';
import { mdiMenu, mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
import { Button, CloseButton, HStack, IconButton, Logo, NavbarItem, syncToDom, ThemeSwitcher } from '@immich/ui';
import { mdiMenu } from '@mdi/js';
import type { Snippet } from 'svelte';
type Props = {
@@ -16,12 +16,6 @@
let { items, children }: Props = $props();
const handleToggleTheme = () => {
theme.value = theme.value === Theme.Dark ? Theme.Light : Theme.Dark;
};
const themeIcon = $derived(theme.value === Theme.Light ? mdiWeatherSunny : mdiWeatherNight);
$effect(() => {
syncToDom();
});
@@ -48,30 +42,25 @@
color={(item.color ?? isActive(item.href)) ? 'primary' : 'secondary'}>{item.title}</Button
>
{/each}
<IconButton
size="giant"
shape="round"
color="primary"
variant="ghost"
class="ml-2"
icon={themeIcon}
onclick={handleToggleTheme}
/>
<span class="md:hidden">
{#if menuOpen}
<CloseButton class="md:hidden" size="giant" onclick={() => (menuOpen = false)} />
{:else}
<IconButton
size="giant"
shape="round"
color="secondary"
variant="ghost"
class="md:hidden"
icon={mdiMenu}
onclick={() => (menuOpen = true)}
/>
{/if}
</span>
<ThemeSwitcher size="large" />
{#if items.length > 0}
<span class="md:hidden">
{#if menuOpen}
<CloseButton class="md:hidden" size="large" onclick={() => (menuOpen = false)} />
{:else}
<IconButton
size="large"
shape="round"
color="secondary"
variant="ghost"
class="md:hidden"
icon={mdiMenu}
aria-label="Open menu"
onclick={() => (menuOpen = true)}
/>
{/if}
</span>
{/if}
</HStack>
</nav>

24 changes: 8 additions & 16 deletions src/lib/components/LicenseKey.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts">
import { getRedirectUrl } from '$lib/utils/license';
import { Button, Card, CardBody, CardFooter, CardHeader, CardTitle, Icon, Stack, Text } from '@immich/ui';
import { mdiCheckCircleOutline } from '@mdi/js';
import { Button, Card, CardBody, CardFooter, CardHeader, CardTitle, Stack, Text } from '@immich/ui';
import { mdiCheckCircleOutline, mdiContentCopy } from '@mdi/js';
interface Props {
productKey: string;
@@ -22,7 +22,7 @@
clipboardStatus = 'error';
}
setTimeout(() => (clipboardStatus = undefined), 5_000);
setTimeout(() => (clipboardStatus = undefined), 3_000);
};
</script>

@@ -45,21 +45,13 @@
<div class="flex justify-center items-center">
{#if clipboardStatus === 'error'}
<Text color="danger">Unable to copy to clipboard</Text>
{:else if clipboardStatus === 'success'}
<Button disabled color="secondary" size="medium" fullWidth leadingIcon={mdiCheckCircleOutline}>Copied!</Button
>
{:else}
<Button
onclick={handleCopy}
color="secondary"
size="medium"
fullWidth
disabled={clipboardStatus === 'success'}
<Button leadingIcon={mdiContentCopy} onclick={handleCopy} color="secondary" size="medium" fullWidth
>Copy</Button
>
{#if clipboardStatus === 'success'}
<Icon icon={mdiCheckCircleOutline} size="1.5em" />
Copied to clipboard!
{:else}
Copy
{/if}
</Button>
{/if}
</div>
</div>
24 changes: 24 additions & 0 deletions src/lib/layouts/FullPageLayout.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<script lang="ts">
import Footer from '$lib/components/Footer.svelte';
import { Container, Scrollable, type Size } from '@immich/ui';
import type { Snippet } from 'svelte';
type Props = {
children: Snippet;
size?: Size | 'full';
center?: boolean;
};
const { size, children }: Props = $props();
</script>

<Scrollable>
<section class="flex flex-col h-dvh">
<div class="grow">
<Container {size} center class="p-4 sm:p-8 lg:p-10">
{@render children?.()}
</Container>
</div>
<Footer />
</section>
</Scrollable>