Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-02-04 01:09:14 -05:00
Code Issues Activity

feat(web): add some material design 3 styling to forms and ui elements (#1798)

Browse source 
* stlye: forms

* style: navigation bar

* style: user profile popup

* style: context menu

* fix: prettier

* style: manage account dark theme color

* style: user profile image border; fix: profile panel z-index

* style: border for profile image on hover and scrolling in administration page

* style: font size

* style: gap between day in a row
This commit is contained in:
Alex 2023-02-19 23:29:06 -06:00 • committed by GitHub
parent 83a2669ff5
commit 2cf42e867c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 56 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
server/apps/immich/src/controllers/user.controller.ts
View file

@ -112,7 +112,7 @@ export class UserController {
}
@Get('/profile-image/:userId')
@Header('Cache-Control', 'max-age=86400')
@Header('Cache-Control', 'max-age=600')
async getProfileImage(@Param('userId') userId: string, @Response({ passthrough: true }) res: Res): Promise<any> {
const readableStream = await this.userService.getUserProfileImage(userId);
res.set({

6
web/src/app.css
View file

@ -57,7 +57,7 @@ input:focus-visible {
@layer utilities {
.immich-form-input {
@apply bg-slate-200 p-2 rounded-lg focus:border-immich-primary text-sm dark:bg-gray-600 dark:text-immich-dark-fg disabled:bg-gray-400 dark:disabled:bg-gray-800 disabled:cursor-not-allowed disabled:text-gray-200;
@apply bg-slate-200 p-4 rounded-xl focus:border-immich-primary text-sm dark:bg-gray-600 dark:text-immich-dark-fg disabled:bg-gray-400 dark:disabled:bg-gray-800 disabled:cursor-not-allowed disabled:text-gray-200;
}
.immich-form-label {
@ -69,11 +69,11 @@ input:focus-visible {
}
.immich-btn-primary-big {
@apply inline-flex justify-center items-center bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray text-white enabled:dark:hover:bg-immich-dark-primary/80 enabled:hover:bg-immich-primary/75 disabled:cursor-not-allowed px-6 py-4 rounded-md shadow-md w-full font-semibold;
@apply inline-flex justify-center items-center bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray text-white enabled:dark:hover:bg-immich-dark-primary/80 enabled:hover:bg-immich-primary/75 disabled:cursor-not-allowed px-6 py-4 rounded-3xl shadow-md w-full font-semibold;
}
.immich-btn-secondary-big {
@apply inline-flex justify-center items-center bg-gray-500 dark:bg-gray-200 text-white enabled:hover:bg-gray-500/75 enabled:dark:hover:bg-gray-200/80 dark:text-immich-dark-gray disabled:cursor-not-allowed px-6 py-4 rounded-md shadow-md w-full font-semibold;
@apply inline-flex justify-center items-center bg-gray-500 dark:bg-gray-200 text-white enabled:hover:bg-gray-500/75 enabled:dark:hover:bg-gray-200/80 dark:text-immich-dark-gray disabled:cursor-not-allowed px-6 py-4 rounded-3xl shadow-md w-full font-semibold;
}
.immich-text-button {

10
web/src/lib/components/forms/change-password-form.svelte
View file

@ -45,7 +45,7 @@
</script>
<div
class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
class="border bg-gray-50 dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
>
<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
<ImmichLogo class="text-center" height="100" width="100" />
@ -54,7 +54,7 @@
</h1>
<p
class="text-sm border rounded-md p-4 font-mono text-gray-600 dark:border-immich-dark-bg dark:text-gray-300"
class="text-sm border rounded-3xl p-6 text-gray-600 dark:border-immich-dark-bg dark:text-gray-300 bg-immich-bg dark:bg-gray-900"
>
Hi {user.firstName}
{user.lastName} ({user.email}),
@ -98,11 +98,7 @@
<p class="text-immich-primary ml-4 text-sm">{success}</p>
{/if}
<div class="flex w-full">
<button
type="submit"
class="m-4 p-2 bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 dark:hover:bg-immich-dark-primary/80 dark:text-immich-dark-gray px-6 py-4 text-white rounded-md shadow-md w-full"
>Change Password</button
>
<button type="submit" class="immich-btn-primary-big m-4">Change Password</button>
</div>
</form>
</div>

6
web/src/lib/components/forms/login-form.svelte
View file

@ -76,7 +76,7 @@
</script>
<div
class="border bg-white dark:bg-immich-dark-gray dark:border-immich-dark-gray p-8 shadow-sm w-full max-w-lg rounded-md"
class="border bg-white dark:bg-immich-dark-gray dark:border-immich-dark-gray p-8 shadow-sm w-full max-w-lg rounded-3xl"
>
<div class="flex flex-col place-items-center place-content-center gap-4 py-4">
<ImmichLogo class="text-center h-24 w-24" />
@ -85,7 +85,7 @@
{#if loginPageMessage}
<p
class="text-sm border rounded-md m-4 p-4 text-immich-primary dark:text-immich-dark-primary font-medium bg-immich-primary/5 dark:border-immich-dark-bg"
class="text-sm border rounded-xl p-4 text-immich-primary dark:text-immich-dark-primary font-medium bg-immich-primary/5 dark:border-immich-dark-bg w-full border-immich-primary border-2"
>
{@html loginPageMessage}
</p>
@ -142,7 +142,7 @@
{#if authConfig.enabled}
{#if authConfig.passwordLoginEnabled}
<div class="inline-flex items-center justify-center w-full">
<hr class="w-3/4 h-px my-6 bg-gray-200 border-0 dark:bg-gray-600" />
<hr class="w-3/4 h-px my-4 bg-gray-200 border-0 dark:bg-gray-600" />
<span
class="absolute px-3 font-medium text-gray-900 -translate-x-1/2 left-1/2 dark:text-white bg-white dark:bg-immich-dark-gray"
>

2
web/src/lib/components/photos-page/asset-date-group.svelte
View file

@ -110,7 +110,7 @@
<section
id="asset-group-by-date"
class="flex flex-wrap gap-5 mt-5"
class="flex flex-wrap gap-12 mt-5"
bind:clientHeight={actualBucketHeight}
>
{#each assetsGroupByDate as assetsInDateGroup, groupIndex (assetsInDateGroup[0].id)}

2
web/src/lib/components/shared-components/context-menu/context-menu.svelte
View file

@ -32,7 +32,7 @@
<div
transition:slide={{ duration: 200, easing: quintOut }}
bind:this={menuEl}
class="absolute w-[200px] z-[99999] rounded-lg overflow-hidden"
class="absolute w-[200px] z-[99999] rounded-lg overflow-hidden shadow-lg"
style={`top: ${y}px; left: ${x}px;`}
use:clickOutside
on:outclick={() => dispatch('clickoutside')}

2
web/src/lib/components/shared-components/context-menu/menu-option.svelte
View file

@ -16,7 +16,7 @@
<button
class:disabled={isDisabled}
on:click={handleClick}
class="bg-white hover:bg-gray-300 dark:text-immich-dark-bg transition-all p-4 w-full text-left text-sm"
class="bg-slate-100 hover:bg-gray-200 dark:text-immich-dark-bg transition-all p-4 w-full text-left text-sm font-medium"
>
{#if text}
{text}

74
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View file

@ -5,6 +5,7 @@
import { page } from '$app/stores';
import { fade } from 'svelte/transition';
import Cog from 'svelte-material-icons/Cog.svelte';
import Logout from 'svelte-material-icons/Logout.svelte';
import { goto } from '$app/navigation';
export let user: UserResponseDto;
@ -27,59 +28,58 @@
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
id="account-info-panel"
class="absolute right-[25px] top-[75px] bg-immich-bg dark:bg-immich-dark-gray dark:border dark:border-immich-dark-gray shadow-lg rounded-2xl w-[360px] text-center z-[100]"
class="absolute right-[25px] top-[75px] bg-gray-200 dark:bg-immich-dark-gray dark:border dark:border-immich-dark-gray shadow-lg rounded-3xl w-[360px] text-center z-[100]"
use:clickOutside
on:outclick={() => dispatch('close')}
>
<div class="flex place-items-center place-content-center mt-6">
<button
class="flex place-items-center place-content-center rounded-full bg-immich-primary dark:bg-immich-dark-primary dark:immich-dark-primary/80 h-20 w-20 text-gray-100 hover:bg-immich-primary dark:text-immich-dark-bg"
>
{#await getUserProfileImage() then hasProfileImage}
{#if hasProfileImage}
<div class="bg-white dark:bg-immich-dark-primary/10 rounded-3xl mx-4 mt-4 pb-4">
<div class="flex place-items-center place-content-center">
<button
class="flex place-items-center place-content-center rounded-full bg-immich-primary dark:bg-immich-dark-primary dark:immich-dark-primary/80 h-20 w-20 text-gray-100 hover:bg-immich-primary dark:text-immich-dark-bg mt-4"
>
{#await getUserProfileImage() then}
<img
transition:fade={{ duration: 100 }}
src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
alt="profile-img"
class="inline rounded-full h-20 w-20 object-cover shadow-md"
class="inline rounded-full h-20 w-20 object-cover shadow-md border-2 border-immich-primary dark:border-immich-dark-primary"
draggable="false"
/>
{:else}
{:catch}
<div transition:fade={{ duration: 200 }} class="text-lg">
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
</div>
{/if}
{/await}
</button>
{/await}
</button>
</div>
<p class="text-lg text-immich-primary dark:text-immich-dark-primary font-medium mt-4">
{user.firstName}
{user.lastName}
</p>
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{user.email}</p>
<div class=" mt-4 flex place-items-center place-content-center">
<button
class="flex border rounded-3xl px-6 py-2 hover:bg-immich-primary/10 dark:border-immich-dark-gray dark:bg-gray-500 dark:hover:bg-immich-dark-primary/50 dark:text-white font-medium place-items-center place-content-center gap-2"
on:click={() => {
goto('/user-settings');
dispatch('close');
}}
>
<span><Cog size="18" /></span>Account Settings</button
>
</div>
</div>
<p class="text-lg text-immich-primary dark:text-immich-dark-primary font-medium mt-4">
{user.firstName}
{user.lastName}
</p>
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{user.email}</p>
<div class="mt-4 flex place-items-center place-content-center">
<div class="mb-4 flex flex-col">
<button
class="flex border rounded-3xl px-6 py-2 hover:bg-gray-50 dark:border-immich-dark-gray dark:bg-gray-300 dark:hover:bg-immich-dark-primary font-medium place-items-center place-content-center gap-2 text-xs"
on:click={() => {
goto('/user-settings');
dispatch('close');
}}
class="py-3 w-full font-medium flex place-items-center gap-2 hover:bg-immich-primary/10 text-gray-500 dark:text-gray-300 place-content-center"
on:click={() => dispatch('logout')}
>
<span><Cog size="18" /></span>Manage your Immich account</button
>
</div>
<div class="my-4">
<hr class="dark:border-immich-dark-bg" />
</div>
<div class="mb-6">
<button
class="border rounded-3xl px-6 py-2 hover:bg-gray-50 dark:border-immich-dark-gray dark:bg-gray-300 dark:hover:bg-immich-dark-primary text-xs"
on:click={() => dispatch('logout')}>Sign Out</button
<Logout size={24} />
Sign Out</button
>
</div>
</div>

6
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View file

@ -42,7 +42,7 @@
<section
id="dashboard-navbar"
class="fixed w-screen z-[100] bg-immich-bg dark:bg-immich-dark-bg text-sm"
class="fixed w-screen z-[900] bg-immich-bg dark:bg-immich-dark-bg text-sm"
>
<div class="flex border-b dark:border-b-immich-dark-gray place-items-center px-6 py-2 ">
<a
@ -57,7 +57,7 @@
</a>
<div class="flex-1 ml-24">
<input
class="w-[50%] rounded-md bg-gray-200 dark:bg-immich-dark-gray px-8 py-4"
class="w-[50%] rounded-3xl bg-gray-200 dark:bg-immich-dark-gray px-8 py-4"
placeholder="Search - Coming soon"
/>
</div>
@ -102,7 +102,7 @@
transition:fade={{ duration: 100 }}
src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
alt="profile-img"
class="inline rounded-full h-12 w-12 object-cover shadow-md"
class="inline rounded-full h-12 w-12 object-cover shadow-md border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-all"
draggable="false"
/>
{:else}

6
web/src/routes/admin/+layout.svelte
View file

@ -60,15 +60,15 @@
</div>
</section>
<section class="overflow-y-auto ">
<div id="setting-title" class="pt-10 fixed w-full z-50 bg-immich-bg dark:bg-immich-dark-bg">
<section class="overflow-y-auto immich-scrollbar ">
<div id="setting-title" class="pt-10 w-full z-50 bg-immich-bg dark:bg-immich-dark-bg">
<h1 class="text-lg ml-8 mb-4 text-immich-primary dark:text-immich-dark-primary font-medium">
{getPageTitle($page.route.id)}
</h1>
<hr class="dark:border-immich-dark-gray" />
</div>
<section id="setting-content" class="pt-[85px] flex place-content-center">
<section id="setting-content" class="flex place-content-center">
<section class="w-[800px] pt-5 pb-28">
<slot />
</section>