Merge pull request #5305 from nextcloud/add-quota-to-files-view

Add quota to the files view

apps/files/css/files.scss

@@ -108,6 +108,10 @@
 .nav-icon-trashbin {
 	background-image: url('../img/delete.svg?v=1');
 }
+/* no icon for the quota bar */
+.nav-icon-quota {
+	padding-left: 15px !important;
+}
 
 #app-navigation .nav-files a.nav-icon-files {
 	width: auto;
@@ -747,3 +751,37 @@ table.dragshadow td.size {
 #filestable tbody tr.canDrop {
   background-color: rgba(255, 255, 140, 1);
 }
+
+
+#quota {
+	margin: 0 !important;
+	border: none;
+	border-radius: 0;
+	position: fixed !important;
+	bottom: 44px;
+	width: inherit !important;
+	background-color: #fff;
+	border-right: 1px solid #eee;
+	z-index:1;
+
+	.quota-container {
+		height: 5px;
+		border-radius: 3px;
+
+		div {
+			height: 100%;
+			background-color: $color-primary;
+		}
+	}
+}
+
+/* increase the padding of the last item to not hide below the quota item */
+.app-files #app-navigation > ul li:nth-last-child(1) {
+	margin-bottom: 44px;
+}
+
+#quotatext {
+	padding: 0;
+	height: 30px;
+	line-height: 30px;
+}

apps/files/js/app.js

@@ -108,6 +108,10 @@
 			// trigger URL change event handlers
 			this._onPopState(urlParams);
 
+			$('#quota.has-tooltip').tooltip({
+				placement: 'top'
+			});
+
 			this._debouncedPersistShowHiddenFilesState = _.debounce(this._persistShowHiddenFilesState, 1200);
 		},
 

apps/files/js/navigation.js

@@ -123,7 +123,9 @@
 		_onClickItem: function(ev) {
 			var $target = $(ev.target);
 			var itemId = $target.closest('li').attr('data-id');
+			if (!_.isUndefined(itemId)) {
 				this.setActiveItem(itemId);
+			}
 			ev.preventDefault();
 		}
 	};

apps/files/lib/Controller/ViewController.php

@@ -41,6 +41,7 @@ use OCP\IUserSession;
 use Symfony\Component\EventDispatcher\EventDispatcherInterface;
 use OCP\Files\Folder;
 use OCP\App\IAppManager;
