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 e0a0b09b76c7bb276b4eed19f95c0469970f3248..7f3d522a9db5bba5984585ea97fb82e8cec1ab84 100644 (file)
--- 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 a66309865dc10e6a243bc2af97f33424e748bf3f..5c60c44cadaf19f025012602b52aea0645239216 100644 (file)
--- 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];\r
                        FileBrowser.event = FileBrowser.event + "." + destination;\r
                        if (destination == "comment") {\r
-                               // get the comment textimput field\r
+                               // Get the comment textimput field\r
                                var commentElm = document.getElementById("comment-edit-text-" + FileBrowser.id);\r
                        }\r
                };\r
 \r
                console.log("FileBrowser:", nickname, type,FileBrowser.event, FileBrowser.id );\r
 \r
-               // We need to add the AjaxUpload to the button\r
-               FileBrowser.uploadButtons();\r
+               FileBrowser.postLoad();\r
 \r
                $(".error a.close").on("click", function(e) {\r
                        e.preventDefault();\r
@@ -100,22 +99,11 @@ var FileBrowser = {
                $(".fbrowser").on("click", ".folders a, .path a", function(e) {\r
                        e.preventDefault();\r
                        var url = baseurl + "/fbrowser/" + FileBrowser.type + "/" + this.dataset.folder + "?mode=none";\r
-                       $(".fbrowser-content").hide();\r
-                       $(".fbrowser .profile-rotator-wrapper").show();\r
-\r
-                       // load new content to fbrowser window\r
-                       $(".fbrowser").load(url, function(responseText, textStatus){\r
-                               $(".profile-rotator-wrapper").hide();\r
-                               if (textStatus === 'success') {\r
-                                       $(".fbrowser_content").show();\r
-                                       // We need to add the AjaxUpload to the button\r
-                                       FileBrowser.uploadButtons();\r
-                               }\r
-                       });\r
-                       \r
+\r
+                       FileBrowser.loadContent(url);\r
                });\r
 \r
-               //embed on click\r
+               //Embed on click\r
                $(".fbrowser").on('click', ".photo-album-photo-link", function(e) {\r
                        e.preventDefault();\r
 \r
@@ -123,7 +111,7 @@ var FileBrowser = {
                        if (FileBrowser.type == "image") {\r
                                embed = "[url="+this.dataset.link+"][img]"+this.dataset.img+"[/img][/url]";\r
                        }\r
-                       if (FileBrowser.type=="file") {\r
+                       if (FileBrowser.type == "file") {\r
                                // attachment links are "baseurl/attach/id"; we need id\r
                                embed = "[attachment]"+this.dataset.link.split("/").pop()+"[/attachment]";\r
                        }\r
@@ -149,13 +137,24 @@ var FileBrowser = {
                                this.dataset.img,\r
                        ]);\r
 \r
-                       // close model\r
+                       // Close model\r
                        $('#modal').modal('hide');\r
-                       // update autosize for this textarea\r
+                       // Update autosize for this textarea\r
                        autosize.update($(".text-autosize"));\r
                });\r
+\r
+               // EventListener for switching between image and file mode\r
+               $(".fbrowser").on('click', ".fbswitcher .btn", function(e) {\r
+                       e.preventDefault();\r
+                       FileBrowser.type = this.getAttribute("data-mode");\r
+                       $(".fbrowser").removeClass().addClass("fbrowser " + FileBrowser.type);\r
+                       url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none";\r
+\r
+                       FileBrowser.loadContent(url);\r
+               });\r
        },\r
 \r
+       // Initialize the AjaxUpload for the upload buttons\r
        uploadButtons: function() {\r
                if ($("#upload-image").length) {\r
                        var image_uploader = new window.AjaxUpload(\r
@@ -176,15 +175,12 @@ var FileBrowser = {
                                                        return;\r
                                                }\r
 \r
-                                               $(".profile-rotator-wrapper").hide();\r
-                                               $(".fbrowser_content").show();\r
-\r
 //                                             location = baseurl + "/fbrowser/image/?mode=none"+location['hash'];\r
 //                                             location.reload(true);\r
 \r
                                                var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none"\r
                                                // load new content to fbrowser window\r
-                                               $(".fbrowser").load(url);\r
+                                               FileBrowser.loadContent(url);\r
                                        }\r
                                }\r
                        );\r
@@ -208,18 +204,36 @@ var FileBrowser = {
                                                        return;\r
                                                }\r
 \r
-                                               $(".profile-rotator-wrapper").hide();\r
-                                               $(".fbrowser_content").show();\r
-\r
 //                                             location = baseurl + "/fbrowser/file/?mode=none"+location['hash'];\r
 //                                             location.reload(true);\r
 \r
                                                var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none"\r
-                                               // load new content to fbrowser window\r
-                                               $(".fbrowser").load(url);\r
+                                               // Load new content to fbrowser window\r
+                                               FileBrowser.loadContent(url)\r
                                        }\r
                                }\r
                        );\r
                }\r
+       },\r
+\r
+       postLoad: function() {\r
+               $(".fbrowser .fbswitcher .btn").removeClass("active");\r
+               $(".fbrowser .fbswitcher [data-mode=" + FileBrowser.type + "]").addClass("active");\r
+               // We need to add the AjaxUpload to the button\r
+               FileBrowser.uploadButtons();\r
+       },\r
+\r
+       loadContent: function(url) {\r
+               $(".fbrowser-content").hide();\r
+               $(".fbrowser .profile-rotator-wrapper").show();\r
+\r
+               // load new content to fbrowser window\r
+               $(".fbrowser").load(url, function(responseText, textStatus){\r
+                       $(".profile-rotator-wrapper").hide();\r
+                       if (textStatus === 'success') {\r
+                               $(".fbrowser_content").show();\r
+                               FileBrowser.postLoad();\r
+                       }\r
+               });\r
        }\r
 };\r

diff --git a/view/theme/frio/templates/filebrowser.tpl b/view/theme/frio/templates/filebrowser.tpl
index 1a1bd9a6759aedb6a016937f6d08b18981cdac5c..dc8a9593a3934e9ba74824a08a60cb5d603a174b 100644 (file)
--- 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>