Frio: new photos upload template (#5637)

* frio - add missing page template to various photo pages (fix missing background)

* frio - rework photo upload album selection

* frio - rework photo upload button

* frio - fix photo upload button and acl
This commit is contained in:
rabuzarus 2018-08-20 06:29:50 +02:00 committed by Hypolite Petovan
parent 16a081871c
commit dd2d680258
7 changed files with 74 additions and 36 deletions

View file

@ -1093,6 +1093,12 @@ function photos_content(App $a)
'$albumselect' => $albumselect, '$albumselect' => $albumselect,
'$permissions' => L10n::t('Permissions'), '$permissions' => L10n::t('Permissions'),
'$aclselect' => $aclselect_e, '$aclselect' => $aclselect_e,
'$lockstate' => is_array($a->user)
&& (strlen($a->user['allow_cid'])
|| strlen($a->user['allow_gid'])
|| strlen($a->user['deny_cid'])
|| strlen($a->user['deny_gid'])
) ? 'lock' : 'unlock',
'$alt_uploader' => $ret['addon_text'], '$alt_uploader' => $ret['addon_text'],
'$default_upload_box' => ($ret['default_upload'] ? $default_upload_box : ''), '$default_upload_box' => ($ret['default_upload'] ? $default_upload_box : ''),
'$default_upload_submit' => ($ret['default_upload'] ? $default_upload_submit : ''), '$default_upload_submit' => ($ret['default_upload'] ? $default_upload_submit : ''),

View file

@ -381,6 +381,7 @@
}); });
var div = document.createElement("div"); var div = document.createElement("div");
div.setAttribute('class', 'ajaxbutton-wrapper');
addStyles(div, { addStyles(div, {
'display' : 'block', 'display' : 'block',
'position' : 'absolute', 'position' : 'absolute',

View file

@ -1422,6 +1422,15 @@ section #jotOpen {
color: #fff; color: #fff;
} }
.fa.lock:before {
font-family: FontAwesome;
content: "\f023";
}
.fa.unlock:before {
font-family: FontAwesome;
content: "\f09c";
}
/* Filebrowser */ /* Filebrowser */
.fbrowser .breadcrumb { .fbrowser .breadcrumb {
margin-bottom: 0px; margin-bottom: 0px;

View file

@ -12,7 +12,7 @@ $(document).ready(function(){
// with AjaxUpload. // with AjaxUpload.
$(".fbrowser").remove(); $(".fbrowser").remove();
// Remove the AjaxUpload element. // Remove the AjaxUpload element.
$("[name=userfile]").parent().remove(); $(".ajaxbutton-wrapper").remove();
}); });
// Clear bs modal on close. // Clear bs modal on close.

View file

@ -0,0 +1 @@
<input id="photos-upload-choose" type="file" name="userfile" />

View file

@ -0,0 +1,2 @@
<button id="photos-upload-submit" class="btn btn-primary">{{$submit|escape:'html'}}</button>

View file

@ -5,49 +5,68 @@
<div id="photos-usage-message">{{$usage}}</div> <div id="photos-usage-message">{{$usage}}</div>
<form action="photos/{{$nickname}}" enctype="multipart/form-data" method="post" name="photos-upload-form" id="photos-upload-form"> <form action="photos/{{$nickname}}" enctype="multipart/form-data" method="post" name="photos-upload-form" id="photos-upload-form">
<div id="photos-upload-new-wrapper" > <div id="photos-upload-div" class="form-group">
<div id="photos-upload-newalbum-div"> <label id="photos-upload-text" for="photos-upload-newalbum" >{{$newalbum}}</label>
<label id="photos-upload-newalbum-text" for="photos-upload-newalbum" >{{$newalbum}}</label>
</div>
<input class="form-control" id="photos-upload-newalbum" type="text" name="newalbum" />
</div>
<div id="photos-upload-new-end"></div>
<div id="photos-upload-exist-wrapper"> <input id="photos-upload-album-select" class="form-control" placeholder="{{$existalbumtext}}" list="dl-photo-upload" type="text" name="album" size="4">
<div id="photos-upload-existing-album-div"> <datalist id="dl-photo-upload">{{$albumselect}}</datalist>
<label id="photos-upload-existing-album-text" for="photos-upload-album-select">{{$existalbumtext}}</label>
</div> </div>
<select class="form-control" id="photos-upload-album-select" name="album" size="4"> <div id="photos-upload-end" class="clearfix"></div>
{{$albumselect}}
</select>
</div>
<div id="photos-upload-exist-end"></div>
<div id="photos-upload-noshare-div" class="photos-upload-noshare-div pull-left" > <div id="photos-upload-noshare-div" class="photos-upload-noshare-div checkbox pull-left" >
<input id="photos-upload-noshare" type="checkbox" name="not_visible" value="1" checked/> <input id="photos-upload-noshare" type="checkbox" name="not_visible" value="1" checked/>
<label id="photos-upload-noshare-text" for="photos-upload-noshare" >{{$nosharetext}}</label> <label id="photos-upload-noshare-text" for="photos-upload-noshare" >{{$nosharetext}}</label>
</div> </div>
<div id="photos-upload-perms" class="photos-upload-perms pull-right" > {{if $alt_uploader}}
<a href="#photos-upload-permissions-wrapper" id="photos-upload-perms-menu" class="button popupbox" /> <div id="photos-upload-perms" class="pull-right">
<span id="jot-perms-icon" class="icon {{$lockstate}}" ></span>{{$permissions}} <button class="btn btn-default btn-sm" data-toggle="modal" data-target="#aclModal" onclick="return false;">
</a> <i id="jot-perms-icon" class="fa {{$lockstate}}"></i> {{$permissions}}
</div> </button>
<div id="photos-upload-perms-end" class="clear"></div>
<div style="display: none;">
<div id="photos-upload-permissions-wrapper">
{{$aclselect}}
</div>
</div> </div>
<div class="clearfix"></div>
<div id="photos-upload-spacer"></div> <div id="photos-upload-spacer"></div>
{{$alt_uploader}} {{$alt_uploader}}
{{/if}}
{{if $default_upload_submit}}
<div class="clearfix"></div>
<div id="photos-upload-spacer"></div>
<div class="photos-upload-wrapper">
<div id="photos-upload-perms" class="btn-group pull-right">
<button class="btn btn-default" data-toggle="modal" data-target="#aclModal" onclick="return false;">
<i id="jot-perms-icon" class="fa {{$lockstate}}"></i>
</button>
{{$default_upload_box}}
{{$default_upload_submit}} {{$default_upload_submit}}
</div>
{{$default_upload_box}}
</div>
<div class="clearfix"></div>
{{/if}}
<div class="photos-upload-end" ></div> <div class="photos-upload-end" class="clearfix"></div>
{{* The modal for advanced-expire *}}
<div id="aclModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" class="modal-header">
<button id="modal-close" type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</button>
<h4 id="modal-title" class="modal-title">{{$permissions}}</h4>
</div>
<div id="photos-upload-permissions-wrapper" class="modal-body">
{{$aclselect}}
</div>
</div>
</div>
</div>
</form> </form>
</div> </div>