Skip to content

Commit

Permalink
Revert "FIO-3820"
Browse files Browse the repository at this point in the history
  • Loading branch information
@lane-formio
lane-formio committed Aug 20, 2024
1 parent f2326e0 commit 37b9884
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 159 deletions.
128 changes: 47 additions & 81 deletions src/templates/bootstrap4/file/form.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,23 @@
<ul class="list-group list-group-striped">
<li class="list-group-item list-group-header hidden-xs hidden-sm">
<div class="row">
<div class="col-md-{{ctx.columns.name}}"><strong>{{ctx.t('File Name')}}</strong></div>
<div class="col-md-{{ctx.columns.size}}"><strong>{{ctx.t('Size')}}</strong></div>
{% if (!ctx.disabled) { %}
<div class="col-md-1"></div>
{% } %}
<div class="col-md-{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %}"><strong>{{ctx.t('File Name')}}</strong></div>
<div class="col-md-2"><strong>{{ctx.t('Size')}}</strong></div>
{% if (ctx.self.hasTypes) { %}
<div class="col-md-{{ctx.columns.type}}"><strong>{{ctx.t('Type')}}</strong></div>
<div class="col-md-2"><strong>{{ctx.t('Type')}}</strong></div>
{% } %}
<div class="col-md-{{ctx.columns.actions}} justify-center">
{% if (ctx.showSyncButton) { %}
<button
class="btn btn-primary btn-sm"
ref="syncNow"
{% if (ctx.disabled || ctx.isSyncing) { %}disabled=true{% } %}
>{{ctx.isSyncing ? ctx.t('Syncing...') : ctx.t('Sync Now')}}</button>
{% } %}
</div>
</div>
</li>
{% ctx.files.forEach(function(file) { %}
<li class="list-group-item">
<div class="row">
<div class="col-md-{{ctx.columns.name}}">
{% if (!ctx.disabled) { %}
<div class="col-md-1"><i tabindex="0" class="{{ctx.iconClass('remove')}}" ref="removeLink"></i></div>
{% } %}
<div class="col-md-{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %}">
{% if (ctx.component.uploadOnly) { %}
{{file.originalName || file.name}}
{% } else { %}
Expand All @@ -36,9 +33,9 @@
</a>
{% } %}
</div>
<div class="col-md-{{ctx.columns.size}}">{{ctx.fileSize(file.size)}}</div>
<div class="col-md-2">{{ctx.fileSize(file.size)}}</div>
{% if (ctx.self.hasTypes && !ctx.disabled) { %}
<div class="col-md-{{ctx.columns.type}}">
<div class="col-md-2">
<select class="file-type" ref="fileType">
{% ctx.component.fileTypes.map(function(type) { %}
<option class="test" value="{{ type.value }}" {% if (type.label === file.fileType) { %}selected="selected"{% } %}>{{ctx.t(type.label)}}</option>
Expand All @@ -47,66 +44,7 @@
</div>
{% } %}
{% if (ctx.self.hasTypes && ctx.disabled) { %}
<div class="col-md-{{ctx.columns.type}}">{{file.fileType}}</div>
{% } %}
{% if (!ctx.disabled) { %}
<div class="col-md-{{ctx.columns.actions}} justify-center"><i tabindex="0" class="{{ctx.iconClass('remove')}}" ref="removeLink"></i></div>
{% } %}
</div>
</li>
{% }) %}
{% ctx.filesToDelete.forEach(function(file) { %}
<li class="list-group-item">
<div class="row align-center">
<div class="col-md-{{ctx.columns.name}}">
<div>{{file.originalName || file.name}}</div>
<div class="status text-{{file.status === 'error' ? 'danger': file.status}}">{{ctx.t(file.message)}}</div>
</div>
<div class="col-md-{{ctx.columns.size}}">{{ctx.fileSize(file.size)}}</div>
{% if (ctx.self.hasTypes) { %}
<div class="col-md-{{ctx.columns.type}}">
<select class="file-type" ref="fileType">
{% ctx.component.fileTypes.map(function(type) { %}
<option class="test" value="{{ type.value }}" {% if (type.label === file.fileType) { %}selected="selected"{% } %}>{{ctx.t(type.label)}}</option>
{% }); %}
</select>
</div>
{% } %}
{% if (!ctx.isSyncing && file.status !== 'success') { %}
<div class="col-md-{{ctx.columns.actions}} justify-center"><i tabindex="0" class="{{ctx.iconClass('undo')}}" ref="restoreFile"></i></div>
{% } %}
</div>
</li>
{% }) %}
{% ctx.filesToUpload.forEach(function(file) { %}
<li class="list-group-item">
<div class="row align-center">
<div class="col-md-{{ctx.columns.name}}">
<div>{{file.originalName || file.name}}</div>
{% if (file.status === 'progress') { %}
<div class="status progress">
<div id={{file.id}} class="progress-bar" role="progressbar" aria-valuenow="{{file.progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{file.progress}}%" ref="progress">
<span class="sr-only">{{file.progress}}% {{ctx.t('Complete')}}</span>
</div>
</div>
{% } else { %}
<div class="status text-{{file.status === 'error' ? 'danger': file.status}}">{{ctx.t(file.message)}}</div>
{% } %}
</div>
<div class="col-md-{{ctx.columns.size}}">{{ctx.fileSize(file.size)}}</div>
{% if (ctx.self.hasTypes) { %}
<div class="col-md-{{ctx.columns.type}}">
<select class="file-type" ref="fileType">
{% ctx.component.fileTypes.map(function(type) { %}
<option class="test" value="{{ type.value }}" {% if (type.label === file.fileType) { %}selected="selected"{% } %}>{{ctx.t(type.label)}}</option>
{% }); %}
</select>
</div>
{% } %}
{% if (file.status === 'progress') { %}
<div class="col-md-{{ctx.columns.actions}} justify-center"><i id="abort-{{file.id}}" tabindex="0" class="{{ctx.iconClass('ban')}}"></i></div>
{% } else if (!ctx.isSyncing && file.status !== 'success') { %}
<div class="col-md-{{ctx.columns.actions}} justify-center"><i tabindex="0" class="{{ctx.iconClass('remove')}}" ref="fileToSyncRemove"></i></div>
<div class="col-md-2">{{file.fileType}}</div>
{% } %}
</div>
</li>
Expand All @@ -129,21 +67,21 @@
{% if (!ctx.disabled && (ctx.component.multiple || !ctx.files.length)) { %}
{% if (ctx.self.useWebViewCamera) { %}
<div class="fileSelector">
<button class="btn btn-primary" ref="galleryButton"><i class="{{ctx.iconClass('book')}}"></i> {{ctx.t('Gallery')}}</button>
<button class="btn btn-primary" ref="cameraButton"><i class="{{ctx.iconClass('camera')}}"></i> {{ctx.t('Camera')}}</button>
<button class="btn btn-primary" ref="galleryButton"><i class="fa fa-book"></i> {{ctx.t('Gallery')}}</button>
<button class="btn btn-primary" ref="cameraButton"><i class="fa fa-camera"></i> {{ctx.t('Camera')}}</button>
</div>
{% } else if (!ctx.self.cameraMode) { %}
<div class="fileSelector" ref="fileDrop" {{ctx.fileDropHidden ?'hidden' : ''}}>
<i class="{{ctx.iconClass('cloud-upload')}}"></i> {{ctx.t('Drop files to attach,')}}
{% if (ctx.self.imageUpload && ctx.component.webcam) { %}
<a href="#" ref="toggleCameraMode"><i class="{{ctx.iconClass('camera')}}"></i> {{ctx.t('use camera')}}</a>
<a href="#" ref="toggleCameraMode"><i class="fa fa-camera"></i> {{ctx.t('use camera')}}</a>
{% } %}
{{ctx.t('or')}}
<a href="#" ref="fileBrowse" class="browse">
{{ctx.t('browse')}}
<span class="sr-only">
{{ctx.t('Browse to attach file for ' + ctx.component.label + '. ' +
(ctx.component.description ? ctx.component.description + '. ' : '') +
{{ctx.t('Browse to attach file for ' + ctx.component.label + '. ' +
(ctx.component.description ? ctx.component.description + '. ' : '') +
((!ctx.component.filePattern || ctx.component.filePattern === '*') ? 'Any file types are allowed' : ctx.t('Allowed file types: ') + ctx.component.filePattern))}}
</span>
</a>
Expand All @@ -155,10 +93,38 @@
<div class="video-container">
<video class="video" autoplay="true" ref="videoPlayer" tabindex="-1"></video>
</div>
<button class="btn btn-primary" ref="takePictureButton"><i class="{{ctx.iconClass('camera')}}"></i> {{ctx.t('Take Picture')}}</button>
<button class="btn btn-primary" ref="takePictureButton"><i class="fa fa-camera"></i> {{ctx.t('Take Picture')}}</button>
<button class="btn btn-primary" ref="toggleCameraMode">{{ctx.t('Switch to file upload')}}</button>
{% } %}
{% } %}
{% ctx.statuses.forEach(function(status) { %}
<div class="file {{ctx.statuses.status === 'error' ? ' has-error' : ''}}">
<div class="row">
<div class="fileName col-form-label col-sm-10">{{status.originalName}}
<i class="{{ctx.iconClass('remove')}}" ref="fileStatusRemove">
<span class="sr-only">{{ctx.t('Remove button. Press to remove ' + status.originalName || status.name + '.')}}</span>
<span class="sr-only">{{status.message ? status.message.replace(';', '.') : ''}}</span>
</i>
</div>
<div class="fileSize col-form-label col-sm-2 text-right">{{ctx.fileSize(status.size)}}</div>
</div>
<div class="row">
<div class="col-sm-12">
{% if (status.status === 'progress') { %}
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="{{status.progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{status.progress}}%">
<span class="sr-only">{{status.progress}}% {{ctx.t('Complete')}}</span>
</div>
</div>
{% } else if (status.status === 'error') { %}
<div class="alert alert-danger bg-{{status.status}}">{{ctx.t(status.message)}}</div>
{% } else { %}
<div class="bg-{{status.status}}">{{ctx.t(status.message)}}</div>
{% } %}
</div>
</div>
</div>
{% }) %}
{% if (!ctx.component.storage || ctx.support.hasWarning) { %}
<div class="alert alert-warning">
{% if (!ctx.component.storage) { %}
Expand Down
122 changes: 44 additions & 78 deletions src/templates/bootstrap5/file/form.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,23 @@
<ul class="list-group list-group-striped">
<li class="list-group-item list-group-header hidden-xs hidden-sm">
<div class="row">
<div class="col-md-{{ctx.columns.name}}"><strong>{{ctx.t('File Name')}}</strong></div>
<div class="col-md-{{ctx.columns.size}}"><strong>{{ctx.t('Size')}}</strong></div>
{% if (!ctx.disabled) { %}
<div class="col-md-1"></div>
{% } %}
<div class="col-md-{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %}"><strong>{{ctx.t('File Name')}}</strong></div>
<div class="col-md-2"><strong>{{ctx.t('Size')}}</strong></div>
{% if (ctx.self.hasTypes) { %}
<div class="col-md-{{ctx.columns.type}}"><strong>{{ctx.t('Type')}}</strong></div>
<div class="col-md-2"><strong>{{ctx.t('Type')}}</strong></div>
{% } %}
<div class="col-md-{{ctx.columns.actions}} justify-center">
{% if (ctx.showSyncButton) { %}
<button
class="btn btn-primary btn-sm"
ref="syncNow"
{% if (ctx.disabled || ctx.isSyncing) { %}disabled=true{% } %}
>{{ctx.isSyncing ? ctx.t('Syncing...') : ctx.t('Sync Now')}}</button>
{% } %}
</div>
</div>
</li>
{% ctx.files.forEach(function(file) { %}
<li class="list-group-item">
<div class="row">
<div class="col-md-{{ctx.columns.name}}">
{% if (!ctx.disabled) { %}
<div class="col-md-1"><i tabindex="0" class="{{ctx.iconClass('remove')}}" ref="removeLink"></i></div>
{% } %}
<div class="col-md-{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %}">
{% if (ctx.component.uploadOnly) { %}
{{file.originalName || file.name}}
{% } else { %}
Expand All @@ -36,9 +33,9 @@
</a>
{% } %}
</div>
<div class="col-md-{{ctx.columns.size}}">{{ctx.fileSize(file.size)}}</div>
<div class="col-md-2">{{ctx.fileSize(file.size)}}</div>
{% if (ctx.self.hasTypes && !ctx.disabled) { %}
<div class="col-md-{{ctx.columns.type}}">
<div class="col-md-2">
<select class="file-type" ref="fileType">
{% ctx.component.fileTypes.map(function(type) { %}
<option class="test" value="{{ type.value }}" {% if (type.label === file.fileType) { %}selected="selected"{% } %}>{{ctx.t(type.label)}}</option>
Expand All @@ -47,66 +44,7 @@
</div>
{% } %}
{% if (ctx.self.hasTypes && ctx.disabled) { %}
<div class="col-md-{{ctx.columns.type}}">{{file.fileType}}</div>
{% } %}
{% if (!ctx.disabled) { %}
<div class="col-md-{{ctx.columns.actions}} justify-center"><i tabindex="0" class="{{ctx.iconClass('remove')}}" ref="removeLink"></i></div>
{% } %}
</div>
</li>
{% }) %}
{% ctx.filesToDelete.forEach(function(file) { %}
<li class="list-group-item">
<div class="row align-center">
<div class="col-md-{{ctx.columns.name}}">
<div>{{file.originalName || file.name}}</div>
<div class="status text-{{file.status === 'error' ? 'danger': file.status}}">{{ctx.t(file.message)}}</div>
</div>
<div class="col-md-{{ctx.columns.size}}">{{ctx.fileSize(file.size)}}</div>
{% if (ctx.self.hasTypes) { %}
<div class="col-md-{{ctx.columns.type}}">
<select class="file-type" ref="fileType">
{% ctx.component.fileTypes.map(function(type) { %}
<option class="test" value="{{ type.value }}" {% if (type.label === file.fileType) { %}selected="selected"{% } %}>{{ctx.t(type.label)}}</option>
{% }); %}
</select>
</div>
{% } %}
{% if (!ctx.isSyncing && file.status !== 'success') { %}
<div class="col-md-{{ctx.columns.actions}} justify-center"><i tabindex="0" class="{{ctx.iconClass('arrow-counterclockwise')}}" ref="restoreFile"></i></div>
{% } %}
</div>
</li>
{% }) %}
{% ctx.filesToUpload.forEach(function(file) { %}
<li class="list-group-item">
<div class="row align-center">
<div class="col-md-{{ctx.columns.name}}">
<div>{{file.originalName || file.name}}</div>
{% if (file.status === 'progress') { %}
<div class="status progress">
<div id="{{file.id}}" class="progress-bar" role="progressbar" aria-valuenow="{{file.progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{file.progress}}%" ref="progress">
<span class="visually-hidden">{{file.progress}}% {{ctx.t('Complete')}}</span>
</div>
</div>
{% } else { %}
<div class="status text-{{file.status === 'error' ? 'danger': file.status}}">{{ctx.t(file.message)}}</div>
{% } %}
</div>
<div class="col-md-{{ctx.columns.size}}">{{ctx.fileSize(file.size)}}</div>
{% if (ctx.self.hasTypes) { %}
<div class="col-md-{{ctx.columns.type}}">
<select class="file-type" ref="fileType">
{% ctx.component.fileTypes.map(function(type) { %}
<option class="test" value="{{ type.value }}" {% if (type.label === file.fileType) { %}selected="selected"{% } %}>{{ctx.t(type.label)}}</option>
{% }); %}
</select>
</div>
{% } %}
{% if (file.status === 'progress') { %}
<div class="col-md-{{ctx.columns.actions}} justify-center"><i id="abort-{{file.id}}" tabindex="0" class="{{ctx.iconClass('ban')}}"></i></div>
{% } else if (!ctx.isSyncing && file.status !== 'success') { %}
<div class="col-md-{{ctx.columns.actions}} justify-center"><i tabindex="0" class="{{ctx.iconClass('remove')}}" ref="fileToSyncRemove"></i></div>
<div class="col-md-2">{{file.fileType}}</div>
{% } %}
</div>
</li>
Expand Down Expand Up @@ -149,13 +87,13 @@
<i class="{{ctx.iconClass('microphone')}}"></i>{{ctx.t('Capture Audio')}}
{% } else { %}
<i class="{{ctx.iconClass('camera')}}"></i>{{ctx.t('Capture Image')}}
{% } %}
{% } %}
{% } else { %}
<i class="{{ctx.iconClass('folder-open')}}"></i>{{ctx.t('Browse Files')}}
{% } %}
<span class="visually-hidden">
{{ctx.t('Browse to attach file for ' + ctx.component.label + '. ' +
(ctx.component.description ? ctx.component.description + '. ' : '') +
{{ctx.t('Browse to attach file for ' + ctx.component.label + '. ' +
(ctx.component.description ? ctx.component.description + '. ' : '') +
((!ctx.component.filePattern || ctx.component.filePattern === '*') ? 'Any file types are allowed' : ctx.t('Allowed file types: ') + ctx.component.filePattern))}}
</span>
</a>
Expand All @@ -171,6 +109,34 @@
<button class="btn btn-primary" ref="toggleCameraMode">{{ctx.t('Switch to file upload')}}</button>
{% } %}
{% } %}
{% ctx.statuses.forEach(function(status) { %}
<div class="file {{ctx.statuses.status === 'error' ? ' has-error' : ''}}">
<div class="row">
<div class="fileName col-form-label col-sm-10">{{status.originalName}}
<i class="{{ctx.iconClass('remove')}}" ref="fileStatusRemove">
<span class="visually-hidden">{{ctx.t('Remove button. Press to remove ' + status.originalName || status.name + '.')}}</span>
<span class="visually-hidden">{{status.message ? status.message.replace(';', '.') : ''}}</span>
</i>
</div>
<div class="fileSize col-form-label col-sm-2 text-end">{{ctx.fileSize(status.size)}}</div>
</div>
<div class="row">
<div class="col-sm-12">
{% if (status.status === 'progress') { %}
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="{{status.progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{status.progress}}%">
<span class="visually-hidden">{{status.progress}}% {{ctx.t('Complete')}}</span>
</div>
</div>
{% } else if (status.status === 'error') { %}
<div class="alert alert-danger bg-{{status.status}}">{{ctx.t(status.message)}}</div>
{% } else { %}
<div class="bg-{{status.status}}">{{ctx.t(status.message)}}</div>
{% } %}
</div>
</div>
</div>
{% }) %}
{% if (!ctx.component.storage || ctx.support.hasWarning) { %}
<div class="alert alert-warning">
{% if (!ctx.component.storage) { %}
Expand Down

0 comments on commit 37b9884

Please sign in to comment.