Show image fullscreen when clicking on the thumbnail

2 files changed, 31 insertions, 3 deletions

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>