chore(front/file-uploader): remove unnecessary css, container, update col-grow class names
This commit is contained in:
parent
1b5e088d74
commit
c025aa2539
@ -71,23 +71,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
:global(button) {
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(button .icon) {
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(button .tip) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.new-files {
|
.new-files {
|
||||||
h3 {
|
h3 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -116,130 +99,128 @@
|
|||||||
<BaseTemplate title="{$locals.app.name} - Upload file" description="File upload web interface." noH1>
|
<BaseTemplate title="{$locals.app.name} - Upload file" description="File upload web interface." noH1>
|
||||||
<h1>Upload files</h1>
|
<h1>Upload files</h1>
|
||||||
|
|
||||||
<div class="container">
|
<section class="panel">
|
||||||
<section class="panel">
|
<h2>
|
||||||
<h2>
|
<Icon name="upload"/>
|
||||||
<Icon name="upload"/>
|
Upload files
|
||||||
Upload files
|
</h2>
|
||||||
</h2>
|
<p>You are responsible for the files that you upload.</p>
|
||||||
<p>You are responsible for the files that you upload.</p>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="upload-form-container" class:disabled={uploading}>
|
<div class="upload-form-container" class:disabled={uploading}>
|
||||||
<Form action={route('post-file-frontend')} withFiles
|
<Form action={route('post-file-frontend')} withFiles
|
||||||
submitText="Upload" submitIcon="upload"
|
submitText="Upload" submitIcon="upload"
|
||||||
onSubmit={uploadFiles}>
|
onSubmit={uploadFiles}>
|
||||||
<Field type="file" name="upload" placeholder="Choose wisely" icon="file"
|
<Field type="file" name="upload" placeholder="Choose wisely" icon="file"
|
||||||
hint="The maximum upload size is {$locals.max_upload_size} MiB"
|
hint="The maximum upload size is {$locals.max_upload_size} MiB"
|
||||||
multiple required
|
multiple required
|
||||||
bind:fileList={selectedFiles}/>
|
bind:fileList={selectedFiles}/>
|
||||||
|
|
||||||
<Field type="checkbox" name="never_expire" placeholder="Never delete this file"
|
<Field type="checkbox" name="never_expire" placeholder="Never delete this file"
|
||||||
icon="infinity"
|
icon="infinity"
|
||||||
bind:value={neverExpire}/>
|
bind:value={neverExpire}/>
|
||||||
{#if !neverExpire}
|
{#if !neverExpire}
|
||||||
<Field type="number" name="expire_after_days" icon="clock"
|
<Field type="number" name="expire_after_days" icon="clock"
|
||||||
placeholder="How many days to delete this file after"
|
placeholder="How many days to delete this file after"
|
||||||
initialValue={30} max="1825"/>
|
initialValue={30} max="1825"/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if !selectedFiles || selectedFiles.length <= 1}
|
||||||
|
<Field type="checkbox" name="autogen_url" placeholder="Generate url automatically"
|
||||||
|
icon="zap"
|
||||||
|
bind:value={autogenUrl} initialValue={true}/>
|
||||||
|
{#if !autogenUrl}
|
||||||
|
<Field type="text" name="slug" placeholder="Custom url slug" icon="link"
|
||||||
|
hint="Example: beautiful_image.jpg sets url to https://{$locals.default_domain}/beautiful_image.jpg"/>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if !selectedFiles || selectedFiles.length <= 1}
|
|
||||||
<Field type="checkbox" name="autogen_url" placeholder="Generate url automatically"
|
|
||||||
icon="zap"
|
|
||||||
bind:value={autogenUrl} initialValue={true}/>
|
|
||||||
{#if !autogenUrl}
|
|
||||||
<Field type="text" name="slug" placeholder="Custom url slug" icon="link"
|
|
||||||
hint="Example: beautiful_image.jpg sets url to https://{$locals.default_domain}/beautiful_image.jpg"/>
|
|
||||||
{/if}
|
|
||||||
{:else}
|
|
||||||
<Message type="info" discreet sticky
|
|
||||||
content="When upload multiple files, URLs will be generated automatically."/>
|
|
||||||
{/if}
|
|
||||||
</Form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if uploading}
|
|
||||||
<FileUpload file={currentFile} form={uploadForm} fileFieldName="upload"
|
|
||||||
onEnd={onUploadEnd} autostart/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if finishedFileUploads.length > 0}
|
|
||||||
<section class="sub-panel new-files">
|
|
||||||
<hr>
|
|
||||||
<h3>
|
|
||||||
<Icon name="file-check"/>
|
|
||||||
Newly uploaded files
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
{#each finishedFileUploads as fileUpload}
|
|
||||||
<CopyableText title="{fileUpload.name}" content="{fileUpload.finalUrl}"/>
|
|
||||||
{/each}
|
|
||||||
</section>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if $locals.flash.url}
|
|
||||||
<CopyableText title="URL" content={$locals.flash.url}/>
|
|
||||||
{/if}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<section class="panel">
|
|
||||||
<h2>
|
|
||||||
<Icon name="folder"/>
|
|
||||||
File list
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<Pagination pagination={$locals.pagination} routeName="file-uploader" contextSize={3}/>
|
|
||||||
|
|
||||||
<table class="data-table file-upload-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>#</th>
|
|
||||||
<th class="table-col-grow">Name</th>
|
|
||||||
<th>Size</th>
|
|
||||||
<th>Expires in</th>
|
|
||||||
<th>Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
{#each $locals.files as file}
|
|
||||||
<tr>
|
|
||||||
<td>{file.id}</td>
|
|
||||||
<td class="table-col-grow-cell"><a href="{file.url}">
|
|
||||||
<pre>{file.real_name}</pre>
|
|
||||||
</a></td>
|
|
||||||
<td>{(file.size / (1024 * 1024)).toFixed(2)}MB</td>
|
|
||||||
<td>
|
|
||||||
{#if file.expires_at}
|
|
||||||
<time datetime="{file.expires_at}" title="{file.expires_at}">
|
|
||||||
{Time.humanizeTimeTo(new Date(file.expires_at))}
|
|
||||||
</time>
|
|
||||||
{:else}
|
|
||||||
Never
|
|
||||||
{/if}
|
|
||||||
</td>
|
|
||||||
<td class="actions">
|
|
||||||
{#if file.shouldBeDeleted}
|
|
||||||
Pending deletion
|
|
||||||
{:else}
|
|
||||||
<CopyableText content="{file.url}" buttonMode/>
|
|
||||||
|
|
||||||
<Form action={route('delete-file-frontend', file.slug)} button
|
|
||||||
submitIcon="trash" submitText="delete" submitClass="danger"
|
|
||||||
confirm="Are you sure you want to delete file {file.real_name}?"/>
|
|
||||||
{/if}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{:else}
|
{:else}
|
||||||
<tr>
|
<Message type="info" discreet sticky
|
||||||
<td colspan="5" class="center">You haven't uploaded any file yet.</td>
|
content="When upload multiple files, URLs will be generated automatically."/>
|
||||||
</tr>
|
{/if}
|
||||||
{/each}
|
</Form>
|
||||||
</tbody>
|
</div>
|
||||||
</table>
|
|
||||||
|
|
||||||
<Pagination pagination={$locals.pagination} routeName="file-uploader" contextSize={3}/>
|
{#if uploading}
|
||||||
</section>
|
<FileUpload file={currentFile} form={uploadForm} fileFieldName="upload"
|
||||||
</div>
|
onEnd={onUploadEnd} autostart/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if finishedFileUploads.length > 0}
|
||||||
|
<section class="sub-panel new-files">
|
||||||
|
<hr>
|
||||||
|
<h3>
|
||||||
|
<Icon name="file-check"/>
|
||||||
|
Newly uploaded files
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{#each finishedFileUploads as fileUpload}
|
||||||
|
<CopyableText title="{fileUpload.name}" content="{fileUpload.finalUrl}"/>
|
||||||
|
{/each}
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if $locals.flash.url}
|
||||||
|
<CopyableText title="URL" content={$locals.flash.url}/>
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<h2>
|
||||||
|
<Icon name="folder"/>
|
||||||
|
File list
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<Pagination pagination={$locals.pagination} routeName="file-uploader" contextSize={3}/>
|
||||||
|
|
||||||
|
<table class="data-table file-upload-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>#</th>
|
||||||
|
<th class="col-grow">Name</th>
|
||||||
|
<th>Size</th>
|
||||||
|
<th>Expires in</th>
|
||||||
|
<th>Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
{#each $locals.files as file}
|
||||||
|
<tr>
|
||||||
|
<td>{file.id}</td>
|
||||||
|
<td class="col-grow-cell"><a href="{file.url}">
|
||||||
|
<pre>{file.real_name}</pre>
|
||||||
|
</a></td>
|
||||||
|
<td>{(file.size / (1024 * 1024)).toFixed(2)}MB</td>
|
||||||
|
<td>
|
||||||
|
{#if file.expires_at}
|
||||||
|
<time datetime="{file.expires_at}" title="{file.expires_at}">
|
||||||
|
{Time.humanizeTimeTo(new Date(file.expires_at))}
|
||||||
|
</time>
|
||||||
|
{:else}
|
||||||
|
Never
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
|
<td class="actions">
|
||||||
|
{#if file.shouldBeDeleted}
|
||||||
|
Pending deletion
|
||||||
|
{:else}
|
||||||
|
<CopyableText content="{file.url}" buttonMode/>
|
||||||
|
|
||||||
|
<Form action={route('delete-file-frontend', file.slug)} button
|
||||||
|
submitIcon="trash" submitText="delete" submitClass="danger"
|
||||||
|
confirm="Are you sure you want to delete file {file.real_name}?"/>
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{:else}
|
||||||
|
<tr>
|
||||||
|
<td colspan="5" class="center">You haven't uploaded any file yet.</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<Pagination pagination={$locals.pagination} routeName="file-uploader" contextSize={3}/>
|
||||||
|
</section>
|
||||||
</BaseTemplate>
|
</BaseTemplate>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user