Style quota entry in files view

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan-Christoph Borchardt 2017-06-09 15:41:06 +02:00 committed by Morris Jobke
parent f1da30cc1e
commit fe8450fcc9
3 changed files with 38 additions and 17 deletions

View File

@ -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;
}

4
apps/files/img/quota.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 468 B

View File

@ -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'] : '#') ?>"