+use Symfony\Component\EventDispatcher\GenericEvent;
 
 /**
  * Class ViewController
@@ -174,6 +175,17 @@ class ViewController extends Controller {
 		});
 		$nav->assign('navigationItems', $navItems);
 
+
+		$nav->assign('usage', \OC_Helper::humanFileSize($storageInfo['used']));
+		if ($storageInfo['quota'] === \OCP\Files\FileInfo::SPACE_UNLIMITED) {
+			$totalSpace = $this->l10n->t('Unlimited');
+		} else {
+			$totalSpace = \OC_Helper::humanFileSize($storageInfo['total']);
+		}
+		$nav->assign('total_space', $totalSpace);
+		$nav->assign('quota', $storageInfo['quota']);
+		$nav->assign('usage_relative', $storageInfo['relative']);
+
 		$contentItems = [];
 
 		// render the container content for every navigation item
@@ -188,7 +200,8 @@ class ViewController extends Controller {
 			$contentItems[] = $contentItem;
 		}
 
-		$this->eventDispatcher->dispatch('OCA\Files::loadAdditionalScripts');
+		$event = new GenericEvent(null, ['hiddenFields' => []]);
+		$this->eventDispatcher->dispatch('OCA\Files::loadAdditionalScripts', $event);
 
 		$params = [];
 		$params['usedSpacePercent'] = (int)$storageInfo['relative'];
@@ -204,6 +217,7 @@ class ViewController extends Controller {
 		$params['fileNotFound'] = $fileNotFound ? 1 : 0;
 		$params['appNavigation'] = $nav;
 		$params['appContents'] = $contentItems;
+		$params['hiddenFields'] = $event->getArgument('hiddenFields');
 
 		$response = new TemplateResponse(
 			$this->appName,

apps/files/templates/appnavigation.php

@@ -1,5 +1,23 @@
 <div id="app-navigation">
 	<ul class="with-icon">
+		<li id="quota" class="section <?php
+		if ($_['quota'] !== \OCP\Files\FileInfo::SPACE_UNLIMITED) {
+			?>has-tooltip" title="<?php p($_['usage_relative'] . '%');
+		} ?>">
+			<a href="#" class="nav-icon-quota svg">
+				<p id="quotatext"><?php
+					if ($_['quota'] !== \OCP\Files\FileInfo::SPACE_UNLIMITED) {
+						p($l->t('%s of %s used', [$_['usage'], $_['total_space']]));
+					} else {
+						p($l->t('%s used', [$_['usage']]));
+					} ?></p>
+				<div class="quota-container">
+					<div style="width:<?php p($_['usage_relative']);?>%"
+						 <?php if($_['usage_relative'] > 80): ?>class="quota-warning"<?php endif; ?>>
+					</div>
+				</div>
+			</a>
+		</li>
 		<?php foreach ($_['navigationItems'] as $item) { ?>
 		<li data-id="<?php p($item['id']) ?>" class="nav-<?php p($item['id']) ?>">
 			<a href="<?php p(isset($item['href']) ? $item['href'] : '#') ?>"

apps/files/templates/index.php

@@ -21,3 +21,7 @@
 <input type="hidden" name="defaultFileSortingDirection" id="defaultFileSortingDirection" value="<?php p($_['defaultFileSortingDirection']) ?>" />
 <input type="hidden" name="showHiddenFiles" id="showHiddenFiles" value="<?php p($_['showHiddenFiles']); ?>" />
 <?php endif;
+
+foreach ($_['hiddenFields'] as $name => $value) {?>
+<input type="hidden" name="<?php p($name) ?>" id="<?php p($name) ?>" value="<?php p($value) ?>" />
+<?php }

apps/files/tests/Controller/ViewControllerTest.php

@@ -107,6 +107,9 @@ class ViewControllerTest extends TestCase {
 			->expects($this->once())
 			->method('getStorageInfo')
 			->will($this->returnValue([
+				'used' => 123,
+				'quota' => 100,
+				'total' => 100,
 				'relative' => 123,
 				'owner' => 'MyName',
 				'ownerDisplayName' => 'MyDisplayName',
@@ -125,6 +128,10 @@ class ViewControllerTest extends TestCase {
 			->will($this->returnArgument(2));
 
 		$nav = new Template('files', 'appnavigation');
+		$nav->assign('usage_relative', 123);
+		$nav->assign('usage', '123 B');
+		$nav->assign('quota', 100);
+		$nav->assign('total_space', '100 B');
 		$nav->assign('navigationItems', [
 			[
 				'id' => 'files',
@@ -256,6 +263,7 @@ class ViewControllerTest extends TestCase {
 						'content' => null,
 					],
 				],
+				'hiddenFields' => [],
 			]
 		);
 		$policy = new Http\ContentSecurityPolicy();

apps/files_trashbin/css/trash.css

@@ -20,20 +20,17 @@
 	display: none;
 }
 
-#app-navigation > ul {
-	padding-bottom: 44px;
-}
-
 /* move Deleted Files to bottom of sidebar */
 .nav-trashbin {
 	position: fixed !important;
-	bottom: 44px;
+	bottom: 88px;
 	width: inherit !important;
 	background-color: #fff;
 	border-right: 1px solid #eee;
+	margin-bottom: 0px !important;
 }
 /* double padding to account for Deleted files entry, issue with Firefox */
 .app-files #app-navigation > ul li:nth-last-child(2) {
-	margin-bottom: 44px;
+	margin-bottom: 88px;
 }