Merge pull request #12303 from nextcloud/grid-for-all-file-templates

Add grid toggle for every files view

apps/files/css/files.scss

@@ -55,6 +55,10 @@
 	position: relative;
 	width: 100%;
 	min-width: 250px;
+	// hide table if emptycontent is not hidden
+	#emptycontent:not(.hidden) ~ & {
+		display: none;
+	}
 }
 
 /* fit app list view heights */
@@ -982,6 +986,9 @@ table.dragshadow td.size {
 	margin: 0;
 	padding: 22px;
 	opacity: .5;
+	position: fixed;
+	right: 0;
+	z-index: 100;
 
 	&:hover,
 	&:focus,

apps/files/js/filelist.js

@@ -331,9 +331,10 @@
 
 			this.$el.find('thead th .columntitle').click(_.bind(this._onClickHeader, this));
 
-			// Toggle for grid view
-			this.$showGridView = $('input#showgridview');
+			// Toggle for grid view, only register once
+			this.$showGridView = $('input#showgridview:not(.registered)');
 			this.$showGridView.on('change', _.bind(this._onGridviewChange, this));
+			this.$showGridView.addClass('registered');
 			$('#view-toggle').tooltip({placement: 'bottom', trigger: 'hover'});
 
 			this._onResize = _.debounce(_.bind(this._onResize, this), 250);
@@ -1952,10 +1953,10 @@
 		generatePreviewUrl: function(urlSpec) {
 			urlSpec = urlSpec || {};
 			if (!urlSpec.x) {
-				urlSpec.x = this.$table.data('preview-x') || 32;
+				urlSpec.x = this.$table.data('preview-x') || 250;
 			}
 			if (!urlSpec.y) {
-				urlSpec.y = this.$table.data('preview-y') || 32;
+				urlSpec.y = this.$table.data('preview-y') || 250;
 			}
 			urlSpec.x *= window.devicePixelRatio;
 			urlSpec.y *= window.devicePixelRatio;

apps/files/lib/Controller/ViewController.php

@@ -257,6 +257,8 @@ class ViewController extends Controller {
 		$params['allowShareWithLink']          = $this->config->getAppValue('core', 'shareapi_allow_links', 'yes');
 		$params['defaultFileSorting']          = $this->config->getUserValue($user, 'files', 'file_sorting', 'name');
 		$params['defaultFileSortingDirection'] = $this->config->getUserValue($user, 'files', 'file_sorting_direction', 'asc');
+		$params['showgridview']				   = $this->config->getUserValue($user, 'files', 'show_grid', true);
+		$params['isIE']						   = \OCP\Util::isIE();
 		$showHidden                            = (bool) $this->config->getUserValue($this->userSession->getUser()->getUID(), 'files', 'show_hidden', false);
 		$params['showHiddenFiles']             = $showHidden ? 1 : 0;
 		$params['fileNotFound']                = $fileNotFound ? 1 : 0;

apps/files/list.php

@@ -25,14 +25,15 @@ $config = \OC::$server->getConfig();
 $userSession = \OC::$server->getUserSession();
 // TODO: move this to the generated config.js
 $publicUploadEnabled = $config->getAppValue('core', 'shareapi_allow_public_upload', 'yes');
+
 $showgridview = $config->getUserValue($userSession->getUser()->getUID(), 'files', 'show_grid', true);
 $isIE = \OCP\Util::isIE();
 
 // renders the controls and table headers template
 $tmpl = new OCP\Template('files', 'list', '');
-$tmpl->assign('publicUploadEnabled', $publicUploadEnabled);
+
 // gridview not available for ie
 $tmpl->assign('showgridview', $showgridview && !$isIE);
-$tmpl->assign('isIE', $isIE);
+$tmpl->assign('publicUploadEnabled', $publicUploadEnabled);
 $tmpl->printPage();
 

apps/files/recentlist.php

@@ -23,7 +23,15 @@
  */
 // Check if we are a user
 OCP\User::checkLoggedIn();
+$config = \OC::$server->getConfig();
+$userSession = \OC::$server->getUserSession();
+
+$showgridview = $config->getUserValue($userSession->getUser()->getUID(), 'files', 'show_grid', true);
+$isIE = \OCP\Util::isIE();
 
 $tmpl = new OCP\Template('files', 'recentlist', '');
 
+// gridview not available for ie
+$tmpl->assign('showgridview', $showgridview && !$isIE);
+
 $tmpl->printPage();

apps/files/simplelist.php

@@ -22,8 +22,16 @@
  */
 
 // TODO: move to handlebars
+$config = \OC::$server->getConfig();
+$userSession = \OC::$server->getUserSession();
+
+$showgridview = $config->getUserValue($userSession->getUser()->getUID(), 'files', 'show_grid', true);
+$isIE = \OCP\Util::isIE();
 
 // renders the controls and table headers template
 $tmpl = new OCP\Template('files', 'simplelist', '');
+
+// gridview not available for ie
+$tmpl->assign('showgridview', $showgridview && !$isIE);
 $tmpl->printPage();
 

apps/files/templates/index.php

@@ -1,6 +1,14 @@
 <?php /** @var $l \OCP\IL10N */ ?>
 <?php $_['appNavigation']->printPage(); ?>
 <div id="app-content">
+
+	<?php if (!$_['isIE']) { ?>
+		<input type="checkbox" class="hidden-visually" id="showgridview"
+			<?php if($_['showgridview']) { ?>checked="checked" <?php } ?>/>
+		<label id="view-toggle" for="showgridview" class="button <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>"
+			title="<?php p($l->t('Toggle grid view'))?>"></label>
+	<?php } ?>
+
 	<?php foreach ($_['appContents'] as $content) { ?>
 	<div id="app-content-<?php p($content['id']) ?>" class="hidden viewcontainer">
 	<?php print_unescaped($content['content']) ?>

apps/files/templates/list.php

@@ -24,13 +24,6 @@
 	<?php endif;?>
 	<input type="hidden" class="max_human_file_size"
 		   value="(max <?php isset($_['uploadMaxHumanFilesize']) ? p($_['uploadMaxHumanFilesize']) : ''; ?>)">
-	<!-- IF NOT IE, SHOW GRIDVIEW -->
-	<?php if (!$_['isIE']) { ?>
-	<input type="checkbox" class="hidden-visually" id="showgridview"
-		<?php if($_['showgridview']) { ?>checked="checked" <?php } ?>/>
-	<label id="view-toggle" for="showgridview" class="button <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>"
-		   title="<?php p($l->t('Toggle grid view'))?>"></label>
-	<?php } ?>
 </div>
 
 <div id="emptycontent" class="hidden">
@@ -44,7 +37,6 @@
 	<h2><?php p($l->t('No entries found in this folder')); ?></h2>
 	<p></p>
 </div>
-
 <table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="250" data-preview-y="250">
 	<thead>
 		<tr>

apps/files/templates/recentlist.php

@@ -11,7 +11,7 @@
 	<p></p>
 </div>
 
-<table id="filestable" class="list-container view-grid">
+<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>">
 	<thead>
 	<tr>
 		<th id='headerName' class="hidden column-name">

apps/files/templates/simplelist.php

@@ -13,7 +13,7 @@
 	<h2><?php p($l->t('No entries found in this folder')); ?></h2>
 	<p></p>
 </div>
-<table id="filestable" class="list-container view-grid">
+<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>">
 	<thead>
 		<tr>
 			<th id='headerName' class="hidden column-name">

apps/files/tests/Controller/ViewControllerTest.php

@@ -131,12 +131,13 @@ class ViewControllerTest extends TestCase {
 				[$this->user->getUID(), 'files', 'file_sorting', 'name', 'name'],
 				[$this->user->getUID(), 'files', 'file_sorting_direction', 'asc', 'asc'],
 				[$this->user->getUID(), 'files', 'show_hidden', false, false],
+				[$this->user->getUID(), 'files', 'show_grid', true, true],
 			]));
 
-		$this->config
-			->expects($this->any())
-			->method('getAppValue')
-			->will($this->returnArgument(2));
+			$this->config
+				->expects($this->any())
+				->method('getAppValue')
+				->will($this->returnArgument(2));
 
 		$nav = new Template('files', 'appnavigation');
 		$nav->assign('usage_relative', 123);
@@ -366,6 +367,8 @@ class ViewControllerTest extends TestCase {
 					],
 				],
 				'hiddenFields' => [],
+				'showgridview' => true,
+				'isIE' => false,
 			]
 		);
 		$policy = new Http\ContentSecurityPolicy();

