Skip to content
This repository has been archived by the owner on Nov 25, 2020. It is now read-only.

Commit

Permalink
Rework Grid display w/ more space for thumbnails
Browse files Browse the repository at this point in the history 
Display overlay icons in tree, that way we can enable some actions on root node (inc. watch on workspaces).
  • Loading branch information
@cdujeu
cdujeu committed Jul 4, 2016
1 parent 46cad39 commit 9e0df5b
Show file tree
Hide file tree
Showing 13 changed files with 197 additions and 73 deletions.
6 changes: 5 additions & 1 deletion core/src/plugins/editor.diaporama/class.Diaporama.js
View file
Expand Up @@ -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){
Expand Down
20 changes: 14 additions & 6 deletions core/src/plugins/editor.imagick/class.IMagickPreviewer.js
View file
Expand Up @@ -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;
Expand Down Expand Up @@ -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){
Expand Down
5 changes: 5 additions & 0 deletions core/src/plugins/gui.ajax/res/js/es6/model/AjxpNode.es6
View file
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion core/src/plugins/gui.ajax/res/js/es6/model/PydioDataModel.es6
View file
Expand Up @@ -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], {});
}
Expand Down
6 changes: 3 additions & 3 deletions core/src/plugins/gui.ajax/res/js/ui/prototype/class.FilesList.js
View file
Expand Up @@ -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;
Expand Down Expand Up @@ -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;"});
Expand Down Expand Up @@ -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);
Expand Down
22 changes: 15 additions & 7 deletions core/src/plugins/gui.ajax/res/js/ui/prototype/class.PreviewFactory.js
View file
Expand Up @@ -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);
Expand Down
13 changes: 9 additions & 4 deletions core/src/plugins/gui.ajax/res/js/vendor/webfx/ajxptree.js
View file
Expand Up @@ -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");
Expand Down Expand Up @@ -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());
Expand Down
33 changes: 23 additions & 10 deletions core/src/plugins/gui.ajax/res/js/vendor/webfx/xtree.js
View file
Expand Up @@ -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');
Expand Down Expand Up @@ -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++) {
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion core/src/plugins/gui.ajax/res/themes/orbit/css/allz.css
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions core/src/plugins/gui.ajax/res/themes/orbit/css/base/body.less
View file
Expand Up @@ -55,7 +55,7 @@ input, textarea, .selectable{
}

.selected{
background: #CCC !important;
background-color: #CCC !important;
text-decoration: none;
}

Expand All @@ -66,7 +66,7 @@ input, textarea, .selectable{
}

.no_select_bg::-moz-selection {
background:transparent;
background-color:transparent;
}

.css_boxshadow{
Expand Down
60 changes: 45 additions & 15 deletions core/src/plugins/gui.ajax/res/themes/orbit/css/components/selectablelist.less
View file
Expand Up @@ -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{
Expand All @@ -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;
Expand Down
19 changes: 16 additions & 3 deletions core/src/plugins/gui.ajax/res/themes/orbit/css/components/tree.less
View file
Expand Up @@ -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,
Expand All @@ -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;
}
}
}
}

0 comments on commit 9e0df5b

Please sign in to comment.