Commit 33e77ea8 authored by jonnybradley's avatar jonnybradley

[ENH] files: Make the file input(s) a bootstrap custom-file-input.

Also move the progress bar to next to the input and not on the other side of the annoying remarksbox
For some reason the right hand radiuses don't get set to zero as they should, i think it's something to do with the order the scss is included in tiki_base.css
parent e6bcb950
Pipeline #50336734 failed with stages
in 30 minutes and 5 seconds
......@@ -8,11 +8,6 @@
{if $uploadInModal}
<form class="file-uploader" enctype="multipart/form-data" method="post" action="{service controller=file action=upload galleryId=$galleryId image_max_size_x=$image_max_size_x image_max_size_y=$image_max_size_y}" data-gallery-id="{$galleryId|escape}" data-image_max_size_x="{$image_max_size_x|escape}" data-image_max_size_y="{$image_max_size_y|escape}" data-ticket="{ticket mode=get}">
<div class="progress hidden">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
<span class="sr-only"><span class="count">0</span>% Complete</span>
</div>
</div>
{if $image_max_size_x || $image_max_size_y }
{remarksbox type="note" title="{tr}Note{/tr}"}
{tr}Images will be resized to {if $image_max_size_x} {$image_max_size_x}px in width{/if}{if $image_max_size_y} and {$image_max_size_y}px in height{/if} {/tr}
......@@ -23,7 +18,22 @@
{/remarksbox}
{/if}
{ticket}
<input type="file" name="file[]" {if $limit !== 1}multiple{/if} {if $typeFilter}accept="{$typeFilter|escape}"{/if} />
<div class="progress d-none mb-2">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
<span class="sr-only"><span class="count">0</span>% Complete</span>
</div>
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupText">{if $limit !== 1}{tr}Upload Files{/tr}{else}{tr}Upload File{/tr}{/if}</span>
</div>
<div class="custom-file">
<input type="file" name="file[]" {if $limit !== 1}multiple{/if} {if $typeFilter}accept="{$typeFilter|escape}"{/if}
class="custom-file-input" id="inputFile" aria-describedby="inputGroupText"
onchange="$(this).next('.custom-file-label').text($(this).val().replace('C:\\fakepath\\', ''));">
<label class="custom-file-label" for="inputFile">Choose file</label>
</div>
</div>
<p class="drop-message text-center">
{if $limit !== 1}{tr}Or drop files here from your file manager.{/tr}{else}{tr}Or drop file here from your file manager.{/tr}{/if}
</p>
......@@ -41,11 +51,6 @@
{else}
<div class="file-uploader inline" data-action="{service controller=file action=upload galleryId=$galleryId image_max_size_x=$image_max_size_x image_max_size_y=$image_max_size_y}" data-gallery-id="{$galleryId|escape}" data-image_max_size_x="{$image_max_size_x|escape}" data-image_max_size_y="{$image_max_size_y|escape}" data-ticket="{ticket mode=get}">
<div class="progress hidden">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
<span class="sr-only"><span class="count">0</span>% Complete</span>
</div>
</div>
{if $image_max_size_x || $image_max_size_y }
{remarksbox type="note" title="{tr}Note{/tr}"}
{tr}Images will be resized to {if $image_max_size_x} {$image_max_size_x}px in width{/if}{if $image_max_size_y} and {$image_max_size_y}px in height{/if} {/tr}
......@@ -55,7 +60,20 @@
{tr}Images will not be resized, for resizing edit this tracker field and set image max width and height in "Options for files" section.{/tr}
{/remarksbox}
{/if}
<input type="file" name="file[]" {if $limit !== 1}multiple{/if} {if $typeFilter}accept="{$typeFilter|escape}"{/if} />
<div class="progress d-none mb-2">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
<span class="sr-only"><span class="count">0</span>% Complete</span>
</div>
</div>
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupText">{if $limit !== 1}{tr}Upload Files{/tr}{else}{tr}Upload File{/tr}{/if}</span>
</div>
<div class="custom-file">
<input type="file" name="file[]" {if $limit !== 1}multiple{/if} {if $typeFilter}accept="{$typeFilter|escape}"{/if}
class="custom-file-input" id="inputFile" aria-describedby="inputGroupText"
onchange="$(this).next('.custom-file-label').text($(this).val().replace('C:\\fakepath\\', ''));">
<label class="custom-file-label" for="inputFile">Choose file</label>
</div>
<p class="drop-message text-center">
{if $limit !== 1}{tr}Or drop files here from your file manager.{/tr}{else}{tr}Or drop file here from your file manager.{/tr}{/if}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment