From: rabuzarus <>
Date: Tue, 21 Mar 2017 02:35:25 +0000 (+0100)
Subject: frio: gui work for fbrowser + switch between image and file mode
X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=af8bd4b45f66e88d3535d688eb3ae88789db3867;p=friendica.git

frio: gui work for fbrowser + switch between image and file mode
---

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index e0a0b09b76..7f3d522a9d 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -1273,6 +1273,47 @@ section #jotOpen {
 }
 
 /* Filebrowser */
+.fbrowser .breadcrumb {
+    margin-bottom: 0px;
+}
+.fbrowser .path a:before {
+    content: "";
+    padding: 0;
+}
+.fbrowser .breadcrumb > li:last-of-type a{
+    color: #777;
+    pointer-events: none;
+    cursor: default;
+}
+.fbrowser .folders {
+    box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
+    padding-right: 1px;
+}
+.fbrowser .folders ul {
+    padding-left: 0px;
+    margin-left: -15px;
+}
+.fbrowser .folders li {
+    padding-left: 20px;
+    padding-right: 10px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+.fbrowser .folders li:hover {
+    z-index: 2;
+    color: #555;
+    background-color: rgba(247, 247, 247, $contentbg_transp);
+    border-left: 3px solid $link_color !important;
+    padding-left: 17px;
+}
+.fbrowser .folders li a,
+.fbrowser .folders li a:hover {
+    color: #555;
+    font-size: 13px;
+}
+.fbrowser .folders + .list {
+    padding-left: 10px;
+}
 .fbrowser .profile-rotator-wrapper {
     min-height: 200px;
 }
diff --git a/view/theme/frio/js/filebrowser.js b/view/theme/frio/js/filebrowser.js
index a66309865d..5c60c44cad 100644
--- a/view/theme/frio/js/filebrowser.js
+++ b/view/theme/frio/js/filebrowser.js
@@ -81,15 +81,14 @@ var FileBrowser = {
 			FileBrowser.id = h.split("-")[1];
 			FileBrowser.event = FileBrowser.event + "." + destination;
 			if (destination == "comment") {
-				// get the comment textimput field
+				// Get the comment textimput field
 				var commentElm = document.getElementById("comment-edit-text-" + FileBrowser.id);
 			}
 		};
 
 		console.log("FileBrowser:", nickname, type,FileBrowser.event, FileBrowser.id );
 
-		// We need to add the AjaxUpload to the button
-		FileBrowser.uploadButtons();
+		FileBrowser.postLoad();
 
 		$(".error a.close").on("click", function(e) {
 			e.preventDefault();
@@ -100,22 +99,11 @@ var FileBrowser = {
 		$(".fbrowser").on("click", ".folders a, .path a", function(e) {
 			e.preventDefault();
 			var url = baseurl + "/fbrowser/" + FileBrowser.type + "/" + this.dataset.folder + "?mode=none";
-			$(".fbrowser-content").hide();
-			$(".fbrowser .profile-rotator-wrapper").show();
-
-			// load new content to fbrowser window
-			$(".fbrowser").load(url, function(responseText, textStatus){
-				$(".profile-rotator-wrapper").hide();
-				if (textStatus === 'success') {
-					$(".fbrowser_content").show();
-					// We need to add the AjaxUpload to the button
-					FileBrowser.uploadButtons();
-				}
-			});
-			
+
+			FileBrowser.loadContent(url);
 		});
 
-		//embed on click
+		//Embed on click
 		$(".fbrowser").on('click', ".photo-album-photo-link", function(e) {
 			e.preventDefault();
 
@@ -123,7 +111,7 @@ var FileBrowser = {
 			if (FileBrowser.type == "image") {
 				embed = "[url="+this.dataset.link+"][img]"+this.dataset.img+"[/img][/url]";
 			}
-			if (FileBrowser.type=="file") {
+			if (FileBrowser.type == "file") {
 				// attachment links are "baseurl/attach/id"; we need id
 				embed = "[attachment]"+this.dataset.link.split("/").pop()+"[/attachment]";
 			}
@@ -149,13 +137,24 @@ var FileBrowser = {
 				this.dataset.img,
 			]);
 
-			// close model
+			// Close model
 			$('#modal').modal('hide');
-			// update autosize for this textarea
+			// Update autosize for this textarea
 			autosize.update($(".text-autosize"));
 		});
+
+		// EventListener for switching between image and file mode
+		$(".fbrowser").on('click', ".fbswitcher .btn", function(e) {
+			e.preventDefault();
+			FileBrowser.type = this.getAttribute("data-mode");
+			$(".fbrowser").removeClass().addClass("fbrowser " + FileBrowser.type);
+			url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none";
+
+			FileBrowser.loadContent(url);
+		});
 	},
 
+	// Initialize the AjaxUpload for the upload buttons
 	uploadButtons: function() {
 		if ($("#upload-image").length) {
 			var image_uploader = new window.AjaxUpload(
@@ -176,15 +175,12 @@ var FileBrowser = {
 							return;
 						}
 
-						$(".profile-rotator-wrapper").hide();
-						$(".fbrowser_content").show();
-
 //						location = baseurl + "/fbrowser/image/?mode=none"+location['hash'];
 //						location.reload(true);
 
 						var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none"
 						// load new content to fbrowser window
-						$(".fbrowser").load(url);
+						FileBrowser.loadContent(url);
 					}
 				}
 			);
@@ -208,18 +204,36 @@ var FileBrowser = {
 							return;
 						}
 
-						$(".profile-rotator-wrapper").hide();
-						$(".fbrowser_content").show();
-
 //						location = baseurl + "/fbrowser/file/?mode=none"+location['hash'];
 //						location.reload(true);
 
 						var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none"
-						// load new content to fbrowser window
-						$(".fbrowser").load(url);
+						// Load new content to fbrowser window
+						FileBrowser.loadContent(url)
 					}
 				}
 			);
 		}
