Skip to content
This repository was archived by the owner on Feb 9, 2021. It is now read-only.

Commit ae26a19

Browse files
saiichihashimotosaiichihashimoto
committed
[wip] Options page in react but is nonfunctional
1 parent a17389f commit ae26a19

28 files changed

+310
-312
lines changed

‎.eslintrc

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@
66
"mocha": true,
77
"node": true
88
},
9-
"globals": {
10-
"chrome": true
11-
},
129
"rules": {
1310
"camelcase": 0,
1411
"key-spacing": [2, {
@@ -21,6 +18,7 @@
2118
"no-multi-spaces": [2, { "exceptions": { "VariableDeclarator": true } }],
2219
"object-curly-spacing": [2, "always"],
2320
"react/jsx-uses-react": 2,
21+
"react/sort-comp": 2,
2422
"space-before-function-paren": [2, "never"]
2523
}
2624
}

‎Procfile.dev

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
web: nodemon --ignore dist/ -e js,jsx server
21
extension: webpack-dev-server --config webpack.config.extension.js
32
www: webpack-dev-server --inline --hot --config webpack.config.www.js
3+
web: nodemon --ignore dist/ -e js,jsx server
44
redis: redis-server

‎browserslist

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Chrome >= 43

‎components/IntegrationOptions/IntegrationOptions.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
var React = require('react');
2+
3+
var browser = require('../../extension/browser');
4+
var styles = require('./IntegrationOptions.styles');
5+
6+
var requireLogo = require.context('../../assets/images', false, /-icon-full_color.png$/);
7+
8+
module.exports = React.createClass({
9+
displayName: 'IntegrationOptions',
10+
propTypes: {
11+
integration: React.PropTypes.string.isRequired
12+
},
13+
render: function() {
14+
return (
15+
<div className={styles.row}>
16+
<div className={styles.col6}>
17+
<label className={styles.setting}>
18+
<img className={styles.integrationImage} src={requireLogo('./' + this.props.integration + '-icon-full_color.png')} />
19+
<span className={styles.settingTitle}>{browser.i18n.getMessage('hovercards_of_' + this.props.integration + '_content')}</span>
20+
<div className={styles.inputContainer}>
21+
<input type="checkbox" /> {browser.i18n.getMessage('show_these')}
22+
</div>
23+
</label>
24+
</div>
25+
<div className={styles.col6}>
26+
<label className={styles.setting}>
27+
<img className={styles.integrationImage} src={requireLogo('./' + this.props.integration + '-icon-full_color.png')} />
28+
<span className={styles.settingTitle}>{browser.i18n.getMessage('hovercards_of_account')}</span>
29+
<div className={styles.inputContainer}>
30+
<input type="checkbox" /> {browser.i18n.getMessage('show_these')}
31+
</div>
32+
</label>
33+
</div>
34+
</div>
35+
);
36+
}
37+
});

‎components/IntegrationOptions/IntegrationOptions.styles.css

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.row {
2+
margin: auto !important;
3+
max-width: 420px;
4+
overflow: auto;
5+
padding: 5px;
6+
}
7+
8+
.col-6 {
9+
float: left;
10+
width: 50%;
11+
12+
&:first-of-type {
13+
padding-right: 5px;
14+
}
15+
16+
&:last-of-type {
17+
padding-left: 5px;
18+
}
19+
}
20+
21+
.setting {
22+
background: white;
23+
border-radius: 3px;
24+
border: 1px solid rgba(0, 0, 0, .15);
25+
cursor: pointer;
26+
display: block;
27+
overflow: auto;
28+
padding: 12px;
29+
transition: all .1s ease-in-out;
30+
31+
&:hover {
32+
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.15);
33+
}
34+
}
35+
36+
.integration-image {
37+
float: left;
38+
width: 28px;
39+
}
40+
41+
.setting-title {
42+
display: block;
43+
font-weight: bold;
44+
padding-bottom: 1px;
45+
padding-left: 38px;
46+
}
47+
48+
.input-container {
49+
color: rgba(0, 0, 0, .4);
50+
cursor: pointer;
51+
padding-left: 38px;
52+
}

‎components/Options/Options.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
var React = require('react');
2+
3+
var browser = require('../../extension/browser');
4+
var styles = require('./Options.styles');
5+
var IntegrationOptions = require('../IntegrationOptions/IntegrationOptions');
6+
7+
module.exports = React.createClass({
8+
displayName: 'Options',
9+
render: function() {
10+
return (
11+
<div className={styles.integrationOptions}>
12+
<IntegrationOptions integration="imgur" />
13+
<IntegrationOptions integration="soundcloud" />
14+
<IntegrationOptions integration="youtube" />
15+
<IntegrationOptions integration="instagram" />
16+
<IntegrationOptions integration="reddit" />
17+
<IntegrationOptions integration="twitter" />
18+
<button className={styles.saveButton}>{browser.i18n.getMessage('save_settings')}</button>
19+
</div>
20+
);
21+
}
22+
});

