lucent/lucent-laravel
2
0
Fork 0
Code Issues 14 Pull Requests Releases 1 Activity

file previews

Browse Source
This commit is contained in:
Alex Lingris
2024-08-17 20:31:04 +03:00
parent 322962403d
commit 36165444cf
7 changed files with 219 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/js/svelte/content/Table.svelte
+27 -3
View File
@@ -7,6 +7,7 @@
import {selectRecord, toggleAll} from "./functions/recordSelect.js"; import {selectRecord, toggleAll} from "./functions/recordSelect.js";
import Checkbox from "../common/Checkbox.svelte"; import Checkbox from "../common/Checkbox.svelte";
import Preview from "../files/Preview.svelte"; import Preview from "../files/Preview.svelte";
import {fileurl} from "../files/imageserver.js";
const channel = getContext("channel"); const channel = getContext("channel");
@@ -80,15 +81,38 @@
{/if} {/if}
{#if record._file?.path} {#if record._file?.path}
<Preview record={record} size={record._file?.width > 0 ? "medium" : "tiny"}/> <div class="file-table-row">
{/if} <Preview record={record} size={record._file?.width > 0 ? "medium" : "small"}/>
<div>
<a <a
class="me-2 text-decoration-none text-dark fs-6"
href="{channel.lucentUrl}/records/{record.id}" href="{channel.lucentUrl}/records/{record.id}"
target={inModal ? "_blank" : "_self"} target={inModal ? "_blank" : "_self"}
> >
{previewTitle(channel.schemas, record, graph)} {previewTitle(channel.schemas, record, graph)}
</a> </a>
<span>{(record._file.size / 1024).toFixed(1)}kB</span>
{#if record._file.width > 0}
<span>{record._file.width + "x" + record._file.height}</span>
{/if}
<a
href="{fileurl(record)}"
target="_blank"
>
Download
</a>
</div>
</div>
{:else}
<a
href="{channel.lucentUrl}/records/{record.id}"
target={inModal ? "_blank" : "_self"}
>
{previewTitle(channel.schemas, record, graph)}
</a>
{/if}
</div> </div>
</td> </td>
front/js/svelte/records/FilePreview.svelte
+19 -26
View File
@@ -7,49 +7,42 @@
</script> </script>
{#if schema.type === "files"} {#if schema.type === "files"}
<div class="row mb-4"> <div class="record-edit-file-preview">
<div class="col" style="max-width:276px"> <div>
<Preview {record} size="large"/> <Preview {record} size="large"/>
</div> </div>
<div class="col"> <div class="file-details">
<ul class="list-group ">
<li class="list-group-item border-primary"> <div class="file-details-item">
<span class="text-muted">Filename</span> <span class="text-muted">Filename</span>
<span>{record._file.path}</span> <span>{record._file.path}</span>
</li> </div>
<li class="list-group-item border-primary"> <div class="file-details-item">
<span class="text-muted">Original name</span> <span class="text-muted">Original name</span>
<span>{record._file.originalName}</span> <span>{record._file.originalName}</span>
</li> </div>
<li class="list-group-item border-primary"> <div class="file-details-item">
<span class="text-muted">Mime type</span> <span class="text-muted">Mime type</span>
<span>{record._file.mime}</span> <span>{record._file.mime}</span>
</li> </div>
{#if record._file.width} {#if record._file.width}
<li class="list-group-item border-primary"> <div class="file-details-item">
<span class="text-muted">Dimensions</span> <span class="text-muted">Dimensions</span>
<span>{record._file.width}x{record._file.height}</span> <span>{record._file.width}x{record._file.height}</span>
</li> </div>
{/if} {/if}
<li class="list-group-item border-primary"> <div class="file-details-item">
<span class="text-muted">File size</span> <span class="text-muted">File size</span>
<span>{(record._file.size / 1024).toFixed(1)}kB</span> <span>{(record._file.size / 1024).toFixed(1)}kB</span>
</li> </div>
<li class="list-group-item border-primary"> <div class="file-details-item">
<span class="text-muted">Checksum</span> <span class="text-muted">Checksum</span>
<span>{record._file.checksum}</span> <span>{record._file.checksum}</span>
</li> </div>
<li class="list-group-item border-primary"> <div class="file-details-item">
<span class="text-muted">Download</span> <a class="button primary" target="_blank" style="display: inline-flex" href="{fileurl(record)}">Download</a>
<a href="{fileurl(record)}">{record._file.path}</a> </div>
</li>
</ul>
</div> </div>
</div> </div>
{/if} {/if}
<style>
.list-group {
font-size: 14px;
}
</style>
front/js/svelte/records/Preview.js
-3
View File
@@ -36,11 +36,8 @@ export function previewTitle(schemas, record, graph) {
function noTemplate(schema, record) { function noTemplate(schema, record) {
if (schema?.type === "files") { if (schema?.type === "files") {
if(record._file.width === 0){
return record._file.path; return record._file.path;
} }
return record._file.path + " " + record._file.width+"x"+record._file.height ;
}
let title = stripHtml( let title = stripHtml(
record?.data[schema.fields.filter((f) => f.info.name === "text")[0]?.name] record?.data[schema.fields.filter((f) => f.info.name === "text")[0]?.name]
front/sass/_dialog.scss
+1 -1
View File
@@ -21,7 +21,7 @@ dialog {
border-radius: 12px; border-radius: 12px;
overflow: auto; overflow: auto;
max-height: 96vh; max-height: 96vh;
box-shadow: none; box-shadow: none!important;
//position: relative; //position: relative;
.close { .close {
front/sass/_dropdown.scss
+1
View File
@@ -24,6 +24,7 @@
flex-grow: 1; flex-grow: 1;
top: 35px; top: 35px;
min-width: max-content; min-width: max-content;
border: 1px solid var(--p30);
&.orientation-right { &.orientation-right {
front/sass/_record-edit.scss
+35 -2
View File
@@ -44,12 +44,25 @@
margin: 6px 0; margin: 6px 0;
border-color: transparent; border-color: transparent;
.button{ .button {
background: var(--p30); background: var(--p30);
&:hover{
&:hover {
background: var(--p40); background: var(--p40);
} }
} }
dialog {
.button {
background: var(--p20);
&:hover {
background: var(--p30);
}
}
}
} }
.field-header { .field-header {
@@ -110,3 +123,23 @@
} }
} }
.record-edit-file-preview {
display: flex;
gap: 20px;
.file-details {
width: 50%;
display: flex;
flex-direction: column;
gap: 5px;
}
.file-details-item {
.text-muted {
color: var(--grey-dark);
}
}
}
front/sass/_table.scss
+35 -13
View File
@@ -5,16 +5,19 @@
padding: 1px; padding: 1px;
font-size: 14px; font-size: 14px;
border-radius: 12px; border-radius: 12px;
table { table {
background: var(--p20); background: var(--p20);
width: 100%; width: 100%;
border-collapse:separate; border-collapse: separate;
border: none; border: none;
border-spacing: 0; border-spacing: 0;
} }
thead{
thead {
border-radius: 12px; border-radius: 12px;
tr{
tr {
border-radius: 12px; border-radius: 12px;
} }
@@ -33,10 +36,12 @@
&.is-sort { &.is-sort {
font-weight: 700; font-weight: 700;
} }
&:first-child{
border-radius: 12px 0 0 0 ; &:first-child {
border-radius: 12px 0 0 0;
} }
&:last-child{
&:last-child {
border-radius: 0 12px 0 0; border-radius: 0 12px 0 0;
} }
} }
@@ -55,17 +60,18 @@
// width: 48px; // width: 48px;
//} //}
.status{ .status {
color:var(--text); color: var(--text);
font-size: 80%; font-size: 80%;
} }
.row-name{
.row-name {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
} }
.title-td-contents{ .title-td-contents {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
@@ -73,15 +79,18 @@
line-height: 14px; line-height: 14px;
} }
} }
tbody{
tbody {
tr { tr {
border-radius: 12px; border-radius: 12px;
background: var(--p10); background: var(--p10);
border: none; border: none;
&:has(input:checked){
&:has(input:checked) {
background: var(--p30); background: var(--p30);
} }
&:hover{
&:hover {
background: var(--p20); background: var(--p20);
} }
} }
@@ -96,6 +105,7 @@
// border-left: 1px solid #e4e4e4; // border-left: 1px solid #e4e4e4;
// border-right: 1px solid #e4e4e4; // border-right: 1px solid #e4e4e4;
} }
th:nth-child(odd) { th:nth-child(odd) {
} }
@@ -104,3 +114,15 @@
text-align: right; text-align: right;
} }
} }
.file-table-row {
display: flex;
align-items: center;
gap: 5px;
& > div {
display: flex;
flex-flow: column;
gap: 5px;
}
}