implement file upload UI on bootstrap templates

This commit is contained in:
El RIDO 2015-09-18 10:49:39 +02:00
parent 8de24fae67
commit e144739dec
3 changed files with 54 additions and 7 deletions

View File

@ -922,6 +922,7 @@ $(function() {
stateNewPaste: function() stateNewPaste: function()
{ {
this.message.text(''); this.message.text('');
this.attachment.addClass('hidden');
this.cloneButton.addClass('hidden'); this.cloneButton.addClass('hidden');
this.rawTextButton.addClass('hidden'); this.rawTextButton.addClass('hidden');
this.remainingTime.addClass('hidden'); this.remainingTime.addClass('hidden');
@ -937,7 +938,6 @@ $(function() {
this.newButton.removeClass('hidden'); this.newButton.removeClass('hidden');
this.password.removeClass('hidden'); this.password.removeClass('hidden');
this.attach.removeClass('hidden'); this.attach.removeClass('hidden');
this.attachment.removeClass('hidden');
this.message.removeClass('hidden'); this.message.removeClass('hidden');
this.message.focus(); this.message.focus();
}, },
@ -961,7 +961,6 @@ $(function() {
this.rawTextButton.removeClass('hidden'); this.rawTextButton.removeClass('hidden');
this.attach.addClass('hidden'); this.attach.addClass('hidden');
this.attachment.addClass('hidden');
this.expiration.addClass('hidden'); this.expiration.addClass('hidden');
this.formatter.addClass('hidden'); this.formatter.addClass('hidden');
this.burnAfterReadingOption.addClass('hidden'); this.burnAfterReadingOption.addClass('hidden');

View File

@ -57,7 +57,11 @@
<a id="expiration" href="#" class="hidden dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{function="t('Expires')"}: <span id="pasteExpirationDisplay">{$EXPIRE[$EXPIREDEFAULT]}</span> <span class="caret"></span></a> <a id="expiration" href="#" class="hidden dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{function="t('Expires')"}: <span id="pasteExpirationDisplay">{$EXPIRE[$EXPIREDEFAULT]}</span> <span class="caret"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
{loop="EXPIRE"} {loop="EXPIRE"}
<li><a href="#" onclick="$('#pasteExpiration').val('{$key}');$('#pasteExpirationDisplay').text('{$value}');return false;">{$value}</a></li>{/loop} <li>
<a href="#" onclick="$('#pasteExpiration').val('{$key}');$('#pasteExpirationDisplay').text('{$value}');return false;">
{$value}
</a>
</li>{/loop}
</ul> </ul>
</li> </li>
<li id="formatter" class="dropdown"> <li id="formatter" class="dropdown">
@ -97,6 +101,21 @@
<div id="password" class="navbar-form hidden"> <div id="password" class="navbar-form hidden">
<input type="password" id="passwordinput" placeholder="{function="t('Password (recommended)')"}" class="form-control" size="19"/> <input type="password" id="passwordinput" placeholder="{function="t('Password (recommended)')"}" class="form-control" size="19"/>
</div> </div>
</li>{/if}{if="$FILEUPLOAD"}
<li id="attach" class="hidden dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{function="t('Attach a file:')"} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="filewrap">
<div>
<input type="file" id="file" name="file" />
</div>
</li>
<li>
<a id="fileremovebutton" href="#">
{function="t('Remove attachment')"}
</a>
</li>
</ul>
</li>{/if} </li>{/if}
</ul> </ul>
<ul class="nav navbar-nav pull-right"> <ul class="nav navbar-nav pull-right">
@ -115,7 +134,10 @@
</div>{/if} </div>{/if}
<div id="remainingtime" role="alert" class="hidden alert alert-info"> <div id="remainingtime" role="alert" class="hidden alert alert-info">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
</div>{if="strlen($STATUS)"} </div>{if="$FILEUPLOAD"}
<div id="attachment" role="alert" class="hidden alert alert-info">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> <a>{function="t('Download attachment')"}</a> <span id="clonedfile" class="hidden">{function="t('Cloned file attached.')"}</span>
</div>{/if}{if="strlen($STATUS)"}
<div id="status" role="alert" class="alert alert-success"> <div id="status" role="alert" class="alert alert-success">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span> {$STATUS|htmlspecialchars} <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> {$STATUS|htmlspecialchars}
</div>{/if} </div>{/if}

View File

@ -57,7 +57,11 @@
<a id="expiration" href="#" class="hidden dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{function="t('Expires')"}: <span id="pasteExpirationDisplay">{$EXPIRE[$EXPIREDEFAULT]}</span> <span class="caret"></span></a> <a id="expiration" href="#" class="hidden dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{function="t('Expires')"}: <span id="pasteExpirationDisplay">{$EXPIRE[$EXPIREDEFAULT]}</span> <span class="caret"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
{loop="EXPIRE"} {loop="EXPIRE"}
<li><a href="#" onclick="$('#pasteExpiration').val('{$key}');$('#pasteExpirationDisplay').text('{$value}');return false;">{$value}</a></li>{/loop} <li>
<a href="#" onclick="$('#pasteExpiration').val('{$key}');$('#pasteExpirationDisplay').text('{$value}');return false;">
{$value}
</a>
</li>{/loop}
</ul> </ul>
</li> </li>
<li> <li>
@ -80,6 +84,21 @@
<div id="password" class="navbar-form hidden"> <div id="password" class="navbar-form hidden">
<input type="password" id="passwordinput" placeholder="{function="t('Password (recommended)')"}" class="form-control" size="19"/> <input type="password" id="passwordinput" placeholder="{function="t('Password (recommended)')"}" class="form-control" size="19"/>
</div> </div>
</li>{/if}{if="$FILEUPLOAD"}
<li id="attach" class="hidden dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{function="t('Attach a file:')"} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="filewrap">
<div>
<input type="file" id="file" name="file" />
</div>
</li>
<li>
<a id="fileremovebutton" href="#">
{function="t('Remove attachment')"}
</a>
</li>
</ul>
</li>{/if} </li>{/if}
<li class="dropdown"> <li class="dropdown">
<select id="pasteFormatter" name="pasteFormatter" class="hidden"> <select id="pasteFormatter" name="pasteFormatter" class="hidden">
@ -89,7 +108,11 @@
<a id="formatter" href="#" class="hidden dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{function="t('Format')"}: <span id="pasteFormatterDisplay">{$FORMATTER[$FORMATTERDEFAULT]}</span> <span class="caret"></span></a> <a id="formatter" href="#" class="hidden dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{function="t('Format')"}: <span id="pasteFormatterDisplay">{$FORMATTER[$FORMATTERDEFAULT]}</span> <span class="caret"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
{loop="FORMATTER"} {loop="FORMATTER"}
<li><a href="#" onclick="$('#pasteFormatter').val('{$key}');$('#pasteFormatterDisplay').text('{$value}');return false;">{$value}</a></li>{/loop} <li>
<a href="#" onclick="$('#pasteFormatter').val('{$key}');$('#pasteFormatterDisplay').text('{$value}');return false;">
{$value}
</a>
</li>{/loop}
</ul> </ul>
</li> </li>
</ul> </ul>
@ -109,7 +132,10 @@
</div>{/if} </div>{/if}
<div id="remainingtime" role="alert" class="hidden alert alert-info"> <div id="remainingtime" role="alert" class="hidden alert alert-info">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
</div>{if="strlen($STATUS)"} </div>{if="$FILEUPLOAD"}
<div id="attachment" role="alert" class="hidden alert alert-info">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> <a>{function="t('Download attachment')"}</a> <span id="clonedfile" class="hidden">{function="t('Cloned file attached.')"}</span>
</div>{/if}{if="strlen($STATUS)"}
<div id="status" role="alert" class="alert alert-success"> <div id="status" role="alert" class="alert alert-success">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span> {$STATUS|htmlspecialchars} <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> {$STATUS|htmlspecialchars}
</div>{/if} </div>{/if}