treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Merge pull request #617 from halcy/style-changes 

Style changes
remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
Eugen 2017-02-10 19:10:15 +01:00 committed by GitHub
parent 1f1acd98f1 cbb962fd77
commit 73e388e0d8
14 changed files with 85 additions and 46 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>

2
app/assets/javascripts/components/features/account/components/header.jsx
View File

@ -35,7 +35,7 @@ const Header = React.createClass({
}
if (me !== account.get('id') && account.getIn(['relationship', 'followed_by'])) {
info = <span style={{ position: 'absolute', top: '10px', right: '10px', opacity: '0.7', display: 'inline-block', verticalAlign: 'top', background: 'rgba(0, 0, 0, 0.4)', color: '#fff', textTransform: 'uppercase', fontSize: '11px', fontWeight: '500', padding: '4px', borderRadius: '4px' }}><FormattedMessage id='account.follows_you' defaultMessage='Follows you' /></span>
info = <span className='account--follows-info' style={{ position: 'absolute', top: '10px', right: '10px', opacity: '0.7', display: 'inline-block', verticalAlign: 'top', background: 'rgba(0, 0, 0, 0.4)', textTransform: 'uppercase', fontSize: '11px', fontWeight: '500', padding: '4px', borderRadius: '4px' }}><FormattedMessage id='account.follows_you' defaultMessage='Follows you' /></span>
}
if (me !== account.get('id')) {

7
app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx
View File

@ -16,11 +16,8 @@ const outerStyle = {
};
const panelStyle = {
background: '#2f3441',
display: 'flex',
flexDirection: 'row',
borderTop: '1px solid #363c4b',
borderBottom: '1px solid #363c4b',
padding: '10px 0'
};
@ -40,10 +37,10 @@ const AccountAuthorize = ({ intl, account, onAuthorize, onReject }) => {
<DisplayName account={account} />
</Permalink>
<div style={{ color: '#616b86', fontSize: '14px' }} className='account__header__content' dangerouslySetInnerHTML={content} />
<div style={{ fontSize: '14px' }} className='account__header__content' dangerouslySetInnerHTML={content} />
</div>
<div style={panelStyle}>
<div className='account--panel' style={panelStyle}>
<div style={btnStyle}><IconButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} /></div>
<div style={btnStyle}><IconButton title={intl.formatMessage(messages.reject)} icon='times' onClick={onReject} /></div>
</div>

8
app/assets/javascripts/components/features/home_timeline/components/column_settings.jsx
View File

@ -10,7 +10,6 @@ const messages = defineMessages({
});
const outerStyle = {
background: '#373b4a',
padding: '15px'
};
@ -18,7 +17,6 @@ const sectionStyle = {
cursor: 'default',
display: 'block',
fontWeight: '500',
color: '#9baec8',
marginBottom: '10px'
};
@ -42,8 +40,8 @@ const ColumnSettings = React.createClass({
return (
<ColumnCollapsable icon='sliders' fullHeight={209} onCollapse={onSave}>
<div style={outerStyle}>
<span style={sectionStyle}><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span>
<div className='column-settings--outer' style={outerStyle}>
<span className='column-settings--section' style={sectionStyle}><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span>
<div style={rowStyle}>
<SettingToggle settings={settings} settingKey={['shows', 'reblog']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reblogs' />} />
@ -53,7 +51,7 @@ const ColumnSettings = React.createClass({
<SettingToggle settings={settings} settingKey={['shows', 'reply']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />} />
</div>
<span style={sectionStyle}><FormattedMessage id='home.column_settings.advanced' defaultMessage='Advanced' /></span>
<span className='column-settings--section' style={sectionStyle}><FormattedMessage id='home.column_settings.advanced' defaultMessage='Advanced' /></span>
<div style={rowStyle}>
<SettingText settings={settings} settingKey={['regex', 'body']} onChange={onChange} label={intl.formatMessage(messages.filter_regex)} />

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 }) => (

12
app/assets/javascripts/components/features/notifications/components/column_settings.jsx
View File

@ -5,7 +5,6 @@ import ColumnCollapsable from '../../../components/column_collapsable';
import SettingToggle from './setting_toggle';
const outerStyle = {
background: '#373b4a',
padding: '15px'
};
@ -13,7 +12,6 @@ const sectionStyle = {
cursor: 'default',
display: 'block',
fontWeight: '500',
color: '#9baec8',
marginBottom: '10px'
};
@ -40,8 +38,8 @@ const ColumnSettings = React.createClass({
return (
<ColumnCollapsable icon='sliders' fullHeight={616} onCollapse={onSave}>
<div style={outerStyle}>
<span style={sectionStyle}><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span>
<div className='column-settings--outer' style={outerStyle}>
<span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span>
<div style={rowStyle}>
<SettingToggle settings={settings} settingKey={['alerts', 'follow']} onChange={onChange} label={alertStr} />
@ -49,7 +47,7 @@ const ColumnSettings = React.createClass({
<SettingToggle settings={settings} settingKey={['sounds', 'follow']} onChange={onChange} label={soundStr} />
</div>
<span style={sectionStyle}><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span>
<span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span>
<div style={rowStyle}>
<SettingToggle settings={settings} settingKey={['alerts', 'favourite']} onChange={onChange} label={alertStr} />
@ -57,7 +55,7 @@ const ColumnSettings = React.createClass({
<SettingToggle settings={settings} settingKey={['sounds', 'favourite']} onChange={onChange} label={soundStr} />
</div>
<span style={sectionStyle}><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span>
<span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span>
<div style={rowStyle}>
<SettingToggle settings={settings} settingKey={['alerts', 'mention']} onChange={onChange} label={alertStr} />
@ -65,7 +63,7 @@ const ColumnSettings = React.createClass({
<SettingToggle settings={settings} settingKey={['sounds', 'mention']} onChange={onChange} label={soundStr} />
</div>
<span style={sectionStyle}><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span>
<span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span>
<div style={rowStyle}>
<SettingToggle settings={settings} settingKey={['alerts', 'reblog']} onChange={onChange} label={alertStr} />

5
app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx
View File

@ -11,14 +11,13 @@ const labelSpanStyle = {
display: 'inline-block',
verticalAlign: 'middle',
marginBottom: '14px',
marginLeft: '8px',
color: '#9baec8'
marginLeft: '8px'
};
const SettingToggle = ({ settings, settingKey, label, onChange }) => (
<label style={labelStyle}>
<Toggle checked={settings.getIn(settingKey)} onChange={(e) => onChange(settingKey, e.target.checked)} />
<span style={labelSpanStyle}>{label}</span>
<span className='setting-toggle' style={labelSpanStyle}>{label}</span>
</label>
);

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

@ -52,7 +52,7 @@ const DetailedStatus = React.createClass({
}
return (
<div style={{ background: '#2f3441', padding: '14px 10px' }} className='detailed-status'>
<div style={{ padding: '14px 10px' }} className='detailed-status'>
<a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name' style={{ display: 'block', overflow: 'hidden', marginBottom: '15px' }}>
<div style={{ float: 'left', marginRight: '10px' }}><Avatar src={status.getIn(['account', 'avatar'])} size={48} /></div>
<DisplayName account={status.get('account')} />

1
app/assets/javascripts/components/features/ui/components/column_link.jsx
View File

@ -4,7 +4,6 @@ const outerStyle = {
display: 'block',
padding: '15px',
fontSize: '16px',
color: '#fff',
textDecoration: 'none'
};

9
app/assets/javascripts/components/features/ui/containers/modal_container.jsx
View File

@ -41,13 +41,12 @@ const imageStyle = {
};
const loadingStyle = {
background: '#373b4a',
width: '400px',
paddingBottom: '120px'
};
const preloader = () => (
<div style={loadingStyle}>
<div className='modal-container--preloader' style={loadingStyle}>
<LoadingIndicator />
</div>
);
@ -57,7 +56,6 @@ const leftNavStyle = {
background: 'rgba(0, 0, 0, 0.5)',
padding: '30px 15px',
cursor: 'pointer',
color: '#fff',
fontSize: '24px',
top: '0',
left: '-61px',
@ -72,7 +70,6 @@ const rightNavStyle = {
background: 'rgba(0, 0, 0, 0.5)',
padding: '30px 15px',
cursor: 'pointer',
color: '#fff',
fontSize: '24px',
top: '0',
right: '-61px',
@ -143,11 +140,11 @@ const Modal = React.createClass({
leftNav = rightNav = '';
if (hasLeft) {
leftNav = <div style={leftNavStyle} onClick={this.handlePrevClick}><i className='fa fa-fw fa-chevron-left' /></div>;
leftNav = <div style={leftNavStyle} className='modal-container--nav' onClick={this.handlePrevClick}><i className='fa fa-fw fa-chevron-left' /></div>;
}
if (hasRight) {
rightNav = <div style={rightNavStyle} onClick={this.handleNextClick}><i className='fa fa-fw fa-chevron-right' /></div>;
rightNav = <div style={rightNavStyle} className='modal-container--nav' onClick={this.handleNextClick}><i className='fa fa-fw fa-chevron-right' /></div>;
}
return (

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

@ -34,6 +34,7 @@
.column-icon {
color: $color3;
background: lighten($color1, 4%);
&:hover {
color: lighten($color3, 7%);
@ -226,6 +227,8 @@ a.status__content__spoiler-link {
}
.detailed-status {
background: lighten($color1, 4%);
.status__content {
font-size: 19px;
line-height: 24px;
@ -298,6 +301,7 @@ a.status__content__spoiler-link {
word-wrap: break-word;
font-weight: 400;
overflow: hidden;
color: $color3;
p {
margin-bottom: 20px;
@ -851,6 +855,7 @@ a.status__content__spoiler-link {
.column-link {
background: lighten($color1, 6%);
color: $color5;
&:hover {
background: lighten($color1, 11%);
@ -883,6 +888,7 @@ a.status__content__spoiler-link {
.autosuggest-textarea__textarea {
height: 100px;
background: $color5;
}
.autosuggest-textarea__suggestions {
@ -1020,3 +1026,53 @@ button.active i.fa-retweet {
font-size: 14px;
margin: 0;
}
.loading-indicator {
color: $color2;
}
.collapsable-collapsed {
color: $color3;
background: lighten($color1, 4%);
}
.collapsable {
color: $color5;
background: lighten($color1, 6%);
}
.media-spoiler {
background: $color8;
color: $color5;
}
.modal-container--preloader {
background: lighten($color1, 6%);
}
.account--panel {
background: lighten($color1, 4%);
border-top: 1px solid lighten($color1, 6%);
border-bottom: 1px solid lighten($color1, 6%);
}
.column-settings--outer {
background: lighten($color1, 6%);
}
.column-settings--section {
color: $color3;
}
.modal-container--nav {
color: $color5;
}
.account--follows-info {
color: $color5;
}
.setting-toggle {
color: $color3;
}