From 54f9231582bd4581fd739ef8afd19dd169eb9ab5 Mon Sep 17 00:00:00 2001 From: Maxwell Kepler Date: Mon, 22 Oct 2018 20:57:58 +0100 Subject: [PATCH 1/3] Added badge to GIFs (https://github.com/vector-im/riot-web/issues/7344) --- res/css/views/messages/_MImageBody.scss | 11 +++++++++++ res/themes/dark/css/_dark.scss | 3 +++ res/themes/light/css/_base.scss | 3 +++ src/components/views/messages/MImageBody.js | 9 +++++++-- 4 files changed, 24 insertions(+), 2 deletions(-) diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index 4c763c5991..8752da117d 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -46,3 +46,14 @@ limitations under the License. .mx_MImageBody_thumbnail_spinner > * { transform: translate(-50%, -50%); } + +.mx_MImageBody_GIFlabel { + position: absolute; + display: block; + top: 0px; + left: 14px; + padding: 5px; + border-radius: 5px; + background: $imagebody-giflabel; + border: 2px solid $imagebody-giflabel-border; +} diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 8ab338790e..ce334e3710 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -143,6 +143,9 @@ $lightbox-bg-color: #454545; $lightbox-fg-color: #ffffff; $lightbox-border-color: #ffffff; +$imagebody-giflabel: rgba(1, 1, 1, 0.7); +$imagebody-giflabel-border: rgba(1, 1, 1, 0.2); + // unused? $progressbar-color: #000; diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss index c7fd38259c..65cdcce209 100644 --- a/res/themes/light/css/_base.scss +++ b/res/themes/light/css/_base.scss @@ -148,6 +148,9 @@ $lightbox-bg-color: #454545; $lightbox-fg-color: #ffffff; $lightbox-border-color: #ffffff; +$imagebody-giflabel: rgba(0, 0, 0, 0.7); +$imagebody-giflabel-border: rgba(0, 0, 0, 0.2); + // unused? $progressbar-color: #000; diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js index 787285d932..69cff6691c 100644 --- a/src/components/views/messages/MImageBody.js +++ b/src/components/views/messages/MImageBody.js @@ -278,6 +278,7 @@ export default class MImageBody extends React.Component { let img = null; let placeholder = null; + let giflabel = null; // e2e image hasn't been decrypted yet if (content.file !== undefined && this.state.decryptedUrl === null) { @@ -292,7 +293,7 @@ export default class MImageBody extends React.Component { if (thumbUrl && !this.state.imgError) { // Restrict the width of the thumbnail here, otherwise it will fill the container // which has the same width as the timeline - // mx_MImageBody_thumbnail resizes img to exactly container size + // mx_MImageBody_ resizes img to exactly container size img = {content.body}; } + if (this._isGif() && !SettingsStore.getValue("autoplayGifsAndVideos") && !this.state.hover) { + giflabel =

GIF

; + } + const thumbnail = (
{ /* Calculate aspect ratio, using %padding will size _container correctly */ }
- { showPlaceholder &&
{ img } + { giflabel }
{ this.state.hover && this.getTooltip() } From 5e9db3647ab25c1a31274c950b5e73648966660a Mon Sep 17 00:00:00 2001 From: Maxwell Kepler Date: Mon, 22 Oct 2018 21:03:39 +0100 Subject: [PATCH 2/3] Fixed minor typo in comment --- src/components/views/messages/MImageBody.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js index 69cff6691c..6cabd9bc76 100644 --- a/src/components/views/messages/MImageBody.js +++ b/src/components/views/messages/MImageBody.js @@ -293,7 +293,7 @@ export default class MImageBody extends React.Component { if (thumbUrl && !this.state.imgError) { // Restrict the width of the thumbnail here, otherwise it will fill the container // which has the same width as the timeline - // mx_MImageBody_ resizes img to exactly container size + // mx_MImageBody_thumbnail resizes img to exactly container size img = {content.body} Date: Wed, 24 Oct 2018 19:06:48 +0100 Subject: [PATCH 3/3] Changed letter case. --- res/css/views/messages/_MImageBody.scss | 2 +- src/components/views/messages/MImageBody.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index 8752da117d..a5a1e66a3b 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -47,7 +47,7 @@ limitations under the License. transform: translate(-50%, -50%); } -.mx_MImageBody_GIFlabel { +.mx_MImageBody_gifLabel { position: absolute; display: block; top: 0px; diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js index 6cabd9bc76..dc891b86ff 100644 --- a/src/components/views/messages/MImageBody.js +++ b/src/components/views/messages/MImageBody.js @@ -278,7 +278,7 @@ export default class MImageBody extends React.Component { let img = null; let placeholder = null; - let giflabel = null; + let gifLabel = null; // e2e image hasn't been decrypted yet if (content.file !== undefined && this.state.decryptedUrl === null) { @@ -304,7 +304,7 @@ export default class MImageBody extends React.Component { } if (this._isGif() && !SettingsStore.getValue("autoplayGifsAndVideos") && !this.state.hover) { - giflabel =

GIF

; + gifLabel =

GIF

; } const thumbnail = ( @@ -324,7 +324,7 @@ export default class MImageBody extends React.Component {
{ img } - { giflabel } + { gifLabel }
{ this.state.hover && this.getTooltip() }