‎components/Options/Options.styles.css

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/* FIXME Find a better way to do global styles */
2+
* {
3+
box-sizing: border-box;
4+
margin: 0;
5+
}
6+
7+
html {
8+
background-color: #eceef1;
9+
}
10+
11+
.integration-options {
12+
background-color: #eceef1;
13+
padding: 5px;
14+
}
15+
16+
.save-button {
17+
background: #349cef;
18+
border-radius: 30px;
19+
border: 0;
20+
box-shadow: 0 0px 0px rgba(0, 0, 0, 0), 0 0px 0px rgba(0, 0, 0, 0);
21+
color: white;
22+
cursor: pointer;
23+
display: block;
24+
font-weight: bold;
25+
margin: 8px auto;
26+
outline: 0;
27+
padding: 12px;
28+
text-align: center;
29+
text-shadow: none;
30+
transition: all .1s ease-in-out;
31+
width: 150px;
32+
33+
&:hover {
34+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
35+
transform: scale(1.05);
36+
}
37+
38+
&.settings-saved {
39+
background: #4cbb91;
40+
box-shadow: 0 0px 0px rgba(0, 0, 0, 0), 0 0px 0px rgba(0, 0, 0, 0);
41+
cursor: default;
42+
transform: scale(1);
43+
}
44+
45+
&.settings-error {
46+
background: #e94639;
47+
box-shadow: 0 0px 0px rgba(0, 0, 0, 0), 0 0px 0px rgba(0, 0, 0, 0);
48+
cursor: default;
49+
transform: scale(1);
50+
}
51+
}

‎extension/analytics/background.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* global chrome */
12
var _ = require('underscore');
23
var async = require('async');
34
var config = require('../config');

‎extension/analytics/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* global chrome */
12
var _ = require('underscore');
23

34
module.exports = function() {

‎extension/authentication/background.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* global chrome */
12
var _ = require('underscore');
23
var analytics = require('../analytics/background');
34
var async = require('async');

‎extension/authentication/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* global chrome */
12
var _ = require('underscore');
23

34
module.exports = function(api, callback) {

‎extension/browser.chrome.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = global.chrome;

‎extension/content-security-policy/background.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* global chrome */
12
var _ = require('underscore');
23
var config = require('../config');
34

‎extension/copy.json

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,5 +73,15 @@
7373

7474
"youtube": { "message": "YouTube" },
7575
"youtube_content": { "message": "Videos" },
76-
"youtube_followers": { "message": "Subscribers" }
76+
"youtube_followers": { "message": "Subscribers" },
77+
78+
"hovercards_of_account": { "message": "User hovercards" },
79+
"hovercards_of_imgur_content": { "message": "Photo hovercards" },
80+
"hovercards_of_instagram_content": { "message": "Photo hovercards" },
81+
"hovercards_of_reddit_content": { "message": "Post hovercards" },
82+
"hovercards_of_soundcloud_content": { "message": "Track hovercards" },
83+
"hovercards_of_twitter_content": { "message": "Tweet hovercards" },
84+
"hovercards_of_youtube_content": { "message": "Video hovercards" },
85+
"save_settings": { "message": "Save My Settings" },
86+
"show_these": { "message": "Show these!" }
7787
}

‎extension/createStore.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
var applyMiddleware = require('redux').applyMiddleware;
2+
var createStore = require('redux').createStore;
3+
var thunkMiddlware = require('redux-thunk').default;
4+
5+
var reducers = require('./reducers');
6+
7+
createStore = applyMiddleware(thunkMiddlware)(createStore);
8+
9+
module.exports = function(initialState) {
10+
var store = createStore(reducers, initialState);
11+
12+
if (!process.env.NODE_ENV) {
13+
console.log('store', store.getState());
14+
store.subscribe(function() {
15+
console.log('store', store.getState());
16+
});
17+
}
18+
19+
if (module.hot) {
20+
module.hot.accept('./reducers', function() {
21+
store.replaceReducer(require('./reducers'));
22+
});
23+
}
24+
25+
return store;
26+
};

‎extension/hovercard/every-frame.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* global chrome */
12
var $ = require('jquery');
23
var _ = require('underscore');
34
var analytics = require('../analytics');

‎extension/in-app-messaging/background.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* global chrome */
12
var $ = require('jquery');
23
var _ = require('underscore');
34
var async = require('async');

‎extension/load_script/background.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* global chrome */
12
var $ = require('jquery');
23
var _ = require('underscore');
34

‎extension/manifest.json

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,8 @@
44
"description": "__MSG_app_description__",
55
"version": "3.1.0",
66
"content_scripts": [
7-
{
8-
"matches": [
9-
"http://*/*",
10-
"https://*/*"
11-
],
12-
"css": [
13-
"every-frame.css"
14-
],
15-
"js": [
16-
"every-frame.js"
17-
],
18-
"all_frames": true
19-
},
20-
{
21-
"matches": [
22-
"http://*/*",
23-
"https://*/*"
24-
],
25-
"css": [
26-
"top-frame.css"
27-
],
28-
"js": [
29-
"top-frame.js"
30-
],
31-
"all_frames": false
32-
}
337
],
348
"background": {
35-
"scripts": [
36-
"background.js"
37-
]
389
},
3910
"options_page": "options.html",
4011
"options_ui": {

0 commit comments

Comments
 (0)