Fix styling of verification box to popover

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

settings/css/settings.css

@@ -141,10 +141,10 @@ input#openid, input#webdav { width:20em; }
 
 #personal-settings-container .verify {
 	float: right;
-	padding-top: 10px;
 }
 
 #personal-settings-container .verify-action {
+	padding: 10px;
 	cursor: pointer;
 }
 
@@ -1030,47 +1030,16 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 
 /* verify accounts */
 #verification-dialog {
-    display: none; /* Hidden by default */
-    position: fixed; /* Stay in place */
-    z-index: 1; /* Sit on top */
-    left: 0;
-    top: 0;
-    width: 100%; /* Full width */
-    height: 100%; /* Full height */
-    overflow: auto; /* Enable scroll if needed */
-    background-color: rgb(0,0,0); /* Fallback color */
-    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-}
-
-.verification-dialog-content {
-    background-color: #fefefe;
-    margin: 15% auto; /* 15% from the top and centered */
-    padding: 20px;
-    border: 1px solid #888;
-    width: 60%; /* Could be more or less, depending on screen size */
-}
-
-#verify-dialog-close {
-	float: right;
-	width: 34px;
-	border: none;
-	background-color: transparent;
-	margin: 0 !important;
-	border-radius: 0;
 	right: 0;
-	opacity: 0.3;
+	top: 0;
 }
 
-#verify-dialog-close:hover {
-	cursor: pointer;
-	opacity: 1;
+#verification-dialog p {
+	padding: 10px;
 }
 
 #verification-dialog .verificationCode {
 	font-family: monospace;
 	white-space: nowrap;
 	display: block;
-	overflow-y: scroll;
-	padding: 10px;
-	margin: 20px 20px 20px 0;
 }

settings/js/personal.js

@@ -203,8 +203,8 @@ $(document).ready(function () {
 
 	var showVerifyDialog = function(howToVerify, verificationCode) {
 		var dialog = document.getElementById('verification-dialog');
-		$(".verification-dialog-content span.explainVerification").text(howToVerify);
-		$(".verification-dialog-content span.verificationCode").text(verificationCode);
+		$(".verification-dialog-content .explainVerification").text(howToVerify);
+		$(".verification-dialog-content .verificationCode").text(verificationCode);
 		dialog.style.display = "block";
 	};
 

settings/templates/personal.php

@@ -8,13 +8,12 @@
 /** @var \OCP\Defaults $theme */
 ?>
 
-<div id="verification-dialog">
+<div id="verification-dialog" class="popovermenu bubble menu hidden">
 
 	<!-- dialog used to verify personal information such as the users website, email address, etc -->
 	<div class="verification-dialog-content">
-		<button id="verify-dialog-close" class="icon-close svg"></button>
-		<span class="explainVerification">How to verify your account details</span><br />
-		<span class="verificationCode">verification code</span>
+		<p class="explainVerification">How to verify your account details</p>
+		<p class="verificationCode">Verification code</p>
 		<p>It can take up to 24 hours before the account is displayed as verified.</p>
 	</div>
 
@@ -111,11 +110,11 @@
 				<label for="email"><?php p($l->t('Email')); ?></label>
 				<span class="icon-password"/>
 			</h2>
-			<span class="verify">
-				<img id="verify-email" <?php
+			<div class="verify">
+				<img id="verify-email" class="verify-action" <?php
 				switch($_['emailVerification']) {
 					case \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS:
-						print_unescaped('src="' . image_path('core', 'actions/verifying.svg') . '" title="Verifying..."');
+						print_unescaped('src="' . image_path('core', 'actions/verifying.svg') . '" title="Verifying …"');
 						break;
 					case \OC\Accounts\AccountManager::VERIFIED:
 						print_unescaped('src="' . image_path('core', 'actions/verified.svg') . '" title="Verified"');
@@ -124,7 +123,7 @@
 						print_unescaped('src="' . image_path('core', 'actions/verify.svg') . '" title="Verify"');
 				}
 				?>>
-			</span>
+			</div>
 			<input type="email" name="email" id="email" value="<?php p($_['email']); ?>"
 				<?php if(!$_['displayNameChangeSupported']) { print_unescaped('class="hidden"'); } ?>
 				placeholder="<?php p($l->t('Your email address')); ?>"
@@ -177,11 +176,11 @@
 				<label for="website"><?php p($l->t('Website')); ?></label>
 				<span class="icon-password"/>
 			</h2>
-			<span class="verify">
+			<div class="verify">
 				<img id="verify-website" <?php
 				switch($_['websiteVerification']) {
 					case \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS:
-						print_unescaped('src="' . image_path('core', 'actions/verifying.svg') . '" title="Verifying..."');
+						print_unescaped('src="' . image_path('core', 'actions/verifying.svg') . '" title="Verifying …"');
 						break;
 					case \OC\Accounts\AccountManager::VERIFIED:
 						print_unescaped('src="' . image_path('core', 'actions/verified.svg') . '" title="Verified"');
@@ -190,7 +189,7 @@
 						print_unescaped('src="' . image_path('core', 'actions/verify.svg') . '" title="Verify" class="verify-action"');
 				}
 				?>>
-			</span>
+			</div>
 			<input type="text" name="website" id="website" value="<?php p($_['website']); ?>"
 			       placeholder="<?php p($l->t('Your website')); ?>"
 			       autocomplete="on" autocapitalize="none" autocorrect="off" />
@@ -204,11 +203,11 @@
 				<label for="twitter"><?php p($l->t('Twitter')); ?></label>
 				<span class="icon-password"/>
 			</h2>
-			<span class="verify">
+			<div class="verify">
 				<img id="verify-twitter" <?php
 				switch($_['twitterVerification']) {
 					case \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS:
-						print_unescaped('src="' . image_path('core', 'actions/verifying.svg') . '" title="Verifying..."');
+						print_unescaped('src="' . image_path('core', 'actions/verifying.svg') . '" title="Verifying …"');
 						break;
 					case \OC\Accounts\AccountManager::VERIFIED:
 						print_unescaped('src="' . image_path('core', 'actions/verified.svg') . '" title="Verified"');
@@ -217,6 +216,7 @@
 						print_unescaped('src="' . image_path('core', 'actions/verify.svg') . '" title="Verify" class="verify-action"');
 				}
 				?>>
+			</div>
 			<input type="text" name="twitter" id="twitter" value="<?php p($_['twitter']); ?>"
 				   placeholder="<?php p($l->t('Your Twitter handle')); ?>"
 				   autocomplete="on" autocapitalize="none" autocorrect="off" />