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