Skip to content

Commit b1bb29f

Browse files
shaunandrewssixhours
shaunandrews
authored and
sixhours
committed
Signup: Remove Masterbar from Signup (#28886)
* Replaces the Masterbar in signup with a less obtrusive design to save on vertical space.
1 parent e73efc5 commit b1bb29f

File tree

14 files changed

+264
-146
lines changed

14 files changed

+264
-146
lines changed

‎client/blocks/inline-help/style.scss

+9
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,15 @@
240240
}
241241
}
242242

243+
// Hide extraneous UI inside secondary view
244+
.is-secondary-view-active {
245+
.checklist-navigation,
246+
.inline-help__gutenberg-editor-toggle,
247+
.inline-help__classic-editor-toggle {
248+
display: none;
249+
}
250+
}
251+
243252
.inline-help__view-heading {
244253
display: block;
245254
font-size: 14px;

‎client/layout/index.jsx

+23-13
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,14 @@ import QueryPreferences from 'components/data/query-preferences';
2424
import QuerySites from 'components/data/query-sites';
2525
import QuerySiteSelectedEditor from 'components/data/query-site-selected-editor';
2626
import { isOffline } from 'state/application/selectors';
27-
import { getSelectedSiteId, hasSidebar, masterbarIsVisible } from 'state/ui/selectors';
27+
import {
28+
getSelectedSiteId,
29+
hasSidebar,
30+
masterbarIsVisible,
31+
getSectionGroup,
32+
getSectionName,
33+
isSectionLoading,
34+
} from 'state/ui/selectors';
2835
import isHappychatOpen from 'state/happychat/selectors/is-happychat-open';
2936
import SitePreview from 'blocks/site-preview';
3037
import SupportArticleDialog from 'blocks/support-article-dialog';
@@ -51,8 +58,9 @@ class Layout extends Component {
5158
masterbarIsHidden: PropTypes.bool,
5259
isLoading: PropTypes.bool,
5360
isSupportUser: PropTypes.bool,
54-
section: PropTypes.oneOfType( [ PropTypes.bool, PropTypes.object ] ),
5561
isOffline: PropTypes.bool,
62+
sectionGroup: PropTypes.string,
63+
sectionName: PropTypes.string,
5664
colorSchemePreference: PropTypes.string,
5765
};
5866

@@ -88,8 +96,8 @@ class Layout extends Component {
8896
render() {
8997
const sectionClass = classnames(
9098
'layout',
91-
`is-group-${ this.props.section.group }`,
92-
`is-section-${ this.props.section.name }`,
99+
`is-group-${ this.props.sectionGroup }`,
100+
`is-section-${ this.props.sectionName }`,
93101
`focus-${ this.props.currentLayoutFocus }`,
94102
{ 'is-support-user': this.props.isSupportUser },
95103
{ 'has-no-sidebar': ! this.props.hasSidebar },
@@ -112,8 +120,8 @@ class Layout extends Component {
112120
{ config.isEnabled( 'nps-survey/notice' ) && ! isE2ETest() && <NpsSurveyNotice /> }
113121
{ config.isEnabled( 'keyboard-shortcuts' ) ? <KeyboardShortcutsMenu /> : null }
114122
<MasterbarLoggedIn
115-
section={ this.props.section.group }
116-
compact={ this.props.section.name === 'checkout' }
123+
section={ this.props.sectionGroup }
124+
compact={ this.props.sectionName === 'checkout' }
117125
/>
118126
{ config.isEnabled( 'support-user' ) && <SupportUser /> }
119127
<div className={ loadingClass }>
@@ -125,7 +133,7 @@ class Layout extends Component {
125133
<GlobalNotices
126134
id="notices"
127135
notices={ notices.list }
128-
forcePinned={ 'post' === this.props.section.name }
136+
forcePinned={ 'post' === this.props.sectionName }
129137
/>
130138

131139
<div id="secondary" className="layout__secondary" role="navigation">
@@ -140,13 +148,13 @@ class Layout extends Component {
140148
) : (
141149
<TranslatorLauncher />
142150
) }
143-
{ this.props.section.group === 'sites' && <SitePreview /> }
151+
{ this.props.sectionGroup === 'sites' && <SitePreview /> }
144152
{ config.isEnabled( 'happychat' ) &&
145153
this.props.chatIsOpen && <AsyncLoad require="components/happychat" /> }
146154
{ 'development' === process.env.NODE_ENV && (
147155
<AsyncLoad require="components/webpack-build-monitor" placeholder={ null } />
148156
) }
149-
{ ( 'jetpack-connect' !== this.props.section.name ||
157+
{ ( 'jetpack-connect' !== this.props.sectionName ||
150158
this.props.currentRoute === '/jetpack/new' ) &&
151159
this.props.currentRoute !== '/log-in/jetpack' && (
152160
<AsyncLoad require="blocks/inline-help" placeholder={ null } />
@@ -160,12 +168,14 @@ class Layout extends Component {
160168
}
161169

162170
export default connect( state => {
163-
const { isLoading, section } = state.ui;
171+
const sectionGroup = getSectionGroup( state );
172+
const sectionName = getSectionName( state );
164173
return {
165-
masterbarIsHidden: ! masterbarIsVisible( state ),
166-
isLoading,
174+
masterbarIsHidden: ! masterbarIsVisible( state ) || 'signup' === sectionName,
175+
isLoading: isSectionLoading( state ),
167176
isSupportUser: state.support.isSupportUser,
168-
section,
177+
sectionGroup,
178+
sectionName,
169179
hasSidebar: hasSidebar( state ),
170180
isOffline: isOffline( state ),
171181
currentLayoutFocus: getCurrentLayoutFocus( state ),

‎client/layout/logged-out.jsx

+9-6
Original file line numberDiff line numberDiff line change
@@ -99,9 +99,12 @@ LayoutLoggedOut.propTypes = {
9999
showOAuth2Layout: PropTypes.bool,
100100
};
101101

102-
export default connect( state => ( {
103-
masterbarIsHidden: ! masterbarIsVisible( state ),
104-
section: getSection( state ),
105-
oauth2Client: getCurrentOAuth2Client( state ),
106-
useOAuth2Layout: showOAuth2Layout( state ),
107-
} ) )( LayoutLoggedOut );
102+
export default connect( state => {
103+
const section = getSection( state );
104+
return {
105+
masterbarIsHidden: ! masterbarIsVisible( state ) || 'signup' === section.name,
106+
section,
107+
oauth2Client: getCurrentOAuth2Client( state ),
108+
useOAuth2Layout: showOAuth2Layout( state ),
109+
};
110+
} )( LayoutLoggedOut );

‎client/signup/flow-progress-indicator/style.scss

+2-12
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,7 @@
11
.flow-progress-indicator {
2-
display: flex;
3-
align-items: center;
4-
justify-content: center;
5-
6-
color: darken( $gray, 20 );
2+
color: $gray-dark;
73
font-size: 14px;
8-
font-weight: 300;
9-
margin-bottom: -10px;
10-
text-align: center;
11-
12-
@include breakpoint( '<660px' ) {
13-
padding-top: 10px;
14-
}
4+
font-weight: 500;
155
}
166

177
.flow-progress-indicator__rebrand-cities {

‎client/signup/header/index.jsx

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/** @format */
2+
3+
/**
4+
* External dependencies
5+
*/
6+
7+
import React, { Component } from 'react';
8+
import PropTypes from 'prop-types';
9+
import classnames from 'classnames';
10+
11+
/**
12+
* Internal dependencies
13+
*/
14+
15+
import WordPressLogo from 'components/wordpress-logo';
16+
import FlowProgressIndicator from 'signup/flow-progress-indicator';
17+
18+
/**
19+
* Style dependencies
20+
*/
21+
22+
import './style.scss';
23+
24+
export default class SignupHeader extends Component {
25+
static propTypes = {
26+
flowLength: PropTypes.number,
27+
positionInFlow: PropTypes.number,
28+
flowName: PropTypes.string,
29+
showProgressIndicator: PropTypes.bool,
30+
shouldShowLoadingScreen: PropTypes.bool,
31+
};
32+
33+
constructor( props ) {
34+
super( props );
35+
this.state = { showMockMasterBar: true };
36+
}
37+
38+
// We want to show the mock masterbar to transition into the signup steps
39+
// and then animate it out, and remove it
40+
shouldShowMockMasterBar() {
41+
if ( ! this.state.showMockMasterBar ) {
42+
return false;
43+
}
44+
// we want to remove it altogether after the animation is done
45+
setTimeout( () => {
46+
this.setState( { showMockMasterBar: false } );
47+
}, 500 );
48+
return true;
49+
}
50+
51+
render() {
52+
const logoClasses = classnames( {
53+
'wordpress-logo': true,
54+
'is-large': this.props.shouldShowLoadingScreen,
55+
} );
56+
57+
return (
58+
<div className="header">
59+
{ this.shouldShowMockMasterBar() && <div className="header__masterbar-mock masterbar" /> }
60+
<WordPressLogo size={ 120 } className={ logoClasses } />
61+
62+
{ /* Ideally, this is where the back button
63+
would live. But thats hard to move, it seems. */ }
64+
<div className="header__left" />
65+
66+
{ /* This should show a sign in link instead of
67+
the progressIndicator on the account step. */ }
68+
<div className="header__right">
69+
{ ! this.props.shouldShowLoadingScreen &&
70+
this.props.showProgressIndicator && (
71+
<FlowProgressIndicator
72+
positionInFlow={ this.props.positionInFlow }
73+
flowLength={ this.props.flowLength }
74+
flowName={ this.props.flowName }
75+
/>
76+
) }
77+
</div>
78+
</div>
79+
);
80+
}
81+
}

‎client/signup/header/style.scss

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// A masterbar-like header just for
2+
// the signup flow.
3+
.header {
4+
position: absolute;
5+
top: 0;
6+
right: 0;
7+
left: 0;
8+
padding-top: 16px;
9+
10+
.wordpress-logo {
11+
height: 24px;
12+
width: 24px;
13+
fill: $blue-wordpress;
14+
margin: 0 auto;
15+
display: block;
16+
transition: transform 0.4s ease-in;
17+
18+
&.is-large {
19+
transform: scale( 10 ) translateY( 20px );
20+
}
21+
}
22+
23+
.header__left {
24+
position: absolute;
25+
top: 12px;
26+
left: 16px;
27+
}
28+
29+
.header__right {
30+
position: absolute;
31+
top: 12px;
32+
right: 16px;
33+
}
34+
}
35+
36+
.header__masterbar-mock,
37+
.has-no-masterbar .header .header__masterbar-mock {
38+
opacity: 0;
39+
height: 48px;
40+
animation: .5s hideMockMasterbar ease-out;
41+
}
42+
43+
@keyframes hideMockMasterbar {
44+
from { opacity: 1; transform: translateY( 0 ) }
45+
to { opacity: .5; transform: translateY( -48px ) }
46+
}

‎client/signup/main.jsx

+8-9
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import './style.scss';
3838
import DocumentHead from 'components/data/document-head';
3939
import LocaleSuggestions from 'components/locale-suggestions';
4040
import SignupProcessingScreen from 'signup/processing-screen';
41+
import SignupHeader from 'signup/header';
4142
import SiteMockups from 'signup/site-mockup';
4243

4344
// Libraries
@@ -66,7 +67,6 @@ import { submitSiteTopic } from 'state/signup/steps/site-topic/actions';
6667
import steps from './config/steps';
6768
import flows from './config/flows';
6869
import stepComponents from './config/step-components';
69-
import FlowProgressIndicator from './flow-progress-indicator';
7070
import {
7171
canResumeFlow,
7272
getCompletedSteps,
@@ -602,14 +602,13 @@ class Signup extends React.Component {
602602
return (
603603
<div className={ `signup is-${ kebabCase( this.props.flowName ) }` }>
604604
<DocumentHead title={ pageTitle } />
605-
{ ! this.state.shouldShowLoadingScreen &&
606-
showProgressIndicator && (
607-
<FlowProgressIndicator
608-
positionInFlow={ this.getPositionInFlow() }
609-
flowLength={ this.getFlowLength() }
610-
flowName={ this.props.flowName }
611-
/>
612-
) }
605+
<SignupHeader
606+
positionInFlow={ this.getPositionInFlow() }
607+
flowLength={ this.getFlowLength() }
608+
flowName={ this.props.flowName }
609+
showProgressIndicator={ showProgressIndicator }
610+
shouldShowLoadingScreen={ this.state.shouldShowLoadingScreen }
611+
/>
613612
<div className="signup__steps">{ this.renderCurrentStep() }</div>
614613
{ this.shouldShowSiteMockups() && <SiteMockups /> }
615614
{ this.state.bearerToken && (

‎client/signup/navigation-link/index.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import React, { Component } from 'react';
77
import { localize, getLocaleSlug } from 'i18n-calypso';
88
import { find, findIndex, get } from 'lodash';
99
import Gridicon from 'gridicons';
10+
import classnames from 'classnames';
1011

1112
/**
1213
* Internal dependencies
@@ -130,11 +131,12 @@ export class NavigationLink extends Component {
130131
text = labelText ? labelText : translate( 'Skip for now' );
131132
}
132133

134+
const buttonClasses = classnames( 'navigation-link', this.props.direction );
135+
133136
return (
134137
<Button
135-
compact
136138
borderless
137-
className="navigation-link"
139+
className={ buttonClasses }
138140
href={ this.getBackUrl() }
139141
onClick={ this.handleClick }
140142
>

‎client/signup/navigation-link/style.scss

+10-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
.navigation-link {
2-
cursor: pointer;
3-
display: inline-block;
4-
margin: 24px 12px;
5-
text-align: center;
6-
}
1+
.button.is-borderless.navigation-link {
2+
padding: 0;
3+
color: $gray-dark;
4+
font-size: 14px;
5+
font-weight: 500;
6+
7+
svg {
8+
fill: $gray-dark;
9+
}
10+
}

‎client/signup/processing-screen/index.jsx

-10
Original file line numberDiff line numberDiff line change
@@ -169,16 +169,6 @@ export class SignupProcessingScreen extends Component {
169169
{ this.renderFloaties() }
170170

171171
<div className="signup-processing__content">
172-
<svg
173-
className="signup-process-screen__wpcom-logo"
174-
width="500"
175-
height="501"
176-
viewBox="0 0 500 501"
177-
xmlns="http://www.w3.org/2000/svg"
178-
>
179-
<path d="M363.003 445.26l68.65-198.493c12.828-32.067 17.096-57.706 17.096-80.506 0-8.274-.546-15.956-1.515-23.114 17.544 32.012 27.53 68.752 27.53 107.837 0 82.917-44.937 155.32-111.762 194.278zm-82.027-299.666c13.53-.71 25.723-2.135 25.723-2.135 12.11-1.432 10.684-19.234-1.43-18.522 0 0-36.408 2.856-59.91 2.856-22.088 0-59.2-2.856-59.2-2.856-12.12-.712-13.542 17.804-1.422 18.52 0 0 11.464 1.427 23.572 2.136l35.015 95.947-49.2 147.526-81.84-243.472c13.543-.71 25.722-2.135 25.722-2.135 12.108-1.432 10.676-19.234-1.438-18.522 0 0-36.4 2.856-59.903 2.856-4.215 0-9.19-.107-14.473-.275C102.39 66.504 171.47 26.21 249.997 26.21c58.517 0 111.797 22.37 151.783 59.014-.963-.064-1.912-.184-2.907-.184-22.082 0-37.747 19.233-37.747 39.896 0 18.52 10.685 34.19 22.08 52.715 8.545 14.97 18.528 34.2 18.528 61.985 0 19.25-5.706 43.453-17.103 72.67l-22.423 74.907-81.23-241.62zm-30.98 330.183c-22.06 0-43.358-3.244-63.493-9.157l67.446-195.977 69.08 189.29c.455 1.1 1.012 2.12 1.612 3.092-23.362 8.22-48.468 12.752-74.645 12.752zM25.233 250.983c0-32.592 6.99-63.53 19.465-91.48L151.915 453.27C76.925 416.84 25.232 339.954 25.232 250.983zM249.997.986C112.15.986 0 113.134 0 250.983 0 388.843 112.15 501 249.997 501 387.847 501 500 388.843 500 250.983 500 113.133 387.846.986 249.997.986z" />
180-
</svg>
181-
182172
<p className="signup-process-screen__title">{ this.getTitle() }</p>
183173
</div>
184174
<div className="signup-processing-screen__loader">

0 commit comments

Comments
 (0)