Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Upload dialog: improve preview icon #6424

Merged
merged 10 commits into from
May 3, 2024
Merged

Upload dialog: improve preview icon #6424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d2465a1
Upload dialog: improve preview icon
distantnative Apr 30, 2024
485f298
DRY with `<k-upload-dialog-preview>`
distantnative Apr 30, 2024
34927ce
CSS fixes
distantnative Apr 30, 2024
cde68a2
New upload item components
bastianallgeier May 2, 2024
af58c78
New lab examples
bastianallgeier May 2, 2024
ad2936f
Fix replace dialog
bastianallgeier May 2, 2024
ca37589
Merge upload components lab examples
distantnative May 2, 2024
ecaea19
Use `k-upload-item` for upload replace dialog
distantnative May 2, 2024
d363939
Upload item preview: fallback colors for mime type
distantnative May 2, 2024
78c175b
Last finishing touches
bastianallgeier May 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions panel/lab/components/uploads/1_upload-items/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<?php

return [
'docs' => 'k-upload-items',
];
54 changes: 54 additions & 0 deletions panel/lab/components/uploads/1_upload-items/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<template>
<k-lab-examples>
<k-lab-example label="Upload Items">
<k-upload-items :items="items" @remove="remove" @rename="rename" />
</k-lab-example>
</k-lab-examples>
</template>

<script>
export default {
computed: {
items() {
return [
{
extension: "jpeg",
type: "image/jpeg",
name: "test",
niceSize: "128 KB",
url: "https://picsum.photos/200/200"
},
{
extension: "pdf",
type: "application/pdf",
name: "document",
niceSize: "1.5 MB",
url: "/some.pdf"
},
{
extension: "mp4",
type: "video/mp4",
name: "screencast",
niceSize: "3 GB",
url: "/some.mp4"
},
{
extension: "mp3",
type: "audio/mp3",
name: "song",
niceSize: "2.5 MB",
url: "/some.mp3"
}
];
}
},
methods: {
remove(file) {
console.log("Remove", { file });
},
rename(file, name) {
console.log("Rename", { file, name });
}
}
};
</script>
5 changes: 5 additions & 0 deletions panel/lab/components/uploads/2_upload-item/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<?php

return [
'docs' => 'k-upload-item',
];
74 changes: 74 additions & 0 deletions panel/lab/components/uploads/2_upload-item/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<template>
<k-lab-examples>
<k-lab-example label="Upload Item">
<k-upload-item
extension="jpeg"
type="image/jpeg"
name="test"
niceSize="128 kB"
url="https://picsum.photos/200/200"
@remove="remove"
@rename="rename"
/>
</k-lab-example>
<k-lab-example label="Progress">
<k-upload-item
:progress="80"
extension="jpeg"
type="image/jpeg"
name="test"
niceSize="128 kB"
url="https://picsum.photos/200/200"
@remove="remove"
@rename="rename"
/>
</k-lab-example>
<k-lab-example label="Completed">
<k-upload-item
:completed="true"
extension="jpeg"
type="image/jpeg"
name="test"
niceSize="128 kB"
url="https://picsum.photos/200/200"
@remove="remove"
@rename="rename"
/>
</k-lab-example>
<k-lab-example label="Not editable">
<k-upload-item
:editable="false"
extension="jpeg"
type="image/jpeg"
name="test"
niceSize="128 kB"
url="https://picsum.photos/200/200"
/>
</k-lab-example>
<k-lab-example label="Error">
<k-upload-item
extension="jpeg"
type="image/jpeg"
name="test"
niceSize="128 kB"
error="The file could not be uploaded"
url="https://picsum.photos/200/200"
@remove="remove"
@rename="rename"
/>
</k-lab-example>
</k-lab-examples>
</template>

<script>
export default {
methods: {
remove() {
console.log("Remove");
},
rename(name) {
console.log("Rename to", name);
}
}
};
</script>
5 changes: 5 additions & 0 deletions panel/lab/components/uploads/3_upload-item-preview/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<?php

return [
'docs' => 'k-upload-item-preview',
];
34 changes: 34 additions & 0 deletions panel/lab/components/uploads/3_upload-item-preview/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<template>
<k-lab-examples>
<k-lab-example label="Image with preview">
<k-upload-item-preview
type="image/jpeg"
url="https://picsum.photos/200/200"
/>
</k-lab-example>
<k-lab-example label="Image without preview">
<k-upload-item-preview
type="image/bitmap"
url="https://picsum.photos/200/200"
/>
</k-lab-example>
<k-lab-example label="Audio">
<k-upload-item-preview type="audio/mp3" url="/some.mp3" />
</k-lab-example>
<k-lab-example label="Video">
<k-upload-item-preview type="video/mp4" url="/some.mp4" />
</k-lab-example>
<k-lab-example label="Icon">
<k-upload-item-preview icon="image" url="/some.mp4" />
</k-lab-example>
<k-lab-example label="Color">
<k-upload-item-preview color="pink-500" icon="heart" url="/some.mp4" />
</k-lab-example>
</k-lab-examples>
</template>

