vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

FileUpload CSS refactor

pull/5677/head
Cagatay Civici 2024-04-20 15:45:44 +03:00
parent 29209eb1bf
commit 9c90990092
6 changed files with 48 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/fileupload/FileContent.vue
View File

@ -4,8 +4,8 @@
<div :class="cx('details')" v-bind="ptm('details')">
<div :class="cx('fileName')" v-bind="ptm('fileName')">{{ file.name }}</div>
<span :class="cx('fileSize')" v-bind="ptm('fileSize')">{{ formatSize(file.size) }}</span>
<Badge :value="badgeValue" :class="cx('badge')" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('badge')" />
</div>
<Badge :value="badgeValue" :class="cx('badge')" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('badge')" />
<div :class="cx('actions')" v-bind="ptm('actions')">
<Button @click="$emit('remove', index)" text rounded severity="danger" :class="cx('removeButton')" :unstyled="unstyled" :pt="ptm('removeButton')">
<template #icon="iconProps">

8
components/lib/fileupload/FileUpload.vue
View File

@ -30,10 +30,14 @@
<slot name="content" :files="files" :uploadedFiles="uploadedFiles" :removeUploadedFileCallback="removeUploadedFile" :removeFileCallback="remove" :progress="progress" :messages="messages">
<template v-if="hasFiles">
<ProgressBar :value="progress" :showValue="false" :unstyled="unstyled" :pt="ptm('progressbar')" />
<FileContent :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
<div v-if="hasFiles" :class="cx('fileList')">
<FileContent :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
</div>
</template>
<Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('message')">{{ msg }}</Message>
<FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
<div v-if="hasUploadedFiles" :class="cx('fileList')">
<FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
</div>
</slot>
<div v-if="$slots.empty && !hasFiles && !hasUploadedFiles" :class="cx('empty')" v-bind="ptm('empty')">
<slot name="empty"></slot>

25
components/lib/fileupload/style/FileUploadStyle.js
View File

