From baa52984e9efc6264470ca18ff33816a49d79527 Mon Sep 17 00:00:00 2001
From: Anthony Bellew <anthonyreflected@gmail.com>
Date: Wed, 25 Jan 2017 20:56:33 -0700
Subject: [PATCH 1/5] Add brackets to visually distinguish show more / show
less text
---
app/assets/javascripts/components/components/status_content.jsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx
index 521b557f..06c0e24e 100644
--- a/app/assets/javascripts/components/components/status_content.jsx
+++ b/app/assets/javascripts/components/components/status_content.jsx
@@ -88,7 +88,7 @@ const StatusContent = React.createClass({
const spoilerContent = { __html: emojify(status.get('spoiler_text', '')) };
if (status.get('spoiler_text').length > 0) {
- const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />;
+ const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='[Show more]' /> : <FormattedMessage id='status.show_less' defaultMessage='[Show less]' />;
return (
<div className='status__content' style={{ cursor: 'pointer' }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
From d944946c52db56db640cf14b630851092c7ef30c Mon Sep 17 00:00:00 2001
From: Anthony Bellew <anthonyreflected@gmail.com>
Date: Thu, 26 Jan 2017 00:24:52 -0700
Subject: [PATCH 2/5] Moved brackets outside of localized strings at Gargron's
suggestion
---
.../javascripts/components/components/status_content.jsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx
index 06c0e24e..476d4520 100644
--- a/app/assets/javascripts/components/components/status_content.jsx
+++ b/app/assets/javascripts/components/components/status_content.jsx
@@ -88,12 +88,12 @@ const StatusContent = React.createClass({
const spoilerContent = { __html: emojify(status.get('spoiler_text', '')) };
if (status.get('spoiler_text').length > 0) {
- const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='[Show more]' /> : <FormattedMessage id='status.show_less' defaultMessage='[Show less]' />;
+ const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />;
return (
<div className='status__content' style={{ cursor: 'pointer' }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
<p style={{ marginBottom: hidden ? '0px' : '' }} >
- <span dangerouslySetInnerHTML={spoilerContent} /> <a onClick={this.handleSpoilerClick}>{toggleText}</a>
+ <span dangerouslySetInnerHTML={spoilerContent} /> <a onClick={this.handleSpoilerClick}>[{toggleText}]</a>
</p>
<div style={{ display: hidden ? 'none' : 'block' }} dangerouslySetInnerHTML={content} />
From 8f18c8f9ad169edc24474a950e959f8d68973166 Mon Sep 17 00:00:00 2001
From: Anthony Bellew <anthonyreflected@gmail.com>
Date: Thu, 26 Jan 2017 03:02:42 -0700
Subject: [PATCH 3/5] Added inline spoiler button styles
---
.../components/components/status_content.jsx | 12 +++++++++++-
1 file changed, 11 insertions(+), 1 deletion(-)
diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx
index 476d4520..397374a7 100644
--- a/app/assets/javascripts/components/components/status_content.jsx
+++ b/app/assets/javascripts/components/components/status_content.jsx
@@ -86,6 +86,15 @@ const StatusContent = React.createClass({
const content = { __html: emojify(status.get('content')) };
const spoilerContent = { __html: emojify(status.get('spoiler_text', '')) };
+ const spoilerStyle = {
+ backgroundColor: '#fff',
+ borderRadius: '0 4px',
+ color: '#363c4b',
+ fontWeight: '500',
+ fontSize: '12px',
+ textTransform: 'uppercase'
+ };
+
if (status.get('spoiler_text').length > 0) {
const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />;
@@ -93,7 +102,8 @@ const StatusContent = React.createClass({
return (
<div className='status__content' style={{ cursor: 'pointer' }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
<p style={{ marginBottom: hidden ? '0px' : '' }} >
- <span dangerouslySetInnerHTML={spoilerContent} /> <a onClick={this.handleSpoilerClick}>[{toggleText}]</a>
+ <span dangerouslySetInnerHTML={spoilerContent} />
+ <a style={spoilerStyle} onClick={this.handleSpoilerClick}>[{toggleText}]</a>
</p>
<div style={{ display: hidden ? 'none' : 'block' }} dangerouslySetInnerHTML={content} />
From ebe5095665ec1c55e4888091223a974863198c37 Mon Sep 17 00:00:00 2001
From: Anthony Bellew <anthonyreflected@gmail.com>
Date: Thu, 26 Jan 2017 03:03:26 -0700
Subject: [PATCH 4/5] Add Padding to inline styles for spoiler
---
.../javascripts/components/components/status_content.jsx | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx
index 397374a7..619d8e2a 100644
--- a/app/assets/javascripts/components/components/status_content.jsx
+++ b/app/assets/javascripts/components/components/status_content.jsx
@@ -88,10 +88,11 @@ const StatusContent = React.createClass({
const spoilerContent = { __html: emojify(status.get('spoiler_text', '')) };
const spoilerStyle = {
backgroundColor: '#fff',
- borderRadius: '0 4px',
+ borderRadius: '4px',
color: '#363c4b',
fontWeight: '500',
fontSize: '12px',
+ padding: '0 4px',
textTransform: 'uppercase'
};
From 589837cfc71c8676d03f31358f31c41b9c59a95d Mon Sep 17 00:00:00 2001
From: Anthony Bellew <anthonyreflected@gmail.com>
Date: Thu, 26 Jan 2017 03:07:02 -0700
Subject: [PATCH 5/5] Removed line break before spoiler link, changed color of
bg for spoiler link
---
.../javascripts/components/components/status_content.jsx | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx
index 619d8e2a..ded98c1c 100644
--- a/app/assets/javascripts/components/components/status_content.jsx
+++ b/app/assets/javascripts/components/components/status_content.jsx
@@ -87,7 +87,7 @@ const StatusContent = React.createClass({
const content = { __html: emojify(status.get('content')) };
const spoilerContent = { __html: emojify(status.get('spoiler_text', '')) };
const spoilerStyle = {
- backgroundColor: '#fff',
+ backgroundColor: '#616b86',
borderRadius: '4px',
color: '#363c4b',
fontWeight: '500',
@@ -103,8 +103,7 @@ const StatusContent = React.createClass({
return (
<div className='status__content' style={{ cursor: 'pointer' }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
<p style={{ marginBottom: hidden ? '0px' : '' }} >
- <span dangerouslySetInnerHTML={spoilerContent} />
- <a style={spoilerStyle} onClick={this.handleSpoilerClick}>[{toggleText}]</a>
+ <span dangerouslySetInnerHTML={spoilerContent} /> <a style={spoilerStyle} onClick={this.handleSpoilerClick}>[{toggleText}]</a>
</p>
<div style={{ display: hidden ? 'none' : 'block' }} dangerouslySetInnerHTML={content} />