From e4f0e1af1aa075e6d86921d46e824d85855c1def Mon Sep 17 00:00:00 2001
From: Emmanuel ROHEE <erohee@amdocs.com>
Date: Thu, 21 Aug 2014 14:58:26 +0200
Subject: If there are available, show image thumbnails in the messages list

---
 webclient/room/room.html | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

(limited to 'webclient/room/room.html')

diff --git a/webclient/room/room.html b/webclient/room/room.html
index db6add4ee7..5dcc8caa1e 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -41,9 +41,13 @@
                     <div class="bubble">
                         <span ng-hide='msg.content.msgtype !== "m.emote"' ng-bind-html="'* ' + (members[msg.user_id].displayname || msg.user_id) + ' ' + msg.content.body | linky:'_blank'"/>
                         <span ng-hide='msg.content.msgtype !== "m.text"' ng-bind-html="((msg.content.msgtype === 'm.text') ? msg.content.body : '') | linky:'_blank'"/>
-                        <div ng-hide='msg.content.msgtype !== "m.image"'
-                             ng-style="msg.content.body.h && { 'height' : (msg.content.body.h < 320) ? msg.content.body.h : 320}">
-                            <img class="image" ng-src="{{ msg.content.url }}"/>
+                        <div ng-show='msg.content.msgtype === "m.image"'>
+                            <div ng-hide='msg.content.thumbnail_url' ng-style="msg.content.body.h && { 'height' : (msg.content.body.h < 320) ? msg.content.body.h : 320}">
+                                <img class="image" ng-src="{{ msg.content.url }}"/>
+                            </div>
+                            <div ng-show='msg.content.thumbnail_url' ng-style="{ 'height' : msg.content.thumbnail_info.h }">
+                                <img class="image" ng-src="{{ msg.content.thumbnail_url }}"/>
+                            </div>
                         </div>
                     </div>
                 </td>
-- 
cgit 1.4.1


From bb4490c2d78d4e0dcae01853513e0308776055a5 Mon Sep 17 00:00:00 2001
From: Emmanuel ROHEE <erohee@amdocs.com>
Date: Thu, 21 Aug 2014 16:09:42 +0200
Subject: Show image fullscreen when clicking on the thumbnail

---
 webclient/app.css        | 25 ++++++++++++++++++++++++-
 webclient/room/room.html |  9 +++++++--
 2 files changed, 31 insertions(+), 3 deletions(-)

(limited to 'webclient/room/room.html')

diff --git a/webclient/app.css b/webclient/app.css
index 869db69cd6..d2b951d3b6 100644
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -66,6 +66,10 @@ h1 {
     background-color: #faa;
 }
 
+.mouse-pointer {
+    cursor: pointer;
+}
+
 /*** Participant list ***/
 
 #usersTableWrapper {
@@ -89,7 +93,6 @@ h1 {
     height: 100px;
     position: relative;
     background-color: #000;
-    cursor: pointer;
 }
 
 .userAvatar .userAvatarImage {
@@ -245,6 +248,26 @@ h1 {
     text-align: left ! important;
 }
 
+#room-fullscreen-image {
+    position: absolute;
+    top: 0px;
+    height: 0px;
+    width: 100%;
+    height: 100%;
+}
+
+#room-fullscreen-image img {
+    max-width: 100%;
+    max-height: 100%;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    overflow: auto;
+    position: fixed;
+    right: 0;
+    top: 0;
+}
+
 /*** Profile ***/
 
 .profile-avatar {
diff --git a/webclient/room/room.html b/webclient/room/room.html
index 5dcc8caa1e..cb9cf1d1f3 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -10,7 +10,7 @@
     <div id="usersTableWrapper">
         <table id="usersTable">
             <tr ng-repeat="member in members | orderMembersList">
-                <td class="userAvatar" ng-click="goToUserPage(member.id)">
+                <td class="userAvatar mouse-pointer" ng-click="goToUserPage(member.id)">
                     <img class="userAvatarImage" 
                          ng-src="{{member.avatar_url || 'img/default-profile.jpg'}}" 
                          alt="{{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }}"
@@ -46,7 +46,8 @@
                                 <img class="image" ng-src="{{ msg.content.url }}"/>
                             </div>
                             <div ng-show='msg.content.thumbnail_url' ng-style="{ 'height' : msg.content.thumbnail_info.h }">
-                                <img class="image" ng-src="{{ msg.content.thumbnail_url }}"/>
+                                <img class="image mouse-pointer" ng-src="{{ msg.content.thumbnail_url }}"
+                                     ng-click="$parent.fullScreenImageURL = msg.content.url"/>
                             </div>
                         </div>
                     </div>
@@ -96,4 +97,8 @@
         </div>
     </div>
 
+    <div id="room-fullscreen-image" ng-show="fullScreenImageURL" ng-click="fullScreenImageURL = undefined;">
+        <img ng-src="{{ fullScreenImageURL }}"/>
+    </div>
+
  </div>
-- 
cgit 1.4.1