Permalink
Browse files

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).
  • Loading branch information...
1 parent 46cad39 commit 9e0df5bba659048ddb96b292374e7198886587aa @cdujeu cdujeu committed Jul 4, 2016
@@ -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){
@@ -98,25 +98,33 @@ Class.create("IMagickPreviewer", Diaporama, {
className:'thumbnail_iconlike_shadow',
align:'absmiddle',
src:IMagickPreviewer.prototype.getThumbnailSource(ajxpNode)
- });
- img.resizePreviewElement = function(dimensionObject){
+ });
+ var div = new Element('div');
+ div.insert(img);
+ div.resizePreviewElement = function(dimensionObject){
var ratio = img.ratio;
if(!ratio) {
var fakeIm = new Image();
fakeIm.onload = function(){
img.ratio = fakeIm.width/fakeIm.height;
- img.resizePreviewElement(dimensionObject);
+ div.resizePreviewElement(dimensionObject);
};
fakeIm.src = img.src;
- //img.onload = function(){img.resizePreviewElement(dimensionObject);};
ratio = 1.0;
}
var imgDim = {
width:20,
height:20/ratio
};
var styleObj = fitRectangleToDimension(imgDim, dimensionObject);
- img.setStyle(styleObj);
+ img.setStyle(styleObj);
+ div.setStyle({
+ height:styleObj.height,
+ width:styleObj.width,
+ /*position:'relative',*/
+ display:'inline'
+ });
+ if($(div.parentNode)) $(div.parentNode).setStyle({position:"relative"});
};
img.observe("mouseover", function(event){
var theImage = event.target;
@@ -159,7 +167,7 @@ Class.create("IMagickPreviewer", Diaporama, {
if(theImage.up('.thumbnail_selectable_cell')) return;
theImage.previewOpener.setStyle({display:'none'});
});
- return img;
+ return div;
},
getRESTPreviewLinks:function(node){
@@ -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
@@ -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], {});
}
@@ -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;
@@ -1914,7 +1914,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;"});
@@ -1963,7 +1963,7 @@ Class.create("FilesList", SelectableElements, {
});
ovDiv.addClassName('overlay_icon_div');
}
- innerSpan.insert({after:ovDiv});
+ label.insert({bottom:ovDiv});
}
this._htmlElement.insert(newRow);
@@ -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);
@@ -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());
@@ -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;
Oops, something went wrong.
@@ -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{
@@ -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;
@@ -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;
+ }
+ }
}
}
Oops, something went wrong.

0 comments on commit 9e0df5b

Please sign in to comment.