pimhwang
/
spreed-webrtc
mirror of https://github.com/strukturag/spreed-webrtc.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

First bunch of dom and js changes to make chat switching and events more sane.

pull/16/head
Simon Eisenmann 11 years ago
parent
b5d2bf079d
commit
c93fd57c50
4 changed files with 125 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 81
      src/styles/components/_chat.scss
  2. 3
      static/js/controllers/chatroomcontroller.js
  3. 58
      static/js/directives/chat.js
  4. 8
      static/partials/chatroom.html

81
src/styles/components/_chat.scss
Unescape View File

@ -27,6 +27,10 @@ top:0px; @@ -27,6 +27,10 @@ top:0px;
pointer-events: none;
z-index:45;
overflow:hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
}
.withChat #chat .chatpane {
left:0px;
@ -39,43 +43,71 @@ width:auto; @@ -39,43 +43,71 @@ width:auto;
}
}
.chatpane {
height:100%;
position:absolute;
top:0px;
left:260px;
bottom:0px;
right:0px;
width:260px;
-webkit-transition: left 200ms ease-in-out;
-moz-transition: left 200ms ease-in-out;
-ms-transition: left 200ms ease-in-out;
-o-transition: left 200ms ease-in-out;
transition: left 200ms ease-in-out;
-webkit-transition: 0.2s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.2s;
-moz-transform-style: preserve-3d;
-o-transition: 0.2s;
-o-transform-style: preserve-3d;
transition: 0.2s;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.withChat .chatpane.flip {
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
}
.chat {
position:absolute;
pointer-events: auto;
position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;
background: #e7e7e7;
border-top: 1px solid $bordercolor;
border-right:1px solid $bordercolor;
overflow:hidden;
display:none;
}
.chat.visible {
}
.chat.visible.active {
display:block;
}
.chat .chatbody {
position:absolute;
bottom:0px;
left:0px;
right:0px;
top: 30px;
}
.chat.active .chatbody {
}
.chat .chatheader {
position:relative;
background: $componentbg;
padding:8px 4px 0px 8px;
border-top: 1px solid $bordercolor;
border-bottom: 1px solid $bordercolor;
border-left: 1px solid $bordercolor;
font-size:0.8em;
font-weight:bold;
height:30px;
}
.chat.active .chatheader {
}
.chat .chatheader .ctrl {
position:absolute;
top:4px;
@ -98,10 +130,8 @@ cursor: pointer; @@ -98,10 +130,8 @@ cursor: pointer;
position:absolute;
left:0px;
right:0px;
top:34px;
top:0px;
bottom:74px;
//max-width:600px;
margin:0 auto;
}
.chat .output {
overflow-x: hidden;
@ -296,29 +326,32 @@ white-space:nowrap; @@ -296,29 +326,32 @@ white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.chat .chatbodybottom {
background: #e7e7e7;
position: absolute;
left:0px;
bottom:0px;
right:0px;
height:90px;
margin:0 auto;
}
.chat .typinghint {
position:absolute;
left:6px;
right:6px;
bottom:60px;
padding:6px;
white-space: no-wrap;
overflow: hidden;
font-size:.8em;
color: #aaa;
max-width:500px;
margin:0 auto;
height:22px;
}
.chat .inputbox {
position:absolute;
left:0px;
bottom:0px;
right:0px;
height:60px;
//max-width:500px;
margin:0 auto;
position:relative;
}
.chat .inputbox .btn {
position:absolute;
right:6px;
top:4px;
top:0px;
padding: 0.5em 1em;
}
.chat .inputbox > div {

3
static/js/controllers/chatroomcontroller.js
Unescape View File

@ -25,6 +25,7 @@ define(['underscore', 'moment', 'text!partials/fileinfo.html'], function(_, mome @@ -25,6 +25,7 @@ define(['underscore', 'moment', 'text!partials/fileinfo.html'], function(_, mome
$scope.outputElement = $(".output", $element);
$scope.inputElement = $(".input", $element);
$scope.bodyElement = $(".chatbody", $element);
var lastSender = null;
var lastDate = null;
var lastMessageContainer = null;
@ -36,7 +37,7 @@ define(['underscore', 'moment', 'text!partials/fileinfo.html'], function(_, mome @@ -36,7 +37,7 @@ define(['underscore', 'moment', 'text!partials/fileinfo.html'], function(_, mome
var scrollAfterInput = false;
// Mark seen on several events.
$element.on("mouseover mouseenter touchstart", _.debounce(function(event) {
$scope.bodyElement.on("mouseover mouseenter touchstart", _.debounce(function(event) {
$scope.$parent.seen();
$scope.$apply();
}, 100));

58
static/js/directives/chat.js
Unescape View File

@ -31,6 +31,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'], @@ -31,6 +31,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
$scope.layout.chatMaximized = false;
var rooms = {};
var visibleRooms = [];
mediaStream.api.e.on("received.chat", function(event, id, from, data, p2p) {
@ -91,14 +92,19 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'], @@ -91,14 +92,19 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
$scope.$parent.$on("startchat", function(event, id, options) {
//console.log("startchat requested", event, id);
if (id === group_chat_id) {
$scope.showGroupRoom(null, options);
} else {
$scope.showRoom(id, {title: translation._("Chat with")}, options);
}
});
// Shared data;
return {
rooms: rooms,
visibleRooms: [],
visibleRooms: visibleRooms,
group: group_chat_id,
get: function(id) {
return rooms[id];
}
@ -111,6 +117,10 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'], @@ -111,6 +117,10 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
var chat = $compile(templateChatroom);
return function(scope, iElement, iAttrs, controller) {
scope.showGroupRoom = function(settings, options) {
var stngs = $.extend({title: translation._("Room chat")}, settings);
return scope.showRoom(controller.group, stngs, options);
};
scope.currentRoom = null;
scope.showRoom = function(id, settings, options) {
var options = $.extend({}, options);
@ -122,7 +132,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'], @@ -122,7 +132,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
subscope = controller.rooms[id] = scope.$new();
translation.inject(subscope);
subscope.id = id;
subscope.isgroupchat = id === group_chat_id ? true : false;
subscope.isgroupchat = id === controller.group ? true : false;
subscope.index = index;
subscope.settings = settings;
subscope.visible = false;
@ -131,6 +141,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'], @@ -131,6 +141,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
subscope.peerIsTyping = "no";
subscope.firstmessage = true;
subscope.p2pstate = false;
subscope.active = false;
if (!subscope.isgroupchat) {
buddyData.push(id);
}
@ -151,7 +162,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'], @@ -151,7 +162,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
subscope.$broadcast("seen");
}
};
subscope.toggle = function() {
subscope.toggleMax = function() {
scope.toggleMax();
};
subscope.sendChat = function(to, message, status, mid, noloop) {
@ -273,9 +284,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'], @@ -273,9 +284,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
if (options.autofocus && subscope.visible) {
subscope.$broadcast("focus");
}
}
if (scope.currentRoom !== subscope && scope.currentRoom) {
scope.currentRoom.hide();
}
if (options.restore && !options.noenable) {
@ -284,7 +293,10 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'], @@ -284,7 +293,10 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
}
}
scope.currentRoom = subscope;
if (!options.noactivate) {
scope.activateRoom(subscope.id, true);
}
safeApply(subscope);
return subscope;
};
@ -309,11 +321,10 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'], @@ -309,11 +321,10 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
scope.currentRoom = null;
}
if (!controller.visibleRooms.length) {
scope.showRoom(group_chat_id, {title: translation._("Room chat")}, {restore: true, noenable: true});
if (id === group_chat_id) {
scope.showGroupRoom(null, {restore: true, noenable: true, activate: true});
// If last visible room was removed, hide chat.
scope.layout.chat = false;
}
}
};
scope.killRoom = function(id) {
scope.hideRoom(id);
@ -329,18 +340,39 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'], @@ -329,18 +340,39 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
scope.toggleMax = function() {
scope.layout.chatMaximized = !scope.layout.chatMaximized;
};
scope.activateRoom = function(id, active) {
var subscope = controller.rooms[id];
//console.log("toggleActive", active, id, scope.currentRoom, scope.currentRoom == subscope, subscope.active);
if (scope.currentRoom == subscope) {
subscope.active = active;
} else {
if (scope.currentRoom) {
scope.currentRoom.active = false;
scope.currentRoom.hide();
}
if (active) {
scope.currentRoom = subscope;
iElement.toggleClass("flip");
}
subscope.active = active;
}
};
scope.$on("room", function(event, room) {
if (room == null) {
scope.hideRoom(group_chat_id);
scope.hideRoom(controller.group);
} else {
var subscope;
if (!controller.visibleRooms.length) {
scope.showRoom(group_chat_id, {title: translation._("Room chat")}, {restore: true, noenable: true});
subscope = scope.showGroupRoom(null, {restore: true, noenable: true});
} else {
subscope = controller.get(controller.group);
}
var subscope = controller.get(group_chat_id);
if (room) {
var msg = translation._("You are now in room %s ...", room);
subscope.$broadcast("display", null, $("<i><span>"+msg+"</span></i>"));
}
}
});
};

8
static/partials/chatroom.html
Unescape View File

@ -1,8 +1,10 @@ @@ -1,8 +1,10 @@
<div ng-controller="ChatroomController" class="chat room-{{index}}" ng-class="{'newmessage': newmessage, 'visible': visible, 'chat-p2p': 'p2pstate', 'with_pictures': isgroupchat}">
<div class="chatheader"><span ng-show="p2pstate" class="fa fa-exchange" title="{{_('Peer to peer')}}"/><span>{{settings.title}} {{id|displayName}}</span> <div class="ctrl"><i ng-hide="layout.chatMaximized" ng-click="toggle()" class="fa fa-expand"></i><i ng-show="layout.chatMaximized" ng-click="toggle()" class="fa fa-compress"></i><i title="{{_('Close chat')}}" ng-click="hide()" class="fa fa-times"></i></div></div>
<div ng-controller="ChatroomController" class="chat room-{{index}}" ng-class="{'newmessage': newmessage, 'visible': visible, 'chat-p2p': 'p2pstate', 'with_pictures': isgroupchat, 'active': active}">
<div class="chatheader"><span ng-show="p2pstate" class="fa fa-exchange" title="{{_('Peer to peer')}}"/><span>{{settings.title}} {{id|displayName}}</span> <div class="ctrl"><i ng-hide="layout.chatMaximized" ng-click="toggleMax()" class="fa fa-expand"></i><i ng-show="layout.chatMaximized" ng-click="toggleMax()" class="fa fa-compress"></i><i title="{{_('Close chat')}}" ng-click="hide()" class="fa fa-times"></i></div></div>
<div class="chatbody">
<div class="outputbox">
<div class="output nicescroll"></div>
</div>
<div class="chatbodybottom">
<div class="typinghint" ng-switch on="peerIsTyping">
<span ng-switch-when="start"><i class="fa fa-pencil"></i> {{id|displayName}} {{_('is typing...')}}</span>
<span ng-switch-when="stop"><i class="fa fa-pencil"></i> {{id|displayName}} {{_('has stopped typing...')}}</span>
@ -13,4 +15,6 @@ @@ -13,4 +15,6 @@
</div>
<a ng-disabled="!(enabled)" ng-click="submit()" title="{{_('Send')}}" class="btn btn-small btn-info fa fa-play"></a>
</div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save