mirror of
https://github.com/immich-app/immich.git
synced 2025-05-31 20:25:32 -04:00
796c933fb8
* feat(web,a11y): standardize the FullScreenModal look * consistent header, padding, close button, and radius as BaseModal * vertically stacking ConfirmDialogue CTA buttons in narrow screens * adding aria-modal tags for screen reader * add viewport-specific height limits on modals, to enable scrolling * prevent focus from being hidden under sticky content in modals * standardize FullScreenModal widths using a Prop * wip: consistent padding with header * fix: alignment on "create user" and "edit user" modals * fix: horizontal modal content alignment * fix: create user CTA buttons * chore: remove unnecessary warning --------- Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
61 lines
2.0 KiB
Svelte
61 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import { websocketStore } from '$lib/stores/websocket';
|
|
import type { ServerVersionResponseDto } from '@immich/sdk';
|
|
import Button from '../elements/buttons/button.svelte';
|
|
import FullScreenModal from './full-screen-modal.svelte';
|
|
|
|
let showModal = false;
|
|
|
|
const { release } = websocketStore;
|
|
|
|
const semverToName = ({ major, minor, patch }: ServerVersionResponseDto) => `v${major}.${minor}.${patch}`;
|
|
|
|
$: releaseVersion = $release && semverToName($release.releaseVersion);
|
|
$: serverVersion = $release && semverToName($release.serverVersion);
|
|
$: $release?.isAvailable && handleRelease();
|
|
|
|
const onAcknowledge = () => {
|
|
localStorage.setItem('appVersion', releaseVersion);
|
|
showModal = false;
|
|
};
|
|
|
|
const handleRelease = () => {
|
|
try {
|
|
if (localStorage.getItem('appVersion') === releaseVersion) {
|
|
return;
|
|
}
|
|
|
|
showModal = true;
|
|
} catch (error) {
|
|
console.error('Error [VersionAnnouncementBox]:', error);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
{#if showModal}
|
|
<FullScreenModal id="new-version-modal" title="🎉 NEW VERSION AVAILABLE" onClose={() => (showModal = false)}>
|
|
<div>
|
|
Hi friend, there is a new version of the application please take your time to visit the
|
|
<span class="font-medium underline"
|
|
><a href="https://github.com/immich-app/immich/releases/latest" target="_blank" rel="noopener noreferrer"
|
|
>release notes</a
|
|
></span
|
|
>
|
|
and ensure your <code>docker-compose</code>, and <code>.env</code> setup is up-to-date to prevent any misconfigurations,
|
|
especially if you use WatchTower or any mechanism that handles updating your application automatically.
|
|
</div>
|
|
|
|
<div class="mt-4 font-medium">Your friend, Alex</div>
|
|
|
|
<div class="font-sm mt-8">
|
|
<code>Server Version: {serverVersion}</code>
|
|
<br />
|
|
<code>Latest Version: {releaseVersion}</code>
|
|
</div>
|
|
|
|
<div class="mt-8 text-right">
|
|
<Button fullwidth on:click={onAcknowledge}>Acknowledge</Button>
|
|
</div>
|
|
</FullScreenModal>
|
|
{/if}
|