Andreas Reinhold / reiniandClaude Opus 5
1352533667
The share created page gets "Show QR code", a dialog with the link as a QR code (black on white, full screen on a phone) that downloads as a PNG drawn in the browser, with a password reminder for protected shares; and "Share…", which opens the device's share sheet where there is one. Both carry only the link. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
76 lines
3.8 KiB
PHP
76 lines
3.8 KiB
PHP
<div class="mx-auto max-w-lg">
|
|
<div class="mb-8 text-center">
|
|
{{-- The link is ready: a check on an Expressive shape that settles in. --}}
|
|
<div class="relative mx-auto mb-4 grid size-24 place-items-center motion-safe:animate-[share-ready_var(--md-sys-motion-spatial-slow-duration)_var(--md-sys-motion-spatial-slow)_both]">
|
|
<x-shape name="soft-burst" class="absolute inset-0 size-full text-primary-container" />
|
|
<x-icon name="check" class="relative size-12 text-on-primary-container" />
|
|
</div>
|
|
|
|
<h1 class="type-headline-md">{{ __('Share Created!') }}</h1>
|
|
<p class="mt-1 type-body-lg text-on-surface-variant">{{ __('Your files are ready to share') }}</p>
|
|
</div>
|
|
|
|
<div class="grid gap-4">
|
|
{{-- Besides the link: a QR code in a dialog, saved as a PNG in the browser, and the device's
|
|
share sheet where there is one (resources/js/share-created.js). Both carry the link only. --}}
|
|
<div
|
|
x-data="shareActions({
|
|
url: @js($shareUrl),
|
|
title: @js($siteTitle),
|
|
filename: @js('share-'.$share->token.'.png'),
|
|
messages: @js(['shareFailed' => __('The share sheet could not open.'), 'downloadFailed' => __('The QR code could not be saved.')]),
|
|
})"
|
|
class="grid gap-3"
|
|
data-test="share-actions"
|
|
>
|
|
<x-input
|
|
:label="__('Share Link')"
|
|
:value="$shareUrl"
|
|
readonly
|
|
copyable
|
|
icon="link"
|
|
data-test="share-link"
|
|
/>
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
<x-button :label="__('Show QR code')" icon="qr_code_2" variant="tonal" x-on:click="open = true" data-test="show-qr-code" />
|
|
|
|
<span x-show="canShare" x-cloak class="inline-flex">
|
|
<x-button :label="__('Share…')" icon="share" variant="tonal" x-on:click="share()" data-test="share-sheet" />
|
|
</span>
|
|
</div>
|
|
|
|
<x-modal fullscreen :title="__('Scan to open the share')" data-test="qr-code-dialog">
|
|
{{-- White in either theme: a scanner needs the contrast. The SVG is drawn from the app's own URL. --}}
|
|
<div data-qr-code class="mx-auto aspect-square w-full max-w-80 rounded-corner-lg bg-white p-2 [&>svg]:size-full">{!! $qrCodeSvg !!}</div>
|
|
|
|
@if ($share->isPasswordProtected())
|
|
<div class="mt-4">
|
|
<x-alert color="info" icon="lock" :title="__('Recipients also need the password.')" />
|
|
</div>
|
|
@endif
|
|
|
|
<x-slot:actions>
|
|
<x-button :label="__('Close')" x-on:click="close()" />
|
|
<x-button :label="__('Download')" icon="download" variant="tonal" x-on:click="downloadQrCode($el.closest('dialog').querySelector('[data-qr-code] svg'))" data-test="download-qr-code" />
|
|
</x-slot:actions>
|
|
</x-modal>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<x-stat :title="__('Files')" :value="$share->files->count()" icon="description" />
|
|
<x-stat :title="__('Total Size')" :value="Number::fileSize($share->total_size)" icon="hard_drive" />
|
|
<x-stat :title="__('Expires')" :value="$share->expires_at ? $share->expires_at->diffForHumans() : __('Never')" icon="schedule" />
|
|
<x-stat :title="__('Max Downloads')" :value="$share->max_downloads ?? __('Unlimited')" icon="download" />
|
|
</div>
|
|
|
|
@if ($share->isPasswordProtected())
|
|
<x-alert color="info" icon="lock" :title="__('This share is password protected')" />
|
|
@endif
|
|
|
|
<div class="flex justify-end">
|
|
<x-button :label="__('Upload More')" :link="route('upload')" icon="add" variant="tonal" />
|
|
</div>
|
|
</div>
|
|
</div>
|