Moving the adminMenuToggle outside of the skeleton. This could be a b…

…ad idea.
WordPress · May 7, 2020 · 89f63a4 · 89f63a4
1 parent e2a848e
commit 89f63a4
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 34 deletions.
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -6,7 +6,7 @@ import { Button } from '@wordpress/components';
 import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { cog } from '@wordpress/icons';
-import { PinnedItems, AdminMenuToggle } from '@wordpress/interface';
+import { PinnedItems } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -24,7 +24,6 @@ function Header( { onToggleInserter, isInserterOpen } ) {
 		isPublishSidebarOpened,
 		isSaving,
 		getBlockSelectionStart,
-		isFullscreenActive,
 	} = useSelect(
 		( select ) => ( {
 			shortcut: select(
@@ -41,9 +40,6 @@ function Header( { onToggleInserter, isInserterOpen } ) {
 			getBlockSelectionStart: select( 'core/block-editor' )
 				.getBlockSelectionStart,
 			isPostSaveable: select( 'core/editor' ).isEditedPostSaveable(),
-			isFullscreenActive: select( 'core/edit-post' ).isFeatureActive(
-				'fullscreenMode'
-			),
 			deviceType: select(
 				'core/edit-post'
 			).__experimentalGetPreviewDeviceType(),
@@ -65,7 +61,6 @@ function Header( { onToggleInserter, isInserterOpen } ) {
 
 	return (
 		<div className="edit-post-header">
-			{ isFullscreenActive && <AdminMenuToggle /> }
 			<div className="edit-post-header__toolbar">
 				<HeaderToolbar
 					onToggleInserter={ onToggleInserter }

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -32,6 +32,7 @@ import {
 	ComplementaryArea,
 	FullscreenMode,
 	InterfaceSkeleton,
+	AdminMenuToggle,
 } from '@wordpress/interface';
 import { useState, useEffect } from '@wordpress/element';
 import { close } from '@wordpress/icons';
@@ -139,6 +140,7 @@ function Layout() {
 	return (
 		<>
 			<FullscreenMode isActive={ isFullscreenActive } />
+			{ isFullscreenActive && <AdminMenuToggle /> }
 			<BrowserURL />
 			<UnsavedChangesWarning />
 			<AutosaveMonitor />

diff --git a/packages/interface/src/components/admin-menu-toggle/style.scss b/packages/interface/src/components/admin-menu-toggle/style.scss
@@ -9,17 +9,22 @@
 		align-self: stretch;
 		border: none;
 		border-radius: 0;
-		height: auto;
 		width: $header-height;
 		background: #23282e; // WP-admin gray.
 		transition: all 0.12s ease-in-out;
 
+		position: fixed;
+		top: 0;
+		left: 0;
+		height: 61px;
+		z-index: 10000;
+
 		svg {
 			padding: 6px;
 			pointer-events: none;
 			border-radius: 2px;
-			width: 44px;
-			height: 44px;
+			width: 38px;
+			height: 38px;
 			fill: $white;
 		}
 

diff --git a/packages/interface/src/components/fullscreen-mode/style.scss b/packages/interface/src/components/fullscreen-mode/style.scss
@@ -10,58 +10,59 @@ body.is-fullscreen-mode {
 			display: none;
 		}
 
-		// Layer the sidebar above the editor's top bar and
-		// setup the transition
+		// Setup the transition
 		#adminmenumain {
-			z-index: 1;
-			transform: translateX(-160px);
-			transition: transform 0.12s ease-in-out;
+			position: relative;
+			left: -160px;
+			transition: left 0.12s ease-in-out;
 		}
 
-		// Display the sidebar offscreen, and then transition in when needed.
-		#adminmenumain,
-		#adminmenuback {
-			position: fixed;
-			top: 60px;
-			left: 0;
-			bottom: 0;
+		#adminmenu {
+			margin-top: 60px;
 		}
 
-		// Hides the admin menu
-		// This prevents keyboard navigation from accessing inner links
-		#adminmenuwrap {
-			//display: none;
+		.interface-interface-skeleton__header {
+			margin-left: 60px;
+			transition: margin-left 0.12s ease-in-out;
 		}
 
 		.interface-interface-skeleton__body,
 		.interface-interface-skeleton__footer {
 			transition: margin-left 0.12s ease-in-out;
 		}
 
-		#wpcontent,
-		#wpfooter {
-			margin-left: 0;
+		#adminmenu .wp-submenu li.current a {
+			font-weight: inherit;
+		}
+
+		// Hide the little triangle on the currently
+		// selected menu item.
+		#adminmenu a.wp-has-current-submenu::after,
+		#adminmenu > li.current > a.current::after {
+			display: none;
 		}
 	}
 }
 
 body.is-showing-admin-menu {
+	// Bring the sidebar into view.
 	#adminmenumain {
-		transform: translateX(0);
-	}
-
-	// Show the admin menu
-	#adminmenuwrap {
-		display: block;
+		left: 0;
 	}
 
+	.interface-interface-skeleton__header,
 	.interface-interface-skeleton__body,
 	.interface-interface-skeleton__footer {
 		margin-left: 160px;
 	}
 }
 
+
 body.is-showing-admin-menu.folded {
+	.interface-interface-skeleton__header {
+		margin-left: 60px;
+	}
+
 	.interface-interface-skeleton__body,
 	.interface-interface-skeleton__footer {
 		margin-left: 36px;