diff options
| author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-10-03 10:59:31 +0200 |
|---|---|---|
| committer | Jan-Christoph Borchardt <hey@jancborchardt.net> | 2018-10-18 13:44:03 +0200 |
| commit | f717bed085b7ef8c1cc4bb982c63193a2c8bbdec (patch) | |
| tree | 114f585b2c7b8a2e56fed04f02181781c40a72eb | |
| parent | 302a5d81714c9aca3fa38fad9fe8879fb867c3e8 (diff) | |
| download | nextcloud-server-f717bed085b7ef8c1cc4bb982c63193a2c8bbdec.tar.gz nextcloud-server-f717bed085b7ef8c1cc4bb982c63193a2c8bbdec.zip | |
Grid init
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
| -rw-r--r-- | apps/files/css/files.scss | 34 | ||||
| -rw-r--r-- | apps/files/js/filelist.js | 10 | ||||
| -rw-r--r-- | apps/files/templates/list.php | 2 |
3 files changed, 45 insertions, 1 deletions
diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 5d8a20d86a6..ed15865b32a 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -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; + } + } + } + } +}
\ No newline at end of file diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 94052b10b33..2f61fe71db2 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -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); @@ -588,6 +591,13 @@ }, /** + * Event handler for grid view toggle + */ + _onGridToggle: function() { + $('.list-container').toggleClass('view-grid'); + }, + + /** * Event handler when leaving previously hidden state */ _onShow: function(e) { diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php index 9cae72a176f..f9cd5a2529d 100644 --- a/apps/files/templates/list.php +++ b/apps/files/templates/list.php @@ -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"> |