diff options
author | Kegan Dougal <kegan@matrix.org> | 2014-10-27 16:28:33 +0000 |
---|---|---|
committer | Kegan Dougal <kegan@matrix.org> | 2014-10-27 16:30:07 +0000 |
commit | da87990bd6e23380cdd5b46809fb80fb619f988c (patch) | |
tree | ace633136a65156b8f24e3554fbaa1ef068fbeeb /webclient | |
parent | HandleRoomMember: handle correctly prev_content (diff) | |
download | synapse-da87990bd6e23380cdd5b46809fb80fb619f988c.tar.xz |
Implement SYWEB-121 : Display JSON when clicking messages.
JSON is displayed as a modal dialog via AngularJS' bootstrap module, "ui.bootstrap".
Diffstat (limited to '')
-rw-r--r-- | webclient/app.js | 3 | ||||
-rw-r--r-- | webclient/index.html | 2 | ||||
-rw-r--r-- | webclient/room/room-controller.js | 11 | ||||
-rw-r--r-- | webclient/room/room.html | 20 |
4 files changed, 24 insertions, 12 deletions
diff --git a/webclient/app.js b/webclient/app.js index 31118304c6..099e2170a0 100644 --- a/webclient/app.js +++ b/webclient/app.js @@ -30,7 +30,8 @@ var matrixWebClient = angular.module('matrixWebClient', [ 'MatrixCall', 'eventStreamService', 'eventHandlerService', - 'infinite-scroll' + 'infinite-scroll', + 'ui.bootstrap' ]); matrixWebClient.config(['$routeProvider', '$provide', '$httpProvider', diff --git a/webclient/index.html b/webclient/index.html index f233919e3d..35c8051298 100644 --- a/webclient/index.html +++ b/webclient/index.html @@ -5,6 +5,7 @@ <link rel="stylesheet" href="app.css"> <link rel="stylesheet" href="mobile.css"> + <link rel="stylesheet" href="bootstrap.css"> <link rel="icon" href="favicon.ico"> @@ -16,6 +17,7 @@ <script src="js/angular-route.min.js"></script> <script src="js/angular-sanitize.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/autofill-event.js'></script> <script src="app.js"></script> diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index a1d2e87039..e6149989ea 100644 --- a/webclient/room/room-controller.js +++ b/webclient/room/room-controller.js @@ -15,8 +15,8 @@ limitations under the License. */ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput']) -.controller('RoomController', ['$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) { +.controller('RoomController', ['$modal', '$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'; var MESSAGES_PER_PAGINATION = 30; 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>" + }); + }; + }]); diff --git a/webclient/room/room.html b/webclient/room/room.html index ce2c581903..e753b037fe 100644 --- a/webclient/room/room.html +++ b/webclient/room/room.html @@ -84,10 +84,10 @@ </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'"> <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 </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"> {{ members[msg.state_key].displayname || msg.state_key }} left </span> @@ -101,7 +101,7 @@ </span> </span> <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 }} {{ {"invite": "invited", "ban": "banned"}[msg.content.membership] }} {{ members[msg.state_key].displayname || msg.state_key }} @@ -109,23 +109,25 @@ : {{ msg.content.reason }} </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 }} </span> <span ng-show='msg.content.msgtype === "m.emote"' 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"' 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-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.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'>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)">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)">Incoming Call{{ isWebRTCSupported ? '' : ' (But your browser does not support VoIP)' }}</span> <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}"> @@ -137,11 +139,11 @@ </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 }} </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 }} </span> |