Implement progress theming into core and better visual on quota display

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

core/css/inputs.scss

@@ -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 */
+		&:hover,
-		&:not(#quota):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%,

core/css/styles.scss

@@ -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;
+		position: absolute;;
-		border-top-left-radius: 3px;
+		top: 0;
-		min-width: 1%;
+		&.quota-warning {
-		max-width: 100%;
+			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;

settings/templates/settings/personal/personal.info.php

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