Style quota entry in files view

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 9fcc10caf46fae3665b1cec05532d3024ffd790e..7a9381662fcbd092c5b76921da296681ddaf3e3a 100644 (file)
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -108,6 +108,9 @@
 .nav-icon-trashbin {
        background-image: url('../img/delete.svg?v=1');
 }
+.nav-icon-quota {
+       background-image: url('../img/quota.svg?v=1');
+}
 
 #app-navigation .nav-files a.nav-icon-files {
        width: auto;
@@ -752,11 +755,22 @@ table.dragshadow td.size {
 #quota {
        margin: 0 !important;
        border: none;
-       div {
-               border-radius: 0;
+       background-color: transparent;
+
+       .quota-container {
+               height: 5px;
+               border-radius: 3px;
+
+               div {
+                       height: 100%;
+                       background-color: $color-primary;
+               }
        }
 }
 
-#quotatext {
-       padding: 3px;
+#quotatext,
+#quotatext-additional {
+       padding: 0;
+       height: 30px;
+       line-height: 30px;
 }

diff --git a/apps/files/img/quota.svg b/apps/files/img/quota.svg
new file mode 100644 (file)
index 0000000..8ed264e
--- /dev/null
+++ b/apps/files/img/quota.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1">
+ <path style="text-decoration-color:#000;block-progression:tb;isolation:auto;mix-blend-mode:normal;text-indent:0;text-decoration-line:none;text-transform:none;text-decoration-style:solid" d="m8 0c-4.406 0-8 3.594-8 8s3.594 8 8 8 8-3.594 8-8-3.594-8-8-8zm0 2c3.326 0 6 2.674 6 6 0 1.622-0.638 3.087-1.676 4.164l-4.324-4.164v-6z"/>
+</svg>

diff --git a/apps/files/templates/appnavigation.php b/apps/files/templates/appnavigation.php
index 28019ba803d4faffc4585e41d09cbb9325546915..49bfaab3e1699e9045a2fafa14382ddb982e3167 100644 (file)
--- a/apps/files/templates/appnavigation.php
+++ b/apps/files/templates/appnavigation.php
@@ -1,18 +1,21 @@
 <div id="app-navigation">
-       <div id="quota" class="section has-tooltip" title="<?php
-       if ($_['quota'] === \OCP\Files\FileInfo::SPACE_UNLIMITED) {
-               p($l->t('You are using %s of %s', [$_['usage'], $_['total_space']]));
-       } else {
-               p($l->t('You are using %s of %s (%s %%)', [$_['usage'], $_['total_space'],  $_['usage_relative']]));
-       }
-       ?>">
-               <div style="width:<?php p($_['usage_relative']);?>%"
-                        <?php if($_['usage_relative'] > 80): ?>class="quota-warning"<?php endif; ?>>
-                       <p id="quotatext"><?php p($l->t('%s of %s in use', [$_['usage'], $_['total_space']])); ?></p>
-               </div>
-       </div>
-
        <ul class="with-icon">
+               <li id="quota" class="section <?php
+               if ($_['quota'] !== \OCP\Files\FileInfo::SPACE_UNLIMITED) {
+                       ?>has-tooltip" title="<?php
+                       p($l->t('%s %%', [$_['usage_relative']]));
+               }
+               ?>">
+                       <a href="#" class="nav-icon-quota svg">
+                               <p id="quotatext"><?php p($l->t('%s of %s used', [$_['usage'], $_['total_space']])); ?></p>
+                               <div class="quota-container">
+                                       <div style="width:<?php p($_['usage_relative']);?>%"
+                                                <?php if($_['usage_relative'] > 80): ?>class="quota-warning"<?php endif; ?>>
+                                       </div>
+                               </div>
+                               <p id="quotatext-additional"><?php p($l->t('Do you need more space?')); ?></p>
+                       </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'] : '#') ?>"