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

Commit 399c6f4

Browse files
cdujeucdujeu
committed
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)
1 parent a46b0e5 commit 399c6f4

File tree

12 files changed

+183
-67
lines changed

12 files changed

+183
-67
lines changed

‎core/src/plugins/editor.diaporama/class.Diaporama.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -811,7 +811,11 @@ Class.create("Diaporama", AbstractEditor, {
811811
});
812812
return div;
813813
},
814-
814+
815+
getCoveringBackgroundSource: function(ajxpNode){
816+
return this.getThumbnailSource(ajxpNode);
817+
},
818+
815819
getThumbnailSource : function(ajxpNode){
816820
var repoString = "";
817821
if(pydio.repositoryId && ajxpNode.getMetadata().get("repository_id") && ajxpNode.getMetadata().get("repository_id") != pydio.repositoryId){

‎core/src/plugins/gui.ajax/res/js/es6/model/AjxpNode.es6

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,11 @@ class AjxpNode extends Observable{
171171
this.notify("child_removed", removePath);
172172
}
173173

174+
replaceMetadata(newMeta){
175+
this._metadata = newMeta;
176+
this.notify("meta_replaced", this);
177+
}
178+
174179
/**
175180
* Replaces the current node by a new one. Copy all properties deeply
176181
* @param ajxpNode AjxpNode

‎core/src/plugins/gui.ajax/res/js/es6/model/PydioDataModel.es6

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -392,7 +392,7 @@ class PydioDataModel extends Observable{
392392
}else{
393393
if(node.getMetadata().get("original_path") === "/" && node.getPath() === "/"){
394394
n = this.getRootNode();
395-
n._metadata = node.getMetadata();
395+
n.replaceMetadata(node.getMetadata());
396396
if(setSelectedAfterUpdate && this.getContextNode() == n) {
397397
this.setSelectedNodes([n], {});
398398
}

‎core/src/plugins/gui.ajax/res/js/ui/prototype/class.FilesList.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ Class.create("FilesList", SelectableElements, {
168168
}
169169
var userDisplay = this.getUserPreference("display");
170170
if(userDisplay) this._displayMode = userDisplay;
171-
this._thumbSize = 64;
171+
this._thumbSize = 128;
172172
this._crtImageIndex = 0;
173173
if(this.options.fixedThumbSize){
174174
this._fixedThumbSize = this.options.fixedThumbSize;
@@ -1919,7 +1919,7 @@ Class.create("FilesList", SelectableElements, {
19191919
*/
19201920
ajxpNodeToDiv: function(ajxpNode){
19211921
var newRow = new Element('div', {
1922-
className:"thumbnail_selectable_cell",
1922+
className:"thumbnail_selectable_cell background-cover",
19231923
id:"item-"+slugString(ajxpNode.getPath())});
19241924

19251925
var innerSpan = new Element('span', {style:"cursor:default;"});
@@ -1968,7 +1968,7 @@ Class.create("FilesList", SelectableElements, {
19681968
});
19691969
ovDiv.addClassName('overlay_icon_div');
19701970
}
1971-
innerSpan.insert({after:ovDiv});
1971+
label.insert({bottom:ovDiv});
19721972
}
19731973

19741974
this._htmlElement.insert(newRow);

‎core/src/plugins/gui.ajax/res/js/ui/prototype/class.PreviewFactory.js

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -87,14 +87,22 @@ Class.create("PreviewFactory", {
8787
var loader = function(){
8888
var img = oImageToLoad.mainObject.IMAGE_ELEMENT || $(oImageToLoad.index);
8989
if(img == null || oImageToLoad.PFacLoader == null) return;
90-
var newImg = oImageToLoad.editorClass.prototype.getPreview(oImageToLoad.ajxpNode);
91-
newImg.setAttribute("data-is_loaded", "true");
92-
if(img.parentNode) {
93-
img.parentNode.replaceChild(newImg, img);
90+
if(oImageToLoad.editorClass.prototype.getCoveringBackgroundSource && oImageToLoad.mainObject && oImageToLoad.mainObject.hasClassName('background-cover') && Modernizr.backgroundsize){
91+
img.setStyle({display:'none'});
92+
oImageToLoad.mainObject.setStyle({
93+
backgroundImage:'url(' + oImageToLoad.editorClass.prototype.getCoveringBackgroundSource(oImageToLoad.ajxpNode) + ')',
94+
backgroundSize : 'cover'
95+
});
96+
}else{
97+
var newImg = oImageToLoad.editorClass.prototype.getPreview(oImageToLoad.ajxpNode);
98+
newImg.setAttribute("data-is_loaded", "true");
99+
if(img.parentNode) {
100+
img.parentNode.replaceChild(newImg, img);
101+
}
102+
oImageToLoad.mainObject.IMAGE_ELEMENT = newImg;
103+
this.resizeThumbnail(newImg);
104+
oImageToLoad.PFacLoader = null;
94105
}
95-
oImageToLoad.mainObject.IMAGE_ELEMENT = newImg;
96-
this.resizeThumbnail(newImg);
97-
oImageToLoad.PFacLoader = null;
98106
this.loadNextImage();
99107
}.bind(this);
100108
oImageToLoad.PFacLoader.src = oImageToLoad.editorClass.prototype.getThumbnailSource(oImageToLoad.ajxpNode);

‎core/src/plugins/gui.ajax/res/js/vendor/webfx/ajxptree.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,11 @@ AJXPTree.prototype.setAjxpRootNode = function(rootNode){
9696
};
9797
this.ajxpNode.observe("force_clear", clear.bind(this));
9898
this.ajxpNode.observe("node_replaced", clear.bind(this));
99+
this.ajxpNode.observe("meta_replaced", function(newNode){
100+
var overlayIcon = splitOverlayIcons(newNode);
101+
var overlayClasses = splitOverlayClasses(newNode);
102+
this.updateIcon(this.icon, this.openIcon, overlayIcon, overlayClasses);
103+
}.bind(this));
99104
this.attachListeners(this, rootNode);
100105
if(oldNode){
101106
oldNode.notify("node_replaced");
@@ -136,11 +141,11 @@ AJXPTree.prototype.attachListeners = function(jsNode, ajxpNode){
136141
if(ajxpNode.getMetadata().get("openicon")){
137142
oic = resolveImageSource(ajxpNode.getMetadata().get("openicon"), "/images/mimes/ICON_SIZE", 16);
138143
}
139-
if(jsNode.icon != ic || jsNode.openIcon != oic){
140-
jsNode.updateIcon(ic, oic);
144+
var overlayIcon = splitOverlayIcons(ajxpNode);
145+
var overlayClasses = splitOverlayClasses(ajxpNode);
146+
if(jsNode.icon != ic || jsNode.openIcon != oic || jsNode.overlayIcon != overlayIcon || jsNode.overlayClasses != overlayClasses){
147+
jsNode.updateIcon(ic, oic, overlayIcon, overlayClasses);
141148
}
142-
jsNode.overlayIcon = splitOverlayIcons(ajxpNode);
143-
jsNode.overlayClasses = splitOverlayClasses(ajxpNode);
144149
}
145150
if(jsNode.updateLabel && jsNode.text != ajxpNode.getLabel()) {
146151
jsNode.updateLabel(ajxpNode.getLabel());

‎core/src/plugins/gui.ajax/res/js/vendor/webfx/xtree.js

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -274,6 +274,15 @@ WebFXTreeAbstractNode.prototype.updateLabel = function(label){
274274
if($(this.id+'-label')) $(this.id+'-label').update(label);
275275
};
276276

277+
WebFXTreeAbstractNode.prototype.updateIcon = function(icon, openIcon, overlayIcon, overlayClasses){
278+
if(openIcon) this.openIcon = openIcon;
279+
else this.openIcon = icon;
280+
this.icon = icon;
281+
this.overlayIcon = overlayIcon ? overlayIcon : [];
282+
this.overlayClasses = overlayClasses ? overlayClasses : [];
283+
this.setLabelIcon((this.open && webFXTreeHandler.behavior != 'classic'?this.openIcon:icon));
284+
};
285+
277286
WebFXTreeAbstractNode.prototype.setLabelIcon = function(icon){
278287
if(!$(this.id+'-label')) return;
279288
var label = $(this.id+'-label');
@@ -559,11 +568,22 @@ WebFXTree.prototype.keydown = function(key) {
559568
} ;
560569

561570
WebFXTree.prototype.toString = function() {
562-
563-
var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFXTreeHandler.keydown(this, event)\">" +
571+
572+
var d = '';
573+
if(this.overlayClasses) {
574+
575+
d = '<div class="overlay_icon_div">';
576+
this.overlayClasses.each(function (c) {
577+
d += '<span class="overlay-class-span ' + c + '"></span>';
578+
});
579+
d += '</div>';
580+
581+
}
582+
583+
var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFXTreeHandler.keydown(this, event)\">" +
564584
"<a href=\"/\" id=\"" + this.id + "-anchor\" onkeydown=\"return webFXTreeHandler.linkKeyPress(this, event);\" onfocus=\"webFXTreeHandler.focus(this);\" onblur=\"webFXTreeHandler.blur(this);\"" +
565585
(this.target ? " target=\"" + this.target + "\"" : "") +
566-
">" + '<span id=\"' +this.id+ '-label\" style="background-image:url(\''+ ((webFXTreeHandler.behavior == 'classic' && this.open)?this.openIcon:this.icon) +'\');">' + this.text + "</span>" + "</a></div>" +
586+
">" + '<span id=\"' +this.id+ '-label\" style="background-image:url(\''+ ((webFXTreeHandler.behavior == 'classic' && this.open)?this.openIcon:this.icon) +'\');">' + this.text + d + "</span>" + "</a></div>" +
567587
"<div id=\"" + this.id + "-cont\" class=\"webfx-tree-container first_container\" style=\"display: " + ((this.open)?'block':'none') + ";\">";
568588
var sb = [];
569589
for (var i = 0; i < this.childNodes.length; i++) {
@@ -593,13 +613,6 @@ function WebFXTreeItem(sText, sAction, eParent, sIcon, sOpenIcon, sOverlayIcon,
593613

594614
WebFXTreeItem.prototype = new WebFXTreeAbstractNode;
595615

596-
WebFXTreeItem.prototype.updateIcon = function(icon, openIcon){
597-
if(openIcon) this.openIcon = openIcon;
598-
else this.openIcon = icon;
599-
this.icon = icon;
600-
this.setLabelIcon((this.open && webFXTreeHandler.behavior != 'classic'?this.openIcon:icon));
601-
};
602-
603616

604617
WebFXTreeItem.prototype.remove = function() {
605618
if(!$(this.id+'-plus')) return;

‎core/src/plugins/gui.ajax/res/themes/orbit/css/allz.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎core/src/plugins/gui.ajax/res/themes/orbit/css/base/body.less

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ input, textarea, .selectable{
5555
}
5656

5757
.selected{
58-
background: #CCC !important;
58+
background-color: #CCC !important;
5959
text-decoration: none;
6060
}
6161

@@ -66,7 +66,7 @@ input, textarea, .selectable{
6666
}
6767

6868
.no_select_bg::-moz-selection {
69-
background:transparent;
69+
background-color:transparent;
7070
}
7171

7272
.css_boxshadow{

‎core/src/plugins/gui.ajax/res/themes/orbit/css/components/selectablelist.less

Lines changed: 45 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -221,24 +221,45 @@
221221
&.fl-displayMode-thumb {
222222

223223
div.thumbnail_selectable_cell{
224-
margin: 5px;
225-
background-color: @filelist_thumbnail_background;
226-
border-radius: 2px;
224+
margin: 1px;
225+
background-color: #ECEFF1 /*@filelist_thumbnail_background*/;
226+
border-radius: 0px;
227227
padding: 0 0 3px;
228-
box-shadow: 0 1px 3px rgba(0,0,0,0.43);
228+
background-size: cover;
229+
background-position: center;
230+
box-sizing: border-box;
231+
position: relative;
229232
div.thumbLabel{
230-
margin-top: -29px;
233+
text-align: left;
234+
position: relative;
231235
opacity: 1;
232-
background-color: @filelist_thumbnail_label_background;
233-
padding: 8px 3px;
234-
color: @filelist_thumbnail_label_color;
235-
border-radius: 0 0 2px 2px;
236+
background-color: rgba(0, 0, 0, 0.45);
237+
padding: 12px 16px;
238+
color: #ffffff;
239+
font-weight: 500;
240+
position: absolute;
241+
bottom: 0;
242+
right: 0;
243+
left: 0;
244+
}
245+
246+
div.overlay_icon_div{
247+
top: 14px !important;
248+
right: 17px !important;
249+
span.overlay-class-span{
250+
color: white !important;
251+
font-size: 14px;
252+
}
236253
}
237254

238255
&.fl-displayMode-thumbsize-medium div.thumbLabel{
239-
padding:1px;
256+
padding: 6px 8px;
240257
margin-top: -15px;
241-
font-size: 0.7em;
258+
font-size: 0.8em;
259+
div.overlay_icon_div {
260+
top: 8px !important;
261+
right: 10px !important;
262+
}
242263
}
243264

244265
&.fl-displayMode-thumbsize-large div.thumbLabel{
@@ -250,14 +271,23 @@
250271
}
251272

252273
&.selected-focus {
253-
background-color: @filelist_thumbnail_background !important;
274+
border: 2px solid @filelist_selection_background;
275+
/*background-color: @filelist_thumbnail_background !important;*/
276+
div.overlay_icon_div{
277+
right: 15px !important;
278+
}
254279
&.fl-displayMode-thumbsize-small{
255280
background-color: @filelist_selection_background !important;
256281
}
257282
div.thumbLabel{
258-
opacity: 1;
259-
background-color: @filelist_selection_background;
260-
color:@filelist_selection_color;
283+
padding: 12px 14px 10px 14px;
284+
}
285+
&.fl-displayMode-thumbsize-medium div.thumbLabel{
286+
padding: 6px 8px 4px 6px !important;
287+
div.overlay_icon_div {
288+
top: 8px !important;
289+
right: 8px !important;
290+
}
261291
}
262292
span.overlay-class-span{
263293
color: @filelist_selection_background;

0 commit comments

Comments
 (0)