From 26ca7a0e2f86cb76726073f2d73fd5cb8a1e09d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
<skjnldsv@protonmail.com>
Date: Tue, 23 Oct 2018 10:38:00 +0200
Subject: [PATCH] Add filepicker toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
apps/files/appinfo/routes.php | 5 ++++
apps/files/lib/Controller/ApiController.php | 11 ++++++++
core/css/styles.scss | 24 +++++++++++++++-
core/js/oc-dialogs.js | 31 +++++++++++++++++++++
core/templates/filepicker.html | 2 ++
5 files changed, 72 insertions(+), 1 deletion(-)
diff --git a/apps/files/appinfo/routes.php b/apps/files/appinfo/routes.php
index 61bc1d99a5d..ef648bf2850 100644
--- a/apps/files/appinfo/routes.php
+++ b/apps/files/appinfo/routes.php
@@ -66,6 +66,11 @@ $application->registerRoutes(
'url' => '/api/v1/showgridview',
'verb' => 'POST'
],
+ [
+ 'name' => 'API#getGridView',
+ 'url' => '/api/v1/showgridview',
+ 'verb' => 'GET'
+ ],
[
'name' => 'view#index',
'url' => '/',
diff --git a/apps/files/lib/Controller/ApiController.php b/apps/files/lib/Controller/ApiController.php
index 3c1eb6e43fb..e70f34bd1a4 100644
--- a/apps/files/lib/Controller/ApiController.php
+++ b/apps/files/lib/Controller/ApiController.php
@@ -38,6 +38,7 @@ use OCP\Files\NotFoundException;
use OCP\IConfig;
use OCP\IRequest;
use OCP\AppFramework\Http\DataResponse;
+use OCP\AppFramework\Http\JSONResponse;
use OCP\AppFramework\Http\FileDisplayResponse;
use OCP\AppFramework\Http\Response;
use OCA\Files\Service\TagService;
@@ -279,6 +280,16 @@ class ApiController extends Controller {
return new Response();
}
+ /**
+ * Get default settings for the grid view
+ *
+ * @NoAdminRequired
+ */
+ public function getGridView() {
+ $status = $this->config->getUserValue($this->userSession->getUser()->getUID(), 'files', 'show_grid', '1') === '1';
+ return new JSONResponse(['gridview' => $status]);
+ }
+
/**
* Toggle default for showing/hiding xxx folder
*
diff --git a/core/css/styles.scss b/core/css/styles.scss
index b5968015d6f..d9c0d7c6e4c 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -698,10 +698,14 @@ code {
/* ---- DIALOGS ---- */
#oc-dialog-filepicker-content {
+ position: relative;
+
.dirtree {
- width: 96%;
+ width: 100%;
flex-wrap: wrap;
padding-left: 12px;
+ padding-right: 44px;
+ box-sizing: border-box;
div:first-child a {
background-image: url('../img/places/home.svg?v=1');
@@ -721,6 +725,24 @@ code {
}
}
}
+
+ /* Grid view toggle */
+ #picker-view-toggle {
+ position: absolute;
+ background-color: transparent;
+ border: none;
+ margin: 0;
+ padding: 22px;
+ opacity: .5;
+ right: 0;
+ top: 0;
+
+ &:hover,
+ &:focus {
+ opacity: 1;
+ }
+ }
+
.filelist-container {
box-sizing: border-box;
display: inline-block;
diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js
index c42b35ddcff..5231a94f333 100644
--- a/core/js/oc-dialogs.js
+++ b/core/js/oc-dialogs.js
@@ -208,6 +208,7 @@ var OCdialogs = {
this.filepicker.loading = true;
this.filepicker.filesClient = (OCA.Sharing && OCA.Sharing.PublicApp && OCA.Sharing.PublicApp.fileList)? OCA.Sharing.PublicApp.fileList.filesClient: OC.Files.getClient();
+
$.when(this._getFilePickerTemplate()).then(function($tmpl) {
self.filepicker.loading = false;
var dialogName = 'oc-dialog-filepicker-content';
@@ -237,6 +238,11 @@ var OCdialogs = {
$('body').append(self.$filePicker);
+ self.$showGridView = $('input#picker-showgridview');
+ self.$showGridView.on('change', _.bind(self._onGridviewChange, self));
+
+ self._getGridSettings();
+
self.$filePicker.ready(function() {
self.$filelist = self.$filePicker.find('.filelist tbody');
self.$dirTree = self.$filePicker.find('.dirtree');
@@ -779,6 +785,31 @@ var OCdialogs = {
//}
return dialogDeferred.promise();
},
+ // get the gridview setting and set the input accordingly
+ _getGridSettings: function() {
+ var self = this;
+ $.get(OC.generateUrl('/apps/files/api/v1/showgridview'), function(response) {
+ self.$showGridView.checked = response.gridview;
+ self.$showGridView.next('#picker-view-toggle')
+ .removeClass('icon-toggle-filelist icon-toggle-pictures')
+ .addClass(response.gridview ? 'icon-toggle-filelist' : 'icon-toggle-pictures')
+ $('.list-container').toggleClass('view-grid', response.gridview);
+ });
+ },
+ _onGridviewChange: function() {
+ var show = this.$showGridView.is(':checked');
+ // only save state if user is logged in
+ if (OC.currentUser) {
+ $.post(OC.generateUrl('/apps/files/api/v1/showgridview'), {
+ show: show
+ });
+ }
+ this.$showGridView.next('#picker-view-toggle')
+ .removeClass('icon-toggle-filelist icon-toggle-pictures')
+ .addClass(show ? 'icon-toggle-filelist' : 'icon-toggle-pictures')
+
+ $('.list-container').toggleClass('view-grid', show);
+ },
_getFilePickerTemplate: function() {
var defer = $.Deferred();
if(!this.$filePickerTemplate) {
diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
index 8b33b879085..53daf4111b4 100644
--- a/core/templates/filepicker.html
+++ b/core/templates/filepicker.html
@@ -1,5 +1,7 @@
<div id="{dialog_name}" title="{title}">
<span class="dirtree breadcrumb"></span>
+ <input type="checkbox" class="hidden" id="picker-showgridview" checked="checked" />
+ <label id="picker-view-toggle" for="picker-showgridview" class="button icon-toggle-filelist" tabindex="0"></label>
<div class="filelist-container">
<div class="emptycontent">
<div class="icon-folder"></div>
--
GitLab