mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
refactor: help modal (#18145)
This commit is contained in:
Daniel Dietzler
GitHub
parent
a6e5e4f625
commit
09ced9a171
2 changed files with 13 additions and 22 deletions
|
|
@ -1,134 +0,0 @@
|
|||
<script lang="ts">
|
||||
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
|
||||
import Portal from '$lib/components/shared-components/portal/portal.svelte';
|
||||
import { type ServerAboutResponseDto } from '@immich/sdk';
|
||||
import { t } from 'svelte-i18n';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { mdiBugOutline, mdiFaceAgent, mdiGit, mdiGithub, mdiInformationOutline } from '@mdi/js';
|
||||
import { discordPath, discordViewBox } from '$lib/assets/svg-paths';
|
||||
|
||||
interface Props {
|
||||
onClose: () => void;
|
||||
info: ServerAboutResponseDto;
|
||||
}
|
||||
|
||||
let { onClose, info }: Props = $props();
|
||||
</script>
|
||||
|
||||
<Portal>
|
||||
<FullScreenModal title={$t('support_and_feedback')} {onClose}>
|
||||
<p>{$t('official_immich_resources')}</p>
|
||||
<div class="flex flex-col sm:grid sm:grid-cols-2 gap-2 mt-5">
|
||||
<div>
|
||||
<a href="https://{info.version}.archive.immich.app/docs/overview/introduction" target="_blank" rel="noreferrer">
|
||||
<Icon path={mdiInformationOutline} size="1.5em" class="inline-block" />
|
||||
<p
|
||||
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
|
||||
id="documentation-label"
|
||||
>
|
||||
{$t('documentation')}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a href="https://github.com/immich-app/immich/" target="_blank" rel="noreferrer">
|
||||
<Icon path={mdiGithub} size="1.5em" class="inline-block" />
|
||||
<p
|
||||
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
|
||||
id="github-label"
|
||||
>
|
||||
{$t('source')}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a href="https://discord.immich.app" target="_blank" rel="noreferrer">
|
||||
<Icon path={discordPath} viewBox={discordViewBox} class="inline-block" size="1.5em" />
|
||||
<p
|
||||
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
|
||||
id="github-label"
|
||||
>
|
||||
{$t('discord')}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a href="https://github.com/immich-app/immich/issues/new/choose" target="_blank" rel="noreferrer">
|
||||
<Icon path={mdiBugOutline} size="1.5em" class="inline-block" />
|
||||
<p
|
||||
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
|
||||
id="github-label"
|
||||
>
|
||||
{$t('bugs_and_feature_requests')}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{#if info.thirdPartyBugFeatureUrl || info.thirdPartySourceUrl || info.thirdPartyDocumentationUrl || info.thirdPartySupportUrl}
|
||||
<p class="mt-5">{$t('third_party_resources')}</p>
|
||||
<p class="text-sm mt-1">
|
||||
{$t('support_third_party_description')}
|
||||
</p>
|
||||
<div class="flex flex-col sm:grid sm:grid-cols-2 gap-2 mt-5">
|
||||
{#if info.thirdPartyDocumentationUrl}
|
||||
<div>
|
||||
<a href={info.thirdPartyDocumentationUrl} target="_blank" rel="noreferrer">
|
||||
<Icon path={mdiInformationOutline} size="1.5em" class="inline-block" />
|
||||
<p
|
||||
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
|
||||
id="documentation-label"
|
||||
>
|
||||
{$t('documentation')}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if info.thirdPartySourceUrl}
|
||||
<div>
|
||||
<a href={info.thirdPartySourceUrl} target="_blank" rel="noreferrer">
|
||||
<Icon path={mdiGit} size="1.5em" class="inline-block" />
|
||||
<p
|
||||
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
|
||||
id="github-label"
|
||||
>
|
||||
{$t('source')}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if info.thirdPartySupportUrl}
|
||||
<div>
|
||||
<a href={info.thirdPartySupportUrl} target="_blank" rel="noreferrer">
|
||||
<Icon path={mdiFaceAgent} class="inline-block" size="1.5em" />
|
||||
<p
|
||||
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
|
||||
id="github-label"
|
||||
>
|
||||
{$t('support')}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if info.thirdPartyBugFeatureUrl}
|
||||
<div>
|
||||
<a href={info.thirdPartyBugFeatureUrl} target="_blank" rel="noreferrer">
|
||||
<Icon path={mdiBugOutline} size="1.5em" class="inline-block" />
|
||||
<p
|
||||
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
|
||||
id="github-label"
|
||||
>
|
||||
{$t('bugs_and_feature_requests')}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</FullScreenModal>
|
||||
</Portal>
|
||||
|
|
@ -6,12 +6,13 @@
|
|||
import { page } from '$app/state';
|
||||
import { clickOutside } from '$lib/actions/click-outside';
|
||||
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
|
||||
import HelpAndFeedbackModal from '$lib/components/shared-components/help-and-feedback-modal.svelte';
|
||||
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
|
||||
import NotificationPanel from '$lib/components/shared-components/navigation-bar/notification-panel.svelte';
|
||||
import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { authManager } from '$lib/managers/auth-manager.svelte';
|
||||
import { modalManager } from '$lib/managers/modal-manager.svelte';
|
||||
import HelpAndFeedbackModal from '$lib/modals/HelpAndFeedbackModal.svelte';
|
||||
import { mobileDevice } from '$lib/stores/mobile-device.svelte';
|
||||
import { notificationManager } from '$lib/stores/notification-manager.svelte';
|
||||
import { featureFlags } from '$lib/stores/server-config.store';
|
||||
|
|
@ -35,7 +36,6 @@
|
|||
let { showUploadButton = true, onUploadClick }: Props = $props();
|
||||
|
||||
let shouldShowAccountInfoPanel = $state(false);
|
||||
let shouldShowHelpPanel = $state(false);
|
||||
let shouldShowNotificationPanel = $state(false);
|
||||
let innerWidth: number = $state(0);
|
||||
const hasUnreadNotifications = $derived(notificationManager.notifications.length > 0);
|
||||
|
|
@ -49,10 +49,6 @@
|
|||
|
||||
<svelte:window bind:innerWidth />
|
||||
|
||||
{#if shouldShowHelpPanel && info}
|
||||
<HelpAndFeedbackModal onClose={() => (shouldShowHelpPanel = false)} {info} />
|
||||
{/if}
|
||||
|
||||
<nav id="dashboard-navbar" class="z-auto max-md:h-[var(--navbar-height-md)] h-[var(--navbar-height)] w-dvw text-sm">
|
||||
<SkipLink text={$t('skip_to_content')} />
|
||||
<div
|
||||
|
|
@ -129,18 +125,14 @@
|
|||
|
||||
<ThemeButton padding="2" />
|
||||
|
||||
<div
|
||||
use:clickOutside={{
|
||||
onEscape: () => (shouldShowHelpPanel = false),
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<IconButton
|
||||
shape="round"
|
||||
color="secondary"
|
||||
variant="ghost"
|
||||
size="medium"
|
||||
icon={mdiHelpCircleOutline}
|
||||
onclick={() => (shouldShowHelpPanel = !shouldShowHelpPanel)}
|
||||
onclick={() => info && modalManager.open(HelpAndFeedbackModal, { info })}
|
||||
aria-label={$t('support_and_feedback')}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue