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

Merge branch 'master' into patch-3

remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
Eugen 2017-02-10 19:15:13 +01:00 committed by GitHub
parent 2d6f603c2b 73e388e0d8
commit 874fffb7dc
15 changed files with 85 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/components/components/column_collapsable.jsx
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 }) =>

3
app/assets/javascripts/components/components/loading_indicator.jsx
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>
); );

6
app/assets/javascripts/components/components/media_gallery.jsx
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>

6
app/assets/javascripts/components/components/video_player.jsx
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>

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'])) { 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')) {

7
app/assets/javascripts/components/features/follow_requests/components/account_authorize.jsx
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>

8
app/assets/javascripts/components/features/home_timeline/components/column_settings.jsx
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)} />

3
app/assets/javascripts/components/features/notifications/components/clear_column_button.jsx
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 }) => (

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'; 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} />

5
app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx
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>
); );

2
app/assets/javascripts/components/features/status/components/detailed_status.jsx
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')} />

1
app/assets/javascripts/components/features/ui/components/column_link.jsx
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'
}; };

9
app/assets/javascripts/components/features/ui/containers/modal_container.jsx
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 (

62
app/assets/stylesheets/components.scss
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;
}

1
docs/Using-Mastodon/List-of-Mastodon-instances.md
View File

@ -1,7 +1,6 @@
List of Known Mastodon instances List of Known Mastodon instances
========================== ==========================
| Name | Theme/Notes, if applicable | Open Registrations | | Name | Theme/Notes, if applicable | Open Registrations |
| -------------|-------------|---| | -------------|-------------|---|
| [mastodon.social](https://mastodon.social) |Flagship, quick updates|Yes| | [mastodon.social](https://mastodon.social) |Flagship, quick updates|Yes|