Add compact setting to AttachmentField (#9052)
This commit is contained in:
melohagan
GitHub
parent
c18c8d5af4
commit
f5c902fb57
|
|
@ -15,6 +15,7 @@
|
|||
export let value = []
|
||||
export let id = null
|
||||
export let disabled = false
|
||||
export let compact = false
|
||||
export let fileSizeLimit = BYTES_IN_MB * 20
|
||||
export let processFiles = null
|
||||
export let deleteAttachments = null
|
||||
|
|
@ -239,70 +240,72 @@
|
|||
bind:this={fileInput}
|
||||
on:change={handleFile}
|
||||
/>
|
||||
<svg
|
||||
class="spectrum-IllustratedMessage-illustration"
|
||||
width="125"
|
||||
height="60"
|
||||
viewBox="0 0 199 97.7"
|
||||
>
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1,
|
||||
.cls-2 {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
.cls-1 {
|
||||
stroke-width: 3px;
|
||||
}
|
||||
.cls-2 {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path
|
||||
class="cls-1"
|
||||
d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
|
||||
/>
|
||||
<line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" />
|
||||
<path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" />
|
||||
<path
|
||||
class="cls-1"
|
||||
d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"
|
||||
/>
|
||||
<line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
|
||||
<path
|
||||
class="cls-2"
|
||||
d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
|
||||
/>
|
||||
<path
|
||||
class="cls-2"
|
||||
d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
|
||||
/>
|
||||
<path
|
||||
class="cls-2"
|
||||
d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
|
||||
/>
|
||||
<path
|
||||
class="cls-1"
|
||||
d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
|
||||
/>
|
||||
<rect
|
||||
class="cls-1"
|
||||
x="1.5"
|
||||
y="34.5"
|
||||
width="58"
|
||||
height="39"
|
||||
rx="2"
|
||||
ry="2"
|
||||
/>
|
||||
</svg>
|
||||
<h2
|
||||
class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading"
|
||||
>
|
||||
Drag and drop your file
|
||||
</h2>
|
||||
{#if !compact}
|
||||
<svg
|
||||
class="spectrum-IllustratedMessage-illustration"
|
||||
width="125"
|
||||
height="60"
|
||||
viewBox="0 0 199 97.7"
|
||||
>
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1,
|
||||
.cls-2 {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
.cls-1 {
|
||||
stroke-width: 3px;
|
||||
}
|
||||
.cls-2 {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path
|
||||
class="cls-1"
|
||||
d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
|
||||
/>
|
||||
<line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" />
|
||||
<path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" />
|
||||
<path
|
||||
class="cls-1"
|
||||
d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"
|
||||
/>
|
||||
<line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
|
||||
<path
|
||||
class="cls-2"
|
||||
d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
|
||||
/>
|
||||
<path
|
||||
class="cls-2"
|
||||
d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
|
||||
/>
|
||||
<path
|
||||
class="cls-2"
|
||||
d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
|
||||
/>
|
||||
<path
|
||||
class="cls-1"
|
||||
d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
|
||||
/>
|
||||
<rect
|
||||
class="cls-1"
|
||||
x="1.5"
|
||||
y="34.5"
|
||||
width="58"
|
||||
height="39"
|
||||
rx="2"
|
||||
ry="2"
|
||||
/>
|
||||
</svg>
|
||||
<h2
|
||||
class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading"
|
||||
>
|
||||
Drag and drop your file
|
||||
</h2>
|
||||
{/if}
|
||||
{#if !disabled}
|
||||
<p
|
||||
class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
|
||||
|
|
@ -310,8 +313,10 @@
|
|||
<label for={fieldId} class="spectrum-Link">
|
||||
Select a file to upload
|
||||
</label>
|
||||
<br />
|
||||
from your computer
|
||||
{#if !compact}
|
||||
<br />
|
||||
from your computer
|
||||
{/if}
|
||||
</p>
|
||||
{#if fileTags.length}
|
||||
<Tags>
|
||||
|
|
|
|||
|
|
@ -3440,6 +3440,12 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "boolean",
|
||||
"label": "Compact",
|
||||
"key": "compact",
|
||||
"defaultValue": false
|
||||
},
|
||||
{
|
||||
"type": "boolean",
|
||||
"label": "Disabled",
|
||||
|
|
@ -3785,7 +3791,6 @@
|
|||
"defaultValue": false,
|
||||
"info": "Row selection is only compatible with internal or SQL tables"
|
||||
},
|
||||
|
||||
{
|
||||
"section": true,
|
||||
"name": "On Row Click",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
export let field
|
||||
export let label
|
||||
export let disabled = false
|
||||
export let compact = false
|
||||
export let validation
|
||||
export let extensions
|
||||
export let onChange
|
||||
|
|
@ -89,6 +90,7 @@
|
|||
{handleTooManyFiles}
|
||||
{maximum}
|
||||
{extensions}
|
||||
{compact}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -96,6 +98,6 @@
|
|||
|
||||
<style>
|
||||
.minHeightWrapper {
|
||||
min-height: 220px;
|
||||
min-height: 80px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue