Grid init
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
parent
302a5d8171
commit
f717bed085
|
@ -726,3 +726,37 @@ table.dragshadow td.size {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
line-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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -327,6 +327,9 @@
|
||||||
|
|
||||||
this.$el.find('thead th .columntitle').click(_.bind(this._onClickHeader, this));
|
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);
|
this._onResize = _.debounce(_.bind(this._onResize, this), 250);
|
||||||
$('#app-content').on('appresized', this._onResize);
|
$('#app-content').on('appresized', this._onResize);
|
||||||
$(window).resize(this._onResize);
|
$(window).resize(this._onResize);
|
||||||
|
@ -587,6 +590,13 @@
|
||||||
this.$table.find('>thead').width($('#app-content').width() - OC.Util.getScrollBarWidth());
|
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
|
* Event handler when leaving previously hidden state
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -38,7 +38,7 @@
|
||||||
<p></p>
|
<p></p>
|
||||||
</div>
|
</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>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th id="headerSelection" class="hidden column-selection">
|
<th id="headerSelection" class="hidden column-selection">
|
||||||
|
|
Loading…
Reference in New Issue