diff --git a/app/assets/javascripts/components/components/column_collapsable.jsx b/app/assets/javascripts/components/components/column_collapsable.jsx
index 676759055..729d00617 100644
--- a/app/assets/javascripts/components/components/column_collapsable.jsx
+++ b/app/assets/javascripts/components/components/column_collapsable.jsx
@@ -7,7 +7,8 @@ const iconStyle = {
position: 'absolute',
right: '0',
top: '-48px',
- cursor: 'pointer'
+ cursor: 'pointer',
+ zIndex: '3'
};
const ColumnCollapsable = React.createClass({
@@ -41,7 +42,7 @@ const ColumnCollapsable = React.createClass({
const { icon, fullHeight, children } = this.props;
const { collapsed } = this.state;
const collapsedClassName = collapsed ? 'collapsable-collapsed' : 'collapsable';
-
+
return (
diff --git a/app/assets/javascripts/components/features/community_timeline/index.jsx b/app/assets/javascripts/components/features/community_timeline/index.jsx
index 1b40da3d7..38b98f083 100644
--- a/app/assets/javascripts/components/features/community_timeline/index.jsx
+++ b/app/assets/javascripts/components/features/community_timeline/index.jsx
@@ -16,6 +16,7 @@ const messages = defineMessages({
});
const mapStateToProps = state => ({
+ hasUnread: state.getIn(['timelines', 'public', 'unread']) > 0,
accessToken: state.getIn(['meta', 'access_token'])
});
@@ -24,7 +25,8 @@ const CommunityTimeline = React.createClass({
propTypes: {
dispatch: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired,
- accessToken: React.PropTypes.string.isRequired
+ accessToken: React.PropTypes.string.isRequired,
+ hasUnread: React.PropTypes.bool
},
mixins: [PureRenderMixin],
@@ -58,10 +60,10 @@ const CommunityTimeline = React.createClass({
},
render () {
- const { intl } = this.props;
+ const { intl, hasUnread } = this.props;
return (
-
+
} />
diff --git a/app/assets/javascripts/components/features/hashtag_timeline/index.jsx b/app/assets/javascripts/components/features/hashtag_timeline/index.jsx
index 6cb9e5482..7fb413336 100644
--- a/app/assets/javascripts/components/features/hashtag_timeline/index.jsx
+++ b/app/assets/javascripts/components/features/hashtag_timeline/index.jsx
@@ -12,6 +12,7 @@ import { FormattedMessage } from 'react-intl';
import createStream from '../../stream';
const mapStateToProps = state => ({
+ hasUnread: state.getIn(['timelines', 'tag', 'unread']) > 0,
accessToken: state.getIn(['meta', 'access_token'])
});
@@ -20,7 +21,8 @@ const HashtagTimeline = React.createClass({
propTypes: {
params: React.PropTypes.object.isRequired,
dispatch: React.PropTypes.func.isRequired,
- accessToken: React.PropTypes.string.isRequired
+ accessToken: React.PropTypes.string.isRequired,
+ hasUnread: React.PropTypes.bool
},
mixins: [PureRenderMixin],
@@ -72,10 +74,10 @@ const HashtagTimeline = React.createClass({
},
render () {
- const { id } = this.props.params;
+ const { id, hasUnread } = this.props.params;
return (
-
+
} />
diff --git a/app/assets/javascripts/components/features/home_timeline/index.jsx b/app/assets/javascripts/components/features/home_timeline/index.jsx
index 1730b76ec..a2b775764 100644
--- a/app/assets/javascripts/components/features/home_timeline/index.jsx
+++ b/app/assets/javascripts/components/features/home_timeline/index.jsx
@@ -1,3 +1,4 @@
+import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import StatusListContainer from '../ui/containers/status_list_container';
import Column from '../ui/components/column';
@@ -9,19 +10,24 @@ const messages = defineMessages({
title: { id: 'column.home', defaultMessage: 'Home' }
});
+const mapStateToProps = state => ({
+ hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0
+});
+
const HomeTimeline = React.createClass({
propTypes: {
- intl: React.PropTypes.object.isRequired
+ intl: React.PropTypes.object.isRequired,
+ hasUnread: React.PropTypes.bool
},
mixins: [PureRenderMixin],
render () {
- const { intl } = this.props;
+ const { intl, hasUnread } = this.props;
return (
-
+
}} />} />
@@ -30,4 +36,4 @@ const HomeTimeline = React.createClass({
});
-export default injectIntl(HomeTimeline);
+export default connect(mapStateToProps)(injectIntl(HomeTimeline));
diff --git a/app/assets/javascripts/components/features/public_timeline/index.jsx b/app/assets/javascripts/components/features/public_timeline/index.jsx
index d85f49f2c..ce4eacc92 100644
--- a/app/assets/javascripts/components/features/public_timeline/index.jsx
+++ b/app/assets/javascripts/components/features/public_timeline/index.jsx
@@ -16,6 +16,7 @@ const messages = defineMessages({
});
const mapStateToProps = state => ({
+ hasUnread: state.getIn(['timelines', 'public', 'unread']) > 0,
accessToken: state.getIn(['meta', 'access_token'])
});
@@ -24,7 +25,8 @@ const PublicTimeline = React.createClass({
propTypes: {
dispatch: React.PropTypes.func.isRequired,
intl: React.PropTypes.object.isRequired,
- accessToken: React.PropTypes.string.isRequired
+ accessToken: React.PropTypes.string.isRequired,
+ hasUnread: React.PropTypes.bool
},
mixins: [PureRenderMixin],
@@ -58,10 +60,10 @@ const PublicTimeline = React.createClass({
},
render () {
- const { intl } = this.props;
+ const { intl, hasUnread } = this.props;
return (
-
+
} />
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 1d2b789bb..94c351520 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -786,6 +786,7 @@ a.status__content__spoiler-link {
flex: 0 0 auto;
cursor: pointer;
color: $color4;
+ z-index: 3;
&:hover {
text-decoration: underline;
@@ -1079,6 +1080,12 @@ button.active i.fa-retweet {
background: lighten($color1, 4%);
flex: 0 0 auto;
cursor: pointer;
+ position: relative;
+ z-index: 2;
+
+ &.active {
+ box-shadow: 0 1px 0 rgba($color4, 0.3);
+ }
&.active .fa {
color: $color4;
@@ -1209,11 +1216,13 @@ button.active i.fa-retweet {
.status-list__unread-indicator, .notifications__unread-indicator {
position: absolute;
- top: 48px;
+ top: 35px;
left: 0;
- width: 100%;
+ right: 0;
+ margin: 0 auto;
+ width: 60%;
pointer-events: none;
- height: 30px;
- z-index: 2;
- background: linear-gradient(to bottom, rgba($color4, 0.3) 0%, rgba($color4, 0) 60%);
+ height: 28px;
+ z-index: 1;
+ background: radial-gradient(ellipse, rgba($color4, 0.23) 0%, rgba($color4, 0) 60%);
}
diff --git a/app/lib/formatter.rb b/app/lib/formatter.rb
index 073ab0784..e353c3504 100644
--- a/app/lib/formatter.rb
+++ b/app/lib/formatter.rb
@@ -26,7 +26,7 @@ class Formatter
end
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
def simplified_format(account)
diff --git a/config/environments/production.rb b/config/environments/production.rb
index 62ea217ef..67ff63914 100644
--- a/config/environments/production.rb
+++ b/config/environments/production.rb
@@ -43,7 +43,7 @@ Rails.application.configure do
config.log_level = :debug
# Prepend all log lines with the following tags.
- config.log_tags = [ :request_id ]
+ config.log_tags = [:request_id]
# Use a different logger for distributed setups.
# config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new)