From 182e34e0bfd3092d3ce15bc8485cd8c9a24c9c1a Mon Sep 17 00:00:00 2001 From: Alan Date: Wed, 24 Oct 2018 10:38:00 +0200 Subject: [PATCH 1/4] add sign in button to UserAccountMenu --- .../user_account_menu.test.tsx.snap | 66 +++++++++++++++++++ .../__tests__/user_account_menu.test.tsx | 10 ++- src/components/user_account_menu.tsx | 54 +++++++++------ src/stylesheets/_navigation.scss | 20 +++++- src/stylesheets/_user_account_menu.scss | 2 +- 5 files changed, 126 insertions(+), 26 deletions(-) diff --git a/src/components/__tests__/__snapshots__/user_account_menu.test.tsx.snap b/src/components/__tests__/__snapshots__/user_account_menu.test.tsx.snap index 564dfb3b..eff86f30 100644 --- a/src/components/__tests__/__snapshots__/user_account_menu.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/user_account_menu.test.tsx.snap @@ -213,3 +213,69 @@ exports[`The UserAccountMenu component should render 1`] = ` `; + +exports[`The UserAccountMenu component should render sign in button 1`] = ` +
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+
+`; diff --git a/src/components/__tests__/user_account_menu.test.tsx b/src/components/__tests__/user_account_menu.test.tsx index 861c9c94..e325bdfb 100644 --- a/src/components/__tests__/user_account_menu.test.tsx +++ b/src/components/__tests__/user_account_menu.test.tsx @@ -17,7 +17,9 @@ describe('The UserAccountMenu component', () => { props = { manageAccountURL: 'https://account-staging.ultimaker.com', onSignOutClickHandler: jest.fn(), - displayName: 'Test User' + onSignInClickHandler: jest.fn(), + displayName: 'Test User', + signedOut: false, }; wrapper = shallow(); }); @@ -63,4 +65,10 @@ describe('The UserAccountMenu component', () => { expect(wrapper).toMatchSnapshot(); }); + it('should render sign in button', () => { + wrapper.setProps({ signedOut: 'true' }); + expect(wrapper).toMatchSnapshot(); + expect(props.onSignInClickHandler).not.toHaveBeenCalled(); + }); + }); diff --git a/src/components/user_account_menu.tsx b/src/components/user_account_menu.tsx index db71dd5d..e6f91439 100755 --- a/src/components/user_account_menu.tsx +++ b/src/components/user_account_menu.tsx @@ -24,6 +24,9 @@ export interface UserAccountMenuProps { triggerWidth?: string; /** The height of the clickable area around the profile picture */ triggerHeight?: string; + + signedOut?: boolean; + onSignInClickHandler?: () => void; } export interface UserAccountMenuState { @@ -70,7 +73,7 @@ export class UserAccountMenu extends React.Component -
- {I18n.translate("User account menu title", "My account")} -
- -
-
- -
-
{displayName}
-
- -
- - - + + +
+ + } + {signedOut && + - + } diff --git a/src/stylesheets/_navigation.scss b/src/stylesheets/_navigation.scss index 48c28b5d..5ba5e9e0 100644 --- a/src/stylesheets/_navigation.scss +++ b/src/stylesheets/_navigation.scss @@ -15,6 +15,20 @@ } } + .user-account-menu { + .trigger { + height: 4.6rem; + + @include respond-to(sm) { + height: 5rem; + } + + @include respond-to(md) { + height: 6rem; + } + } + } + ul { width: 100vw; padding: 0; @@ -67,7 +81,7 @@ margin: 0; } - a { + > a { border-radius: 9999px; background: white; font-size: 1.6rem; @@ -76,8 +90,8 @@ text-decoration: none; color: $secondary-btn-color-text; position: relative; - width: 46px; - height: 46px; + width: 4.6rem; + height: 4.6rem; @include respond-to(sm) { border-radius: 0; diff --git a/src/stylesheets/_user_account_menu.scss b/src/stylesheets/_user_account_menu.scss index 4b7bca61..f1a4338f 100644 --- a/src/stylesheets/_user_account_menu.scss +++ b/src/stylesheets/_user_account_menu.scss @@ -32,7 +32,6 @@ .account-section { width: 28rem; - min-height: 37.8rem; padding: 2.4rem; display: flex; flex-direction: column; @@ -44,6 +43,7 @@ flex-wrap: nowrap; justify-content: center; flex-grow: 1; + padding: 3.6rem 0; } .account-section__title { From 28b123597f2183b4ae4a2d9cd8c8575cbf4d72af Mon Sep 17 00:00:00 2001 From: Alan Date: Thu, 25 Oct 2018 12:29:49 +0200 Subject: [PATCH 2/4] set burger-menu btn size --- src/components/user_account_menu.tsx | 7 ++++--- src/stylesheets/_navigation.scss | 2 ++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/user_account_menu.tsx b/src/components/user_account_menu.tsx index e6f91439..11945441 100755 --- a/src/components/user_account_menu.tsx +++ b/src/components/user_account_menu.tsx @@ -12,6 +12,10 @@ import { I18n } from '../utils/i18n'; export interface UserAccountMenuProps { + /** Whether the user is signed out */ + signedOut?: boolean; + /** Called when the sign in button is clicked */ + onSignInClickHandler?: () => void; /** Called when the sign out button is clicked */ onSignOutClickHandler: () => void; /** URL to the account management page */ @@ -24,9 +28,6 @@ export interface UserAccountMenuProps { triggerWidth?: string; /** The height of the clickable area around the profile picture */ triggerHeight?: string; - - signedOut?: boolean; - onSignInClickHandler?: () => void; } export interface UserAccountMenuState { diff --git a/src/stylesheets/_navigation.scss b/src/stylesheets/_navigation.scss index 5ba5e9e0..ee58c5fa 100644 --- a/src/stylesheets/_navigation.scss +++ b/src/stylesheets/_navigation.scss @@ -9,6 +9,8 @@ .burger-menu { > .btn { + height: 5rem; + width: 5rem; top: 0.9rem; box-shadow: 0 2px 3px 0 $color-shadow; z-index: 999999; From cbf37e31307a3460d13852313d3cc7a237f0fcaa Mon Sep 17 00:00:00 2001 From: Alan Date: Thu, 25 Oct 2018 13:19:11 +0200 Subject: [PATCH 3/4] make floating-action-btn bigger --- src/stylesheets/_buttons.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/stylesheets/_buttons.scss b/src/stylesheets/_buttons.scss index 574f7c76..c10a89c6 100644 --- a/src/stylesheets/_buttons.scss +++ b/src/stylesheets/_buttons.scss @@ -218,6 +218,8 @@ button { } .floating-action-btn--trigger { + height: 5rem; + width: 5rem; position: relative; z-index: 99; font-size: 2rem; From cfbd7ecfb6d0e5e1f981d7eaaa579ad209ae8b0f Mon Sep 17 00:00:00 2001 From: Alan Date: Thu, 25 Oct 2018 13:22:42 +0200 Subject: [PATCH 4/4] add sign out knob --- src/stories/menu.stories.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/stories/menu.stories.tsx b/src/stories/menu.stories.tsx index 358eb772..7ff6afb8 100644 --- a/src/stories/menu.stories.tsx +++ b/src/stories/menu.stories.tsx @@ -66,5 +66,7 @@ stories.add('User account menu', withInfo( displayName="Test User" triggerWidth={text('Trigger width', null)} triggerHeight={text('Trigger height', null)} + signedOut={boolean('Sign out', false)} + onSignInClickHandler={action('clicked')} > ));