<style>
.k-lab-example .k-upload-item-preview {
width: 6rem;
}
</style>
191 changes: 24 additions & 167 deletions panel/src/components/Dialogs/UploadDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,81 +8,31 @@
@submit="$emit('submit')"
>
<k-dropzone @drop="$panel.upload.select($event)">
<template v-if="$panel.upload.files.length === 0">
<k-empty icon="upload" layout="cards" @click="$panel.upload.pick()">
{{ $t("files.empty") }}
</k-empty>
</template>
<template v-else>
<ul class="k-upload-items">
<li
v-for="file in $panel.upload.files"
:key="file.id"
:data-completed="file.completed"
class="k-upload-item"
>
<a :href="file.url" class="k-upload-item-preview" target="_blank">
<k-image-frame
v-if="isPreviewable(file.type)"
:cover="true"
:src="file.url"
back="pattern"
/>
<k-icon-frame
v-else
back="black"
color="white"
ratio="1/1"
icon="file"
/>
</a>
<k-input
:disabled="file.completed"
:after="'.' + file.extension"
:novalidate="true"
:required="true"
:value="file.name"
class="k-upload-item-input"
type="slug"
@input="file.name = $event"
/>
<div class="k-upload-item-body">
<p class="k-upload-item-meta">
{{ file.niceSize }}
<template v-if="file.progress">
- {{ file.progress }}%
</template>
</p>
<p v-if="file.error" class="k-upload-item-error">
{{ file.error }}
</p>
<k-progress
v-else-if="file.progress"
:value="file.progress"
class="k-upload-item-progress"
/>
</div>
<div class="k-upload-item-toggle">
<k-button
v-if="!file.completed && !file.progress"
icon="remove"
@click="$panel.upload.remove(file.id)"
/>
<!-- No files yet -->
<k-empty
v-if="$panel.upload.files.length === 0"
icon="upload"
layout="cards"
@click="$panel.upload.pick()"
>
{{ $t("files.empty") }}
</k-empty>

<div v-else-if="!file.completed">
<k-icon type="loader" />
</div>

<k-button
v-else
icon="check"
theme="positive"
@click="$panel.upload.remove(file.id)"
/>
</div>
</li>
</ul>
</template>
<!-- Files list -->
<k-upload-items
v-else
:items="$panel.upload.files"
@remove="
(file) => {
$panel.upload.remove(file.id);
}
"
@rename="
(file, name) => {
file.name = name;
}
"
/>
</k-dropzone>
</k-dialog>
</template>
Expand All @@ -105,19 +55,6 @@ export default {
};
}
}
},
methods: {
isPreviewable(mime) {
return [
"image/jpeg",
"image/jpg",
"image/gif",
"image/png",
"image/webp",
"image/avif",
"image/svg+xml"
].includes(mime);
}
}
};
</script>
Expand All @@ -126,84 +63,4 @@ export default {
.k-upload-dialog.k-dialog {
--dialog-width: 40rem;
}

.k-upload-items {
display: grid;
gap: 0.25rem;
}
.k-upload-item {
accent-color: var(--color-focus);
display: grid;
grid-template-areas:
"preview input input"
"preview body toggle";
grid-template-columns: 6rem 1fr auto;
grid-template-rows: var(--input-height) 1fr;
border-radius: var(--rounded);
background: var(--color-white);
box-shadow: var(--shadow);
min-height: 6rem;
}
.k-upload-item-preview {
grid-area: preview;
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
border-start-start-radius: var(--rounded);
border-end-start-radius: var(--rounded);
}
.k-upload-item-preview:focus {
border-radius: var(--rounded);
outline: 2px solid var(--color-focus);
z-index: 1;
}

.k-upload-item-body {
grid-area: body;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--spacing-2) var(--spacing-3);
min-width: 0;
}
.k-upload-item-input.k-input {
--input-color-border: transparent;
--input-padding: var(--spacing-2) var(--spacing-3);
--input-rounded: 0;
grid-area: input;
font-size: var(--text-sm);
border-bottom: 1px solid var(--color-light);
}
.k-upload-item-input.k-input:focus-within {
outline: 2px solid var(--color-focus);
z-index: 1;
border-radius: var(--rounded);
}
.k-upload-item-input .k-input-after {
color: var(--color-gray-600);
}
.k-upload-item-meta {
font-size: var(--text-xs);
color: var(--color-gray-600);
}
.k-upload-item-error {
font-size: var(--text-xs);
margin-top: 0.25rem;
color: var(--color-red-700);
}
.k-upload-item-progress {
--progress-height: 0.25rem;
--progress-color-back: var(--color-light);
}
.k-upload-item-toggle {
grid-area: toggle;
align-self: end;
}
.k-upload-item-toggle > * {
padding: var(--spacing-3);
}
.k-upload-item[data-completed] .k-upload-item-progress {
--progress-color-value: var(--color-green-400);
}
</style>
Loading
Loading