helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added sharing page to web (#355)

Browse source 
* Added shared album

* Added list tile

* Show info of shared album owner
This commit is contained in:
Alex 2022-07-16 23:52:00 -05:00 • committed by GitHub
parent 5d03e9bda8
commit c6ecfb679a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 403 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

30
web/src/lib/components/shared-components/side-bar/side-bar-button.svelte Normal file
View file

@ -0,0 +1,30 @@
<script lang="ts">
export let title: string;
export let logo: any;
export let actionType: AdminSideBarSelection | AppSideBarSelection;
export let isSelected: boolean;
import { createEventDispatcher } from 'svelte';
import type {
AdminSideBarSelection,
AppSideBarSelection
} from '../../../models/admin-sidebar-selection';
const dispatch = createEventDispatcher();
const onButtonClicked = () => {
dispatch('selected', {
actionType
});
};
</script>
<div
on:click={onButtonClicked}
class={`flex gap-4 place-items-center pl-5 py-3 rounded-tr-full rounded-br-full hover:bg-gray-200 hover:text-immich-primary hover:cursor-pointer
${isSelected && 'bg-immich-primary/10 text-immich-primary hover:bg-immich-primary/25'}
`}
>
<svelte:component this={logo} size="24" />
<p class="font-medium text-sm">{title}</p>
</div>

59
web/src/lib/components/shared-components/side-bar/side-bar.svelte Normal file
View file

@ -0,0 +1,59 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { AppSideBarSelection } from '$lib/models/admin-sidebar-selection';
import { onMount } from 'svelte';
import { page } from '$app/stores';
import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte';
import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
import SideBarButton from './side-bar-button.svelte';
import StatusBox from '../status-box.svelte';
let selectedAction: AppSideBarSelection;
onMount(async () => {
if ($page.routeId == 'albums') {
selectedAction = AppSideBarSelection.ALBUMS;
} else if ($page.routeId == 'photos') {
selectedAction = AppSideBarSelection.PHOTOS;
} else if ($page.routeId == 'sharing') {
selectedAction = AppSideBarSelection.SHARING;
}
});
</script>
<section id="sidebar" class="flex flex-col gap-1 pt-8 pr-6">
<a sveltekit:prefetch href={$page.routeId != 'photos' ? `/photos` : null}>
<SideBarButton
title="Photos"
logo={ImageOutline}
actionType={AppSideBarSelection.PHOTOS}
isSelected={selectedAction === AppSideBarSelection.PHOTOS}
/></a
>
<a sveltekit:prefetch href={$page.routeId != 'sharing' ? `/sharing` : null}>
<SideBarButton
title="Sharing"
logo={AccountMultipleOutline}
actionType={AppSideBarSelection.SHARING}
isSelected={selectedAction === AppSideBarSelection.SHARING}
/></a
>
<div class="text-xs ml-5 my-4">
<p>LIBRARY</p>
</div>
<a sveltekit:prefetch href={$page.routeId != 'albums' ? `/albums` : null}>
<SideBarButton
title="Albums"
logo={ImageAlbum}
actionType={AppSideBarSelection.ALBUMS}
isSelected={selectedAction === AppSideBarSelection.ALBUMS}
/>
</a>
<!-- Status Box -->
<div class="mb-6 mt-auto">
<StatusBox />
</div>
</section>