Fixed tests and improved app-navigation-caption

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

core/css/apps.scss

@@ -174,6 +174,23 @@ kbd {
 				}
 			}
 
+			&.app-navigation-caption {
+				font-weight: bold;
+				line-height: 44px;
+				padding: 0 44px;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				// !important to overwrite specific hover and focus
+				opacity: .7;
+				box-shadow: none !important;
+				user-select: none;
+				pointer-events:none;
+
+				&:not(:first-child) {
+					margin-top: 22px;
+				}
+			}
+
 			/* Second level nesting for lists */
 			> ul {
 				flex: 0 1 auto;

core/css/variables.scss

@@ -1,14 +1,10 @@
 // SCSS darken/lighten function override
-// if no exists
-@if function-exists(nc-darken) == false {
-	@function nc-darken($color, $value) {
-		@return darken($color, $value);
-	}
+@function nc-darken($color, $value) {
+	@return darken($color, $value);
 }
-@if function-exists(nc-lighten) == false {
-	@function nc-lighten($color, $value) {
-		@return lighten($color, $value);
-	}
+
+@function nc-lighten($color, $value) {
+	@return lighten($color, $value);
 }
 
 // SCSS variables
@@ -22,11 +18,11 @@ $color-background-darker: nc-darken($color-main-background, 14%) !default;
 
 $color-primary: #0082c9;
 $color-primary-text: #ffffff;
-// do not use nc-darken in case of overriding because
+// do not use nc-darken/lighten in case of overriding because
 // primary-text is independent of color-main-text
 $color-primary-text-dark: darken($color-primary-text, 7%) !default;
 $color-primary-element: $color-primary !default;
-$color-primary-element-light: nc-lighten($color-primary-element, 15%) !default;
+$color-primary-element-light: lighten($color-primary-element, 15%) !default;
 
 $color-error: #e9322d;
 $color-warning: #eca700;
@@ -35,9 +31,9 @@ $color-success: #46ba61;
 // rgb(118, 118, 118) / #767676
 // min. color contrast for normal text on white background according to WCAG AA
 // (Works as well: color: #000; opacity: 0.57;)
-$color-text-maxcontrast: nc-lighten($color-main-text, 46.2%);
-$color-text-light: nc-lighten($color-main-text, 15%);
-$color-text-lighter: nc-lighten($color-main-text, 30%);
+$color-text-maxcontrast: nc-lighten($color-main-text, 46.2%) !default;
+$color-text-light: nc-lighten($color-main-text, 15%) !default;
+$color-text-lighter: nc-lighten($color-main-text, 30%) !default;
 
 $image-logo: url('../img/logo.svg?v=1');
 $image-login-background: url('../img/background.png?v=2');
@@ -48,9 +44,9 @@ $color-loading-dark: #777 !default;
 $color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75) !default;
 
 // light border like file table or app-content list
-$color-border: nc-darken($color-main-background, 7%);
+$color-border: nc-darken($color-main-background, 7%) !default;
 // darker border like inputs or very visible elements
-$color-border-dark: nc-darken($color-main-background, 14%);
+$color-border-dark: nc-darken($color-main-background, 14%) !default;
 $border-radius: 3px !default;
 
 $font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;

settings/css/settings.scss

@@ -130,11 +130,6 @@ input {
 		width: 100%;
 	}
 }
-#personal-settings {
-	.section {
-		border: 0;
-	}
-}
 
 #personal-settings {
 	display: grid;
@@ -143,8 +138,11 @@ input {
 	grid-template-columns:1fr 2fr 1fr;
 	.section {
 		padding: 10px 10px;
+		border: 0;
+		h2 {
+			margin-bottom: 12px;
+		}
 	}
-
 	.personal-info {
 		margin-right: 10%;
 		margin-bottom: 20px;
@@ -223,7 +221,6 @@ input {
 	> div {
 		h2 {
 			position: relative;
-			margin-bottom: 12px;
 			display: inline-flex;
 			flex-wrap: nowrap;
 			justify-content: flex-start;
@@ -1350,21 +1347,6 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 	opacity: .7;
 }
 
-.settings-caption {
-	font-weight: bold;
-	line-height: 44px;
-	padding: 0 44px;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	// !important to overwrite specific hover and focus
-	opacity: .4 !important;
-	box-shadow: none !important;
-
-	&:not(:first-child) {
-		margin-top: 22px;
-	}
-}
-
 
 /* USERS LIST -------------------------------------------------------------- */
 #body-settings {

settings/templates/settings/frame.php

@@ -30,7 +30,7 @@ script('files', 'jquery.fileupload');
 
 <div id="app-navigation">
 	<ul>
-		<li class="settings-caption"><?php p($l->t('Personal')); ?></li>
+		<li class="app-navigation-caption"><?php p($l->t('Personal')); ?></li>
 		<?php
 		foreach($_['forms']['personal'] as $form) {
 			if (isset($form['anchor'])) {
@@ -57,7 +57,7 @@ script('files', 'jquery.fileupload');
 		<?php
 		if(!empty($_['forms']['admin'])) {
 			?>
-			<li class="settings-caption"><?php p($l->t('Administration')); ?></li>
+			<li class="app-navigation-caption"><?php p($l->t('Administration')); ?></li>
 			<?php
 		}
 		foreach($_['forms']['admin'] as $form) {

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

@@ -78,7 +78,7 @@ vendor_style('jcrop/css/jquery.Jcrop');
 		<div class="personal-settings-setting-box personal-settings-group-box section">
 			<h2><?php p($l->t('Details')); ?></h2>
 			<div id="groups" class="personal-info icon-user">
-				<p class="icon-groups"><?php p($l->t('You are a member of the following groups:')); ?></p>
+				<p><?php p($l->t('You are a member of the following groups:')); ?></p>
 				<p id="groups-groups">
 					<strong><?php p(implode(', ', $_['groups'])); ?></strong>
 				</p>

tests/acceptance/features/bootstrap/SettingsMenuContext.php

@@ -79,7 +79,7 @@ class SettingsMenuContext implements Context, ActorAwareInterface {
 	 * @return Locator
 	 */
 	private static function settingsPanelFor($itemText) {
-		return Locator::forThe()->xpath("//div[@id = 'app-navigation']//ul//li[@class = 'settings-caption' and normalize-space() = '$itemText']")->
+		return Locator::forThe()->xpath("//div[@id = 'app-navigation']//ul//li[@class = 'app-navigation-caption' and normalize-space() = '$itemText']")->
 		describedAs($itemText . " item in Settings panel");
 	}