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

Signed-off-by: Julius Härtl <jus@bitgrid.net>

4 files changed, 52 insertions, 66 deletions

diff --git a/core/css/icons.scss b/core/css/icons.scss
index 775decfa3a8..8f2d4748754 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -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');
 }
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 0bbd89f075b..736713c3e7a 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -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;
diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 6108a777327..3e7e5576640 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -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 {
diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
index 24f89076275..0f9c38ba8de 100644
--- a/settings/templates/settings/personal/personal.info.php
+++ b/settings/templates/settings/personal/personal.info.php
@@ -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>