diff options
| author | Emmanuel ROHEE <erohee@amdocs.com> | 2014-08-21 16:09:42 +0200 |
|---|---|---|
| committer | Emmanuel ROHEE <erohee@amdocs.com> | 2014-08-21 16:09:42 +0200 |
| commit | bb4490c2d78d4e0dcae01853513e0308776055a5 (patch) | |
| tree | 0cfd3c9742053f0966ad8cc2cacd86ee88502e63 | |
| parent | If there are available, show image thumbnails in the messages list (diff) | |
| download | synapse-bb4490c2d78d4e0dcae01853513e0308776055a5.tar.xz | |
Show image fullscreen when clicking on the thumbnail
| -rw-r--r-- | webclient/app.css | 25 | ||||
| -rw-r--r-- | webclient/room/room.html | 9 |
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> |