diff options
-rw-r--r-- | apps/files/css/files.scss | 22 | ||||
-rw-r--r-- | apps/files/img/quota.svg | 4 | ||||
-rw-r--r-- | apps/files/templates/appnavigation.php | 29 |
3 files changed, 38 insertions, 17 deletions
diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 9fcc10caf46..7a9381662fc 100644 --- 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 index 00000000000..8ed264e850a --- /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 28019ba803d..49bfaab3e16 100644 --- 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'] : '#') ?>" |