summaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/react/components/post_body_additional_content.jsx40
-rw-r--r--web/react/utils/constants.jsx4
-rw-r--r--web/sass-files/sass/partials/_post.scss43
-rw-r--r--web/static/i18n/en.json1
4 files changed, 81 insertions, 7 deletions
diff --git a/web/react/components/post_body_additional_content.jsx b/web/react/components/post_body_additional_content.jsx
index a76c59fb3..c2a928f3b 100644
--- a/web/react/components/post_body_additional_content.jsx
+++ b/web/react/components/post_body_additional_content.jsx
@@ -16,16 +16,28 @@ export default class PostBodyAdditionalContent extends React.Component {
this.getSlackAttachment = this.getSlackAttachment.bind(this);
this.getOEmbedProvider = this.getOEmbedProvider.bind(this);
+ this.generateEmbed = this.generateEmbed.bind(this);
+ this.toggleEmbedVisibility = this.toggleEmbedVisibility.bind(this);
+
+ this.state = {
+ embedVisible: true
+ };
}
- shouldComponentUpdate(nextProps) {
+ shouldComponentUpdate(nextProps, nextState) {
if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
return true;
}
-
+ if (nextState.embedVisible !== this.state.embedVisible) {
+ return true;
+ }
return false;
}
+ toggleEmbedVisibility() {
+ this.setState({embedVisible: !this.state.embedVisible});
+ }
+
getSlackAttachment() {
let attachments = [];
if (this.props.post.props && this.props.post.props.attachments) {
@@ -51,7 +63,7 @@ export default class PostBodyAdditionalContent extends React.Component {
return null;
}
- render() {
+ generateEmbed() {
if (this.props.post.type === 'slack_attachment') {
return this.getSlackAttachment();
}
@@ -98,6 +110,28 @@ export default class PostBodyAdditionalContent extends React.Component {
return null;
}
+
+ render() {
+ var generateEmbed = this.generateEmbed();
+ if (generateEmbed) {
+ return (
+ <div>
+ <a className='post__embed-visibility'
+ data-expanded={this.state.embedVisible}
+ aria-label='Toggle Embed Visibility'
+ onClick={this.toggleEmbedVisibility}
+ >
+ </a>
+ <div className='post__embed-container'
+ hidden={!this.state.embedVisible}
+ >
+ {generateEmbed}
+ </div>
+ </div>
+ );
+ }
+ return null;
+ }
}
PostBodyAdditionalContent.propTypes = {
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 766a86686..0a4944708 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -479,6 +479,10 @@ export default {
EMBED_PREVIEW: {
label: 'embed_preview',
description: 'Show preview snippet of links below message'
+ },
+ EMBED_TOGGLE: {
+ label: 'embed_toggle',
+ description: 'Show toggle for all embed previews'
}
},
OVERLAY_TIME_DELAY: 400,
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 0847318c1..4478b3f15 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -408,7 +408,7 @@ body.ios {
.post {
word-wrap: break-word;
- padding: 8px 1em 0;
+ padding: 8px .5em 0 1em;
position: relative;
max-width: 100%;
@include legacy-pie-clearfix;
@@ -457,7 +457,7 @@ body.ios {
&.same--root {
&.same--user {
- padding: 0 1em;
+ padding: 0 .5em 0 1em;
&:hover {
@@ -629,6 +629,16 @@ body.ios {
}
}
+ .post__embed-container{
+ display: block;
+ max-height: 1000px;
+ transition: max-height .5s ease;
+ overflow: hidden;
+ &[hidden]{
+ max-height: 0;
+ }
+ }
+
.dropdown {
display: inline-block;
visibility: hidden;
@@ -687,7 +697,7 @@ body.ios {
.post__body {
word-wrap: break-word;
- padding: 0.2em 0.5em 0em;
+ padding: 0.2em 0.5em;
@include legacy-pie-clearfix;
width: calc(100% - 75px);
@@ -753,7 +763,32 @@ body.ios {
white-space: nowrap;
}
- .post__time {
+ .post__embed-visibility {
+ cursor: pointer;
+ display: block;
+ font: normal normal normal 14px/1 FontAwesome;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-size: 0;
+ width: 30px;
+ margin-top: -5px;
+
+ &:hover{
+ text-decoration: none;
+ }
+
+ &:before {
+ content: "\f065";
+ font-size: 14px;
+ }
+
+ &[data-expanded="true"]:before{
+ content: "\f066";
+ }
+ }
+
+ .post__time{
font-size: 0.9em;
}
diff --git a/web/static/i18n/en.json b/web/static/i18n/en.json
index 1e68ac1f6..c3ce23280 100644
--- a/web/static/i18n/en.json
+++ b/web/static/i18n/en.json
@@ -1058,6 +1058,7 @@
"tutorial_tip.out": "Opt out of these tips.",
"tutorial_tip.seen": "Seen this before? ",
"upload_overlay.info": "Drop a file to upload it.",
+ "user.settings.advance.embed_toggle": "Show toggle for all embed previews",
"user.settings.advance.embed_preview": "Show preview snippet of links below message",
"user.settings.advance.enabled": "enabled",
"user.settings.advance.feature": " Feature ",