vbatts/mastodon
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Finish up moving colors from JSX to Sass (#584, #348)

Browse source
This commit is contained in:
Eugen Rochko 2017-02-10 22:58:29 +01:00
parent d2619e0b53
commit 5c4c046132
5 changed files with 89 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
app/assets/javascripts/components/features/notifications/components/notification.jsx
View file

@ -7,16 +7,6 @@ import Permalink from '../../../components/permalink';
import emojify from '../../../emoji';
import escapeTextContentForBrowser from 'react/lib/escapeTextContentForBrowser';
const messageStyle = {
marginLeft: '68px',
padding: '8px 0',
paddingBottom: '0',
cursor: 'default',
color: '#d9e1e8',
fontSize: '15px',
position: 'relative'
};
const linkStyle = {
fontWeight: '500'
};
@ -32,9 +22,9 @@ const Notification = React.createClass({
renderFollow (account, link) {
return (
<div className='notification'>
<div style={messageStyle}>
<div className='notification__message'>
<div style={{ position: 'absolute', 'left': '-26px'}}>
<i className='fa fa-fw fa-user-plus' style={{ color: '#2b90d9' }} />
<i className='fa fa-fw fa-user-plus' />
</div>
<FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
@ -52,7 +42,7 @@ const Notification = React.createClass({
renderFavourite (notification, link) {
return (
<div className='notification'>
<div style={messageStyle}>
<div className='notification__message'>
<div style={{ position: 'absolute', 'left': '-26px'}}>
<i className='fa fa-fw fa-star' style={{ color: '#ca8f04' }} />
</div>
@ -68,9 +58,9 @@ const Notification = React.createClass({
renderReblog (notification, link) {
return (
<div className='notification'>
<div style={messageStyle}>
<div className='notification__message'>
<div style={{ position: 'absolute', 'left': '-26px'}}>
<i className='fa fa-fw fa-retweet' style={{ color: '#2b90d9' }} />
<i className='fa fa-fw fa-retweet' />
</div>
<FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} />

43
app/assets/javascripts/components/features/status/components/card.jsx
View file

@ -1,18 +1,6 @@
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes';
const outerStyle = {
display: 'flex',
cursor: 'pointer',
fontSize: '14px',
border: '1px solid #363c4b',
borderRadius: '4px',
color: '#616b86',
marginTop: '14px',
textDecoration: 'none',
overflow: 'hidden'
};
const contentStyle = {
flex: '1 1 auto',
padding: '8px',
@ -20,25 +8,6 @@ const contentStyle = {
overflow: 'hidden'
};
const titleStyle = {
display: 'block',
fontWeight: '500',
marginBottom: '5px',
color: '#d9e1e8',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
};
const descriptionStyle = {
color: '#d9e1e8'
};
const imageOuterStyle = {
flex: '0 0 100px',
background: '#373b4a'
};
const imageStyle = {
display: 'block',
width: '100%',
@ -77,20 +46,20 @@ const Card = React.createClass({
if (card.get('image')) {
image = (
<div style={imageOuterStyle}>
<div className='status-card__image'>
<img src={card.get('image')} alt={card.get('title')} style={imageStyle} />
</div>
);
}
return (
<a style={outerStyle} href={card.get('url')} className='status-card'>
<a href={card.get('url')} className='status-card'>
{image}
<div style={contentStyle}>
<strong style={titleStyle} title={card.get('title')}>{card.get('title')}</strong>
<p style={descriptionStyle}>{card.get('description').substring(0, 50)}</p>
<span style={hostStyle}>{getHostname(card.get('url'))}</span>
<div className='status-card__content' style={contentStyle}>
<strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>
<p className='status-card__description'>{card.get('description').substring(0, 50)}</p>
<span className='status-card__host' style={hostStyle}>{getHostname(card.get('url'))}</span>
</div>
</a>
);

2
app/assets/javascripts/components/features/status/components/detailed_status.jsx
View file

@ -62,7 +62,7 @@ const DetailedStatus = React.createClass({
{media}
<div style={{ marginTop: '15px', color: '#616b86', fontSize: '14px', lineHeight: '18px' }}>
<div className='detailed-status__meta'>
<a className='detailed-status__datetime' style={{ color: 'inherit' }} href={status.get('url')} target='_blank' rel='noopener'><FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' /></a>{applicationLink} · <Link to={`/statuses/${status.get('id')}/reblogs`} style={{ color: 'inherit', textDecoration: 'none' }}><i className='fa fa-retweet' /><span style={{ fontWeight: '500', fontSize: '12px', marginLeft: '6px', display: 'inline-block' }}><FormattedNumber value={status.get('reblogs_count')} /></span></Link> · <Link to={`/statuses/${status.get('id')}/favourites`} style={{ color: 'inherit', textDecoration: 'none' }}><i className='fa fa-star' /><span style={{ fontWeight: '500', fontSize: '12px', marginLeft: '6px', display: 'inline-block' }}><FormattedNumber value={status.get('favourites_count')} /></span></Link>
</div>
</div>

86
app/assets/stylesheets/components.scss
View file

@ -188,7 +188,7 @@
a.status__content__spoiler-link {
display: inline-block;
border-radius: 2px;
color: lighten($color1, 6%);
color: lighten($color1, 8%);
font-weight: 500;
font-size: 11px;
padding: 0px 6px;
@ -201,7 +201,7 @@ a.status__content__spoiler-link {
padding-left: 68px;
position: relative;
min-height: 48px;
border-bottom: 1px solid lighten($color1, 6%);
border-bottom: 1px solid lighten($color1, 8%);
cursor: default;
.status__relative-time {
@ -240,12 +240,19 @@ a.status__content__spoiler-link {
}
}
.detailed-status__meta {
margin-top: 15px;
color: lighten($color1, 26%);
font-size: 14px;
line-height: 18px;
}
.detailed-status__action-bar {
background: lighten($color1, 4%);
display: flex;
flex-direction: row;
border-top: 1px solid lighten($color1, 6%);
border-bottom: 1px solid lighten($color1, 6%);
border-top: 1px solid lighten($color1, 8%);
border-bottom: 1px solid lighten($color1, 8%);
padding: 10px 0;
}
@ -260,7 +267,7 @@ a.status__content__spoiler-link {
.account {
padding: 10px;
border-bottom: 1px solid lighten($color1, 6%);
border-bottom: 1px solid lighten($color1, 8%);
.account__display-name {
flex: 1 1 auto;
@ -329,8 +336,8 @@ a.status__content__spoiler-link {
}
.account__action-bar {
border-top: 1px solid lighten($color1, 6%);
border-bottom: 1px solid lighten($color1, 6%);
border-top: 1px solid lighten($color1, 8%);
border-bottom: 1px solid lighten($color1, 8%);
line-height: 36px;
overflow: hidden;
flex: 0 0 auto;
@ -341,7 +348,7 @@ a.status__content__spoiler-link {
text-decoration: none;
overflow: hidden;
width: 80px;
border-left: 1px solid lighten($color1, 6%);
border-left: 1px solid lighten($color1, 8%);
padding: 10px 5px;
& > span {
@ -426,6 +433,20 @@ a.status__content__spoiler-link {
}
}
.notification__message {
margin-left: 68px;
padding: 8px 0;
padding-bottom: 0;
cursor: default;
color: $color3;
font-size: 15px;
position: relative;
.fa {
color: $color4;
}
}
.notification__display-name {
color: inherit;
text-decoration: none;
@ -650,7 +671,7 @@ a.status__content__spoiler-link {
.tabs-bar {
display: flex;
background: lighten($color1, 6%);
background: lighten($color1, 8%);
flex: 0 0 auto;
overflow-y: auto;
}
@ -664,7 +685,7 @@ a.status__content__spoiler-link {
text-align: center;
font-size:12px;
font-weight: 500;
border-bottom: 2px solid lighten($color1, 6%);
border-bottom: 2px solid lighten($color1, 8%);
&.active {
border-bottom: 2px solid $color4;
@ -854,7 +875,7 @@ a.status__content__spoiler-link {
}
.column-link {
background: lighten($color1, 6%);
background: lighten($color1, 8%);
color: $color5;
&:hover {
@ -974,11 +995,40 @@ button.active i.fa-retweet {
}
.status-card {
display: flex;
cursor: pointer;
font-size: 14px;
border: 1px solid lighten($color1, 8%);
border-radius: 4px;
color: lighten($color1, 26%);
margin-top: 14px;
text-decoration: none;
overflow: hidden;
&:hover {
background: lighten($color1, 6%);
background: lighten($color1, 8%);
}
}
.status-card__title {
display: block;
font-weight: 500;
margin-bottom: 5px;
color: $color3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.status-card__description {
color: $color3;
}
.status-card__image {
flex: 0 0 100px;
background: lighten($color1, 8%);
}
.load-more {
display: block;
color: lighten($color1, 26%);
@ -987,7 +1037,7 @@ button.active i.fa-retweet {
text-decoration: none;
&:hover {
background: lighten($color1, 6%);
background: lighten($color1, 8%);
}
}
@ -1038,7 +1088,7 @@ button.active i.fa-retweet {
.collapsable {
color: $color5;
background: lighten($color1, 6%);
background: lighten($color1, 8%);
}
.media-spoiler {
@ -1047,17 +1097,17 @@ button.active i.fa-retweet {
}
.modal-container--preloader {
background: lighten($color1, 6%);
background: lighten($color1, 8%);
}
.account--panel {
background: lighten($color1, 4%);
border-top: 1px solid lighten($color1, 6%);
border-bottom: 1px solid lighten($color1, 6%);
border-top: 1px solid lighten($color1, 8%);
border-bottom: 1px solid lighten($color1, 8%);
}
.column-settings--outer {
background: lighten($color1, 6%);
background: lighten($color1, 8%);
}
.column-settings--section {

8
app/assets/stylesheets/stream_entries.scss
View file

@ -5,24 +5,24 @@
.entry {
background: lighten($color2, 8%);
&, .detailed-status.light {
.detailed-status.light, .status.light {
border-bottom: 1px solid $color2;
}
&:last-child {
&, .detailed-status.light {
&, .detailed-status.light, .status.light {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
}
&:first-child {
&, .detailed-status.light {
&, .detailed-status.light, .status.light {
border-radius: 4px 4px 0 0;
}
&:last-child {
&, .detailed-status.light {
&, .detailed-status.light, .status.light {
border-radius: 4px;
}
}