Move quota bar to info section and make it a bit simpler

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2018-04-25 12:26:58 +02:00
parent e6a463d1f3
commit 4b550eb699
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
4 changed files with 52 additions and 66 deletions

View File

@ -300,6 +300,10 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
background-image: url('../img/actions/public.svg?v=1');
}
.icon-quota {
background-image: url('../img/actions/quota.svg?v=1');
}
.icon-rename {
background-image: url('../img/actions/rename.svg?v=1');
}

View File

@ -927,40 +927,6 @@ code {
font-family: 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', monospace;
}
#body-settings #quota {
cursor: default;
margin: 30px !important;
position: relative;
padding: 0 !important;
progress {
height: 36px;
&::-moz-progress-bar {
border-radius: 3px 0 0 3px;
}
&::-webkit-progress-value {
border-radius: 3px 0 0 3px;
}
}
div {
font-weight: normal;
white-space: nowrap;
position: absolute;;
top: 0;
&.quotatext-bg {
mix-blend-mode: luminosity;
}
&.quotatext-fg {
color: $color-primary-text;
overflow: hidden;
z-index: 50;
max-width: 100%;
}
.quotatext {
padding: .6em 1em;
}
}
}
.pager {
list-style: none;
float: right;

View File

@ -160,6 +160,16 @@ input {
.section {
padding: 10px 10px;
}
.personal-info {
margin-right: 10%;
margin-bottom: 20px;
}
.personal-info[class^='icon-'], .personal-info[class*=' icon-'] {
background-position: 0px 2px;
padding-left: 30px;
opacity: 0.7;
}
}
@ -270,6 +280,26 @@ input {
}
}
#body-settings #quota {
cursor: default;
position: relative;
progress {
height: 6px;
&::-moz-progress-bar {
border-radius: 3px 0 0 3px;
}
&::-webkit-progress-value {
border-radius: 3px 0 0 3px;
}
}
div {
font-weight: normal;
white-space: nowrap;
}
}
/* verify accounts */
/* only show pointer cursor when popup will be there */
.verification-dialog {

View File

@ -37,34 +37,6 @@ vendor_style('jcrop/css/jquery.Jcrop');
?>
<div id="quota" class="section">
<progress value="<?php p($_['usage_relative']); ?>" max="100"
<?php if($_['usage_relative'] > 80): ?> class="warn" <?php endif; ?>></progress>
<div style="width:<?php p($_['usage_relative']);?>%" class="quotatext-fg">
<p class="quotatext">
<?php if ($_['quota'] === \OCP\Files\FileInfo::SPACE_UNLIMITED): ?>
<?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong>',
[$_['usage'], $_['total_space']]));?>
<?php else: ?>
<?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong> (<strong>%s %%</strong>)',
[$_['usage'], $_['total_space'], $_['usage_relative']]));?>
<?php endif ?>
</p>
</div>
<div class="quotatext-bg">
<p class="quotatext">
<?php if ($_['quota'] === \OCP\Files\FileInfo::SPACE_UNLIMITED): ?>
<?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong>',
[$_['usage'], $_['total_space']]));?>
<?php else: ?>
<?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong> (<strong>%s %%</strong>)',
[$_['usage'], $_['total_space'], $_['usage_relative']]));?>
<?php endif ?>
</p>
</div>
</div>
<div id="personal-settings">
<div id="personal-settings-avatar-container" class="personal-settings-container">
<div>
@ -100,14 +72,28 @@ vendor_style('jcrop/css/jquery.Jcrop');
<?php } ?>
</form>
</div>
<div class="personal-settings-setting-box personal-settings-group-box">
<div id="groups" class="section">
<h2><?php p($l->t('Groups')); ?></h2>
<p><?php p($l->t('You are member of the following groups:')); ?></p>
<div class="personal-settings-setting-box personal-settings-group-box section">
<h2>Details</h2>
<div id="groups" class="personal-info icon-user">
<p class="icon-groups"><?php p($l->t('You are member of the following groups:')); ?></p>
<p id="groups-groups">
<strong><?php p(implode(', ', $_['groups'])); ?></strong>
</p>
</div>
<div id="quota" class="personal-info icon-quota">
<div class="quotatext-bg">
<p class="quotatext">
<?php if ($_['quota'] === \OCP\Files\FileInfo::SPACE_UNLIMITED): ?>
<?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong>',
[$_['usage'], $_['total_space']]));?>
<?php else: ?>
<?php print_unescaped($l->t('You are using <strong>%s</strong> of <strong>%s</strong> (<strong>%s %%</strong>)',
[$_['usage'], $_['total_space'], $_['usage_relative']]));?>
<?php endif ?>
</p>
</div>
<progress value="<?php p($_['usage_relative']); ?>" max="100"<?php if($_['usage_relative'] > 80): ?> class="warn" <?php endif; ?>></progress>
</div>
</div>
</div>