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

Commit 0fdd66b

Browse files
saiichihashimotosaiichihashimoto
committed
I did some stuff
1 parent 740c3dd commit 0fdd66b

File tree

24 files changed

+300
-243
lines changed

24 files changed

+300
-243
lines changed

‎components/AccountDescription/AccountDescription.js

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎components/AccountHeader/AccountHeader.js

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,51 @@
1-
var React = require('react');
1+
var React = require('react');
2+
var classnames = require('classnames');
3+
4+
var dom = require('../../utils/dom');
5+
var styles = Object.assign({}, require('../flex.styles'), require('./AccountHeader.styles'));
26

37
module.exports = React.createClass({
48
displayName: 'AccountHeader',
5-
render: function() {
6-
return (
7-
<div></div>
8-
);
9+
propTypes: {
10+
account: React.PropTypes.object.isRequired,
11+
className: React.PropTypes.string
12+
},
13+
componentDidMount: function() {
14+
if (this.props.account.content && this.props.account.content.content) {
15+
Promise
16+
.all(this.props.account.content.content.slice(0, 3).map(function(content) {
17+
return dom.imageLoaded(content.image.medium || content.image.large || content.image.small);
18+
}))
19+
.then(this.props.onResize);
20+
} else if (this.props.account.banner) {
21+
dom.imageLoaded(this.props.account.banner).then(this.props.onResize);
22+
}
23+
},
24+
componentDidUpdate: function() {
25+
if (this.props.account.content && this.props.account.content.content) {
26+
Promise
27+
.all(this.props.account.content.content.slice(0, 3).map(function(content) {
28+
return dom.imageLoaded(content.image.medium || content.image.large || content.image.small);
29+
}))
30+
.then(this.props.onResize);
31+
} else if (this.props.account.banner) {
32+
dom.imageLoaded(this.props.account.banner).then(this.props.onResize);
33+
}
34+
},
35+
render: function() {
36+
if (this.props.account.content && this.props.account.content.content) {
37+
return (
38+
<div className={classnames(styles.banner, styles.flexRow, this.props.className)}>
39+
{this.props.account.content.content.slice(0, 3).map(function(content) {
40+
return <div className={styles.bannerImage} style={{ backgroundImage: 'url(' + (content.image.medium || content.image.large || content.image.small) + ')' }}></div>;
41+
})}
42+
</div>
43+
);
44+
}
45+
if (this.props.account.banner) {
46+
return <div className={classnames(styles.banner, this.props.className)} style={{ backgroundImage: 'url(' + this.props.account.banner + ')' }}></div>;
47+
}
48+
return null;
949
}
1050
});
1151

‎components/AccountHeader/AccountHeader.styles.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.banner {
2+
height: 126.66666667px;
3+
background-position: center;
4+
position: relative;
5+
background-size: cover;
6+
width: 100%;
7+
8+
&:empty {
9+
display: block;
10+
}
11+
12+
&-image {
13+
width: 33.33%;
14+
height: 126.66666667px;
15+
background-position: center;
16+
background-size: cover;
17+
}
18+
}

‎components/AccountHovercard/AccountHovercard.js

Lines changed: 45 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,55 @@
11
var React = require('react');
22

3-
var AccountDescription = require('../AccountDescription/AccountDescription');
4-
var AccountFooter = require('../AccountFooter/AccountFooter');
5-
var AccountHeader = require('../AccountHeader/AccountHeader');
3+
var AccountFooter = require('../AccountFooter/AccountFooter');
4+
var AccountHeader = require('../AccountHeader/AccountHeader');
5+
var browser = require('../../extension/browser');
6+
var dom = require('../../utils/dom');
7+
var styles = require('./AccountHovercard.styles.css');
8+
var urls = require('../../integrations/urls');
69

710
module.exports = React.createClass({
811
displayName: 'AccountHovercard',
9-
render: function() {
12+
propTypes: {
13+
account: React.PropTypes.object.isRequired,
14+
hovered: React.PropTypes.bool.isRequired,
15+
onResize: React.PropTypes.func.isRequired
16+
},
17+
componentDidMount: function() {
18+
if (this.props.account.image) {
19+
dom.imageLoaded(this.props.account.image.medium || this.props.account.image.small || this.props.account.image.large)
20+
.then(this.props.onResize);
21+
}
22+
},
23+
componentDidUpdate: function() {
24+
if (this.props.account.image) {
25+
dom.imageLoaded(this.props.account.image.medium || this.props.account.image.small || this.props.account.image.large)
26+
.then(this.props.onResize);
27+
}
28+
},
29+
render: function() {
1030
return (
11-
<div>
12-
<AccountHeader />
13-
<AccountDescription />
31+
<a className={styles.account} href={urls.print(this.props.account)} target="_blank">
32+
<AccountHeader className={styles.header} account={this.props.account} />
33+
{this.props.account.image && <span className={styles.image} style={{ backgroundImage: 'url(' + (this.props.account.image.medium || this.props.account.image.small || this.props.account.image.large) + ')' }}></span>}
34+
<div className={styles.nameContainer}>
35+
<span className={styles.name}>
36+
{
37+
this.props.account.name ||
38+
browser.i18n.getMessage('account_id_of_' + this.props.account.api, [this.props.account.id]) ||
39+
browser.i18n.getMessage('account_id', [this.props.account.id]) ||
40+
browser.i18n.getMessage('empty_account_id_of_' + this.props.account.api)
41+
}
42+
</span>
43+
{this.props.account.verified && <span className={styles.verified} />}
44+
</div>
45+
{
46+
this.props.account.text &&
47+
<div className={styles.description}>
48+
<p className={styles.text} dangerouslySetInnerHTML={{ __html: this.props.account.text }} />
49+
</div>
50+
}
1451
<AccountFooter />
15-
</div>
52+
</a>
1653
);
1754
}
1855
});

‎components/AccountHovercard/AccountHovercard.styles.css

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
.account {
2+
overflow: hidden;
3+
width: 380px;
4+
}
5+
6+
.account-youtube,
7+
.account-twitter,
8+
.account-soundcloud,
9+
.account-instagram {
10+
11+
/* FIXME */
12+
min-height: 140px;
13+
}
14+
15+
.account-reddit,
16+
.account-imgur {
17+
18+
/* FIXME */
19+
min-height: 88px;
20+
}
21+
22+
.image {
23+
background-position: center;
24+
background-size: cover;
25+
border-radius: 50%;
26+
border: 3px solid white;
27+
display: block;
28+
height: 90px;
29+
margin: auto;
30+
margin-top: 16px;
31+
position: relative;
32+
width: 90px;
33+
34+
.header + & {
35+
margin-top: -45px;
36+
}
37+
}
38+
39+
.name-container {
40+
composes: flex-row from '../flex.styles';
41+
margin: 16px 12px 10px;
42+
43+
.image + & {
44+
margin: 3px 12px 0;
45+
}
46+
}
47+
48+
.name {
49+
font-size: 16px;
50+
font-weight: 700;
51+
}
52+
53+
.verified {
54+
background-image: url("../../assets/images/verified.svg");
55+
background-position: center;
56+
background-repeat: no-repeat;
57+
background-size: 100%;
58+
display: inline-block;
59+
height: 16px;
60+
margin-left: 6px;
61+
width: 16px;
62+
}
63+
64+
.description {
65+
max-height: 120px;
66+
overflow: hidden;
67+
padding: 12px 12px 0 12px;
68+
position: relative;
69+
width: 100%;
70+
71+
.name-container + & {
72+
margin: 0;
73+
max-height: 120px;
74+
padding: 6px 12px 12px 12px;
75+
}
76+
}
77+
78+
.text {
79+
display: block;
80+
text-align: center;
81+
}
82+
83+
.description + .meta {
84+
85+
/* FIXME account */
86+
padding-top: 0;
87+
margin-top: 0;
88+
}

‎components/Carousel/Carousel.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,19 @@ module.exports = React.createClass({
66
displayName: 'Carousel',
77
propTypes: {
88
children: React.PropTypes.arrayOf(React.PropTypes.node).isRequired,
9-
onResize: React.PropTypes.func
9+
onResize: React.PropTypes.func.isRequired
1010
},
1111
getInitialState: function() {
1212
return { index: 0 };
1313
},
14+
componentDidMount: function() {
15+
this.props.onLoad();
16+
},
1417
previous: function() {
15-
this.setState({ index: Math.max(0, this.state.index - 1) });
18+
this.setState({ index: Math.max(0, this.state.index - 1) }, this.props.onResize);
1619
},
1720
next: function() {
18-
this.setState({ index: Math.min(this.props.children.length - 1, this.state.index + 1) });
21+
this.setState({ index: Math.min(this.props.children.length - 1, this.state.index + 1) }, this.props.onResize);
1922
},
2023
render: function() {
2124
if (this.props.children.length === 0) {

‎components/ContentDescription/ContentDescription.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,23 @@ var urls = require('../../integrations/urls');
66
module.exports = React.createClass({
77
displayName: 'ContentDescription',
88
propTypes: {
9-
content: React.PropTypes.object.isRequired
9+
content: React.PropTypes.object.isRequired,
10+
onResize: React.PropTypes.func.isRequired
11+
},
12+
componentDidMount: function() {
13+
this.props.onResize();
14+
},
15+
componentDidUpdate: function(prevProps) {
16+
if (this.props.content === prevProps.content) {
17+
return;
18+
}
19+
this.props.onResize();
1020
},
1121
render: function() {
1222
// TODO Collapsing description
1323

1424
return (this.props.content.name || this.props.content.text) ?
15-
<div className={styles.contentDescription}>
25+
<div className={styles.description}>
1626
{ this.props.content.name && <a className={styles.name} href={urls.print(this.props.content) || this.props.content.url} target="_blank">{ this.props.content.name }</a> }
1727
{ this.props.content.text && <p className={styles.text} dangerouslySetInnerHTML={{ __html: this.props.content.text }} /> }
1828
</div> :

‎components/ContentDescription/ContentDescription.styles.css

Lines changed: 9 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1-
.content-description {
2-
padding: 12px 12px 0 12px;
3-
width: 100%;
1+
.name {
2+
font-size: 14px;
3+
color: rgba(0, 0, 0, .8);
4+
font-weight: 600;
5+
}
6+
7+
.description {
48
max-height: 69px;
59
overflow: hidden;
10+
padding: 12px 12px 0 12px;
611
position: relative;
12+
width: 100%;
713

814
.content-reddit & {
915

@@ -26,44 +32,3 @@
2632
margin-top: 0;
2733
}
2834
}
29-
30-
.name {
31-
font-size: 14px;
32-
color: rgba(0, 0, 0, .8);
33-
font-weight: 600;
34-
}
35-
36-
.text {
37-
}
38-
39-
.expand-description {
40-
max-height: inherit;
41-
}
42-
43-
.collapsed-description {
44-
position: relative;
45-
cursor: pointer;
46-
47-
&:after {
48-
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 28%, rgba(255, 255, 255, 1) 100%);
49-
color: rgba(0, 0, 0, .6);
50-
content: "Read More";
51-
cursor: pointer;
52-
display: block;
53-
font-family: -apple-system, BlinkMacSystemFont, "Roboto", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
54-
font-size: 14px;
55-
height: 20px;
56-
padding-right: 12px;
57-
position: absolute;
58-
right: 0;
59-
text-align: right;
60-
top: 50px;
61-
width: 120px;
62-
}
63-
64-
.content-reddit &:after {
65-
66-
/* FIXME */
67-
top: 180px;
68-
}
69-
}

‎components/ContentFooter/ContentFooter.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ module.exports = React.createClass({
1414
},
1515
render: function() {
1616
return (
17-
<div className={styles.contentFooter}>
17+
<div className={styles.footer}>
1818
<div className={styles.statsContainer}>
1919
<div className={styles.stats}>
2020
{this.props.content.stats && config.integrations[this.props.content.api].stats.map(function(stat) {

‎components/ContentHeader/ContentHeader.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ module.exports = React.createClass({
2424
);
2525

2626
return (
27-
<div className={styles.contentHeader}>
27+
<div className={styles.header}>
2828
<div className={styles.flexSpread}>
29-
{accountImage && <a className={styles.image} href={urls.print(this.props.content.account)} target="_blank" style={{ backgroundImage: 'url(' + accountImage + ')' }}></a>}
29+
{accountImage && <a className={styles.image} href={urls.print(this.props.content.account)} style={{ backgroundImage: 'url(' + accountImage + ')' }} target="_blank"></a>}
3030
<div className={styles.flexGrow}>
3131
<a className={styles.name} href={urls.print(this.props.content.account)} target="_blank">{accountName}</a>
3232
</div>

‎components/ContentHeader/ContentHeader.styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.content-header {
1+
.header {
22
composes: flex-spread from '../flex.styles';
33
padding: 12px;
44
border-bottom: 1px solid rgba(0, 0, 0, .1);

0 commit comments

Comments
 (0)