Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

lightbox image viewing (that needs CSS)

Browse Source
This commit is contained in:
David Baker 2015-07-22 16:04:00 -07:00
parent 7ffd684a9e
commit 772053713a
2 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
skins/base/views/molecules/MImageTile.js
View File

@ -21,6 +21,10 @@ var React = require('react');
var MImageTileController = require("../../../../src/controllers/molecules/MImageTile"); var MImageTileController = require("../../../../src/controllers/molecules/MImageTile");
var MatrixClientPeg = require('../../../../src/MatrixClientPeg'); var MatrixClientPeg = require('../../../../src/MatrixClientPeg');
var Modal = require('../../../../src/Modal');
var ComponentBroker = require('../../../../src/ComponentBroker');
var ImageView = ComponentBroker.get("atoms/ImageView");
module.exports = React.createClass({ module.exports = React.createClass({
displayName: 'MImageTile', displayName: 'MImageTile',
@ -48,6 +52,17 @@ module.exports = React.createClass({
} }
}, },
onClick: function(ev) {
ev.preventDefault();
var content = this.props.mxEvent.getContent();
var httpUrl = MatrixClientPeg.get().mxcUrlToHttp(content.url);
Modal.createDialog(ImageView, {
src: httpUrl,
width: content.info.w,
height: content.info.h
});
},
render: function() { render: function() {
var content = this.props.mxEvent.getContent(); var content = this.props.mxEvent.getContent();
var cli = MatrixClientPeg.get(); var cli = MatrixClientPeg.get();
@ -60,7 +75,7 @@ module.exports = React.createClass({
return ( return (
<span className="mx_MImageTile"> <span className="mx_MImageTile">
<a href={cli.mxcUrlToHttp(content.url)} target="_blank"> <a href="#" onClick={this.onClick}>
<img src={cli.mxcUrlToHttp(content.url, 320, 240)} alt={content.body} style={imgStyle} /> <img src={cli.mxcUrlToHttp(content.url, 320, 240)} alt={content.body} style={imgStyle} />
</a> </a>
</span> </span>

1
src/ComponentBroker.js
View File

@ -103,6 +103,7 @@ require('../skins/base/views/molecules/RoomDropTarget');
require('../skins/base/views/molecules/BottomLeftMenu'); require('../skins/base/views/molecules/BottomLeftMenu');
require('../skins/base/views/molecules/DateSeparator'); require('../skins/base/views/molecules/DateSeparator');
require('../skins/base/views/atoms/voip/VideoFeed'); require('../skins/base/views/atoms/voip/VideoFeed');
require('../skins/base/views/atoms/ImageView');
require('../skins/base/views/molecules/voip/VideoView'); require('../skins/base/views/molecules/voip/VideoView');
require('../skins/base/views/molecules/voip/CallView'); require('../skins/base/views/molecules/voip/CallView');
require('../skins/base/views/molecules/voip/IncomingCallBox'); require('../skins/base/views/molecules/voip/IncomingCallBox');