Skip to content

Commit 346c6e4

Browse files
author
Calvin Nhieu
committed
style onboarding popup
1 parent 9303912 commit 346c6e4

File tree

6 files changed

+104
-56
lines changed

6 files changed

+104
-56
lines changed

‎chrome-extension/js/background.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -243,9 +243,9 @@ function initOnboardingPopupOnFirstVisit(tab, data) {
243243
var name = extractRootDomain(tab.url);
244244
}
245245

246-
let code = 'var data = ' + JSON.stringify(data) + ';' + 'var name = "' + name + '";';
247-
chrome.tabs.executeScript(tab.id, { code: code }, () => {
248-
chrome.tabs.executeScript(tab.id, { file: 'createOnboardingPopup.js' });
246+
let code = 'var data = ' + JSON.stringify(data) + ';' + 'var name = "' + name + '";' + 'var icon = "' + chrome.extension.getURL('img/icon.png')+ '";';
247+
chrome.tabs.executeScript({ code: code }, () => {
248+
chrome.tabs.executeScript({ file: 'createOnboardingPopup.js' });
249249
});
250250
}
251251
});

‎chrome-extension/js/createOnboardingPopup.js

+86-51
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@ import Radium from 'radium';
33
import ReactDOM from 'react-dom';
44
import key from 'keymaster';
55

6+
import WebFont from 'webfontloader';
7+
8+
WebFont.load({
9+
google: {
10+
families: ['Overpass:400,700']
11+
}
12+
});
13+
614
const ID = 'macro-onboarding-popup-wrapper';
715

