From 7177d3a4963ab43a6b24e4f1676bff5d74fc0a52 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Tue, 6 May 2014 12:07:53 +0200
Subject: [PATCH] first step of infield label removal, fix login screen

---
 core/css/styles.css      | 35 ++++++++++++++---------------------
 core/templates/login.php | 20 +++++++++++---------
 lib/base.php             |  1 -
 3 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/core/css/styles.css b/core/css/styles.css
index a9ffd83629..2fd2ad36ab 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -464,19 +464,19 @@ input[name='password-clone'] {
 	width: 223px !important;
 	padding-left: 36px !important;
 }
-#adminlogin+label+img,
+#adminlogin~img,
 #adminpass-icon,
-#user+label+img,
+#user~img,
 #password-icon {
 	position: absolute;
-	left: 1.25em;
-	top: 1.65em;
+	left: 16px;
+	top: 24px;
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
 	filter: alpha(opacity=30);
 	opacity: .3;
 }
 #adminpass-icon, #password-icon {
-	top: 1.1em;
+	top: 18px;
 }
 
 /* General new input field look */
@@ -489,6 +489,11 @@ input[name='password-clone'] {
 }
 
 /* Nicely grouping input field sets */
+.grouptop,
+.groupmiddle,
+.groupbottom {
+	position: relative;
+}
 #body-login .grouptop input {
 	margin-bottom: 0;
 	border-bottom: 0;
@@ -511,23 +516,11 @@ input[name='password-clone'] {
 	box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important;
 }
 
-/* In field labels. No, HTML placeholder does not work as well. */
-#body-login .groupmiddle label, #body-login .groupbottom label { top:.65em; }
-p.infield { position:relative; }
-label.infield { cursor:text !important; top:1.05em; left:.85em; }
-#body-login form label.infield { /* labels are ellipsized when too long, keep them short */
-	position: absolute;
-	width: 82%;
-	margin-left: 26px;
-	font-size: 19px;
-	color: #aaa;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-#body-login #databaseField .infield {
-	margin-left: 0;
+/* keep the labels for screen readers but hide them since we use placeholders */
+label.infield {
+	display: none;
 }
+
 #body-login form input[type="checkbox"]+label {
 	position: relative;
 	margin: 0;
diff --git a/core/templates/login.php b/core/templates/login.php
index 0f25f853b0..6af3d76969 100644
--- a/core/templates/login.php
+++ b/core/templates/login.php
@@ -26,19 +26,21 @@
 			<!-- the following div ensures that the spinner is always inside the #message div -->
 			<div style="clear: both;"></div>
 		</p>
-		<p class="infield grouptop">
-			<input type="text" name="user" id="user" placeholder=""
-				   value="<?php p($_['username']); ?>"
-				   <?php p($_['user_autofocus'] ? 'autofocus' : ''); ?>
-				   autocomplete="on" autocapitalize="off" autocorrect="off" required />
+		<p class="grouptop">
+			<input type="text" name="user" id="user"
+				placeholder="<?php p($l->t('Username')); ?>"
+				value="<?php p($_['username']); ?>"
+				<?php p($_['user_autofocus'] ? 'autofocus' : ''); ?>
+				autocomplete="on" autocapitalize="off" autocorrect="off" required />
 			<label for="user" class="infield"><?php p($l->t('Username')); ?></label>
 			<img class="svg" src="<?php print_unescaped(image_path('', 'actions/user.svg')); ?>" alt=""/>
 		</p>
 
-		<p class="infield groupbottom">
-			<input type="password" name="password" id="password" value="" placeholder=""
-				   <?php p($_['user_autofocus'] ? '' : 'autofocus'); ?>
-				   autocomplete="on" autocapitalize="off" autocorrect="off" required />
+		<p class="groupbottom">
+			<input type="password" name="password" id="password" value=""
+				placeholder="<?php p($l->t('Password')); ?>"
+				<?php p($_['user_autofocus'] ? '' : 'autofocus'); ?>
+				autocomplete="on" autocapitalize="off" autocorrect="off" required />
 			<label for="password" class="infield"><?php p($l->t('Password')); ?></label>
 			<img class="svg" id="password-icon" src="<?php print_unescaped(image_path('', 'actions/password.svg')); ?>" alt=""/>
 		</p>
diff --git a/lib/base.php b/lib/base.php
index 5f2131f388..160d346a01 100644
--- a/lib/base.php
+++ b/lib/base.php
@@ -320,7 +320,6 @@ class OC {
 		OC_Util::addScript("jquery-migrate-1.2.1.min");
 		OC_Util::addScript("jquery-ui-1.10.0.custom");
 		OC_Util::addScript("jquery-showpassword");
-		OC_Util::addScript("jquery.infieldlabel");
 		OC_Util::addScript("jquery.placeholder");
 		OC_Util::addScript("jquery-tipsy");
 		OC_Util::addScript("compatibility");