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

Improve glow

Browse source
This commit is contained in:
Eugen Rochko 2017-02-23 02:14:35 +01:00
parent 53ae431867
commit 9d4cad6307
8 changed files with 44 additions and 22 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

@ -7,7 +7,8 @@ const iconStyle = {
position: 'absolute', position: 'absolute',
right: '0', right: '0',
top: '-48px', top: '-48px',
cursor: 'pointer' cursor: 'pointer',
zIndex: '3'
}; };
const ColumnCollapsable = React.createClass({ const ColumnCollapsable = React.createClass({

8
app/assets/javascripts/components/features/community_timeline/index.jsx
View file

@ -16,6 +16,7 @@ const messages = defineMessages({
}); });
const mapStateToProps = state => ({ const mapStateToProps = state => ({
hasUnread: state.getIn(['timelines', 'public', 'unread']) > 0,
accessToken: state.getIn(['meta', 'access_token']) accessToken: state.getIn(['meta', 'access_token'])
}); });
@ -24,7 +25,8 @@ const CommunityTimeline = React.createClass({
propTypes: { propTypes: {
dispatch: React.PropTypes.func.isRequired, dispatch: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired, intl: React.PropTypes.object.isRequired,
accessToken: React.PropTypes.string.isRequired accessToken: React.PropTypes.string.isRequired,
hasUnread: React.PropTypes.bool
}, },
mixins: [PureRenderMixin], mixins: [PureRenderMixin],
@ -58,10 +60,10 @@ const CommunityTimeline = React.createClass({
}, },
render () { render () {
const { intl } = this.props; const { intl, hasUnread } = this.props;
return ( return (
<Column icon='users' heading={intl.formatMessage(messages.title)}> <Column icon='users' active={hasUnread} heading={intl.formatMessage(messages.title)}>
<ColumnBackButtonSlim /> <ColumnBackButtonSlim />
<StatusListContainer type='community' emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />} /> <StatusListContainer type='community' emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />} />
</Column> </Column>

8
app/assets/javascripts/components/features/hashtag_timeline/index.jsx
View file

@ -12,6 +12,7 @@ import { FormattedMessage } from 'react-intl';
import createStream from '../../stream'; import createStream from '../../stream';
const mapStateToProps = state => ({ const mapStateToProps = state => ({
hasUnread: state.getIn(['timelines', 'tag', 'unread']) > 0,
accessToken: state.getIn(['meta', 'access_token']) accessToken: state.getIn(['meta', 'access_token'])
}); });
@ -20,7 +21,8 @@ const HashtagTimeline = React.createClass({
propTypes: { propTypes: {
params: React.PropTypes.object.isRequired, params: React.PropTypes.object.isRequired,
dispatch: React.PropTypes.func.isRequired, dispatch: React.PropTypes.func.isRequired,
accessToken: React.PropTypes.string.isRequired accessToken: React.PropTypes.string.isRequired,
hasUnread: React.PropTypes.bool
}, },
mixins: [PureRenderMixin], mixins: [PureRenderMixin],
@ -72,10 +74,10 @@ const HashtagTimeline = React.createClass({
}, },
render () { render () {
const { id } = this.props.params; const { id, hasUnread } = this.props.params;
return ( return (
<Column icon='hashtag' heading={id}> <Column icon='hashtag' active={hasUnread} heading={id}>
<ColumnBackButtonSlim /> <ColumnBackButtonSlim />
<StatusListContainer type='tag' id={id} emptyMessage={<FormattedMessage id='empty_column.hashtag' defaultMessage='There is nothing in this hashtag yet.' />} /> <StatusListContainer type='tag' id={id} emptyMessage={<FormattedMessage id='empty_column.hashtag' defaultMessage='There is nothing in this hashtag yet.' />} />
</Column> </Column>

14
app/assets/javascripts/components/features/home_timeline/index.jsx
View file

@ -1,3 +1,4 @@
import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PureRenderMixin from 'react-addons-pure-render-mixin';
import StatusListContainer from '../ui/containers/status_list_container'; import StatusListContainer from '../ui/containers/status_list_container';
import Column from '../ui/components/column'; import Column from '../ui/components/column';
@ -9,19 +10,24 @@ const messages = defineMessages({
title: { id: 'column.home', defaultMessage: 'Home' } title: { id: 'column.home', defaultMessage: 'Home' }
}); });
const mapStateToProps = state => ({
hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0
});
const HomeTimeline = React.createClass({ const HomeTimeline = React.createClass({
propTypes: { propTypes: {
intl: React.PropTypes.object.isRequired intl: React.PropTypes.object.isRequired,
hasUnread: React.PropTypes.bool
}, },
mixins: [PureRenderMixin], mixins: [PureRenderMixin],
render () { render () {
const { intl } = this.props; const { intl, hasUnread } = this.props;
return ( return (
<Column icon='home' heading={intl.formatMessage(messages.title)}> <Column icon='home' active={hasUnread} heading={intl.formatMessage(messages.title)}>
<ColumnSettingsContainer /> <ColumnSettingsContainer />
<StatusListContainer {...this.props} type='home' emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage="You aren't following anyone yet. Visit {public} or use search to get started and meet other users." values={{ public: <Link to='/timelines/public'><FormattedMessage id='empty_column.home.public_timeline' defaultMessage='the public timeline' /></Link> }} />} /> <StatusListContainer {...this.props} type='home' emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage="You aren't following anyone yet. Visit {public} or use search to get started and meet other users." values={{ public: <Link to='/timelines/public'><FormattedMessage id='empty_column.home.public_timeline' defaultMessage='the public timeline' /></Link> }} />} />
</Column> </Column>
@ -30,4 +36,4 @@ const HomeTimeline = React.createClass({
}); });
export default injectIntl(HomeTimeline); export default connect(mapStateToProps)(injectIntl(HomeTimeline));

8
app/assets/javascripts/components/features/public_timeline/index.jsx
View file

@ -16,6 +16,7 @@ const messages = defineMessages({
}); });
const mapStateToProps = state => ({ const mapStateToProps = state => ({
hasUnread: state.getIn(['timelines', 'public', 'unread']) > 0,
accessToken: state.getIn(['meta', 'access_token']) accessToken: state.getIn(['meta', 'access_token'])
}); });
@ -24,7 +25,8 @@ const PublicTimeline = React.createClass({
propTypes: { propTypes: {
dispatch: React.PropTypes.func.isRequired, dispatch: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired, intl: React.PropTypes.object.isRequired,
accessToken: React.PropTypes.string.isRequired accessToken: React.PropTypes.string.isRequired,
hasUnread: React.PropTypes.bool
}, },
mixins: [PureRenderMixin], mixins: [PureRenderMixin],
@ -58,10 +60,10 @@ const PublicTimeline = React.createClass({
}, },
render () { render () {
const { intl } = this.props; const { intl, hasUnread } = this.props;
return ( return (
<Column icon='globe' heading={intl.formatMessage(messages.title)}> <Column icon='globe' active={hasUnread} heading={intl.formatMessage(messages.title)}>
<ColumnBackButtonSlim /> <ColumnBackButtonSlim />
<StatusListContainer type='public' emptyMessage={<FormattedMessage id='empty_column.public' defaultMessage='There is nothing here! Write something publicly, or manually follow users from other instances to fill it up' />} /> <StatusListContainer type='public' emptyMessage={<FormattedMessage id='empty_column.public' defaultMessage='There is nothing here! Write something publicly, or manually follow users from other instances to fill it up' />} />
</Column> </Column>

19
app/assets/stylesheets/components.scss
View file

@ -786,6 +786,7 @@ a.status__content__spoiler-link {
flex: 0 0 auto; flex: 0 0 auto;
cursor: pointer; cursor: pointer;
color: $color4; color: $color4;
z-index: 3;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@ -1079,6 +1080,12 @@ button.active i.fa-retweet {
background: lighten($color1, 4%); background: lighten($color1, 4%);
flex: 0 0 auto; flex: 0 0 auto;
cursor: pointer; cursor: pointer;
position: relative;
z-index: 2;
&.active {
box-shadow: 0 1px 0 rgba($color4, 0.3);
}
&.active .fa { &.active .fa {
color: $color4; color: $color4;
@ -1209,11 +1216,13 @@ button.active i.fa-retweet {
.status-list__unread-indicator, .notifications__unread-indicator { .status-list__unread-indicator, .notifications__unread-indicator {
position: absolute; position: absolute;
top: 48px; top: 35px;
left: 0; left: 0;
width: 100%; right: 0;
margin: 0 auto;
width: 60%;
pointer-events: none; pointer-events: none;
height: 30px; height: 28px;
z-index: 2; z-index: 1;
background: linear-gradient(to bottom, rgba($color4, 0.3) 0%, rgba($color4, 0) 60%); background: radial-gradient(ellipse, rgba($color4, 0.23) 0%, rgba($color4, 0) 60%);
} }

2
app/lib/formatter.rb
View file

@ -26,7 +26,7 @@ class Formatter
end end
def reformat(html) def reformat(html)
sanitize(html, tags: %w(a br p), attributes: %w(href rel)) sanitize(html, tags: %w(a br p span), attributes: %w(href rel class))
end end
def simplified_format(account) def simplified_format(account)