@ -2,28 +2,23 @@ import BaseStyle from 'primevue/base/style';
const classes = {
root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`],
buttonbar: 'p-fileupload-buttonbar',
chooseButton: ({ instance, props }) => [
'p-fileupload-choose',
{
'p-fileupload-choose-selected': props.mode === 'basic' && instance.hasFiles,
'p-focus': instance.focused
}
],
chooseIcon: 'p-fileupload-choose-icon',
chooseButtonLabel: 'p-fileupload-choosebutton-label',
buttonbar: 'p-fileupload-header',
chooseButton: 'p-fileupload-choose-button', // TODO: Also add upload and clear
chooseIcon: 'p-fileupload-choose-icon', // TODO: remove
chooseButtonLabel: 'p-fileupload-choosebutton-label', // TODO: remove
content: 'p-fileupload-content',
empty: 'p-fileupload-empty',
uploadIcon: 'p-fileupload-upload-icon',
label: 'p-fileupload-button-label',
emptyContent: 'p-fileupload-empty-content', // TODO: remove
uploadIcon: 'p-fileupload-upload-icon', // TODO: remove
label: 'p-fileupload-button-label', // TODO: remove
fileList: 'p-fileupload-file-list',
file: 'p-fileupload-file',
thumbnail: 'p-fileupload-file-thumbnail',
details: 'p-fileupload-file-details',
details: 'p-fileupload-file-info',
fileName: 'p-fileupload-file-name',
fileSize: 'p-fileupload-file-size',
badge: 'p-fileupload-file-badge',
actions: 'p-fileupload-file-actions',
removeButton: 'p-fileupload-file-remove'
removeButton: 'p-fileupload-file-remove-button'
};
export default BaseStyle.extend({

59
components/lib/themes/primeone/base/fileupload/index.js
View File

@ -1,40 +1,28 @@
export default {
css: ({ dt }) => `
.p-fileupload-choose {
position: relative;
overflow: hidden;
}
.p-fileupload input[type="file"] {
display: none;
}
.p-fluid .p-fileupload .p-button {
width: auto;
.p-fileupload-advanced {
border: 1px solid ${dt('fileupload.border.color')};
border-radius: ${dt('rounded.base')};
background: ${dt('fileupload.background')};
color: ${dt('fileupload.color')};
}
.p-fileupload-buttonbar {
.p-fileupload-header {
display: flex;
align-items: center;
flex-wrap: wrap;
background: ${dt('fileupload.header.background')};
padding: 1.125rem;
border: 1px solid ${dt('fileupload.header.border.color')};
color: ${dt('fileupload.header.color')};
border-bottom: 0 none;
border-top-right-radius: ${dt('rounded.base')};
border-top-left-radius: ${dt('rounded.base')};
gap: 0.5rem;
}
.p-fileupload-content {
border: 1px solid transparent;
position: relative;
background: ${dt('fileupload.content.background')};
padding: 0 1.125rem 1.125rem 1.125rem;
border: 1px solid ${dt('fileupload.content.border.color')};
color: ${dt('fileupload.content.color')};
border-bottom-right-radius: ${dt('rounded.base')};
border-bottom-left-radius: ${dt('rounded.base')};
border-top: 0 none;
}
.p-fileupload-content .p-progressbar {
@ -45,21 +33,32 @@ export default {
height: 0.25rem;
}
.p-fileupload-file-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1.125rem;
}
.p-fileupload-file {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 1rem;
border: 1px solid ${dt('fileupload.file.border.color')};
border-radius: ${dt('rounded.base')};
border-bottom: 1px solid ${dt('fileupload.file.border.color')};
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.p-fileupload-file:last-child {
margin-bottom: 0;
border-bottom: 0;
}
.p-fileupload-file-info {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.p-fileupload-file-thumbnail {
flex-shrink: 0;
}
@ -73,18 +72,6 @@ export default {
background: ${dt('fileupload.content.highlight.background')};
}
.p-fileupload-file-name {
margin-bottom: 0.5rem;
}
.p-fileupload-file-size {
margin-right: 0.5rem;
}
.p-fileupload-row > div {
padding: 0.75rem 1rem;
}
.p-fileupload-advanced .p-message {
margin-top: 0;
}

14
components/lib/themes/primeone/presets/aura/fileupload/index.js
View File

@ -1,37 +1,31 @@
export default {
colorScheme: {
light: {
header: {
root: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{surface.700}'
},
content: {
background: '{surface.0}',
highlightBackground: '{highlight.background}',
borderColor: '{surface.200}',
highlightBorderColor: '{highlight.color}',
color: '{surface.700}'
},
file: {
borderColor: '{surface.200}'
}
},
dark: {
header: {
root: {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{surface.0}'
},
content: {
background: '{surface.900}',
highlightBackground: '{highlight.background}',
borderColor: '{surface.700}',
highlightBorderColor: '{highlight.color}',
color: '{surface.0}'
highlightBorderColor: '{highlight.color}'
},
file: {
borderColor: '{surface.200}'
borderColor: '{surface.700}'
}
}
}

8
doc/fileupload/AdvancedDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card">
<FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
<template #empty>
<p>Drag and drop files to here to upload.</p>
<span>Drag and drop files to here to upload.</span>
</template>
</FileUpload>
</div>
@ -20,7 +20,7 @@ export default {
basic: `
<FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
<template #empty>
<p>Drag and drop files to here to upload.</p>
<span>Drag and drop files to here to upload.</span>
</template>
</FileUpload>
`,
@ -30,7 +30,7 @@ export default {
<Toast />
<FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
<template #empty>
<p>Drag and drop files to here to upload.</p>
<span>Drag and drop files to here to upload.</span>
</template>
</FileUpload>
</div>
@ -52,7 +52,7 @@ export default {
<Toast />
<FileUpload name="demo[]" url="/api/upload" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
<template #empty>
<p>Drag and drop files to here to upload.</p>
<span>Drag and drop files to here to upload.</span>
</template>
</FileUpload>
</div>