Popover: Adding a header for mobile popovers

WordPress · Nov 22, 2017 · 151066f · 151066f
1 parent 063ea58
commit 151066f
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 14 deletions.
diff --git a/components/popover/index.js b/components/popover/index.js
@@ -301,14 +301,16 @@ class Popover extends Component {
 					{ ...contentProps }
 					onKeyDown={ this.maybeClose }
 				>
+					{ this.state.isMobile && (
+						<div className="components-popover__header">
+							<IconButton className="components-popover__close" icon="no-alt" onClick={ onClose } />
+						</div>
+					) }
 					<div
 						ref={ this.bindNode( 'content' ) }
 						className="components-popover__content"
 						tabIndex="-1"
 					>
-						{ this.state.isMobile &&
-							<IconButton className="components-popover__close" icon="no-alt" onClick={ onClose } />
-						}
 						{ children }
 					</div>
 				</div>

diff --git a/components/popover/style.scss b/components/popover/style.scss
@@ -70,8 +70,9 @@
 	background: $white;
 	height: 100%;
 
-	&:focus {
-		box-shadow: $button-focus-style;
+	.components-popover.is-mobile & {
+		height: calc( 100% - #{ $panel-header-height } );
+		border-top: 0;
 	}
 
 	.components-popover:not(.is-mobile) & {
@@ -107,9 +108,17 @@
 	height: 100%;
 }
 
+.components-popover__header {
+	height: $panel-header-height;
+	background: $light-gray-300;
+	padding: 0 $panel-padding;
+	border: 1px solid $light-gray-500;
+	position: relative;
+}
+
 .components-popover__close.components-icon-button {
 	position: absolute;
-	top: 0;
-	right: 0;
+	top: 6px;
+	right: 6px;
 	z-index: z-index( '.components-popover__close' );
 }
diff --git a/editor/assets/stylesheets/_variables.scss b/editor/assets/stylesheets/_variables.scss
@@ -53,7 +53,7 @@ $header-height: 56px;
 $inserter-tabs-height: 36px;
 $block-toolbar-height: 37px;
 $sidebar-width: 280px;
-$sidebar-panel-header-height: 50px;
+$panel-header-height: 50px;
 $admin-bar-height: 32px;
 $admin-bar-height-big: 46px;
 $admin-sidebar-width: 160px;

diff --git a/editor/components/inserter/style.scss b/editor/components/inserter/style.scss
@@ -49,10 +49,6 @@ input[type="search"].editor-inserter__search {
 	&:focus {
 		@include input-style__focus-active;
 	}
-
-	.components-popover.is-mobile & {
-		padding-right: 30px;
-	}
 }
 
 .editor-inserter__category-blocks {

diff --git a/editor/sidebar/style.scss b/editor/sidebar/style.scss
@@ -29,7 +29,7 @@
 		overflow: auto;
 		-webkit-overflow-scrolling: touch;
 		height: 100%;
-		padding-top: $sidebar-panel-header-height;
+		padding-top: $panel-header-height;
 		margin-top: -1px;
 		margin-bottom: -1px;
 
@@ -46,7 +46,7 @@
 		top: 0;
 		left: 0;
 		right: 0;
-		height: $sidebar-panel-header-height;
+		height: $panel-header-height;
 
 		@include break-small() {
 			position: inherit;