monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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 emojify from '../../../emoji';
import escapeTextContentForBrowser from 'react/lib/escapeTextContentForBrowser'; 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 = { const linkStyle = {
fontWeight: '500' fontWeight: '500'
}; };
@ -32,9 +22,9 @@ const Notification = React.createClass({
renderFollow (account, link) { renderFollow (account, link) {
return ( return (
<div className='notification'> <div className='notification'>
<div style={messageStyle}> <div className='notification__message'>
<div style={{ position: 'absolute', 'left': '-26px'}}> <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> </div>
<FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} /> <FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
@ -52,7 +42,7 @@ const Notification = React.createClass({
renderFavourite (notification, link) { renderFavourite (notification, link) {
return ( return (
<div className='notification'> <div className='notification'>
<div style={messageStyle}> <div className='notification__message'>
<div style={{ position: 'absolute', 'left': '-26px'}}> <div style={{ position: 'absolute', 'left': '-26px'}}>
<i className='fa fa-fw fa-star' style={{ color: '#ca8f04' }} /> <i className='fa fa-fw fa-star' style={{ color: '#ca8f04' }} />
</div> </div>
@ -68,9 +58,9 @@ const Notification = React.createClass({
renderReblog (notification, link) { renderReblog (notification, link) {
return ( return (
<div className='notification'> <div className='notification'>
<div style={messageStyle}> <div className='notification__message'>
<div style={{ position: 'absolute', 'left': '-26px'}}> <div style={{ position: 'absolute', 'left': '-26px'}}>
<i className='fa fa-fw fa-retweet' style={{ color: '#2b90d9' }} /> <i className='fa fa-fw fa-retweet' />
</div> </div>
<FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} /> <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 PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes'; 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 = { const contentStyle = {
flex: '1 1 auto', flex: '1 1 auto',
padding: '8px', padding: '8px',
@ -20,25 +8,6 @@ const contentStyle = {
overflow: 'hidden' 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 = { const imageStyle = {
display: 'block', display: 'block',
width: '100%', width: '100%',
@ -77,20 +46,20 @@ const Card = React.createClass({
if (card.get('image')) { if (card.get('image')) {
image = ( image = (
<div style={imageOuterStyle}> <div className='status-card__image'>
<img src={card.get('image')} alt={card.get('title')} style={imageStyle} /> <img src={card.get('image')} alt={card.get('title')} style={imageStyle} />
</div> </div>
); );
} }
return ( return (
<a style={outerStyle} href={card.get('url')} className='status-card'> <a href={card.get('url')} className='status-card'>
{image} {image}
<div style={contentStyle}> <div className='status-card__content' style={contentStyle}>
<strong style={titleStyle} title={card.get('title')}>{card.get('title')}</strong> <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>
<p style={descriptionStyle}>{card.get('description').substring(0, 50)}</p> <p className='status-card__description'>{card.get('description').substring(0, 50)}</p>
<span style={hostStyle}>{getHostname(card.get('url'))}</span> <span className='status-card__host' style={hostStyle}>{getHostname(card.get('url'))}</span>
</div> </div>
</a> </a>
); );

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

@ -62,7 +62,7 @@ const DetailedStatus = React.createClass({
{media} {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> <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>
</div> </div>

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

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

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

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