Editor: display email verification notice in the header area. (#12107)

* Editor: display email verification notice in the header area. Fixes broken layout. * Email verification notice: try floating popup. The problem with the other one was that it wasn't very scalable from a responsive point of view. Considering German is usually 20% longer, it just wasn't a safe bet. By making it floating, yes, we cover the sidebar, but since you can't publish regardless, perhaps that's okay. * Fix spaces to tabs.
Automattic · Mar 14, 2017 · 832ef33 · 832ef33
1 parent 1419ff6
commit 832ef33
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 27 deletions.
diff --git a/client/post-editor/editor-ground-control/index.jsx b/client/post-editor/editor-ground-control/index.jsx
@@ -304,6 +304,18 @@ export default React.createClass( {
 					homeLink={ true }
 					externalLink={ true }
 				/>
+				{ this.state.needsVerification &&
+					<div className="editor-ground-control__email-verification-notice"
+						tabIndex={ 7 }
+						onClick={ this.props.onMoreInfoAboutEmailVerify }>
+						<Gridicon
+							icon="info"
+							className="editor-ground-control__email-verification-notice-icon" />
+						{ this.getVerificationNoticeLabel() }
+						{ ' ' }
+						<span className="editor-ground-control__email-verification-notice-more">{ this.translate( 'Learn More' ) }</span>
+					</div>
+				}
 				<div className="editor-ground-control__status">
 					{ this.isSaveEnabled() &&
 						<button
@@ -379,19 +391,6 @@ export default React.createClass( {
 						this.schedulePostPopover()
 					}
 				</div>
-				{
-					this.state.needsVerification &&
-					<div className="editor-ground-control__email-verification-notice"
-						tabIndex={ 7 }
-						onClick={ this.props.onMoreInfoAboutEmailVerify }>
-						<Gridicon
-							icon="info"
-							className="editor-ground-control__email-verification-notice-icon" />
-						{ this.getVerificationNoticeLabel() }
-						{ ' ' }
-						<span className="editor-ground-control__email-verification-notice-more">{ this.translate( 'Learn More' ) }</span>
-					</div>
-				}
 			</Card>
 		);
 	}

diff --git a/client/post-editor/editor-ground-control/style.scss b/client/post-editor/editor-ground-control/style.scss
@@ -159,15 +159,22 @@
 		display: none;
 	}
 
-	font-size: 12px;
-	padding: 16px 16px 16px 48px;
+	font-size: 13px;
+	padding: 8px 8px 8px 40px;
 	background: white;
-	margin: 16px -16px -16px;
 	position: relative;
 	color: $blue-wordpress;
-	border-top: 1px solid lighten( $gray, 20% );
+	border: 1px solid lighten( $gray, 20% );
 	cursor: pointer;
 	fill: $blue-wordpress;
+	position: absolute;
+	z-index: 1;
+	right: 4px;
+	top: 40px;
+	border-radius: 2px;
+	box-shadow: 0 1px 4px rgba($gray-dark, 0.2);;
+	max-width: 264px;
+	box-sizing: border-box;
 
 	&::before {
 		content: '';
@@ -177,24 +184,17 @@
 		background: white;
 		position: absolute;
 		top: -6px;
-		left: 50%;
+		right: 48px;
 		transform: translate(-50%) rotate(45deg);
 		border-top: 1px solid lighten( $gray, 20% );
 		border-left: 1px solid lighten( $gray, 20% );
 	}
 
-	&:focus:not(:active)::before {
-		box-shadow: -1px -1px 0 1px $blue-light;
-		border-top-color: $gray;
-		border-left-color: $gray;
-	}
-
 	&:focus:not(:active) {
 		box-shadow: 0 0 0 2px $blue-light;
 		z-index: 1;
 		border-top-color: $gray;
 		border-bottom: 1px solid $gray;
-		margin-bottom: -17px;
 	}
 
 	&:hover {
@@ -205,8 +205,8 @@
 
 .editor-ground-control__email-verification-notice-icon {
 	position: absolute;
-	left: 16px;
-	top: 16px;
+	left: 8px;
+	top: 11px;
 }
 
 .editor-ground-control__email-verification-notice-more {