Mascali
/
raspisms
mirror of https://github.com/RaspbianFrance/raspisms.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add preview of images for mms in discussion

This commit is contained in:
osaajani 2021-03-22 17:08:29 +01:00
parent 0f6bf9ccde
commit a081567a39
2 changed files with 47 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
assets/css/style.css
View File

@ -205,6 +205,33 @@ footer img
font-size: 0.9em; font-size: 0.9em;
} }
.discussion-message-medias img
{
transition-duration: 0.1s;
max-width: 150px;
max-height: 150px;
line-height: 150px;
width: auto;
height: auto;
}
.discussion-message-medias img:hover
{
opacity: 0.6;
}
.discussion-message-media
{
line-height: 160px;
width: 160px;
height: 160px;
padding: 5px;
margin-bottom: 15px;
background-color: rgba(255, 255, 255, 0.3);
vertical-align: middle;
text-align: center;
}
.message-container .message-container
{ {
margin-bottom: 10px; margin-bottom: 10px;

33
templates/discussion/show.php
View File

@ -79,16 +79,27 @@
message.text = Autolinker.link(message.text, {newWindow:true}); message.text = Autolinker.link(message.text, {newWindow:true});
<?php } ?> <?php } ?>
var medias = message.medias.map((mediaUrl, index) => {
var extension = mediaUrl.split('.').pop();
if (['jpg', 'jpeg', 'png', 'gif'].includes(extension))
{
return '<div class="discussion-message-media"><a href="' + mediaUrl + '" target="_blank"><img src="' + mediaUrl + '"/></a></div>';
}
else
{
return '<div class="discussion-message-media"><a href="' + mediaUrl + '" target="_blank">Voir le fichier ' + (index + 1) + '</a></div>';
}
});
var medias_html = '<div class="discussion-message-medias">' + medias.join('') + '</div>';
switch (message.type) switch (message.type)
{ {
case 'received' : case 'received' :
var texte = '' + var texte = '' +
'<div class="clearfix message-container">' + '<div class="clearfix message-container">' +
'<div class="discussion-message message-received">' + '<div class="discussion-message message-received">' +
'<div class="discussion-message-text">' + message.text + '</div>' + '<div class="discussion-message-text">' + message.text + '</div>' +
'<div class="discussion-message-medias">' + message.medias.map((mediaUrl, index) => { medias.html +
return '<a href="' + mediaUrl + '" target="_blank">Voir le fichier ' + (index + 1) + '</a>';
}).join(' - ') + '</div>' +
'<div class="discussion-message-date">' + message.date + '</div>' + '<div class="discussion-message-date">' + message.date + '</div>' +
'</div>' + '</div>' +
'</div>'; '</div>';
@ -105,10 +116,8 @@
'<div class="clearfix message-container">' + '<div class="clearfix message-container">' +
'<div class="discussion-message message-sended">' + '<div class="discussion-message message-sended">' +
'<div class="discussion-message-text">' + message.text + '</div>' + '<div class="discussion-message-text">' + message.text + '</div>' +
'<div class="discussion-message-medias">' + message.medias.map((mediaUrl, index) => { medias_html +
return '<a href="' + mediaUrl + '" target="_blank">Voir le fichier ' + (index + 1) + '</a>'; '<div class="discussion-message-date">' + message.date + ' ' + (message.status == 'delivered' ? '<span class="fa fa-check-circle fa-fw text-success"></span>' : (message.status == 'failed' ? '<span class="fa fa-times-circle fa-fw text-danger"></span>' : '<span class="fa fa-clock-o fa-fw text-info"></span>' )) + '</div>' +
}).join(' - ') + '</div>' +
'<div class="discussion-message-date">' + message.date + ' ' + (message.status == 'delivered' ? '<span class="fa fa-check-circle fa-fw text-success"></span>' : (message.status == 'failed' ? '<span class="fa fa-times-circle fa-fw text-danger"></span>' : '<span class="fa fa-clock-o fa-fw text-info"></span>' )) + '</div>' +
'</div>' + '</div>' +
'</div>'; '</div>';
break; break;
@ -117,10 +126,8 @@
'<div class="clearfix message-container">' + '<div class="clearfix message-container">' +
'<div class="discussion-message message-sended">' + '<div class="discussion-message message-sended">' +
'<div class="message-in-progress-hover"><i class="fa fa-spinner fa-spin"></i></div>' + '<div class="message-in-progress-hover"><i class="fa fa-spinner fa-spin"></i></div>' +
'<div class="discussion-message-text">' + message.text + '</div>' + '<div class="discussion-message-text">' + message.text + '</div>' +
'<div class="discussion-message-medias">' + message.medias.map((mediaUrl, index) => { medias_html +
return '<a href="' + mediaUrl + '" target="_blank">Voir le fichier ' + (index + 1) + '</a>';
}).join(' - ') + '</div>' +
'<div class="discussion-message-date">' + message.date + '</div>' + '<div class="discussion-message-date">' + message.date + '</div>' +
'</div>' + '</div>' +
'</div>'; '</div>';