Merge pull request #617 from halcy/style-changes

Style changes
This commit is contained in:
Eugen 2017-02-10 19:10:15 +01:00 committed by GitHub
commit 73e388e0d8
14 changed files with 85 additions and 46 deletions

View File

@ -40,10 +40,11 @@ const ColumnCollapsable = React.createClass({
render () { render () {
const { icon, fullHeight, children } = this.props; const { icon, fullHeight, children } = this.props;
const { collapsed } = this.state; const { collapsed } = this.state;
const collapsedClassName = collapsed ? 'collapsable-collapsed' : 'collapsable';
return ( return (
<div style={{ position: 'relative' }}> <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 }) }}> <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 }) => {({ opacity, height }) =>

View File

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

View File

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

View File

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

View File

@ -35,7 +35,7 @@ const Header = React.createClass({
} }
if (me !== account.get('id') && account.getIn(['relationship', 'followed_by'])) { 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')) { if (me !== account.get('id')) {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -52,7 +52,7 @@ const DetailedStatus = React.createClass({
} }
return ( 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' }}> <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> <div style={{ float: 'left', marginRight: '10px' }}><Avatar src={status.getIn(['account', 'avatar'])} size={48} /></div>
<DisplayName account={status.get('account')} /> <DisplayName account={status.get('account')} />

View File

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

View File

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

View File

@ -34,7 +34,8 @@
.column-icon { .column-icon {
color: $color3; color: $color3;
background: lighten($color1, 4%);
&:hover { &:hover {
color: lighten($color3, 7%); color: lighten($color3, 7%);
} }
@ -226,6 +227,8 @@ a.status__content__spoiler-link {
} }
.detailed-status { .detailed-status {
background: lighten($color1, 4%);
.status__content { .status__content {
font-size: 19px; font-size: 19px;
line-height: 24px; line-height: 24px;
@ -298,7 +301,8 @@ a.status__content__spoiler-link {
word-wrap: break-word; word-wrap: break-word;
font-weight: 400; font-weight: 400;
overflow: hidden; overflow: hidden;
color: $color3;
p { p {
margin-bottom: 20px; margin-bottom: 20px;
@ -851,7 +855,8 @@ a.status__content__spoiler-link {
.column-link { .column-link {
background: lighten($color1, 6%); background: lighten($color1, 6%);
color: $color5;
&:hover { &:hover {
background: lighten($color1, 11%); background: lighten($color1, 11%);
} }
@ -883,6 +888,7 @@ a.status__content__spoiler-link {
.autosuggest-textarea__textarea { .autosuggest-textarea__textarea {
height: 100px; height: 100px;
background: $color5;
} }
.autosuggest-textarea__suggestions { .autosuggest-textarea__suggestions {
@ -1020,3 +1026,53 @@ button.active i.fa-retweet {
font-size: 14px; font-size: 14px;
margin: 0; 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;
}