Browse Source
Implement progress theming into core and better visual on quota display
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
pull/6669/head
John Molakvoæ (skjnldsv)
8 years ago
No known key found for this signature in database
GPG Key ID: FB5ACEED51955BF8
3 changed files with
71 additions and
23 deletions
-
core/css/inputs.scss
-
core/css/styles.scss
-
settings/templates/settings/personal/personal.info.php
|
|
|
@ -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%, |
|
|
|
|
|
|
|
@ -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; |
|
|
|
|
|
|
|
@ -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']]));?>
|
|
|
|
|
