Rework Grid display w/ more space for thumbnails

Display overlay icons in tree, that way we can enable some actions on root node (inc. watch on workspaces). (cherry picked from commit 9e0df5b)
pydio · Jul 5, 2016 · 399c6f4 · 399c6f4
1 parent a46b0e5
commit 399c6f4
Show file tree

Hide file tree

Showing 12 changed files with 183 additions and 67 deletions.
diff --git a/core/src/plugins/editor.diaporama/class.Diaporama.js b/core/src/plugins/editor.diaporama/class.Diaporama.js
@@ -811,7 +811,11 @@ Class.create("Diaporama", AbstractEditor, {
 		});
 		return div;
 	},
-
+
+    getCoveringBackgroundSource: function(ajxpNode){
+        return this.getThumbnailSource(ajxpNode);
+    },
+
 	getThumbnailSource : function(ajxpNode){
         var repoString = "";
         if(pydio.repositoryId && ajxpNode.getMetadata().get("repository_id") && ajxpNode.getMetadata().get("repository_id") != pydio.repositoryId){

diff --git a/core/src/plugins/gui.ajax/res/js/es6/model/AjxpNode.es6 b/core/src/plugins/gui.ajax/res/js/es6/model/AjxpNode.es6
@@ -171,6 +171,11 @@ class AjxpNode extends Observable{
         this.notify("child_removed", removePath);
     }
 
+    replaceMetadata(newMeta){
+        this._metadata = newMeta;
+        this.notify("meta_replaced", this);
+    }
+
     /**
      * Replaces the current node by a new one. Copy all properties deeply
      * @param ajxpNode AjxpNode

diff --git a/core/src/plugins/gui.ajax/res/js/es6/model/PydioDataModel.es6 b/core/src/plugins/gui.ajax/res/js/es6/model/PydioDataModel.es6
@@ -392,7 +392,7 @@ class PydioDataModel extends Observable{
         }else{
             if(node.getMetadata().get("original_path") === "/" && node.getPath() === "/"){
                 n = this.getRootNode();
-                n._metadata = node.getMetadata();
+                n.replaceMetadata(node.getMetadata());
                 if(setSelectedAfterUpdate && this.getContextNode() == n) {
                     this.setSelectedNodes([n], {});
                 }

diff --git a/core/src/plugins/gui.ajax/res/js/ui/prototype/class.FilesList.js b/core/src/plugins/gui.ajax/res/js/ui/prototype/class.FilesList.js
@@ -168,7 +168,7 @@ Class.create("FilesList", SelectableElements, {
         }
         var userDisplay = this.getUserPreference("display");
         if(userDisplay) this._displayMode = userDisplay;
-		this._thumbSize = 64;
+		this._thumbSize = 128;
 		this._crtImageIndex = 0;
         if(this.options.fixedThumbSize){
             this._fixedThumbSize = this.options.fixedThumbSize;
@@ -1919,7 +1919,7 @@ Class.create("FilesList", SelectableElements, {
 	 */
 	ajxpNodeToDiv: function(ajxpNode){
 		var newRow = new Element('div', {
-            className:"thumbnail_selectable_cell",
+            className:"thumbnail_selectable_cell background-cover",
             id:"item-"+slugString(ajxpNode.getPath())});
 
 		var innerSpan = new Element('span', {style:"cursor:default;"});
@@ -1968,7 +1968,7 @@ Class.create("FilesList", SelectableElements, {
                 });
                 ovDiv.addClassName('overlay_icon_div');
             }
-            innerSpan.insert({after:ovDiv});
+            label.insert({bottom:ovDiv});
         }
 
 		this._htmlElement.insert(newRow);

diff --git a/core/src/plugins/gui.ajax/res/js/ui/prototype/class.PreviewFactory.js b/core/src/plugins/gui.ajax/res/js/ui/prototype/class.PreviewFactory.js
@@ -87,14 +87,22 @@ Class.create("PreviewFactory", {
    			var loader = function(){
    				var img = oImageToLoad.mainObject.IMAGE_ELEMENT || $(oImageToLoad.index);
    				if(img == null || oImageToLoad.PFacLoader == null) return;
-   				var newImg = oImageToLoad.editorClass.prototype.getPreview(oImageToLoad.ajxpNode);
-   				newImg.setAttribute("data-is_loaded", "true");
-   				if(img.parentNode) {
-                    img.parentNode.replaceChild(newImg, img);
+                if(oImageToLoad.editorClass.prototype.getCoveringBackgroundSource && oImageToLoad.mainObject && oImageToLoad.mainObject.hasClassName('background-cover') && Modernizr.backgroundsize){
+                    img.setStyle({display:'none'});
+                    oImageToLoad.mainObject.setStyle({
+                        backgroundImage:'url(' + oImageToLoad.editorClass.prototype.getCoveringBackgroundSource(oImageToLoad.ajxpNode) + ')',
+                        backgroundSize : 'cover'
+                    });
+                }else{
+                    var newImg = oImageToLoad.editorClass.prototype.getPreview(oImageToLoad.ajxpNode);
+                    newImg.setAttribute("data-is_loaded", "true");
+                    if(img.parentNode) {
+                        img.parentNode.replaceChild(newImg, img);
+                    }
+                    oImageToLoad.mainObject.IMAGE_ELEMENT = newImg;
+                    this.resizeThumbnail(newImg);
+                    oImageToLoad.PFacLoader = null;
                 }
-   				oImageToLoad.mainObject.IMAGE_ELEMENT = newImg;
-   				this.resizeThumbnail(newImg);
-                oImageToLoad.PFacLoader = null;
    				this.loadNextImage();
    			}.bind(this);
             oImageToLoad.PFacLoader.src = oImageToLoad.editorClass.prototype.getThumbnailSource(oImageToLoad.ajxpNode);

diff --git a/core/src/plugins/gui.ajax/res/js/vendor/webfx/ajxptree.js b/core/src/plugins/gui.ajax/res/js/vendor/webfx/ajxptree.js
@@ -96,6 +96,11 @@ AJXPTree.prototype.setAjxpRootNode = function(rootNode){
 	};
 	this.ajxpNode.observe("force_clear",  clear.bind(this));
 	this.ajxpNode.observe("node_replaced",  clear.bind(this));
+    this.ajxpNode.observe("meta_replaced", function(newNode){
+        var overlayIcon = splitOverlayIcons(newNode);
+        var overlayClasses = splitOverlayClasses(newNode);
+        this.updateIcon(this.icon, this.openIcon, overlayIcon, overlayClasses);
+    }.bind(this));
 	this.attachListeners(this, rootNode);
 	if(oldNode){
 		oldNode.notify("node_replaced");
@@ -136,11 +141,11 @@ AJXPTree.prototype.attachListeners = function(jsNode, ajxpNode){
 			if(ajxpNode.getMetadata().get("openicon")){
 				oic = resolveImageSource(ajxpNode.getMetadata().get("openicon"), "/images/mimes/ICON_SIZE", 16);
 			}
-            if(jsNode.icon != ic || jsNode.openIcon != oic){
-    			jsNode.updateIcon(ic, oic);
+            var overlayIcon = splitOverlayIcons(ajxpNode);
+            var overlayClasses = splitOverlayClasses(ajxpNode);
+            if(jsNode.icon != ic || jsNode.openIcon != oic || jsNode.overlayIcon != overlayIcon || jsNode.overlayClasses != overlayClasses){
+    			jsNode.updateIcon(ic, oic, overlayIcon, overlayClasses);
             }
-            jsNode.overlayIcon = splitOverlayIcons(ajxpNode);
-            jsNode.overlayClasses = splitOverlayClasses(ajxpNode);
 		}
 		if(jsNode.updateLabel && jsNode.text != ajxpNode.getLabel()) {
             jsNode.updateLabel(ajxpNode.getLabel());

diff --git a/core/src/plugins/gui.ajax/res/js/vendor/webfx/xtree.js b/core/src/plugins/gui.ajax/res/js/vendor/webfx/xtree.js
@@ -274,6 +274,15 @@ WebFXTreeAbstractNode.prototype.updateLabel = function(label){
 	if($(this.id+'-label')) $(this.id+'-label').update(label);	
 };
 
+WebFXTreeAbstractNode.prototype.updateIcon = function(icon, openIcon, overlayIcon, overlayClasses){
+    if(openIcon) this.openIcon = openIcon;
+    else this.openIcon = icon;
+    this.icon = icon;
+    this.overlayIcon = overlayIcon ? overlayIcon : [];
+    this.overlayClasses = overlayClasses ? overlayClasses : [];
+    this.setLabelIcon((this.open && webFXTreeHandler.behavior != 'classic'?this.openIcon:icon));
+};
+
 WebFXTreeAbstractNode.prototype.setLabelIcon = function(icon){
     if(!$(this.id+'-label')) return;
     var label = $(this.id+'-label');
@@ -559,11 +568,22 @@ WebFXTree.prototype.keydown = function(key) {
 } ;
 
 WebFXTree.prototype.toString = function() {
-
-	var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFXTreeHandler.keydown(this, event)\">" +
+
+    var d = '';
+    if(this.overlayClasses) {
+
+        d = '<div class="overlay_icon_div">';
+        this.overlayClasses.each(function (c) {
+            d += '<span class="overlay-class-span ' + c + '"></span>';
+        });
+        d += '</div>';
+
+    }
+
+    var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFXTreeHandler.keydown(this, event)\">" +
 		"<a href=\"/\" id=\"" + this.id + "-anchor\" onkeydown=\"return webFXTreeHandler.linkKeyPress(this, event);\"  onfocus=\"webFXTreeHandler.focus(this);\" onblur=\"webFXTreeHandler.blur(this);\"" +
 		(this.target ? " target=\"" + this.target + "\"" : "") +
-		">" + '<span id=\"' +this.id+ '-label\" style="background-image:url(\''+ ((webFXTreeHandler.behavior == 'classic' && this.open)?this.openIcon:this.icon) +'\');">' + this.text + "</span>" + "</a></div>" +
+		">" + '<span id=\"' +this.id+ '-label\" style="background-image:url(\''+ ((webFXTreeHandler.behavior == 'classic' && this.open)?this.openIcon:this.icon) +'\');">' + this.text + d + "</span>" + "</a></div>" +
 		"<div id=\"" + this.id + "-cont\" class=\"webfx-tree-container first_container\" style=\"display: " + ((this.open)?'block':'none') + ";\">";
 	var sb = [];
 	for (var i = 0; i < this.childNodes.length; i++) {
@@ -593,13 +613,6 @@ function WebFXTreeItem(sText, sAction, eParent, sIcon, sOpenIcon, sOverlayIcon,
 
 WebFXTreeItem.prototype = new WebFXTreeAbstractNode;
 
-WebFXTreeItem.prototype.updateIcon = function(icon, openIcon){
-	if(openIcon) this.openIcon = openIcon;
-	else this.openIcon = icon;
-	this.icon = icon;
-	this.setLabelIcon((this.open && webFXTreeHandler.behavior != 'classic'?this.openIcon:icon));
-};
-
 
 WebFXTreeItem.prototype.remove = function() {
 	if(!$(this.id+'-plus')) return;

diff --git a/core/src/plugins/gui.ajax/res/themes/orbit/css/allz.css b/core/src/plugins/gui.ajax/res/themes/orbit/css/allz.css
diff --git a/core/src/plugins/gui.ajax/res/themes/orbit/css/base/body.less b/core/src/plugins/gui.ajax/res/themes/orbit/css/base/body.less
@@ -55,7 +55,7 @@ input, textarea, .selectable{
 }
 
 .selected{
-  background: #CCC !important;
+  background-color: #CCC !important;
   text-decoration: none;
 }
 
@@ -66,7 +66,7 @@ input, textarea, .selectable{
 }
 
 .no_select_bg::-moz-selection {
-  background:transparent;
+  background-color:transparent;
 }
 
 .css_boxshadow{

diff --git a/core/src/plugins/gui.ajax/res/themes/orbit/css/components/selectablelist.less b/core/src/plugins/gui.ajax/res/themes/orbit/css/components/selectablelist.less
@@ -221,24 +221,45 @@
   &.fl-displayMode-thumb {
 
     div.thumbnail_selectable_cell{
-      margin: 5px;
-      background-color: @filelist_thumbnail_background;
-      border-radius: 2px;
+      margin: 1px;
+      background-color: #ECEFF1 /*@filelist_thumbnail_background*/;
+      border-radius: 0px;
       padding: 0 0 3px;
-      box-shadow: 0 1px 3px rgba(0,0,0,0.43);
+      background-size: cover;
+      background-position: center;
+      box-sizing: border-box;
+      position: relative;
       div.thumbLabel{
-        margin-top: -29px;
+        text-align: left;
+        position: relative;
         opacity: 1;
-        background-color: @filelist_thumbnail_label_background;
-        padding: 8px 3px;
-        color: @filelist_thumbnail_label_color;
-        border-radius: 0 0 2px 2px;
+        background-color: rgba(0, 0, 0, 0.45);
+        padding: 12px 16px;
+        color: #ffffff;
+        font-weight: 500;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        left: 0;
+      }
+
+      div.overlay_icon_div{
+        top: 14px !important;
+        right: 17px !important;
+        span.overlay-class-span{
+          color: white !important;
+          font-size: 14px;
+        }
       }
 
       &.fl-displayMode-thumbsize-medium div.thumbLabel{
-        padding:1px;
+        padding: 6px 8px;
         margin-top: -15px;
-        font-size: 0.7em;
+        font-size: 0.8em;
+        div.overlay_icon_div {
+          top: 8px !important;
+          right: 10px !important;
+        }
       }
 
       &.fl-displayMode-thumbsize-large div.thumbLabel{
@@ -250,14 +271,23 @@
       }
 
       &.selected-focus {
-        background-color: @filelist_thumbnail_background !important;
+        border: 2px solid @filelist_selection_background;
+        /*background-color: @filelist_thumbnail_background !important;*/
+        div.overlay_icon_div{
+          right: 15px !important;
+        }
         &.fl-displayMode-thumbsize-small{
           background-color: @filelist_selection_background !important;
         }
         div.thumbLabel{
-          opacity: 1;
-          background-color: @filelist_selection_background;
-          color:@filelist_selection_color;
+          padding: 12px 14px 10px 14px;
+        }
+        &.fl-displayMode-thumbsize-medium div.thumbLabel{
+          padding: 6px 8px 4px 6px !important;
+          div.overlay_icon_div {
+            top: 8px !important;
+            right: 8px !important;
+          }
         }
         span.overlay-class-span{
           color: @filelist_selection_background;

diff --git a/core/src/plugins/gui.ajax/res/themes/orbit/css/components/tree.less b/core/src/plugins/gui.ajax/res/themes/orbit/css/components/tree.less
@@ -234,11 +234,11 @@ div#tree_container{
 }
 
 div.selected-webfx-tree-item-inactive{
-  background: @tree_item_selected_bg !important;
+  background-color: @tree_item_selected_bg !important;
 }
 
 div.selected-webfx-tree-item, .selected-focus{
-  background: @tree_item_selected_focused_bg !important;
+  background-color: @tree_item_selected_focused_bg !important;
 }
 
 .settings_main_pane div.selected-webfx-tree-item,
@@ -259,6 +259,19 @@ div.treeCopyContainer div.selected-webfx-tree-item-inactive a
 
 .webfx-tree-item{
   div.overlay_icon_div {
-    display: none;
+    display: inline;
+    span.overlay-class-span {
+      margin: 0 !important;
+      padding: 0 0 0 8px !important;
+      font-size: 11px !important;
+      opacity: 0.73;
+    }
+  }
+  &.selected-webfx-tree-item{
+    div.overlay_icon_div{
+      span.overlay-class-span{
+        color: white !important;
+      }
+    }
   }
 }