vault/ui/app/templates/components/text-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

85 lines
2.7 KiB
Handlebars

{{#unless this.inputOnly}}
<div class="level is-mobile">
<div class="level-left">
<label class="is-label" data-test-text-label=true>
{{#if this.label}}
{{this.label}}
{{#if @helpText}}
<InfoTooltip>
<span data-test-help-text>
{{@helpText}}
</span>
</InfoTooltip>
{{/if}}
{{else}}
File
{{/if}}
</label>
</div>
<div class="level-right">
<div class="control is-flex">
<input
data-test-text-toggle=true
id={{concat "useText-" this.elementId}}
type="checkbox"
name={{concat "useText-" this.elementId}}
class="switch is-rounded is-success is-small"
checked={{@file.enterAsText}}
{{on 'change' (toggle "enterAsText" @file)}}
/>
<label for={{concat "useText-" this.elementId}}>
Enter as text
</label>
</div>
</div>
</div>
{{/unless}}
<div class="field text-file box is-fullwidth is-marginless is-shadowless {{if this.inputOnly "is-paddingless"}}" data-test-component="text-file">
{{#if @file.enterAsText}}
<div class="control has-icon-right">
<textarea
class="textarea {{unless showValue "masked-font"}}"
{{on 'input' this.updateData}}
data-test-text-file-textarea=true
>{{@file.value}}</textarea>
<button
{{on 'click' this.toggleMask}}
type="button"
class="{{if (eq value "") "has-text-grey"}} masked-input-toggle button {{if displayOnly "is-compact"}}"
data-test-button>
<Icon @name={{if showValue "eye" "eye-off"}} />
</button>
</div>
<p class="help has-text-grey">
{{this.textareaHelpText}}
</p>
{{else}}
<div class="control is-expanded">
<div class="file has-name is-fullwidth">
<label class="file-label">
<input class="file-input" type="file" {{on 'change' this.pickedFile}} data-test-text-file-input=true>
<span class="file-cta button">
<Icon @name="upload" class="has-light-grey-text" />
Choose a file…
</span>
<span class="file-name has-text-grey-dark" data-test-text-file-input-label=true>
{{#if @file.fileName}}
{{@file.fileName}}
{{else}}
No file chosen
{{/if}}
</span>
{{#if @file.fileName}}
<button type="button" class="file-delete-button" {{on 'click' this.clearFile}} data-test-text-clear=true>
<Icon @name="x-circle" />
</button>
{{/if}}
</label>
</div>
</div>
<p class="help has-text-grey">
{{this.fileHelpText}}
</p>
{{/if}}
</div>