vault/ui/app/templates/components/pgp-file.hbs
Jordan Reimer d8112714cf
Incorporate Ember Flight Icons (#12976)
* adds ember-flight-icons dependecy

* adds inline-json-import babel plugin

* adds flight icon styling

* updates Icon component to support flight icons

* updates Icon component usages to new api and updates name values to flight icon set when available

* fixes tests

* updates icon story with flight mappings and fixes issue with flight icons not rendering in storybook

* adds changelog

* fixes typo in sign action glyph name in transit-key model

* adds comments to icon-map

* updates Icon component to use only supported flight icon sizes

* adds icon transform codemod

* updates icon transform formatting to handle edge case

* runs icon transform on templates

* updates Icon usage in toolbar-filter md and story

* updates tests
2021-12-07 10:05:14 -07:00

78 lines
2.2 KiB
Handlebars

<div class="level is-mobile">
<div class="level-left">
<label class="is-label" data-test-pgp-label>
{{#if label}}
{{label}}
{{else}}
PGP KEY {{if (not-eq index '') (inc index)}}
{{/if}}
</label>
</div>
<div class="level-right">
<div class="control is-flex">
<input
data-test-text-toggle
id={{concat "useText-" elementId}}
type="checkbox"
name={{concat "useText-" elementId}}
class="switch is-rounded is-success is-small"
checked={{key.enterAsText}}
onchange={{action (toggle "enterAsText" key)}}
/>
<label for={{concat "useText-" elementId}}>
Enter as text
</label>
</div>
</div>
</div>
<div class="field">
{{#if key.enterAsText}}
<div class="control">
<textarea
class="textarea"
oninput={{action "updateData"}}
data-test-pgp-file-textarea=true
>{{key.value}}</textarea>
</div>
<p class="help has-text-grey">
{{#if textareaHelpText}}
{{textareaHelpText}}
{{else}}
Enter a base64-encoded key
{{/if}}
</p>
{{else}}
<div class="control is-expanded">
<div class="file">
<label class="file-label is-fullwidth">
<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>
{{#if key.fileName}}
{{key.fileName}}
{{else}}
Choose a file&hellip;
{{/if}}
</span>
{{#if key.fileName}}
<button type="button" class="file-delete-button" {{action 'clearKey'}} data-test-pgp-clear=true>
<Icon @name="x" aria-label="Close" />
</button>
{{/if}}
</span>
</label>
</div>
</div>
<p class="help has-text-grey">
{{#if fileHelpText}}
{{fileHelpText}}
{{else}}
Select a PGP key from your computer
{{/if}}
</p>
{{/if}}
</div>