WIP for new lightbox viewer

src/DateUtils.js

@@ -0,0 +1,45 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+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 = {
+    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());
+        }
+    }
+}
+

src/skins/vector/css/atoms/ImageView.css

@@ -0,0 +1,109 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/* This has got to be the most fragile piece of CSS ever written.
+   But empirically it works on Chrome/FF/Safari
+ */
+
+.mx_ImageView {
+    display: -webkit-flex;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+.mx_ImageView_lhs {
+    -webkit-box-ordinal-group: 1;
+    order: 1;
+    -webkit-flex: 1;
+    flex: 1 1 0;
+    min-width: 60px;
+}
+
+.mx_ImageView_content {
+    -webkit-box-ordinal-group: 2;
+    order: 2;
+    /* min-width hack needed for FF */
+    min-width: 0px;
+    height: 90%;
+    -webkit-flex: 5;
+    flex: 5 5 0;
+
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    -webkit-justify-content: center;
+    align-items: center;
+    justify-content: center;
+}
+
+.mx_ImageView_content img {
+    max-width: 100%;
+    /* can't use max-height as it interacts badly with flex on Chrome and doesn't relayout properly until you refresh */
+    height: 100%;
+    /* object-fit hack needed for Chrome */
+    object-fit: contain;
+}
+
+.mx_ImageView_label {
+    text-align: left;
+    display: inline-block;
+    width: 300px;
+    height: 300px;
+    top: 50%;
+    margin-top: -150px;
+    position: absolute;
+    color: #fff;
+    padding: 60px;
+}
+
+.mx_ImageView_name {
+    font-size: 20px;
+    margin-bottom: 6px;
+}
+
+.mx_ImageView_metadata {
+    font-size: 16px;
+    opacity: 0.5;
+}
+
+.mx_ImageView_download {
+    display: inline-block;
+    margin-top: 28px;
+    border-radius: 5px;
+    background-color: #454545;
+    font-size: 16px;
+    padding: 9px;
+    border: 1px solid #fff;
+    cursor: pointer;
+}
+
+.mx_ImageView_button {
+    font-size: 16px;
+    opacity: 0.5;
+    margin-top: 24px;
+    cursor: pointer;
+}
+
+.mx_ImageView_rhs {
+    -webkit-box-ordinal-group: 3;
+    order: 3;
+    -webkit-flex: 1;
+    flex: 1 1 0;
+    min-width: 300px;
+}

src/skins/vector/css/common.css

@@ -125,7 +125,7 @@ a:visited {
     font-size: 16px;
     position: relative;
     border-radius: 8px;
-    max-width: 75%;
+    max-width: 80%;
 }
 
 .mx_Dialog_lightbox .mx_Dialog_background {
@@ -134,7 +134,11 @@ a:visited {
 
 .mx_Dialog_lightbox .mx_Dialog {
     border-radius: 0px;
-    background-color: #000;
+    background-color: transparent;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
 }
 
 .mx_Dialog_content {

src/skins/vector/css/molecules/EventAsTextTile.css

@@ -0,0 +1,19 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_EventAsTextTile {
+    opacity: 0.5;
+}

src/skins/vector/css/molecules/EventTile.css

@@ -66,6 +66,11 @@ limitations under the License.
     opacity: 0.5;
 }
 
+.mx_MessageTile_content {
+    display: block;
+    margin-right: 100px;
+}
+
 .mx_EventTile_sending {
     color: #ddd;
 }

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,7 +45,9 @@ 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");
         }
     },