tileradotorg/synapse
1
0
Fork 0
forked from MirrorHub/synapse
Code Pull requests Activity

Show image fullscreen when clicking on the thumbnail

Browse source
This commit is contained in:
Emmanuel ROHEE 2014-08-21 16:09:42 +02:00
parent e4f0e1af1a
commit bb4490c2d7
2 changed files with 31 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
webclient/app.css
View file

@ -66,6 +66,10 @@ h1 {
background-color: #faa; background-color: #faa;
} }
.mouse-pointer {
cursor: pointer;
}
/*** Participant list ***/ /*** Participant list ***/
#usersTableWrapper { #usersTableWrapper {
@ -89,7 +93,6 @@ h1 {
height: 100px; height: 100px;
position: relative; position: relative;
background-color: #000; background-color: #000;
cursor: pointer;
} }
.userAvatar .userAvatarImage { .userAvatar .userAvatarImage {
@ -245,6 +248,26 @@ h1 {
text-align: left ! important; 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 ***/
.profile-avatar { .profile-avatar {

9
webclient/room/room.html
View file

@ -10,7 +10,7 @@
<div id="usersTableWrapper"> <div id="usersTableWrapper">
<table id="usersTable"> <table id="usersTable">
<tr ng-repeat="member in members | orderMembersList"> <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" <img class="userAvatarImage"
ng-src="{{member.avatar_url || 'img/default-profile.jpg'}}" ng-src="{{member.avatar_url || 'img/default-profile.jpg'}}"
alt="{{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }}" alt="{{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }}"
@ -46,7 +46,8 @@
<img class="image" ng-src="{{ msg.content.url }}"/> <img class="image" ng-src="{{ msg.content.url }}"/>
</div> </div>
<div ng-show='msg.content.thumbnail_url' ng-style="{ 'height' : msg.content.thumbnail_info.h }"> <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> </div>
</div> </div>
@ -96,4 +97,8 @@
</div> </div>
</div> </div>
<div id="room-fullscreen-image" ng-show="fullScreenImageURL" ng-click="fullScreenImageURL = undefined;">
<img ng-src="{{ fullScreenImageURL }}"/>
</div>
</div> </div>