816
if (!document.getElementById(ID)) {
@@ -27,21 +35,28 @@ class OnboardingPopup extends Component {
2735
this.close();
2836
});
2937
}
30-
toggle() {
31-
this.setState({show: this.state.show ? false : true});
32-
}
3338
close() {
3439
this.setState({show: false});
3540
}
3641
cancel(e) {
3742
e.stopPropagation();
3843
}
3944
render() {
40-
return this.state.show ? <div style={styles.container}>
41-
<div style={styles.modal} onClick={() => this.close()}>
42-
<div style={[styles.dialog, this.props.style]} onClick={this.cancel}>
43-
<div style={styles.header}>
44-
<h1>Onboarding Panel for {this.name} </h1>
45+
let shortcutHint1 = this.props.data.sections[0].shortcuts[0];
46+
let shortcutHint2 = this.props.data.sections[0].shortcuts[1];
47+
return this.state.show ? <div style={styles.container} onClick={() => this.close()}>
48+
<div style={styles.pointer}/>
49+
<div style={styles.popup} onClick={this.cancel}>
50+
<p style={[styles.reset, styles.primary, {marginTop: '10px'}]}>Press {shortcutHint1.keys[0].default} to {shortcutHint1.name.toLowerCase()}.</p>
51+
<p style={[styles.reset, styles.primary]}>Press {shortcutHint2.keys[0].default} to {shortcutHint2.name.toLowerCase()}.</p>
52+
<p style={styles.secondary}>Discover more {this.name} shortcuts by pressing Alt+/ or by clicking the Macro icon.</p>
53+
<div style={styles.footer}>
54+
<div style={styles.button} onClick={() => this.close()}>
55+
<p style={[styles.reset, styles.secondary]}>GOT IT</p>
56+
</div>
57+
<div style={styles.plug}>
58+
<p style={[styles.reset, styles.tertiary]}>POWERED BY</p>
59+
<img style={styles.icon} src={icon}/>
4560
</div>
4661
</div>
4762
</div>
@@ -50,66 +65,86 @@ class OnboardingPopup extends Component {
5065
}
5166

5267
let styles = {
68+
reset: {
69+
marginTop: '0',
70+
marginRight: '0',
71+
marginBottom: '0',
72+
marginLeft: '0'
73+
},
74+
primary: {
75+
fontWeight: '700'
76+
},
77+
secondary: {
78+
color: '#888'
79+
},
80+
tertiary: {
81+
color: '#BBB',
82+
fontSize: '9px',
83+
paddingTop: '3px'
84+
},
5385
container: {
5486
position: 'fixed',
55-
zIndex: '9000',
87+
zIndex: '1000',
5688
width: '100%',
5789
height: '100%',
5890
top: '0',
5991
left: '0',
6092
right: '0',
61-
bottom: '0'
62-
},
63-
overlay: {
64-
opacity: '0.2',
65-
position: 'fixed',
66-
backgroundColor: '#000000',
67-
zIndex: '7000',
68-
top: '0',
69-
left: '0',
70-
right: '0',
71-
bottom: '0'
93+
bottom: '0',
94+
fontFamily: 'Overpass',
95+
fontSize: '12px',
96+
lineHeight: '1.5'
7297
},
73-
modal: {
74-
display: 'block',
98+
popup: {
7599
position: 'absolute',
76-
zIndex: '8000',
77-
outline: '0',
78-
top: '0',
79-
left: '0',
80-
right: '0',
81-
bottom: '0'
100+
top: '10px',
101+
right: '30px',
102+
backgroundColor: '#F7FCFF',
103+
width: '250px',
104+
padding: '15px',
105+
boxShadow: '1px 3px 7px rgba(0, 0, 0, 0.3)',
106+
borderRadius: '2px'
82107
},
83-
dialog: {
84-
width: '600px',
85-
position: 'fixed',
86-
top: '50%',
87-
left: '50%',
88-
transform: 'translate(-50%, -50%)',
89-
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.5)',
90-
outline: '0',
91-
backgroundColor: '#FFFFFF',
92-
padding: '20px',
93-
maxHeight: '90vh',
94-
overflowY: 'scroll',
95-
borderRadius: '15px'
108+
button: {
109+
backgroundColor: '#FFF',
110+
padding: '3px 15px',
111+
color: '#AAA',
112+
borderRadius: '3px',
113+
border: '1px solid #DDD',
114+
cursor: 'pointer',
115+
fontWeight: '700',
116+
fontSize: '11px',
117+
':hover': {
118+
color: '#2391E1'
119+
}
96120
},
97-
header: {
121+
footer: {
98122
display: 'flex',
99123
justifyContent: 'space-between',
100-
marginBottom: '5px',
101-
paddingLeft: '15px'
124+
alignItems: 'center',
125+
marginTop: '15px'
102126
},
103-
body: {
104-
display: 'flex',
105-
justifyContent: 'space-around'
127+
plug: {
128+
display: 'flex'
129+
},
130+
icon: {
131+
width: '20px',
132+
height: '20px',
133+
marginLeft: '7px'
134+
},
135+
pointer: {
136+
width: '0',
137+
height: '0',
138+
position: 'absolute',
139+
top: '2px',
140+
right: '35px',
141+
borderLeft: '10px solid transparent',
142+
borderRight: '10px solid transparent',
143+
borderBottom: '10px solid #F7FCFF',
144+
zIndex: '300'
106145
},
107-
col: {
108-
width: '45%'
109-
}
110146
}
111147

112148
OnboardingPopup = Radium(OnboardingPopup);
113149

114150
ReactDOM.render(<OnboardingPopup data={data} name={name}/>, document.getElementById(ID));
115-

‎chrome-extension/manifest.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,8 @@
2323
"*://*/*"
2424
],
2525
"content_security_policy": "script-src 'self' https://www.google-analytics.com 'unsafe-eval'; object-src 'self'",
26-
"commands": {}
26+
"commands": {},
27+
"web_accessible_resources": [
28+
"img/*.png"
29+
]
2730
}

‎package-lock.json

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"keymaster": "^1.6.2",
2525
"radium": "^0.22.1",
2626
"ssri": "^5.3.0",
27-
"typings-for-css-modules-loader": "^1.7.0"
27+
"typings-for-css-modules-loader": "^1.7.0",
28+
"webfontloader": "^1.6.28"
2829
}
2930
}

‎yarn.lock

+4
Original file line numberDiff line numberDiff line change
@@ -3990,6 +3990,10 @@ watchpack@^1.4.0:
39903990
chokidar "^1.7.0"
39913991
graceful-fs "^4.1.2"
39923992

3993+
webfontloader@^1.6.28:
3994+
version "1.6.28"
3995+
resolved "https://registry.yarnpkg.com/webfontloader/-/webfontloader-1.6.28.tgz#db786129253cb6e8eae54c2fb05f870af6675bae"
3996+
39933997
webpack-sources@^1.0.1:
39943998
version "1.1.0"
39953999
resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.1.0.tgz#a101ebae59d6507354d71d8013950a3a8b7a5a54"

0 commit comments

Comments
 (0)