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
+32 -8
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">
<Preview record={record} size={record._file?.width > 0 ? "medium" : "small"}/>
<div>
<a
href="{channel.lucentUrl}/records/{record.id}"
target={inModal ? "_blank" : "_self"}
>
{previewTitle(channel.schemas, record, graph)}
</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} {/if}
<a
class="me-2 text-decoration-none text-dark fs-6"
href="{channel.lucentUrl}/records/{record.id}"
target={inModal ? "_blank" : "_self"}
>
{previewTitle(channel.schemas, record, graph)}
</a>
</div> </div>
</td> </td>
front/js/svelte/records/FilePreview.svelte
+33 -40
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
+1 -4
View File
@@ -36,10 +36,7 @@ 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(
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 {
@@ -109,4 +122,24 @@
line-height: 14px; line-height: 14px;
} }
}
.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
+116 -94
View File
@@ -1,106 +1,128 @@
.table { .table {
min-width: 600px; min-width: 600px;
overflow: auto; overflow: auto;
background: var(--p20);
padding: 1px;
font-size: 14px;
border-radius: 12px;
table {
background: var(--p20); background: var(--p20);
padding: 1px; width: 100%;
font-size: 14px; border-collapse: separate;
border: none;
border-spacing: 0;
}
thead {
border-radius: 12px; border-radius: 12px;
table {
tr {
border-radius: 12px;
}
}
th {
font-size: 14px;
font-weight: normal;
white-space: nowrap;
max-width: 400px;
border: none;
background: var(--p20);
text-align: left;
padding: 8px 16px;
&.is-sort {
font-weight: 700;
}
&:first-child {
border-radius: 12px 0 0 0;
}
&:last-child {
border-radius: 0 12px 0 0;
}
}
td {
font-weight: normal;
white-space: nowrap;
max-width: 400px;
height: 48px;
padding: 4px 16px;
border: none;
overflow: hidden;
//img{
// width: 48px;
//}
.status {
color: var(--text);
font-size: 80%;
}
.row-name {
display: flex;
align-items: center;
gap: 6px;
}
.title-td-contents {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
line-height: 14px;
}
}
tbody {
tr {
border-radius: 12px;
background: var(--p10);
border: none;
&:has(input:checked) {
background: var(--p30);
}
&:hover {
background: var(--p20); background: var(--p20);
width: 100%; }
border-collapse:separate;
border: none;
border-spacing: 0;
} }
thead{ }
border-radius: 12px;
tr{
border-radius: 12px;
}
}
th {
font-size: 14px;
font-weight: normal;
white-space: nowrap;
max-width: 400px;
border: none;
background: var(--p20);
text-align: left;
padding: 8px 16px;
&.is-sort {
font-weight: 700;
}
&:first-child{
border-radius: 12px 0 0 0 ;
}
&:last-child{
border-radius: 0 12px 0 0;
}
}
td {
font-weight: normal;
white-space: nowrap;
max-width: 400px;
height: 48px;
padding: 4px 16px;
border: none;
overflow: hidden;
//img{ tr:nth-child(odd) {
// width: 48px; //background-color: #f9f9f9;
//} }
.status{ td:nth-child(odd) {
color:var(--text); // border-left: 1px solid #e4e4e4;
font-size: 80%; // border-right: 1px solid #e4e4e4;
} }
.row-name{
display: flex;
align-items: center;
gap: 6px;
}
.title-td-contents{ th:nth-child(odd) {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
line-height: 14px;
}
}
tbody{
tr {
border-radius: 12px;
background: var(--p10);
border: none;
&:has(input:checked){
background: var(--p30);
}
&:hover{
background: var(--p20);
}
}
}
}
tr:nth-child(odd) { .field-ui-number {
//background-color: #f9f9f9; text-align: right;
} }
}
td:nth-child(odd) {
// border-left: 1px solid #e4e4e4; .file-table-row {
// border-right: 1px solid #e4e4e4; display: flex;
} align-items: center;
th:nth-child(odd) { gap: 5px;
} & > div {
display: flex;
.field-ui-number { flex-flow: column;
text-align: right; gap: 5px;
} }
} }