+	},
+
+	postLoad: function() {
+		$(".fbrowser .fbswitcher .btn").removeClass("active");
+		$(".fbrowser .fbswitcher [data-mode=" + FileBrowser.type + "]").addClass("active");
+		// We need to add the AjaxUpload to the button
+		FileBrowser.uploadButtons();
+	},
+
+	loadContent: function(url) {
+		$(".fbrowser-content").hide();
+		$(".fbrowser .profile-rotator-wrapper").show();
+
+		// load new content to fbrowser window
+		$(".fbrowser").load(url, function(responseText, textStatus){
+			$(".profile-rotator-wrapper").hide();
+			if (textStatus === 'success') {
+				$(".fbrowser_content").show();
+				FileBrowser.postLoad();
+			}
+		});
 	}
 };
diff --git a/view/theme/frio/templates/filebrowser.tpl b/view/theme/frio/templates/filebrowser.tpl
index 1a1bd9a675..dc8a9593a3 100644
--- a/view/theme/frio/templates/filebrowser.tpl
+++ b/view/theme/frio/templates/filebrowser.tpl
@@ -16,27 +16,33 @@
 			<span></span> <a href="#" class='close'>X</a>
 		</div>
 
-		<div class="path">
-			{{foreach $path as $p}}<a href="#" data-folder="{{$p.0}}">{{$p.1}}</a>{{/foreach}}
-		</div>
+		<ol class="path breadcrumb">
+			{{foreach $path as $p}}<li><a href="#" data-folder="{{$p.0}}">{{$p.1}}</a></li>{{/foreach}}
+			<div class="fbswitcher btn-group btn-group-xs pull-right">
+				<button type="button" class="btn btn-default" data-mode="image"><i class="fa fa-picture-o" aria-hidden="true"></i></button>
+				<button type="button" class="btn btn-default" data-mode="file"><i class="fa fa-file-o" aria-hidden="true"></i></button>
+			</div>
+		</ol>
 
-		{{if $folders }}
-		<div class="folders">
-			<ul>
-				{{foreach $folders as $f}}<li><a href="#" data-folder="{{$f.0}}">{{$f.1}}</a></li>{{/foreach}}
-			</ul>
-		</div>
-		{{/if}}
+		<div class="media">
+			{{if $folders }}
+			<div class="folders media-left">
+				<ul>
+					{{foreach $folders as $f}}<li><a href="#" data-folder="{{$f.0}}">{{$f.1}}</a></li>{{/foreach}}
+				</ul>
+			</div>
+			{{/if}}
 
-		<div class="list">
-			{{foreach $files as $f}}
-			<div class="photo-album-image-wrapper">
-				<a href="#" class="photo-album-photo-link" data-link="{{$f.0}}" data-filename="{{$f.1}}" data-img="{{$f.2}}">
-					<img src="{{$f.2}}">
-					<p>{{$f.1}}</p>
-				</a>
+			<div class="list {{$type}} media-body">
+				{{foreach $files as $f}}
+				<div class="photo-album-image-wrapper">
+					<a href="#" class="photo-album-photo-link" data-link="{{$f.0}}" data-filename="{{$f.1}}" data-img="{{$f.2}}">
+						<img src="{{$f.2}}">
+						<p>{{$f.1}}</p>
+					</a>
+				</div>
+				{{/foreach}}
 			</div>
-			{{/foreach}}
 		</div>
 
 		<div class="upload">
@@ -44,6 +50,6 @@
 		</div>
 	</div>
 	<div class="profile-rotator-wrapper" style="display: none;">
-		<i class="fa fa-circle-o-notch fa-spin"></i>
+		<i class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></i>
 	</div>
 </div>