PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #2235 from MaxwellKepler/develop

Browse source 
Added badge to non-autoplay GIFs
This commit is contained in:
Travis Ralston 2018-11-16 13:25:40 -07:00 committed by GitHub
commit 7dd610b41e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
res/css/views/messages/_MImageBody.scss
View file

@ -46,3 +46,14 @@ limitations under the License.
.mx_MImageBody_thumbnail_spinner > * { .mx_MImageBody_thumbnail_spinner > * {
transform: translate(-50%, -50%); 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;
}

3
res/themes/dark/css/_dark.scss
View file

@ -144,6 +144,9 @@ $lightbox-bg-color: #454545;
$lightbox-fg-color: #ffffff; $lightbox-fg-color: #ffffff;
$lightbox-border-color: #ffffff; $lightbox-border-color: #ffffff;
$imagebody-giflabel: rgba(1, 1, 1, 0.7);
$imagebody-giflabel-border: rgba(1, 1, 1, 0.2);
// unused? // unused?
$progressbar-color: #000; $progressbar-color: #000;

3
res/themes/light/css/_base.scss
View file

@ -149,6 +149,9 @@ $lightbox-bg-color: #454545;
$lightbox-fg-color: #ffffff; $lightbox-fg-color: #ffffff;
$lightbox-border-color: #ffffff; $lightbox-border-color: #ffffff;
$imagebody-giflabel: rgba(0, 0, 0, 0.7);
$imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
// unused? // unused?
$progressbar-color: #000; $progressbar-color: #000;

7
src/components/views/messages/MImageBody.js
View file

@ -278,6 +278,7 @@ export default class MImageBody extends React.Component {
let img = null; let img = null;
let placeholder = null; let placeholder = null;
let gifLabel = null;
// e2e image hasn't been decrypted yet // e2e image hasn't been decrypted yet
if (content.file !== undefined && this.state.decryptedUrl === null) { if (content.file !== undefined && this.state.decryptedUrl === null) {
@ -302,11 +303,14 @@ export default class MImageBody extends React.Component {
onMouseLeave={this.onImageLeave} />; onMouseLeave={this.onImageLeave} />;
} }
if (this._isGif() && !SettingsStore.getValue("autoplayGifsAndVideos") && !this.state.hover) {
gifLabel = <p className="mx_MImageBody_gifLabel">GIF</p>;
}
const thumbnail = ( const thumbnail = (
<div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px" }} > <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px" }} >
{ /* Calculate aspect ratio, using %padding will size _container correctly */ } { /* Calculate aspect ratio, using %padding will size _container correctly */ }
<div style={{ paddingBottom: (100 * infoHeight / infoWidth) + '%' }} /> <div style={{ paddingBottom: (100 * infoHeight / infoWidth) + '%' }} />
{ showPlaceholder && { showPlaceholder &&
<div className="mx_MImageBody_thumbnail" style={{ <div className="mx_MImageBody_thumbnail" style={{
// Constrain width here so that spinner appears central to the loaded thumbnail // Constrain width here so that spinner appears central to the loaded thumbnail
@ -320,6 +324,7 @@ export default class MImageBody extends React.Component {
<div style={{display: !showPlaceholder ? undefined : 'none'}}> <div style={{display: !showPlaceholder ? undefined : 'none'}}>
{ img } { img }
{ gifLabel }
</div> </div>
{ this.state.hover && this.getTooltip() } { this.state.hover && this.getTooltip() }