From: rabuzarus <rabuzarus@t-online.de>
Date: Mon, 20 Aug 2018 04:29:50 +0000 (+0200)
Subject: Frio: new photos upload template (#5637)
X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=dd2d680258e1c594cc585fa31108da5a151a6e47;p=friendica.git

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
---

diff --git a/mod/photos.php b/mod/photos.php
index e2682498be..e246c98c3d 100644
--- a/mod/photos.php
+++ b/mod/photos.php
@@ -1093,6 +1093,12 @@ function photos_content(App $a)
 			'$albumselect' => $albumselect,
 			'$permissions' => L10n::t('Permissions'),
 			'$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'],
 			'$default_upload_box' => ($ret['default_upload'] ? $default_upload_box : ''),
 			'$default_upload_submit' => ($ret['default_upload'] ? $default_upload_submit : ''),
diff --git a/view/js/ajaxupload.js b/view/js/ajaxupload.js
index 1c34b11b9e..131ab078e6 100644
--- a/view/js/ajaxupload.js
+++ b/view/js/ajaxupload.js
@@ -380,7 +380,8 @@
                 'cursor' : 'pointer'
             });            
 
-            var div = document.createElement("div");                        
+            var div = document.createElement("div");
+            div.setAttribute('class', 'ajaxbutton-wrapper');
             addStyles(div, {
                 'display' : 'block',
                 'position' : 'absolute',
diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index f626af8864..b96e53fa1a 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -1422,6 +1422,15 @@ section #jotOpen {
     color: #fff;
 }
 
+.fa.lock:before {
+    font-family: FontAwesome;
+    content: "\f023";
+}
+.fa.unlock:before {
+    font-family: FontAwesome;
+    content: "\f09c";
+}
+
 /* Filebrowser */
 .fbrowser .breadcrumb {
     margin-bottom: 0px;
diff --git a/view/theme/frio/js/modal.js b/view/theme/frio/js/modal.js
index 46bb1e5143..2b3059eaf1 100644
--- a/view/theme/frio/js/modal.js
+++ b/view/theme/frio/js/modal.js
@@ -12,7 +12,7 @@ $(document).ready(function(){
 		// with AjaxUpload.
 		$(".fbrowser").remove();
 		// Remove the AjaxUpload element.
-		$("[name=userfile]").parent().remove();
+		$(".ajaxbutton-wrapper").remove();
 	});
 
 	// Clear bs modal on close.
diff --git a/view/theme/frio/templates/photos_default_uploader_box.tpl b/view/theme/frio/templates/photos_default_uploader_box.tpl
new file mode 100644
index 0000000000..2f1f69a50d
--- /dev/null
+++ b/view/theme/frio/templates/photos_default_uploader_box.tpl
@@ -0,0 +1 @@
+<input id="photos-upload-choose" type="file" name="userfile" />
diff --git a/view/theme/frio/templates/photos_default_uploader_submit.tpl b/view/theme/frio/templates/photos_default_uploader_submit.tpl
new file mode 100644
index 0000000000..73d5e50645
--- /dev/null
+++ b/view/theme/frio/templates/photos_default_uploader_submit.tpl
@@ -0,0 +1,2 @@
+
+<button id="photos-upload-submit" class="btn btn-primary">{{$submit|escape:'html'}}</button>
diff --git a/view/theme/frio/templates/photos_upload.tpl b/view/theme/frio/templates/photos_upload.tpl
index 1162dc3ac6..f02246c5c7 100644
--- a/view/theme/frio/templates/photos_upload.tpl
+++ b/view/theme/frio/templates/photos_upload.tpl
@@ -5,49 +5,68 @@
 	<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">
-		<div id="photos-upload-new-wrapper" >
-			<div id="photos-upload-newalbum-div">
-				<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-div" class="form-group">
+			<label id="photos-upload-text" for="photos-upload-newalbum" >{{$newalbum}}</label>
 
-		<div id="photos-upload-exist-wrapper">
-			<div id="photos-upload-existing-album-div">
-				<label id="photos-upload-existing-album-text" for="photos-upload-album-select">{{$existalbumtext}}</label>
-			</div>
-			<select class="form-control" id="photos-upload-album-select" name="album" size="4">
-				{{$albumselect}}
-			</select>
+			<input id="photos-upload-album-select" class="form-control" placeholder="{{$existalbumtext}}" list="dl-photo-upload" type="text" name="album" size="4">
+			<datalist id="dl-photo-upload">{{$albumselect}}</datalist>
 		</div>
-		<div id="photos-upload-exist-end"></div>
+		<div id="photos-upload-end" class="clearfix"></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/>
 			<label id="photos-upload-noshare-text" for="photos-upload-noshare" >{{$nosharetext}}</label>
 		</div>
 
-		<div id="photos-upload-perms" class="photos-upload-perms pull-right" >
-			<a href="#photos-upload-permissions-wrapper" id="photos-upload-perms-menu" class="button popupbox" />
-				<span id="jot-perms-icon" class="icon {{$lockstate}}" ></span>{{$permissions}}
-			</a>
-		</div>
-		<div id="photos-upload-perms-end" class="clear"></div>
-
-		<div style="display: none;">
-			<div id="photos-upload-permissions-wrapper">
-				{{$aclselect}}
+		{{if $alt_uploader}}
+			<div id="photos-upload-perms" class="pull-right">
+				<button class="btn btn-default btn-sm" data-toggle="modal" data-target="#aclModal" onclick="return false;">
+					<i id="jot-perms-icon" class="fa {{$lockstate}}"></i> {{$permissions}}
+				</button>
 			</div>
-		</div>
+			<div class="clearfix"></div>
+
+			<div id="photos-upload-spacer"></div>
 
-		<div id="photos-upload-spacer"></div>
+			{{$alt_uploader}}
+		{{/if}}
 
-		{{$alt_uploader}}
 
-		{{$default_upload_box}}
-		{{$default_upload_submit}}
+		{{if $default_upload_submit}}
+			<div class="clearfix"></div>
 
-		<div class="photos-upload-end" ></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_submit}}
+				</div>
+				{{$default_upload_box}}
+			</div>
+			<div class="clearfix"></div>
+		{{/if}}
+
+		<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>
 </div>