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

Commit

Permalink
Rework thumbnail display (adjust to list width)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cdujeu
cdujeu committed Jul 16, 2014
1 parent 8bd007c commit 607f212
Show file tree
Hide file tree
Showing 6 changed files with 106 additions and 16 deletions.
5 changes: 4 additions & 1 deletion core/src/plugins/core.notifications/class.NotificationLoader.js
View file
Expand Up @@ -298,6 +298,9 @@ Class.create("NotificationLoader", {
loadInfoPanel : function(container, node){
container.down("#ajxp_activity_panel").update('<div class="panelHeader" style="display: none;">'+(node.isLeaf()?'File Activity':'Folder Activity')+'</div><div id="activity_results">Nothing</div>');
var resultPane = container.down("#activity_results");
if(node.isLeaf()) resultPane.addClassName('leaf_activity');
else resultPane.removeClassName('leaf_activity');

var fRp = new FetchedResultPane(resultPane, {
"fit":"content",
"columnsDef":[
Expand All @@ -312,7 +315,7 @@ Class.create("NotificationLoader", {
"connexion_discrete":true,
"format":"xml", "current_repository":"true",
"feed_type":"notif",
"limit":(node.isRoot() ? 15 : 5),
"limit":(node.isLeaf() || node.isRoot() ? 12 : 4),
"path":(node.isLeaf() || node.isRoot()?node.getPath():node.getPath()+'/'),
"merge_description":"true",
"description_as_label":node.isLeaf()?"true":"false"
Expand Down
2 changes: 1 addition & 1 deletion core/src/plugins/gui.ajax/res/js/ajaxplorer.js
View file

Large diffs are not rendered by default.

44 changes: 40 additions & 4 deletions core/src/plugins/gui.ajax/res/js/ajaxplorer/class.FilesList.js
View file
Expand Up @@ -616,6 +616,13 @@ Class.create("FilesList", SelectableElements, {
if(this.slider){
this.slider.destroy();
}
$A(['list', 'thumb', 'detail']).each(function(f){
if(this._displayMode == f){
this.htmlElement.addClassName('fl-displayMode-' + f);
} else {
this.htmlElement.removeClassName('fl-displayMode-' + f);
}
}.bind(this));
if(this._displayMode == "list")
{
var buffer = '';
Expand Down Expand Up @@ -1033,6 +1040,9 @@ Class.create("FilesList", SelectableElements, {
if(this.htmlElement.down('.table_rows_container') && Prototype.Browser.IE && this.gridStyle == "file"){
this.htmlElement.down('.table_rows_container').setStyle({width:'100%'});
}
if(this._displayMode == 'thumb'){
this.resizeThumbnails();
}
this.notify("resize");
document.fire("ajaxplorer:resize-FilesList-" + this.htmlElement.id, this.htmlElement.getDimensions());
},
Expand Down Expand Up @@ -1127,10 +1137,11 @@ Class.create("FilesList", SelectableElements, {
// Disable text select on elements
if(this._displayMode == "thumb" || this._displayMode == "detail")
{
this.resizeThumbnails();
var adjusted = this.resizeThumbnails();
if(this.protoMenu) this.protoMenu.addElements('#selectable_div-'+this.__currentInstanceIndex);
window.setTimeout(function(){
this._previewFactory.setThumbSize((this._displayMode=='detail'? this._detailThumbSize:this._thumbSize));
if(adjusted) this._previewFactory.setThumbSize(adjusted);
else this._previewFactory.setThumbSize((this._displayMode=='detail'? this._detailThumbSize:this._thumbSize));
this._previewFactory.loadNextImage();
}.bind(this),10);
}
Expand Down Expand Up @@ -2122,6 +2133,7 @@ Class.create("FilesList", SelectableElements, {
elList = this._htmlElement.select('div.thumbnail_selectable_cell.detailed');
}
var ellipsisDetected;
var tSize=0;
elList.each(function(element){
//if(element.up('div.thumbnail_selectable_cell.detailed')) return;
var node = element.ajxpNode;
Expand All @@ -2132,11 +2144,19 @@ Class.create("FilesList", SelectableElements, {
return;
}
var elementsAreSiblings = (label_element && (label_element.siblings().indexOf(image_element) !== -1));
var tSize = (this._displayMode=='detail'? this._detailThumbSize:this._thumbSize);
tSize = this.getAdjustedThumbSize(element);

element.removeClassName('fl-displayMode-thumbsize-small');
element.removeClassName('fl-displayMode-thumbsize-medium');
element.removeClassName('fl-displayMode-thumbsize-large');
if(tSize < 80) element.addClassName('fl-displayMode-thumbsize-small');
else if(tSize < 150) element.addClassName('fl-displayMode-thumbsize-medium');
else element.addClassName('fl-displayMode-thumbsize-large');

if(element.down('div.thumbnail_selectable_cell')){
element.down('div.thumbnail_selectable_cell').setStyle({width:tSize+5+'px', height:tSize+10 +'px'});
}else{
element.setStyle({width:tSize+25+'px', height:tSize+ 30 +'px'});
element.setStyle({width:tSize+25+'px', height:tSize + 10 + 'px'});
}
this._previewFactory.setThumbSize(tSize);
if(image_element){
Expand Down Expand Up @@ -2164,8 +2184,24 @@ Class.create("FilesList", SelectableElements, {
if(this.options.fit && this.options.fit == 'content'){
this.resize();
}
return tSize;
},

getAdjustedThumbSize:function(referenceElement){
var tSize = (this._displayMode=='detail'? this._detailThumbSize:this._thumbSize);
if(this._displayMode == 'thumb'){
// Readjust tSize
var w = this._htmlElement.getWidth();
var margin = parseInt(referenceElement.getStyle('marginLeft')) + parseInt(referenceElement.getStyle('marginRight'));
var realBlockSize = tSize + 25 + margin;
var number = Math.ceil(w / realBlockSize);
var blockSize = w / number;
tSize = blockSize - 25 - margin;
}
return tSize;
},


/**
* For list mode, recompute alternate BG distribution
* Should use CSS3 when possible!
Expand Down
65 changes: 58 additions & 7 deletions core/src/plugins/gui.ajax/res/themes/orbit/css/ajaxplorer.css
View file
Expand Up @@ -10,7 +10,8 @@ table.sort-table tr:nth-child(even)
}

#content_pane div.thumbnail_selectable_cell.detailed div.thumbLabel,
div.infoPanelBasenameTitle
div.infoPanelBasenameTitle,
.table_rows_container span#ajxp_label
{
font-family: "Open Sans Regular", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;;
}
Expand Down Expand Up @@ -187,6 +188,32 @@ kbd {
color: rgb(111, 121, 131);
}

.fl-displayMode-thumb div.thumbnail_selectable_cell{
margin: 1px;
background-color: #f9f9f9;
border-radius: 2px;
padding: 0 0 3px;
}

.fl-displayMode-thumb div.thumbnail_selectable_cell div.thumbLabel{

margin-top: -31px;
opacity: 1;
background-color: rgba(245, 245, 245, 0.35);
padding: 8px 3px;
}

.fl-displayMode-thumb div.thumbnail_selectable_cell.fl-displayMode-thumbsize-medium div.thumbLabel{
padding:1px;
margin-top: -18px;
font-size: 0.8em;
}

.fl-displayMode-thumb div.thumbnail_selectable_cell.fl-displayMode-thumbsize-small div.thumbLabel,
.fl-displayMode-thumb div.thumbnail_selectable_cell.selected-focus div.thumbLabel{
display: none;
}

.thumbnail_selectable_cell.detailed {;
margin: 0px 0px !important;
margin-bottom: 2px;
Expand Down Expand Up @@ -255,7 +282,7 @@ div.thumbnail_cell_metadata span.metadata_chunk{
}

.thumbnail_iconlike_shadow{
border: 1px solid white;
border: 0px solid white;
/*
-webkit-box-shadow: 0 0 5px #5C5C5C;
-moz-box-shadow: 0 0 5px #5C5C5C;
Expand Down Expand Up @@ -394,7 +421,7 @@ div.shadow_class
position: absolute;
top: 30%;
left: 30%;
z-index: 1002;
z-index: 1018;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 11px;
padding: 0;
Expand Down Expand Up @@ -2094,7 +2121,7 @@ div.resizeGhost{
width: 1px;
border-right: 1px solid #ccc;
position:absolute;
z-index:1000;
z-index:1017;
opacity:0.7;
}

Expand Down Expand Up @@ -3303,8 +3330,32 @@ div.class-FetchedResultPane div.thumbnail_selectable_cell.detailed span.text_lab
}

#info_panel div.class-FetchedResultPane div.thumbnail_selectable_cell.detailed div.thumbLabel{
font-size: 1.2em;
color: #555;
font-size: 1.3em;
color: #222;
white-space: normal;
line-height: 1.5em;
padding-bottom: 4px;
}

#info_panel div.class-FetchedResultPane div.thumbnail_selectable_cell.detailed div.thumbLabel small
{
color: #666;
display: block;
font-size: 11px;
line-height: 15px;
}

#info_panel div.class-FetchedResultPane.leaf_activity div.thumbnail_selectable_cell.detailed div.thumbLabel
{
color: #666;
display: block;
font-size: 13px;
line-height: 17px;
}

#info_panel div.ajxpNodeProvider.selected-focus
{
background-color: transparent !important;
}

#info_panel div.class-FetchedResultPane div.ajxpNodeProvider:hover{
Expand Down Expand Up @@ -3501,7 +3552,7 @@ div.one_has_many > div.toolbar_placeholder.one_or_less > div.toolbarGroup a {
text-align:center;
padding: 10px 6px;
position: relative;
background-color: white;
background-color: white;
margin: 10px 14px;
border-radius: 5px;
box-shadow: 0 0 7px rgba(0,0,0,0.25);
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/screen.css
View file
Expand Up @@ -21,7 +21,7 @@
border: 1em solid #B8B8B8;
background-color: white;
text-align: left;
z-index:1001;
z-index:1010;
overflow: auto;
}

Expand All @@ -32,7 +32,7 @@
left:0;
width:100%;
height:100%;
z-index:1000;
z-index:1015;
background-color: rgb(0, 0, 0);
-moz-opacity: 0.6;
opacity: .60;
Expand Down

0 comments on commit 607f212

Please sign in to comment.