apps/files_external/list.php

@@ -22,9 +22,17 @@
  */
 // Check if we are a user
 OCP\User::checkLoggedIn();
+$config = \OC::$server->getConfig();
+$userSession = \OC::$server->getUserSession();
+
+$showgridview = $config->getUserValue($userSession->getUser()->getUID(), 'files', 'show_grid', true);
+$isIE = \OCP\Util::isIE();
 
 $tmpl = new OCP\Template('files_external', 'list', '');
 
+// gridview not available for ie
+$tmpl->assign('showgridview', $showgridview && !$isIE);
+
 /* Load Status Manager */
 \OCP\Util::addStyle('files_external', 'external');
 \OCP\Util::addScript('files_external', 'statusmanager');

apps/files_external/templates/list.php

@@ -11,7 +11,7 @@
 
 <input type="hidden" name="dir" value="" id="dir">
 
-<table id="filestable" class="list-container view-grid">
+<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>">
 	<thead>
 		<tr>
 			<th id='headerName' class="hidden column-name">

apps/files_sharing/css/public.scss

@@ -169,6 +169,7 @@ thead {
 	position: relative;
 	font-weight: 300;
 	font-size: 11px;
+	line-height: 11px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }

apps/files_sharing/js/public.js

@@ -229,10 +229,10 @@ OCA.Sharing.PublicApp = {
 			this.fileList.generatePreviewUrl = function (urlSpec) {
 				urlSpec = urlSpec || {};
 				if (!urlSpec.x) {
-					urlSpec.x = this.$table.data('preview-x') || 32;
+					urlSpec.x = this.$table.data('preview-x') || 250;
 				}
 				if (!urlSpec.y) {
-					urlSpec.y = this.$table.data('preview-y') || 32;
+					urlSpec.y = this.$table.data('preview-y') || 250;
 				}
 				urlSpec.x *= window.devicePixelRatio;
 				urlSpec.y *= window.devicePixelRatio;

apps/files_sharing/lib/Controller/ShareController.php

@@ -367,6 +367,8 @@ class ShareController extends AuthPublicShareController {
 			$shareTmpl['folder'] = $folder->fetchPage();
 		}
 
+		$shareTmpl['showgridview'] = true;
+
 		$shareTmpl['hideFileList'] = $hideFileList;
 		$shareTmpl['shareOwner'] = $this->userManager->get($share->getShareOwner())->getDisplayName();
 		$shareTmpl['downloadURL'] = $this->urlGenerator->linkToRouteAbsolute('files_sharing.sharecontroller.downloadShare', ['token' => $this->getToken()]);

apps/files_sharing/list.php

@@ -21,9 +21,17 @@
  */
 // Check if we are a user
 OCP\User::checkLoggedIn();
+$config = \OC::$server->getConfig();
+$userSession = \OC::$server->getUserSession();
+
+$showgridview = $config->getUserValue($userSession->getUser()->getUID(), 'files', 'show_grid', true);
+$isIE = \OCP\Util::isIE();
 
 $tmpl = new OCP\Template('files_sharing', 'list', '');
 
+// gridview not available for ie
+$tmpl->assign('showgridview', $showgridview && !$isIE);
+
 OCP\Util::addScript('files_sharing', 'app');
 OCP\Util::addScript('files_sharing', 'sharedfilelist');
 

apps/files_sharing/templates/list.php

@@ -10,7 +10,7 @@
 	<h2><?php p($l->t('No entries found in this folder')); ?></h2>
 </div>
 
-<table id="filestable" class="list-container view-grid">
+<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>">
 	<thead>
 		<tr>
 			<th id='headerName' class="hidden column-name">

apps/files_sharing/templates/public.php

@@ -45,6 +45,13 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
 	</div>
 <?php endif; ?>
 
+<?php if (!$_['isIE']) { ?>
+	<input type="checkbox" class="hidden-visually" id="showgridview"
+		<?php if($_['showgridview']) { ?>checked="checked" <?php } ?>/>
+	<label id="view-toggle" for="showgridview" class="button <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>"
+		title="<?php p($l->t('Toggle grid view'))?>"></label>
+<?php } ?>
+
 <?php if (!isset($_['hideFileList']) || (isset($_['hideFileList']) && $_['hideFileList'] === false)) { ?>
 	<div id="files-public-content">
 		<div id="preview">

apps/files_sharing/tests/Controller/ShareControllerTest.php

@@ -288,7 +288,8 @@ class ShareControllerTest extends \Test\TestCase {
 			'previewImage' => null,
 			'previewURL' => 'downloadURL',
 			'note' => $note,
-			'hideDownload' => false
+			'hideDownload' => false,
+			'showgridview' => true
 		);
 
 		$csp = new \OCP\AppFramework\Http\ContentSecurityPolicy();
@@ -407,7 +408,8 @@ class ShareControllerTest extends \Test\TestCase {
 			'previewImage' => null,
 			'previewURL' => 'downloadURL',
 			'note' => $note,
-			'hideDownload' => true
+			'hideDownload' => true,
+			'showgridview' => true
 		);
 
 		$csp = new \OCP\AppFramework\Http\ContentSecurityPolicy();

apps/files_trashbin/list.php

@@ -24,8 +24,16 @@
 // Check if we are a user
 OCP\User::checkLoggedIn();
 
+$config = \OC::$server->getConfig();
+$userSession = \OC::$server->getUserSession();
+
+$showgridview = $config->getUserValue($userSession->getUser()->getUID(), 'files', 'show_grid', true);
+$isIE = \OCP\Util::isIE();
 
 $tmpl = new OCP\Template('files_trashbin', 'index', '');
+
+// gridview not available for ie
+$tmpl->assign('showgridview', $showgridview && !$isIE);
 OCP\Util::addStyle('files_trashbin', 'trash');
 OCP\Util::addScript('files_trashbin', 'app');
 OCP\Util::addScript('files_trashbin', 'filelist');

apps/files_trashbin/templates/index.php

@@ -18,7 +18,7 @@
 	<p></p>
 </div>
 
-<table id="filestable" class="list-container view-grid">
+<table id="filestable" class="list-container <?php p($_['showgridview'] ? 'view-grid' : '') ?>">
 	<thead>
 		<tr>
 			<th id="headerSelection" class="hidden column-selection">

apps/systemtags/templates/list.php

@@ -13,7 +13,7 @@
 	<p></p>
 </div>
 
-<table id="filestable" data-preview-x="32" data-preview-y="32">
+<table id="filestable" data-preview-x="250" data-preview-y="250">
 	<thead>
 		<tr>
 			<th id='headerName' class="hidden column-name">