WIP for new lightbox viewer

src/skins/vector/views/atoms/ImageView.js

@@ -19,6 +19,8 @@ limitations under the License.
 var React = require('react');
 
 var ImageViewController = require('../../../../controllers/atoms/ImageView')
+var DateUtils = require('../../../../DateUtils');
+var filesize = require('filesize');
 
 module.exports = React.createClass({
     displayName: 'ImageView',
@@ -43,8 +45,10 @@ module.exports = React.createClass({
 
     render: function() {
 
-        // XXX: can't we just do max-width: 80%, max-height: 80% on the CSS?
-        
+/*
+        // In theory max-width: 80%, max-height: 80% on the CSS should work
+        // but in practice, it doesn't, so do it manually:
+
         var width = this.props.width || 500;
         var height = this.props.height || 500;
 
@@ -68,9 +72,36 @@ module.exports = React.createClass({
             width: displayWidth,
             height: displayHeight
         };
+*/
+        var style;
 
         return (
-            <img className="mx_ImageView" src={this.props.src} style={style} />
+            <div className="mx_ImageView">
+                <div className="mx_ImageView_lhs">
+                </div>
+                <div className="mx_ImageView_content">
+                    <img src={this.props.src} style={style}/>
+                    <div className="mx_ImageView_label">
+                        <div className="mx_ImageView_name">
+                            { this.props.mxEvent.getContent().body }
+                        </div>
+                        <div className="mx_ImageView_metadata">
+                            Uploaded on { DateUtils.formatDate(new Date(this.props.mxEvent.getTs())) } by { this.props.mxEvent.getSender() }
+                        </div>
+                        <div className="mx_ImageView_download">
+                            Download this file ({ filesize(this.props.mxEvent.getContent().info.size) })
+                        </div>
+                        <div className="mx_ImageView_button">
+                            View full screen
+                        </div>
+                        <div className="mx_ImageView_button">
+                            Redact
+                        </div>
+                    </div>
+                </div>
+                <div className="mx_ImageView_rhs">
+                </div>
+            </div>
         );
     }
 });

src/skins/vector/views/atoms/MessageTimestamp.js

@@ -17,43 +17,19 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
+var DateUtils = require('../../../../DateUtils');
 
 var MessageTimestampController = require('matrix-react-sdk/lib/controllers/atoms/MessageTimestamp')
 
-var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-
 module.exports = React.createClass({
     displayName: 'MessageTimestamp',
     mixins: [MessageTimestampController],
 
-    formatDate: function(date) {
-        // date.toLocaleTimeString is completely system dependent.
-        // just go 24h for now
-        function pad(n) {
-            return (n < 10 ? '0' : '') + n;
-        }
-
-        var now = new Date();
-        if (date.toDateString() === now.toDateString()) {
-            return pad(date.getHours()) + ':' + pad(date.getMinutes());
-        }
-        else if (now.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
-            return days[date.getDay()] + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
-        }
-        else if (now.getFullYear() === date.getFullYear()) {
-            return days[date.getDay()] + ", " + months[date.getMonth()] + " " + (date.getDay()+1) + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
-        }
-        else {
-            return days[date.getDay()] + ", " + months[date.getMonth()] + " " + (date.getDay()+1) + " " + date.getFullYear() + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
-        }
-    },
-
     render: function() {
         var date = new Date(this.props.ts);
         return (
             <span className="mx_MessageTimestamp">
-                { this.formatDate(date) }
+                { DateUtils.formatDate(date) }
             </span>
         );
     },

src/skins/vector/views/molecules/MImageTile.js

@@ -60,7 +60,8 @@ module.exports = React.createClass({
             Modal.createDialog(ImageView, {
                 src: httpUrl,
                 width: content.info.w,
-                height: content.info.h
+                height: content.info.h,
+                mxEvent: this.props.mxEvent,
             }, "mx_Dialog_lightbox");
         }
     },