diff options
author | vantezzen <properly@protonmail.com> | 2019-08-22 12:03:10 +0200 |
---|---|---|
committer | vantezzen <properly@protonmail.com> | 2019-08-22 12:03:10 +0200 |
commit | df67b6e6adefc9a603e9568a3979881ba98fd3fa (patch) | |
tree | 978c4456e8d5ce9926314faf1b31f308ed9ff708 | |
parent | Remove duplicate features list (diff) | |
download | ferdium-app-df67b6e6adefc9a603e9568a3979881ba98fd3fa.tar.gz ferdium-app-df67b6e6adefc9a603e9568a3979881ba98fd3fa.tar.zst ferdium-app-df67b6e6adefc9a603e9568a3979881ba98fd3fa.zip |
Improve onboarding experience
-rw-r--r-- | src/components/auth/Welcome.js | 11 | ||||
-rw-r--r-- | src/components/layout/Sidebar.js | 81 | ||||
-rw-r--r-- | src/components/services/content/Services.js | 10 | ||||
-rw-r--r-- | src/i18n/messages/src/components/layout/Sidebar.json | 24 |
4 files changed, 79 insertions, 47 deletions
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js index 6e0345e32..2b689db3b 100644 --- a/src/components/auth/Welcome.js +++ b/src/components/auth/Welcome.js | |||
@@ -51,6 +51,17 @@ export default @observer class Login extends Component { | |||
51 | <Link to={loginRoute} className="button"> | 51 | <Link to={loginRoute} className="button"> |
52 | {intl.formatMessage(messages.loginButton)} | 52 | {intl.formatMessage(messages.loginButton)} |
53 | </Link> | 53 | </Link> |
54 | <br /><br /> | ||
55 | |||
56 | <Link to="settings/app"> | ||
57 | <span style={{ | ||
58 | textAlign: 'center', | ||
59 | width: '100%', | ||
60 | cursor: 'pointer' | ||
61 | }}> | ||
62 | Change server | ||
63 | </span> | ||
64 | </Link> | ||
54 | </div> | 65 | </div> |
55 | <div className="welcome__featured-services"> | 66 | <div className="welcome__featured-services"> |
56 | {recipes.map(recipe => ( | 67 | {recipes.map(recipe => ( |
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js index f43bc0b58..3d8bcddb0 100644 --- a/src/components/layout/Sidebar.js +++ b/src/components/layout/Sidebar.js | |||
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; | |||
3 | import ReactTooltip from 'react-tooltip'; | 3 | import ReactTooltip from 'react-tooltip'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import { observer } from 'mobx-react'; | 5 | import { observer } from 'mobx-react'; |
6 | import { Link } from 'react-router'; | ||
6 | 7 | ||
7 | import Tabbar from '../services/tabs/Tabbar'; | 8 | import Tabbar from '../services/tabs/Tabbar'; |
8 | import { ctrlKey } from '../../environment'; | 9 | import { ctrlKey } from '../../environment'; |
@@ -81,6 +82,7 @@ export default @observer class Sidebar extends Component { | |||
81 | const workspaceToggleMessage = ( | 82 | const workspaceToggleMessage = ( |
82 | isWorkspaceDrawerOpen ? messages.closeWorkspaceDrawer : messages.openWorkspaceDrawer | 83 | isWorkspaceDrawerOpen ? messages.closeWorkspaceDrawer : messages.openWorkspaceDrawer |
83 | ); | 84 | ); |
85 | const isLoggedIn = Boolean(localStorage.getItem('authToken')); | ||
84 | 86 | ||
85 | return ( | 87 | return ( |
86 | <div className="sidebar"> | 88 | <div className="sidebar"> |
@@ -89,38 +91,53 @@ export default @observer class Sidebar extends Component { | |||
89 | enableToolTip={() => this.enableToolTip()} | 91 | enableToolTip={() => this.enableToolTip()} |
90 | disableToolTip={() => this.disableToolTip()} | 92 | disableToolTip={() => this.disableToolTip()} |
91 | /> | 93 | /> |
92 | {workspaceStore.isFeatureEnabled ? ( | 94 | { |
93 | <button | 95 | isLoggedIn ? ( |
94 | type="button" | 96 | <> |
95 | onClick={() => { | 97 | {workspaceStore.isFeatureEnabled ? ( |
96 | toggleWorkspaceDrawer(); | 98 | <button |
97 | this.updateToolTip(); | 99 | type="button" |
98 | }} | 100 | onClick={() => { |
99 | className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`} | 101 | toggleWorkspaceDrawer(); |
100 | data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${ctrlKey}+D)`} | 102 | this.updateToolTip(); |
101 | > | 103 | }} |
102 | <i className="mdi mdi-view-grid" /> | 104 | className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`} |
103 | </button> | 105 | data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${ctrlKey}+D)`} |
104 | ) : null} | 106 | > |
105 | <button | 107 | <i className="mdi mdi-view-grid" /> |
106 | type="button" | 108 | </button> |
107 | onClick={() => { | 109 | ) : null} |
108 | toggleMuteApp(); | 110 | |
109 | this.updateToolTip(); | 111 | <button |
110 | }} | 112 | type="button" |
111 | className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`} | 113 | onClick={() => { |
112 | data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`} | 114 | toggleMuteApp(); |
113 | > | 115 | this.updateToolTip(); |
114 | <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} /> | 116 | }} |
115 | </button> | 117 | className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`} |
116 | <button | 118 | data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`} |
117 | type="button" | 119 | > |
118 | onClick={() => openSettings({ path: 'recipes' })} | 120 | <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} /> |
119 | className="sidebar__button sidebar__button--new-service" | 121 | </button> |
120 | data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`} | 122 | <button |
121 | > | 123 | type="button" |
122 | <i className="mdi mdi-plus-box" /> | 124 | onClick={() => openSettings({ path: 'recipes' })} |
123 | </button> | 125 | className="sidebar__button sidebar__button--new-service" |
126 | data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`} | ||
127 | > | ||
128 | <i className="mdi mdi-plus-box" /> | ||
129 | </button> | ||
130 | </> | ||
131 | ) : ( | ||
132 | <Link | ||
133 | to="/auth/welcome" | ||
134 | className="sidebar__button sidebar__button--new-service" | ||
135 | data-tip="Login"> | ||
136 | <i className="mdi mdi-login-variant" /> | ||
137 | </Link> | ||
138 | ) | ||
139 | } | ||
140 | |||
124 | <button | 141 | <button |
125 | type="button" | 142 | type="button" |
126 | onClick={() => openSettings({ path: 'app' })} | 143 | onClick={() => openSettings({ path: 'app' })} |
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js index 22ebde1d3..5d21262af 100644 --- a/src/components/services/content/Services.js +++ b/src/components/services/content/Services.js | |||
@@ -50,6 +50,7 @@ export default @observer class Services extends Component { | |||
50 | update, | 50 | update, |
51 | } = this.props; | 51 | } = this.props; |
52 | const { intl } = this.context; | 52 | const { intl } = this.context; |
53 | const isLoggedIn = Boolean(localStorage.getItem('authToken')); | ||
53 | 54 | ||
54 | return ( | 55 | return ( |
55 | <div className="services"> | 56 | <div className="services"> |
@@ -59,14 +60,17 @@ export default @observer class Services extends Component { | |||
59 | transitionName="slideUp" | 60 | transitionName="slideUp" |
60 | > | 61 | > |
61 | <div className="services__no-service"> | 62 | <div className="services__no-service"> |
62 | <img src="./assets/images/logo.svg" alt="" /> | 63 | <img src="./assets/images/logo.svg" alt="Logo" style={{ maxHeight: '50vh' }} /> |
63 | <h1>{intl.formatMessage(messages.welcome)}</h1> | 64 | <h1>{intl.formatMessage(messages.welcome)}</h1> |
65 | { !isLoggedIn && ( | ||
66 | <p>Please open settings, choose a Ferdi server and click "Login" in the bottom left corner.</p> | ||
67 | ) } | ||
64 | <Appear | 68 | <Appear |
65 | timeout={300} | 69 | timeout={300} |
66 | transitionName="slideUp" | 70 | transitionName="slideUp" |
67 | > | 71 | > |
68 | <Link to="/settings/recipes" className="button"> | 72 | <Link to={ isLoggedIn ? '/settings/services' : '/settings/app' } className="button"> |
69 | {intl.formatMessage(messages.getStarted)} | 73 | { isLoggedIn ? intl.formatMessage(messages.getStarted) : 'Open settings' } |
70 | </Link> | 74 | </Link> |
71 | </Appear> | 75 | </Appear> |
72 | </div> | 76 | </div> |
diff --git a/src/i18n/messages/src/components/layout/Sidebar.json b/src/i18n/messages/src/components/layout/Sidebar.json index 8fc508f71..d67adc96e 100644 --- a/src/i18n/messages/src/components/layout/Sidebar.json +++ b/src/i18n/messages/src/components/layout/Sidebar.json | |||
@@ -4,11 +4,11 @@ | |||
4 | "defaultMessage": "!!!Settings", | 4 | "defaultMessage": "!!!Settings", |
5 | "file": "src/components/layout/Sidebar.js", | 5 | "file": "src/components/layout/Sidebar.js", |
6 | "start": { | 6 | "start": { |
7 | "line": 12, | 7 | "line": 13, |
8 | "column": 12 | 8 | "column": 12 |
9 | }, | 9 | }, |
10 | "end": { | 10 | "end": { |
11 | "line": 15, | 11 | "line": 16, |
12 | "column": 3 | 12 | "column": 3 |
13 | } | 13 | } |
14 | }, | 14 | }, |
@@ -17,11 +17,11 @@ | |||
17 | "defaultMessage": "!!!Add new service", | 17 | "defaultMessage": "!!!Add new service", |
18 | "file": "src/components/layout/Sidebar.js", | 18 | "file": "src/components/layout/Sidebar.js", |
19 | "start": { | 19 | "start": { |
20 | "line": 16, | 20 | "line": 17, |
21 | "column": 17 | 21 | "column": 17 |
22 | }, | 22 | }, |
23 | "end": { | 23 | "end": { |
24 | "line": 19, | 24 | "line": 20, |
25 | "column": 3 | 25 | "column": 3 |
26 | } | 26 | } |
27 | }, | 27 | }, |
@@ -30,11 +30,11 @@ | |||
30 | "defaultMessage": "!!!Disable notifications & audio", | 30 | "defaultMessage": "!!!Disable notifications & audio", |
31 | "file": "src/components/layout/Sidebar.js", | 31 | "file": "src/components/layout/Sidebar.js", |
32 | "start": { | 32 | "start": { |
33 | "line": 20, | 33 | "line": 21, |
34 | "column": 8 | 34 | "column": 8 |
35 | }, | 35 | }, |
36 | "end": { | 36 | "end": { |
37 | "line": 23, | 37 | "line": 24, |
38 | "column": 3 | 38 | "column": 3 |
39 | } | 39 | } |
40 | }, | 40 | }, |
@@ -43,11 +43,11 @@ | |||
43 | "defaultMessage": "!!!Enable notifications & audio", | 43 | "defaultMessage": "!!!Enable notifications & audio", |
44 | "file": "src/components/layout/Sidebar.js", | 44 | "file": "src/components/layout/Sidebar.js", |
45 | "start": { | 45 | "start": { |
46 | "line": 24, | 46 | "line": 25, |
47 | "column": 10 | 47 | "column": 10 |
48 | }, | 48 | }, |
49 | "end": { | 49 | "end": { |
50 | "line": 27, | 50 | "line": 28, |
51 | "column": 3 | 51 | "column": 3 |
52 | } | 52 | } |
53 | }, | 53 | }, |
@@ -56,11 +56,11 @@ | |||
56 | "defaultMessage": "!!!Open workspace drawer", | 56 | "defaultMessage": "!!!Open workspace drawer", |
57 | "file": "src/components/layout/Sidebar.js", | 57 | "file": "src/components/layout/Sidebar.js", |
58 | "start": { | 58 | "start": { |
59 | "line": 28, | 59 | "line": 29, |
60 | "column": 23 | 60 | "column": 23 |
61 | }, | 61 | }, |
62 | "end": { | 62 | "end": { |
63 | "line": 31, | 63 | "line": 32, |
64 | "column": 3 | 64 | "column": 3 |
65 | } | 65 | } |
66 | }, | 66 | }, |
@@ -69,11 +69,11 @@ | |||
69 | "defaultMessage": "!!!Close workspace drawer", | 69 | "defaultMessage": "!!!Close workspace drawer", |
70 | "file": "src/components/layout/Sidebar.js", | 70 | "file": "src/components/layout/Sidebar.js", |
71 | "start": { | 71 | "start": { |
72 | "line": 32, | 72 | "line": 33, |
73 | "column": 24 | 73 | "column": 24 |
74 | }, | 74 | }, |
75 | "end": { | 75 | "end": { |
76 | "line": 35, | 76 | "line": 36, |
77 | "column": 3 | 77 | "column": 3 |
78 | } | 78 | } |
79 | } | 79 | } |