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

feat: support and feedback modal with third party support (#13056)

Browse source
This commit is contained in:
Zack Pollard 2024-10-01 11:15:31 +01:00 • committed by GitHub
parent ecb5cb00eb
commit 3eccff4306
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 274 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,32 +8,45 @@
import { featureFlags } from '$lib/stores/server-config.store';
import { user } from '$lib/stores/user.store';
import { handleLogout } from '$lib/utils/auth';
import { logout } from '@immich/sdk';
import { mdiMagnify, mdiTrayArrowUp } from '@mdi/js';
import { getAboutInfo, logout, type ServerAboutResponseDto } from '@immich/sdk';
import { mdiHelpCircleOutline, mdiMagnify, mdiTrayArrowUp } from '@mdi/js';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import { AppRoute } from '../../../constants';
import ImmichLogo from '../immich-logo.svelte';
import SearchBar from '../search-bar/search-bar.svelte';
import { AppRoute } from '$lib/constants';
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
import ThemeButton from '../theme-button.svelte';
import UserAvatar from '../user-avatar.svelte';
import AccountInfoPanel from './account-info-panel.svelte';
import HelpAndFeedbackModal from '$lib/components/shared-components/help-and-feedback-modal.svelte';
import { onMount } from 'svelte';
export let showUploadButton = true;
export let onUploadClick: () => void;
let shouldShowAccountInfo = false;
let shouldShowAccountInfoPanel = false;
let shouldShowHelpPanel = false;
let innerWidth: number;
const onLogout = async () => {
const { redirectUri } = await logout();
await handleLogout(redirectUri);
};
let aboutInfo: ServerAboutResponseDto;
onMount(async () => {
aboutInfo = await getAboutInfo();
});
</script>
<svelte:window bind:innerWidth />
{#if shouldShowHelpPanel}
<HelpAndFeedbackModal onClose={() => (shouldShowHelpPanel = false)} info={aboutInfo} />
{/if}
<section id="dashboard-navbar" class="fixed z-[900] h-[var(--navbar-height)] w-screen text-sm">
<SkipLink text={$t('skip_to_content')} />
<div
@ -49,7 +62,7 @@
{/if}
</div>
<section class="flex place-items-center justify-end gap-2 md:gap-4 w-full sm:w-auto">
<section class="flex place-items-center justify-end gap-1 md:gap-2 w-full sm:w-auto">
{#if $featureFlags.search}
<CircleIconButton
href={AppRoute.SEARCH}
@ -63,6 +76,20 @@
<ThemeButton padding="2" />
<div
use:clickOutside={{
onEscape: () => (shouldShowHelpPanel = false),
}}
>
<CircleIconButton
id="support-feedback-button"
title={$t('support_and_feedback')}
icon={mdiHelpCircleOutline}
on:click={() => (shouldShowHelpPanel = !shouldShowHelpPanel)}
padding="1"
/>
</div>
{#if !$page.url.pathname.includes('/admin') && showUploadButton}
<LinkButton on:click={onUploadClick} class="hidden lg:block">
<div class="flex gap-2">
@ -87,7 +114,7 @@
>
<button
type="button"
class="flex"
class="flex pl-2"
on:mouseover={() => (shouldShowAccountInfo = true)}
on:focus={() => (shouldShowAccountInfo = true)}
on:blur={() => (shouldShowAccountInfo = false)}