mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Implement progress theming into core and better visual on quota display 

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2017-09-27 14:16:25 +02:00
parent 46da059b8f
commit d54253d4e4
No known key found for this signature in database
GPG Key ID: FB5ACEED51955BF8
3 changed files with 71 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
core/css/inputs.scss
View File

@ -35,7 +35,7 @@ select,
button, .button,
input:not([type='range']),
textarea,
#quota, .pager li a {
.pager li a {
margin: 3px 3px 3px 0;
padding: 7px 6px;
font-size: 13px;
@ -45,8 +45,7 @@ textarea,
outline: none;
border-radius: 3px;
&:not(:disabled):not(.primary) {
/* no border on quota */
&:not(#quota):hover,
&:hover,
&:focus,
&.active {
/* active class used for multiselect */
@ -185,9 +184,6 @@ button img,
.button img {
cursor: pointer;
}
#quota {
color: nc-lighten($color-main-text, 33%);
}
select,
.button.multiselect {
font-weight: 400;
@ -472,6 +468,39 @@ input {
}
}
/* Progressbar */
progress {
display: block;
width: 100%;
padding: 0;
border: 0 none;
background-color: nc-darken($color-main-background, 10%);
border-radius: 3px;
flex-basis: 100%;
height: 5px;
&.warn {
&::-moz-progress-bar {
background: $color-error;
}
&::-webkit-progress-value {
background: $color-error;
}
}
&::-webkit-progress-bar {
background: transparent;
}
&::-moz-progress-bar {
border-radius: 3px;
background: $color-primary;
transition: 250ms all ease-in-out;
}
&::-webkit-progress-value {
border-radius: 3px;
background: $color-primary;
transition: 250ms all ease-in-out;
}
}
/* Animation */
@keyframes shake {
10%,

33
core/css/styles.scss
View File

@ -930,26 +930,31 @@ code {
margin: 30px !important;
position: relative;
padding: 0 !important;
progress {
height: 36px;
}
div {
padding: 0;
background-color: nc-darken($color-main-background, 10%);
font-weight: normal;
white-space: nowrap;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
min-width: 1%;
max-width: 100%;
position: absolute;;
top: 0;
&.quota-warning {
background-color: $color-warning;
}
&.quotatext-bg {
mix-blend-mode: luminosity;
}
&.quotatext-fg {
color: $color-primary-text;
overflow: hidden;
z-index: 50;
}
.quotatext {
padding: .6em 1em;
}
}
}
#quotatext {
padding: .6em 1em;
}
#quota div.quota-warning {
background-color: $color-warning;
}
.pager {
list-style: none;
float: right;

20
settings/templates/settings/personal/personal.info.php
View File

@ -38,9 +38,23 @@ vendor_style('jcrop/css/jquery.Jcrop');
?>
<div id="quota" class="section">
<div style="width:<?php p($_['usage_relative']);?>%"
<?php if($_['usage_relative'] > 80): ?> class="quota-warning" <?php endif; ?>>
<p id="quotatext">
<progress value="<?php p($_['usage_relative']); ?>" max="100"
<?php if($_['usage_relative'] > 80): ?> class="quota-warning" <?php endif; ?>></progress>
<div style="width:<?php p($_['usage_relative']);?>%" class="quotatext-fg
<?php if($_['usage_relative'] > 80): ?> quota-warning <?php endif; ?>">
<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']]));?>