Merge pull request #9332 from nextcloud/personal-settings-fixes

Small improvements for personal settings

apps/files/css/files.scss

@@ -105,9 +105,6 @@
 .nav-icon-trashbin {
 	background-image: url('../img/delete.svg?v=1');
 }
-.nav-icon-quota {
-	background-image: url('../img/quota.svg?v=1');
-}
 
 #app-navigation .nav-files a.nav-icon-files {
 	width: auto;

apps/files/templates/appnavigation.php

@@ -15,7 +15,7 @@
 		if ($_['quota'] !== \OCP\Files\FileInfo::SPACE_UNLIMITED) {
 			?>has-tooltip" title="<?php p($_['usage_relative'] . '%');
 		} ?>">
-			<a href="#" class="nav-icon-quota svg">
+			<a href="#" class="icon-quota svg">
 				<p id="quotatext"><?php
 					if ($_['quota'] !== \OCP\Files\FileInfo::SPACE_UNLIMITED) {
 						p($l->t('%s of %s used', [$_['usage'], $_['total_space']]));

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');
 }

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;

settings/css/settings.scss

@@ -52,9 +52,6 @@ input {
 
 #displayavatar {
 	text-align: center;
-	p {
-		text-align: left;
-	}
 }
 
 #uploadavatarbutton, #selectavatar, #removeavatar {
@@ -119,6 +116,7 @@ input {
 	background-size: 16px;
 	background-position: left 8px;
 	opacity: .3;
+	margin-top: -2px;
 	margin-left: 10px;
 	cursor: pointer;
 
@@ -162,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;
+	}
 }
 
 
@@ -234,7 +242,7 @@ input {
 			margin-bottom: 12px;
 			display: inline-flex;
 			flex-wrap: nowrap;
-			justify-content: space-between;
+			justify-content: flex-start;
 			width: 100%;
 			> label {
 				white-space: nowrap;
@@ -272,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 {

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 class="personal-settings-setting-box personal-settings-group-box section">
-			<div id="groups" class="section">
+			<h2><?php p($l->t('Details')); ?></h2>
-				<h2><?php p($l->t('Groups')); ?></h2>
+			<div id="groups" class="personal-info icon-user">
-				<p><?php p($l->t('You are member of the following groups:')); ?></p>
+				<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>',
+								[$_['usage']]));?>
+						<?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>