Merge pull request #6669 from nextcloud/various-css-fixes

Various css fixes

11 files changed, 146 insertions, 103 deletions

diff --git a/apps/files/css/upload.scss b/apps/files/css/upload.scss
index 6f337a27578..4685b20d43a 100644
--- a/apps/files/css/upload.scss
+++ b/apps/files/css/upload.scss
@@ -50,28 +50,29 @@
 	text-align: center;
 }
 #uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left {
-    height: 100%;
-    top: 0px;
-    left: 0px;
-    position: absolute;
-    overflow: hidden;
+	height: 100%;
+	top: 0px;
+	left: 0px;
+	position: absolute;
+	overflow: hidden;
+	background-color: $color-primary;
 }
 #uploadprogressbar .label {
-    top: 6px;
-    opacity: 1;
-    overflow: hidden;
-    white-space: nowrap;
+	top: 6px;
+	opacity: 1;
+	overflow: hidden;
+	white-space: nowrap;
 	font-weight: normal;
 }
 #uploadprogressbar .label.inner {
-    color:white; 
-    position: absolute;
-    display: block;
-    width: 200px;
+	color: $color-primary-text;
+	position: absolute;
+	display: block;
+	width: 200px;
 }
 #uploadprogressbar .label.outer {
-    position: relative;
-    color: black;
+	position: relative;
+	color: $color-main-text;
 }
 #uploadprogressbar .desktop {
 	display: block;
diff --git a/apps/files/templates/appnavigation.php b/apps/files/templates/appnavigation.php
index 09b02943688..6a7b4e4b11e 100644
--- a/apps/files/templates/appnavigation.php
+++ b/apps/files/templates/appnavigation.php
@@ -11,7 +11,7 @@
 			</a>
 		</li>
 		<?php } ?>
-		<li id="quota" class="section pinned <?php
+		<li id="quota" class="pinned <?php
 		if ($_['quota'] !== \OCP\Files\FileInfo::SPACE_UNLIMITED) {
 			?>has-tooltip" title="<?php p($_['usage_relative'] . '%');
 		} ?>">
@@ -23,9 +23,8 @@
 						p($l->t('%s used', [$_['usage']]));
 					} ?></p>
 				<div class="quota-container">
-					<div style="width:<?php p($_['usage_relative']);?>%"
-						 <?php if($_['usage_relative'] > 80): ?>class="quota-warning"<?php endif; ?>>
-					</div>
+					<progress value="<?php p($_['usage_relative']); ?>" max="100"
+						<?php if($_['usage_relative'] > 80): ?> class="quota-warning" <?php endif; ?>></progress>
 				</div>
 			</a>
 		</li>
diff --git a/core/css/apps.scss b/core/css/apps.scss
index b735dfa4d64..08bbc3ed3b2 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -610,6 +610,7 @@ kbd {
 	border-right: 1px solid $color-border;
 	width: 250px;
 	box-sizing: border-box;
+	background-color: $color-main-background;
 }
 
 .settings-button {
@@ -753,7 +754,7 @@ kbd {
 	margin: 5px;
 	margin-top: -5px;
 	right: 0;
-	box-shadow: 0 1px 10px $color-box-shadow;
+	filter: drop-shadow(0 1px 3px $color-box-shadow);
 	display: none;
 
 	&:after {
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 5fe65935ec5..832ccdebaa6 100644
--- a/core/css/inputs.scss
+++ b/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 */
-		&: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,40 @@ 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;
+	overflow: hidden;
+	&.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%,
diff --git a/core/css/styles.scss b/core/css/styles.scss
index be0b200ce35..33618d34117 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -925,31 +925,42 @@ code {
 	font-family: 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', monospace;
 }
 
-#quota {
+#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 {
-		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;
diff --git a/core/js/apps.js b/core/js/apps.js
index 4daab5ce4c4..8aebbbd418c 100644
--- a/core/js/apps.js
+++ b/core/js/apps.js
@@ -78,11 +78,15 @@
 					area.slideUp(OC.menuSpeed*4, function() {
 						area.trigger(new $.Event('hide'));
 					});
+					area.removeClass('opened');
+					$(button).removeClass('opened');
 				}
 				function showArea() {
 					area.slideDown(OC.menuSpeed*4, function() {
 						area.trigger(new $.Event('show'));
 					});
+					area.addClass('opened');
+					$(button).addClass('opened');
 					var input = $(areaSelector + ' [autofocus]');
 					if (input.length === 1) {
 						input.focus();
diff --git a/core/js/singleselect.js b/core/js/singleselect.js
index cd0dd52651a..94f7da82640 100644
--- a/core/js/singleselect.js
+++ b/core/js/singleselect.js
@@ -42,7 +42,6 @@
 						input.tipsy({gravity: gravity, trigger: 'manual'});
 						input.tipsy('show');
 					}
-					select.css('background-color', 'white');
 					input.focus();
 				}
 			});
diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 8a722896fa5..221dad33ac3 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -579,42 +579,6 @@ span.usersLastLoginTooltip {
 	.groupsListContainer.hidden {
 		display: none;
 	}
-	.bubble {
-		z-index: 1;
-		right: -6px;
-		top: auto;
-		&:after {
-			right: 5px;
-		}
-	}
-	.popovermenu {
-		a.menuitem {
-			height: 20px;
-			margin: 0;
-			padding: 0;
-			line-height: initial;
-		}
-		margin-top: 4px;
-		border-top-right-radius: 3px;
-		right: 3px;
-		opacity: 0;
-		display: block;
-		visibility: hidden;
-		transition: opacity 0.1s, visibility 0.1s;
-	}
-	tr.active .popovermenu {
-		opacity: 1;
-		visibility: visible;
-	}
-	.popovermenu > ul.userActionsMenu {
-		right: 15px;
-		a {
-			margin: 5px 0;
-			span:last-child {
-				margin-left: 5px;
-			}
-		}
-	}
 }
 
 /* because of accessibility the name cell is <th> - therefore we enforce the black color */
@@ -649,10 +613,24 @@ tr:hover > td {
 td.userActions {
 	width: 25px;
 	text-align: center;
+	position: relative;
 	.action {
 		position: relative;
 		top: 3px;
 	}
+	.toggleUserActions {
+		border: none;
+		background-color: rgba(0, 0, 0, 0);
+		width: 34px;
+		height: 34px;
+		margin: 0;
+		opacity: 0.5;
+		&:hover,
+		&:focus {
+			background-color: transparent;
+			opacity: 1;
+		}
+	}
 }
 
 tr.active td.userActions .action {
@@ -683,18 +661,30 @@ input#recoveryPassword {
 #userlist td.quota {
 	position: relative;
 	width: 10em;
+	progress.quota-user-progress {
+		position: absolute;
+		width: calc(10em + 0px);
+		margin-top: -7px;
+		z-index: 0;
+		margin-left: 1px;
+		height: 3px;
+	}
 }
 
 select {
 	&.quota-user {
-		position: absolute;
-		left: 0;
-		top: 0;
 		width: 10em;
 		height: 34px;
+		z-index: 50;
+		position: relative;
 	}
-	&.quota.active {
-		background: #fff;
+	+ progress.quota-user-progress {
+		position: absolute;
+		width: calc(10em + 0px);
+		margin-top: -7px;
+		z-index: 0;
+		margin-left: 1px;
+		height: 3px;
 	}
 }
 
@@ -702,20 +692,6 @@ input.userFilter {
 	width: 200px;
 }
 
-.quota_progress_container {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 10em;
-	margin: 3px 3px 3px 0;
-	border-radius: 3px;
-}
-
-.quota_progress {
-	background-color: #eee;
-	height: 34px;
-}
-
 #newusergroups + input[type='submit'] {
 	position: relative;
 	top: -1px;
diff --git a/settings/js/users/users.js b/settings/js/users/users.js
index 6fb74e1ba63..4a4faf13ec7 100644
--- a/settings/js/users/users.js
+++ b/settings/js/users/users.js
@@ -571,7 +571,12 @@ var UserList = {
 			//asymptotic curve approaching 50% at 10GB to visualize used stace with infinite quota
 			usedQuota = 95 * (1 - (1 / (usedInGB + 1)));
 		}
-		$tr.find('.quota_progress').width(usedQuota + '%');
+		$tr.find('.quota-user-progress').val( isNaN(usedQuota) ? 0 : usedQuota );
+		if (usedQuota > 80) {
+			$tr.find('.quota-user-progress').addClass('warn');
+		} else {
+			$tr.find('.quota-user-progress').removeClass('warn');
+		}
 	},
 
 	/**
@@ -950,9 +955,12 @@ $(document).ready(function () {
 
 		if ($tr.is('.active')) {
 			$tr.removeClass('active');
+			menudiv.removeClass('open');
 			return;
 		}
 		$('#userlist tr.active').removeClass('active');
+		$('#userlist .popovermenu').removeClass('open');
+		menudiv.addClass('open');
 		menudiv.find('.action-togglestate').empty();
 		if ($tr.data('userEnabled')) {
 			$('.action-togglestate', $td).html('<span class="icon icon-close"></span><span>' + t('settings', 'Disable') + '</span>');
diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
index 084b34af96c..d6f6061ebf2 100644
--- a/settings/templates/settings/personal/personal.info.php
+++ b/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']);?>%"
-		<?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']]));?>
diff --git a/settings/templates/users/part.userlist.php b/settings/templates/users/part.userlist.php
index 5ceda71fc00..146e35d11ac 100644
--- a/settings/templates/users/part.userlist.php
+++ b/settings/templates/users/part.userlist.php
@@ -43,7 +43,6 @@
 			</td>
 		<?php endif;?>
 			<td class="quota">
-				<div class="quota_progress_container"><div class="quota_progress"></div></div>
 				<select class="quota-user" data-inputtitle="<?php p($l->t('Please enter storage quota (ex: "512 MB" or "12 GB")')) ?>">
 					<option	value='default'>
 						<?php p($l->t('Default'));?>
@@ -60,12 +59,13 @@
 						<?php p($l->t('Other'));?> ...
 					</option>
 				</select>
+				<progress class="quota-user-progress" value="" max="100"></progress>
 			</td>
 			<td class="storageLocation"></td>
 			<td class="userBackend"></td>
 			<td class="lastLogin"></td>
 			<td class="userActions"><span></span>
-				<div class="popovermenu bubble open menu">
+				<div class="popovermenu bubble menu">
 					<ul class="userActionsMenu">
 						<li>
 							<a href="#" class="menuitem action-togglestate permanent" data-action="togglestate"></a>