add labels to file type inputs (#17677)
This commit is contained in:
parent
c81bec4d06
commit
63656d900a
|
@ -7,11 +7,11 @@
|
|||
</label>
|
||||
<div class="file has-name is-fullwidth">
|
||||
<div class="file-label" aria-label="Choose a file">
|
||||
<input class="file-input" type="file" onchange={{action "pickedFile"}} data-test-file-input />
|
||||
<span class="file-cta button">
|
||||
<input id="file-input" class="file-input" type="file" onchange={{action "pickedFile"}} data-test-file-input />
|
||||
<label for="file-input" class="file-cta button">
|
||||
<Icon @name="upload" class="has-light-grey-text" />
|
||||
Choose a file…
|
||||
</span>
|
||||
</label>
|
||||
<span class="file-name has-text-grey-dark" data-test-text-file-input-label={{true}}>
|
||||
{{or this.fileName "No file chosen"}}
|
||||
</span>
|
||||
|
|
|
@ -46,18 +46,24 @@
|
|||
<div class="control is-expanded">
|
||||
<div class="file">
|
||||
<div class="file-label is-fullwidth">
|
||||
<input class="file-input" type="file" onchange={{action "pickedFile"}} data-test-pgp-file-input={{true}} />
|
||||
<input
|
||||
id="file-input"
|
||||
class="file-input"
|
||||
type="file"
|
||||
onchange={{action "pickedFile"}}
|
||||
data-test-pgp-file-input={{true}}
|
||||
/>
|
||||
<span class="file-cta is-fullwidth">
|
||||
<span class="file-icon has-text-grey-dark">
|
||||
<Icon @name="file" />
|
||||
</span>
|
||||
<span class="file-label has-text-grey-dark" data-test-pgp-file-input-label={{true}}>
|
||||
<label for="file-input" class="file-label has-text-grey-dark" data-test-pgp-file-input-label={{true}}>
|
||||
{{#if this.key.fileName}}
|
||||
{{this.key.fileName}}
|
||||
{{else}}
|
||||
Choose a file…
|
||||
{{/if}}
|
||||
</span>
|
||||
</label>
|
||||
{{#if this.key.fileName}}
|
||||
<button type="button" class="file-delete-button" {{action "clearKey"}} data-test-pgp-clear={{true}}>
|
||||
<Icon @name="x" aria-label="Close" />
|
||||
|
|
|
@ -61,11 +61,17 @@
|
|||
<div class="control is-expanded">
|
||||
<div class="file has-name is-fullwidth">
|
||||
<div class="file-label" aria-label="Choose a file">
|
||||
<input class="file-input" type="file" {{on "change" this.pickedFile}} data-test-text-file-input={{true}} />
|
||||
<span class="file-cta button">
|
||||
<Input
|
||||
id="file-input"
|
||||
class="file-input"
|
||||
@type="file"
|
||||
{{on "change" this.pickedFile}}
|
||||
data-test-text-file-input={{true}}
|
||||
/>
|
||||
<label for="file-input" class="file-cta button">
|
||||
<Icon @name="upload" class="has-light-grey-text" />
|
||||
Choose a file…
|
||||
</span>
|
||||
</label>
|
||||
<span class="file-name has-text-grey-dark" data-test-text-file-input-label={{true}}>
|
||||
{{#if @file.fileName}}
|
||||
{{@file.fileName}}
|
||||
|
|
Loading…
Reference in New Issue