mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Grid init 

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2018-10-03 10:59:31 +02:00 committed by Jan-Christoph Borchardt
parent 302a5d8171
commit f717bed085
No known key found for this signature in database
GPG Key ID: CBD846FC845CBE17
3 changed files with 45 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
apps/files/css/files.scss
View File

@ -726,3 +726,37 @@ table.dragshadow td.size {
height: 30px;
line-height: 30px;
}
/* GRID */
#filestable.view-grid {
display: flex;
flex-direction: column;
thead {
display: none;
}
tbody {
display: grid;
grid-template-columns: repeat(auto-fill, 180px);
justify-content: space-around;
row-gap: 15px;
tr {
display: block;
height: 180px;
}
td {
display: block;
&.selection {
position: absolute;
top: 0;
left: 0;
display: flex;
width: 44px;
label {
width: 44px;
height: 44px;
display: inline-block;
}
}
}
}
}

10
apps/files/js/filelist.js
View File

@ -327,6 +327,9 @@
this.$el.find('thead th .columntitle').click(_.bind(this._onClickHeader, this));
// Toggle for grid view
$('#view-button').on('click', this._onGridToggle);
this._onResize = _.debounce(_.bind(this._onResize, this), 250);
$('#app-content').on('appresized', this._onResize);
$(window).resize(this._onResize);
@ -587,6 +590,13 @@
this.$table.find('>thead').width($('#app-content').width() - OC.Util.getScrollBarWidth());
},
/**
* Event handler for grid view toggle
*/
_onGridToggle: function() {
$('.list-container').toggleClass('view-grid');
},
/**
* Event handler when leaving previously hidden state
*/

2
apps/files/templates/list.php
View File

@ -38,7 +38,7 @@
<p></p>
</div>
<table id="filestable" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="32" data-preview-y="32">
<table id="filestable" class="view-grid" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="32" data-preview-y="32">
<thead>
<tr>
<th id="headerSelection" class="hidden column-selection">