Matrix-Mirrors/synapse-product
1
0
Fork 0
mirror of https://git.anonymousland.org/anonymousland/synapse-product.git synced 2024-10-01 08:25:44 -04:00
Code Issues Packages Projects Releases Wiki Activity

Implement SYWEB-121 : Display JSON when clicking messages.

Browse Source 
JSON is displayed as a modal dialog via AngularJS' bootstrap module,
"ui.bootstrap".
This commit is contained in:
Kegan Dougal 2014-10-27 16:28:33 +00:00
parent cf1feee21d
commit da87990bd6
4 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
webclient/app.js
View File

@ -30,7 +30,8 @@ var matrixWebClient = angular.module('matrixWebClient', [
'MatrixCall', 'MatrixCall',
'eventStreamService', 'eventStreamService',
'eventHandlerService', 'eventHandlerService',
'infinite-scroll' 'infinite-scroll',
'ui.bootstrap'
]); ]);
matrixWebClient.config(['$routeProvider', '$provide', '$httpProvider', matrixWebClient.config(['$routeProvider', '$provide', '$httpProvider',

2
webclient/index.html
View File

@ -5,6 +5,7 @@
<link rel="stylesheet" href="app.css"> <link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="mobile.css"> <link rel="stylesheet" href="mobile.css">
<link rel="stylesheet" href="bootstrap.css">
<link rel="icon" href="favicon.ico"> <link rel="icon" href="favicon.ico">
@ -16,6 +17,7 @@
<script src="js/angular-route.min.js"></script> <script src="js/angular-route.min.js"></script>
<script src="js/angular-sanitize.min.js"></script> <script src="js/angular-sanitize.min.js"></script>
<script src="js/angular-animate.min.js"></script> <script src="js/angular-animate.min.js"></script>
<script type='text/javascript' src="js/ui-bootstrap-tpls-0.11.2.js"></script>
<script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script> <script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script>
<script type='text/javascript' src='js/autofill-event.js'></script> <script type='text/javascript' src='js/autofill-event.js'></script>
<script src="app.js"></script> <script src="app.js"></script>

11
webclient/room/room-controller.js
View File

@ -15,8 +15,8 @@ limitations under the License.
*/ */
angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput']) angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
.controller('RoomController', ['$filter', '$scope', '$timeout', '$routeParams', '$location', '$rootScope', 'matrixService', 'mPresence', 'eventHandlerService', 'mFileUpload', 'matrixPhoneService', 'MatrixCall', .controller('RoomController', ['$modal', '$filter', '$scope', '$timeout', '$routeParams', '$location', '$rootScope', 'matrixService', 'mPresence', 'eventHandlerService', 'mFileUpload', 'matrixPhoneService', 'MatrixCall',
function($filter, $scope, $timeout, $routeParams, $location, $rootScope, matrixService, mPresence, eventHandlerService, mFileUpload, matrixPhoneService, MatrixCall) { function($modal, $filter, $scope, $timeout, $routeParams, $location, $rootScope, matrixService, mPresence, eventHandlerService, mFileUpload, matrixPhoneService, MatrixCall) {
'use strict'; 'use strict';
var MESSAGES_PER_PAGINATION = 30; var MESSAGES_PER_PAGINATION = 30;
var THUMBNAIL_SIZE = 320; var THUMBNAIL_SIZE = 320;
@ -982,4 +982,11 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
} }
}; };
$scope.openJson = function(content) {
console.log("Displaying modal dialog for " + JSON.stringify(content));
var modalInstance = $modal.open({
template: "<pre>" + angular.toJson(content, true) + "</pre>"
});
};
}]); }]);

20
webclient/room/room.html
View File

