cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Move more inline colours to scss

This commit is contained in:
Lorenz Diener 2017-02-10 15:35:19 +00:00
parent c424df5192
commit c9f42a7b85
6 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/javascripts/components/components/column_collapsable.jsx
View File

@ -40,10 +40,11 @@ const ColumnCollapsable = React.createClass({
render () {
const { icon, fullHeight, children } = this.props;
const { collapsed } = this.state;
const collapsedClassName = collapsed ? 'collapsable-collapsed' : 'collapsable';
return (
<div style={{ position: 'relative' }}>
<div style={{...iconStyle, color: collapsed ? '#9baec8' : '#fff', background: collapsed ? '#2f3441' : '#373b4a' }} onClick={this.handleToggleCollapsed}><i className={`fa fa-${icon}`} /></div>
<div style={{...iconStyle }} className={collapsedClassName} onClick={this.handleToggleCollapsed}><i className={`fa fa-${icon}`} /></div>
<Motion defaultStyle={{ opacity: 0, height: 0 }} style={{ opacity: spring(collapsed ? 0 : 100), height: spring(collapsed ? 0 : fullHeight, collapsed ? undefined : { stiffness: 150, damping: 9 }) }}>
{({ opacity, height }) =>

3
app/assets/javascripts/components/components/loading_indicator.jsx
View File

@ -4,12 +4,11 @@ const style = {
textAlign: 'center',
fontSize: '16px',
fontWeight: '500',
color: '#616b86',
paddingTop: '120px'
};
const LoadingIndicator = () => (
<div style={style}>
<div className='loading-indicator' style={style}>
<FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' />
</div>
);

6
app/assets/javascripts/components/components/media_gallery.jsx
View File

@ -16,8 +16,6 @@ const outerStyle = {
};
const spoilerStyle = {
background: '#000',
color: '#fff',
textAlign: 'center',
height: '100%',
cursor: 'pointer',
@ -84,14 +82,14 @@ const MediaGallery = React.createClass({
if (!this.state.visible) {
if (sensitive) {
children = (
<div style={spoilerStyle} onClick={this.handleOpen}>
<div style={spoilerStyle} className='media-spoiler' onClick={this.handleOpen}>
<span style={spoilerSpanStyle}><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
<span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
</div>
);
} else {
children = (
<div style={spoilerStyle} onClick={this.handleOpen}>
<div style={spoilerStyle} className='media-spoiler' onClick={this.handleOpen}>
<span style={spoilerSpanStyle}><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
<span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
</div>

6
app/assets/javascripts/components/components/video_player.jsx
View File

@ -28,8 +28,6 @@ const muteStyle = {
const spoilerStyle = {
marginTop: '8px',
background: '#000',
color: '#fff',
textAlign: 'center',
height: '100%',
cursor: 'pointer',
@ -122,7 +120,7 @@ const VideoPlayer = React.createClass({
if (!this.state.visible) {
if (sensitive) {
return (
<div style={{...spoilerStyle, width: `${width}px`, height: `${height}px` }} onClick={this.handleVisibility}>
<div style={{...spoilerStyle, width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
{spoilerButton}
<span style={spoilerSpanStyle}><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
<span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
@ -130,7 +128,7 @@ const VideoPlayer = React.createClass({
);
} else {
return (
<div style={{...spoilerStyle, width: `${width}px`, height: `${height}px` }} onClick={this.handleOpen}>
<div style={{...spoilerStyle, width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleOpen}>
{spoilerButton}
<span style={spoilerSpanStyle}><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
<span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>

3
app/assets/javascripts/components/features/notifications/components/clear_column_button.jsx
View File

@ -4,8 +4,7 @@ const iconStyle = {
position: 'absolute',
right: '48px',
top: '0',
cursor: 'pointer',
background: '#2f3441'
cursor: 'pointer'
};
const ClearColumnButton = ({ onClick }) => (

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

@ -34,6 +34,7 @@
.column-icon {
color: $color3;
background: lighten($color1, 4%);
&:hover {
color: lighten($color3, 7%);
@ -883,6 +884,7 @@ a.status__content__spoiler-link {
.autosuggest-textarea__textarea {
height: 100px;
background: $color5;
}
.autosuggest-textarea__suggestions {
@ -1020,3 +1022,23 @@ button.active i.fa-retweet {
font-size: 14px;
margin: 0;
}
.loading-indicator {
color: #616b86;
color: #00FF00;
}
.collapsable-collapsed {
color: $color3;
background: lighten($color1, 4%);
}
.collapsable {
color: $color5;
background: lighten($color1, 6%);
}
.media-spoiler {
background: $color8;
color: $color5;
}