@ -84,10 +84,10 @@
</td> </td>
<td ng-class="(!msg.content.membership && ('m.room.topic' !== msg.type && 'm.room.name' !== msg.type))? (msg.content.msgtype === 'm.emote' ? 'emote text' : 'text') : 'membership text'"> <td ng-class="(!msg.content.membership && ('m.room.topic' !== msg.type && 'm.room.name' !== msg.type))? (msg.content.msgtype === 'm.emote' ? 'emote text' : 'text') : 'membership text'">
<div class="bubble"> <div class="bubble">
<span ng-if="'join' === msg.content.membership && msg.changedKey === 'membership'"> <span ng-if="'join' === msg.content.membership && msg.changedKey === 'membership'" ng-click="openJson(msg)">
{{ members[msg.state_key].displayname || msg.state_key }} joined {{ members[msg.state_key].displayname || msg.state_key }} joined
</span> </span>
<span ng-if="'leave' === msg.content.membership && msg.changedKey === 'membership'"> <span ng-if="'leave' === msg.content.membership && msg.changedKey === 'membership'" ng-click="openJson(msg)">
<span ng-if="msg.user_id === msg.state_key"> <span ng-if="msg.user_id === msg.state_key">
{{ members[msg.state_key].displayname || msg.state_key }} left {{ members[msg.state_key].displayname || msg.state_key }} left
</span> </span>
@ -101,7 +101,7 @@
</span> </span>
</span> </span>
<span ng-if="'invite' === msg.content.membership && msg.changedKey === 'membership' || <span ng-if="'invite' === msg.content.membership && msg.changedKey === 'membership' ||
'ban' === msg.content.membership && msg.changedKey === 'membership'"> 'ban' === msg.content.membership && msg.changedKey === 'membership'" ng-click="openJson(msg)">
{{ members[msg.user_id].displayname || msg.user_id }} {{ members[msg.user_id].displayname || msg.user_id }}
{{ {"invite": "invited", "ban": "banned"}[msg.content.membership] }} {{ {"invite": "invited", "ban": "banned"}[msg.content.membership] }}
{{ members[msg.state_key].displayname || msg.state_key }} {{ members[msg.state_key].displayname || msg.state_key }}
@ -109,23 +109,25 @@
: {{ msg.content.reason }} : {{ msg.content.reason }}
</span> </span>
</span> </span>
<span ng-if="msg.changedKey === 'displayname'"> <span ng-if="msg.changedKey === 'displayname'" ng-click="openJson(msg)">
{{ msg.user_id }} changed their display name from {{ msg.prev_content.displayname }} to {{ msg.content.displayname }} {{ msg.user_id }} changed their display name from {{ msg.prev_content.displayname }} to {{ msg.content.displayname }}
</span> </span>
<span ng-show='msg.content.msgtype === "m.emote"' <span ng-show='msg.content.msgtype === "m.emote"'
ng-class="msg.echo_msg_state" ng-class="msg.echo_msg_state"
ng-bind-html="'* ' + (members[msg.user_id].displayname || msg.user_id) + ' ' + msg.content.body | linky:'_blank'"/> ng-bind-html="'* ' + (members[msg.user_id].displayname || msg.user_id) + ' ' + msg.content.body | linky:'_blank'"
ng-click="openJson(msg)"/>
<span ng-show='msg.content.msgtype === "m.text"' <span ng-show='msg.content.msgtype === "m.text"'
class="message" class="message"
ng-click="openJson(msg)"
ng-class="containsBingWord(msg.content.body) && msg.user_id != state.user_id ? msg.echo_msg_state + ' messageBing' : msg.echo_msg_state" ng-class="containsBingWord(msg.content.body) && msg.user_id != state.user_id ? msg.echo_msg_state + ' messageBing' : msg.echo_msg_state"
ng-bind-html="(msg.content.msgtype === 'm.text' && msg.type === 'm.room.message' && msg.content.format === 'org.matrix.custom.html') ? ng-bind-html="(msg.content.msgtype === 'm.text' && msg.type === 'm.room.message' && msg.content.format === 'org.matrix.custom.html') ?
(msg.content.formatted_body | unsanitizedLinky) : (msg.content.formatted_body | unsanitizedLinky) :
(msg.content.msgtype === 'm.text' && msg.type === 'm.room.message') ? (msg.content.body | linky:'_blank') : '' "/> (msg.content.msgtype === 'm.text' && msg.type === 'm.room.message') ? (msg.content.body | linky:'_blank') : '' "/>
<span ng-show='msg.type === "m.call.invite" && msg.user_id == state.user_id'>Outgoing Call{{ isWebRTCSupported ? '' : ' (But your browser does not support VoIP)' }}</span> <span ng-show='msg.type === "m.call.invite" && msg.user_id == state.user_id' ng-click="openJson(msg)">Outgoing Call{{ isWebRTCSupported ? '' : ' (But your browser does not support VoIP)' }}</span>
<span ng-show='msg.type === "m.call.invite" && msg.user_id != state.user_id'>Incoming Call{{ isWebRTCSupported ? '' : ' (But your browser does not support VoIP)' }}</span> <span ng-show='msg.type === "m.call.invite" && msg.user_id != state.user_id' ng-click="openJson(msg)">Incoming Call{{ isWebRTCSupported ? '' : ' (But your browser does not support VoIP)' }}</span>
<div ng-show='msg.content.msgtype === "m.image"'> <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}"> <div ng-hide='msg.content.thumbnail_url' ng-style="msg.content.body.h && { 'height' : (msg.content.body.h < 320) ? msg.content.body.h : 320}">
@ -137,11 +139,11 @@
</div> </div>
</div> </div>
<span ng-if="'m.room.topic' === msg.type"> <span ng-if="'m.room.topic' === msg.type" ng-click="openJson(msg)">
{{ members[msg.user_id].displayname || msg.user_id }} changed the topic to: {{ msg.content.topic }} {{ members[msg.user_id].displayname || msg.user_id }} changed the topic to: {{ msg.content.topic }}
</span> </span>
<span ng-if="'m.room.name' === msg.type"> <span ng-if="'m.room.name' === msg.type" ng-click="openJson(msg)">
{{ members[msg.user_id].displayname || msg.user_id }} changed the room name to: {{ msg.content.name }} {{ members[msg.user_id].displayname || msg.user_id }} changed the room name to: {{ msg.content.name }}
</span> </span>