From 74cc8ceead2b0bd8883e548c0f3017174f41cd7b Mon Sep 17 00:00:00 2001 From: JC Brand Date: Thu, 15 Aug 2013 21:22:14 +0200 Subject: [PATCH 1/7] Add two toolbar buttons for the send message textarea --- converse.css | 42 +++++++++++++++++++++++++++--------------- index.html | 5 ++--- mockup.html | 6 +++++- 3 files changed, 34 insertions(+), 19 deletions(-) diff --git a/converse.css b/converse.css index 3a68eb1c4..4dcd01848 100644 --- a/converse.css +++ b/converse.css @@ -161,21 +161,6 @@ ul.participant-list li.moderator { line-height: 1.3em; } -.chat-textarea { - border: 0; - height: 50px; -} - -.chat-textarea-chatbox-selected { - border: 1px solid #578308; - margin:0; -} - -.chat-textarea-chatroom-selected { - border: 2px solid #2D617A; - margin:0; -} - .chat-info { color:#666666; } @@ -752,11 +737,38 @@ form.sendXMPPMessage { height: 54px; } +form.sendXMPPMessage ul.chat-toolbar { + float: right; + padding: 0; +} + +form.sendXMPPMessage ul.chat-toolbar li { + list-style: none; + padding: 2px 0 2px 2px; +} + form#set-custom-xmpp-status { float: left; padding: 0; } +.chat-textarea { + border: 0; + height: 50px; + width: 160px; +} + +.chat-textarea-chatbox-selected { + border: 1px solid #578308; + margin:0; +} + +.chat-textarea-chatroom-selected { + border: 2px solid #2D617A; + margin:0; +} + + #set-custom-xmpp-status button { padding: 1px 2px 1px 1px; } diff --git a/index.html b/index.html index b5acf0c01..6edb460c7 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,7 @@ - - + Converse.js @@ -168,7 +167,7 @@ prebind: false, show_controlbox_by_default: true, xhr_user_search: false, - debug: false + debug: true }); }); diff --git a/mockup.html b/mockup.html index df7a42f14..afb430532 100644 --- a/mockup.html +++ b/mockup.html @@ -205,7 +205,11 @@
- + +
From fadae7a453a148a60906e915bcc5fa0fae53037b Mon Sep 17 00:00:00 2001 From: JC Brand Date: Thu, 15 Aug 2013 22:50:13 +0200 Subject: [PATCH 2/7] Restyle chat toolbar and add more icons --- converse.css | 28 +++++++++++++++++++--------- mockup.html | 52 +++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 68 insertions(+), 12 deletions(-) diff --git a/converse.css b/converse.css index 4dcd01848..857a7ecd8 100644 --- a/converse.css +++ b/converse.css @@ -149,10 +149,11 @@ ul.participant-list li.moderator { } .chat-content { + position: relative; padding: 0.3em; font-size: 13px; color: rgb(79, 79, 79); - height:193px; + height:173px; overflow-y:auto; border:1px solid #999; border-bottom: 0; @@ -723,7 +724,8 @@ div#chatrooms { form.sendXMPPMessage { background: white; border: 1px solid #999; - padding:0.5em; + border-top: 1px solid #BBB; + padding: 3px; margin: 0; position: relative; -webkit-border-radius: 4px; @@ -734,17 +736,25 @@ form.sendXMPPMessage { background-clip: padding-box; border-top-left-radius: 0; border-top-right-radius: 0; - height: 54px; + height: 85px; + width: 200px; } -form.sendXMPPMessage ul.chat-toolbar { - float: right; +ul.chat-toolbar { + font-size: 14px; + margin: 0; padding: 0; } -form.sendXMPPMessage ul.chat-toolbar li { +ul.chat-toolbar li { + display: inline-block; list-style: none; - padding: 2px 0 2px 2px; + padding: 0 0 0 5px; +} + +ul.chat-toolbar li:hover { + cursor: pointer; + color: rgb(39, 39, 39); } form#set-custom-xmpp-status { @@ -754,8 +764,8 @@ form#set-custom-xmpp-status { .chat-textarea { border: 0; - height: 50px; - width: 160px; + width: 194px; + height: 58px; } .chat-textarea-chatbox-selected { diff --git a/mockup.html b/mockup.html index afb430532..aafcfc599 100644 --- a/mockup.html +++ b/mockup.html @@ -203,13 +203,59 @@ 19:39 me:  Hello world +
+ 19:39 me:  + Hello world +
+
+ 19:39 me:  + Hello world +
+
+ 19:39 me:  + Hello world +
+
+ 19:39 me:  + Hello world +
+
+ 19:39 me:  + Hello world +
+
+ 19:39 me:  + Hello world +
+
+ 19:39 me:  + Hello world +
+
+ 19:39 me:  + Hello world +
+
+ 19:39 me:  + Hello world +
+
+ 19:39 me:  + Hello world +
+
+ 19:39 me:  + Hello world +
    -
  • -
  • +
  • +
  • +
  • +
- +
From ed7905d10ef16c69399e2956b50a9dbb10df18fe Mon Sep 17 00:00:00 2001 From: JC Brand Date: Fri, 16 Aug 2013 11:20:19 +0200 Subject: [PATCH 3/7] Padding tweaks --- converse.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/converse.css b/converse.css index 857a7ecd8..5e5bbcf0f 100644 --- a/converse.css +++ b/converse.css @@ -743,13 +743,14 @@ form.sendXMPPMessage { ul.chat-toolbar { font-size: 14px; margin: 0; - padding: 0; + padding: 0 5px 0 0; + float: right; } ul.chat-toolbar li { display: inline-block; list-style: none; - padding: 0 0 0 5px; + padding: 0 3px 0 3px; } ul.chat-toolbar li:hover { From 016a810d1d9b4a7a9b7e62b19f2b2b009fe76199 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Tue, 20 Aug 2013 22:03:46 +0200 Subject: [PATCH 4/7] Fix tests. removeRoom method doesn't exist anymore --- mock.js | 1 - spec/ChatRoomSpec.js | 9 --------- 2 files changed, 10 deletions(-) diff --git a/mock.js b/mock.js index 73e153796..713d1f193 100644 --- a/mock.js +++ b/mock.js @@ -10,7 +10,6 @@ 'listRooms': function () {}, 'join': function () {}, 'leave': function () {}, - 'removeRoom': function () {}, 'rooms': {} }, 'jid': 'dummy@localhost', diff --git a/spec/ChatRoomSpec.js b/spec/ChatRoomSpec.js index 3df5702fe..4fc6e3d4d 100644 --- a/spec/ChatRoomSpec.js +++ b/spec/ChatRoomSpec.js @@ -143,7 +143,6 @@ waits(250); runs(function () { var $chat_body = view.$el.find('.chat-body'); - expect(converse.connection.muc.removeRoom).toHaveBeenCalled(); expect(view.renderPasswordForm).toHaveBeenCalled(); expect($chat_body.find('form.chatroom-form').length).toBe(1); expect($chat_body.find('legend').text()).toBe('This chatroom requires a password'); @@ -163,7 +162,6 @@ spyOn(converse.connection.muc, 'removeRoom'); spyOn(view, 'showErrorMessage').andCallThrough(); view.onChatRoomPresence(presence, {'nick': 'dummy'}); - expect(converse.connection.muc.removeRoom).toHaveBeenCalled(); expect(view.$el.find('.chat-body p').text()).toBe('You are not on the member list of this room'); }, converse)); @@ -180,7 +178,6 @@ spyOn(converse.connection.muc, 'removeRoom'); spyOn(view, 'showErrorMessage').andCallThrough(); view.onChatRoomPresence(presence, {'nick': 'dummy'}); - expect(converse.connection.muc.removeRoom).toHaveBeenCalled(); expect(view.$el.find('.chat-body p').text()).toBe('You have been banned from this room'); }, converse)); @@ -197,7 +194,6 @@ spyOn(converse.connection.muc, 'removeRoom'); spyOn(view, 'showErrorMessage').andCallThrough(); view.onChatRoomPresence(presence, {'nick': 'dummy'}); - expect(converse.connection.muc.removeRoom).toHaveBeenCalled(); expect(view.$el.find('.chat-body p').text()).toBe('No nickname was specified'); }, converse)); @@ -214,7 +210,6 @@ spyOn(converse.connection.muc, 'removeRoom'); spyOn(view, 'showErrorMessage').andCallThrough(); view.onChatRoomPresence(presence, {'nick': 'dummy'}); - expect(converse.connection.muc.removeRoom).toHaveBeenCalled(); expect(view.$el.find('.chat-body p').text()).toBe('You are not allowed to create new rooms'); }, converse)); @@ -231,7 +226,6 @@ spyOn(converse.connection.muc, 'removeRoom'); spyOn(view, 'showErrorMessage').andCallThrough(); view.onChatRoomPresence(presence, {'nick': 'dummy'}); - expect(converse.connection.muc.removeRoom).toHaveBeenCalled(); expect(view.$el.find('.chat-body p').text()).toBe("Your nickname doesn't conform to this room's policies"); }, converse)); @@ -248,7 +242,6 @@ spyOn(converse.connection.muc, 'removeRoom'); spyOn(view, 'showErrorMessage').andCallThrough(); view.onChatRoomPresence(presence, {'nick': 'dummy'}); - expect(converse.connection.muc.removeRoom).toHaveBeenCalled(); expect(view.$el.find('.chat-body p').text()).toBe("Your nickname is already taken"); }, converse)); @@ -265,7 +258,6 @@ spyOn(converse.connection.muc, 'removeRoom'); spyOn(view, 'showErrorMessage').andCallThrough(); view.onChatRoomPresence(presence, {'nick': 'dummy'}); - expect(converse.connection.muc.removeRoom).toHaveBeenCalled(); expect(view.$el.find('.chat-body p').text()).toBe("This room does not (yet) exist"); }, converse)); @@ -282,7 +274,6 @@ spyOn(converse.connection.muc, 'removeRoom'); spyOn(view, 'showErrorMessage').andCallThrough(); view.onChatRoomPresence(presence, {'nick': 'dummy'}); - expect(converse.connection.muc.removeRoom).toHaveBeenCalled(); expect(view.$el.find('.chat-body p').text()).toBe("This room has reached it's maximum number of occupants"); }, converse)); }, converse)); From 0157b2379a4ae04bf1b6d4d8eead26f292799854 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Tue, 20 Aug 2013 22:33:51 +0200 Subject: [PATCH 5/7] Remove explicit borders around chatboxes. Conflicts: converse.css --- converse.css | 27 ++++++++++++--------------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/converse.css b/converse.css index 5e5bbcf0f..c0a730969 100644 --- a/converse.css +++ b/converse.css @@ -95,6 +95,7 @@ span.spinner.hor_centered { background-color: white; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + border-top: 0; } .chatroom .chat-area { @@ -105,18 +106,15 @@ span.spinner.hor_centered { .chatroom .chat { overflow: auto; height: 400px; - border: solid 1px #ccc; } .chatroom .participants { float: left; - width: 99px; + width: auto; height: 272px; background-color: white; overflow: auto; - border-right: 1px solid #999; - border-bottom: 1px solid #999; - border-bottom-right-radius: 4px; + border-left: 1px solid #AAA; } .participants ul.participant-list li { @@ -155,9 +153,7 @@ ul.participant-list li.moderator { color: rgb(79, 79, 79); height:173px; overflow-y:auto; - border:1px solid #999; - border-bottom: 0; - border-top: 0; + border: 0; background-color: #ffffff; line-height: 1.3em; } @@ -612,7 +608,6 @@ div#controlbox-panes { background-color: white; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; - border: 1px solid #999; width: 199px; } @@ -684,9 +679,8 @@ ul#controlbox-tabs li a { margin: 0; text-align:center; text-decoration:none; - border: 1px solid #999; - border-top-right-radius: 4px; - border-top-left-radius: 4px; + border-top-right-radius: 5px; + border-top-left-radius: 5px; color:#666; text-shadow: 0 1px 0 rgba(250, 250, 250, 1); } @@ -697,13 +691,16 @@ ul#controlbox-tabs li a { .chat-head #controlbox-tabs li a { background-color: white; - box-shadow: inset 0 0 8px rgba(0,0,0,0.2); + box-shadow: inset 0 4px 12px rgba(0,0,0,0.3); + border-bottom: 1px solid #CCC; } ul#controlbox-tabs a.current, ul#controlbox-tabs a.current:hover { box-shadow: none; border-bottom: 0; height: 35px; + cursor: default; + color: rgb(102,102,102); } div#users, @@ -723,9 +720,9 @@ div#chatrooms { form.sendXMPPMessage { background: white; - border: 1px solid #999; + border: 0; border-top: 1px solid #BBB; - padding: 3px; + padding: 0.5em; margin: 0; position: relative; -webkit-border-radius: 4px; From 9c88aa19296d4525f1869553e19ad100fafc3c4a Mon Sep 17 00:00:00 2001 From: JC Brand Date: Sun, 25 Aug 2013 13:50:04 +0200 Subject: [PATCH 6/7] Better textarea styling. Ensure all boxes are same height. --- converse.css | 45 +++++++++++++++++++++++++++++---------------- converse.js | 2 +- mockup.html | 10 +++++++++- 3 files changed, 39 insertions(+), 18 deletions(-) diff --git a/converse.css b/converse.css index 9c8960751..00bf259c2 100644 --- a/converse.css +++ b/converse.css @@ -78,7 +78,7 @@ span.spinner.hor_centered { font-size: 100%; border-top-right-radius: 4px; border-top-left-radius: 4px; - padding: 3px 0 3px 7px; + padding: 3px 0 0 3px; } .chat-head-chatbox { @@ -91,7 +91,7 @@ span.spinner.hor_centered { } .chatroom .chat-body { - height: 272px; + height: 274px; background-color: white; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; @@ -110,11 +110,12 @@ span.spinner.hor_centered { .chatroom .participants { float: left; - height: 272px; + height: 274px; background-color: white; overflow: auto; border-left: 1px solid #AAA; max-width: 99px; + border-bottom-right-radius: 4px; } .participants ul.participant-list li { @@ -131,11 +132,6 @@ ul.participant-list li.moderator { color: #FE0007; } -.chatroom form.sendXMPPMessage { - -webkit-border-bottom-right-radius: 0; - border-bottom-right-radius: 0; -} - .chatroom .participant-list { list-style: none; } @@ -151,7 +147,7 @@ ul.participant-list li.moderator { padding: 0.3em; font-size: 13px; color: rgb(79, 79, 79); - height:173px; + height:180px; width: 190px; overflow-y:auto; border: 0; @@ -159,6 +155,10 @@ ul.participant-list li.moderator { line-height: 1.3em; } +.chatroom .chat-content { + height:200px; +} + .chat-info { color:#666666; } @@ -731,7 +731,7 @@ form.sendXMPPMessage { background: white; border: 0; border-top: 1px solid #BBB; - padding: 0.5em; + padding: 0; margin: 0; position: relative; -webkit-border-radius: 4px; @@ -746,11 +746,30 @@ form.sendXMPPMessage { width: 200px; } +.chatroom form.sendXMPPMessage { + -webkit-border-bottom-right-radius: 0; + border-bottom-right-radius: 0; + height: 65px; +} + +.chat-textarea { + box-sizing: border-box; + -moz-box-sizing: border-box; + border: 0; + width: 100%; + padding: 3px; + border-radius: 4px; + resize: none; + height: 65px; +} + ul.chat-toolbar { font-size: 14px; margin: 0; padding: 0 5px 0 0; float: right; + display: inline-block; + height: 20px; } ul.chat-toolbar li { @@ -769,12 +788,6 @@ form#set-custom-xmpp-status { padding: 0; } -.chat-textarea { - border: 0; - width: 194px; - height: 58px; -} - .chat-textarea-chatbox-selected { border: 1px solid #578308; margin:0; diff --git a/converse.js b/converse.js index df81db7e2..9fc09368b 100644 --- a/converse.js +++ b/converse.js @@ -587,7 +587,7 @@ return; } var img_src = 'data:'+this.model.get('image_type')+';base64,'+this.model.get('image'), - canvas = $(''), + canvas = $(''), ctx = canvas.get(0).getContext('2d'), img = new Image(); // Create new Image object img.onload = function() { diff --git a/mockup.html b/mockup.html index 0a51fdfcb..e2baadbee 100644 --- a/mockup.html +++ b/mockup.html @@ -193,7 +193,7 @@
- +
JC Brand

@@ -219,6 +219,10 @@ Supercalifragilisticexpialidociousstillnotlongenough
JC Brand is busy
+
+ 19:43 me:  + Another message to check that scrolling works. +
    @@ -261,6 +265,10 @@ 19:42 me:  Supercalifragilisticexpialidociousstillnotlongenough +
    + 19:43 Obi-wan Kenobi, Jedi Master:  + Another message to check that scrolling works. +
    From 40a3e013fd05bbe58eacb099e807cefa0de29ff5 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Sun, 25 Aug 2013 14:30:59 +0200 Subject: [PATCH 7/7] Style toolbar for OTR support --- converse.css | 21 +++++++++++++++++++-- mockup.html | 5 ++++- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/converse.css b/converse.css index 00bf259c2..620a5202b 100644 --- a/converse.css +++ b/converse.css @@ -124,12 +124,13 @@ span.spinner.hor_centered { white-space: nowrap; display: block; font-size: 12px; + font-weight: bold; padding: 0.5em 0 0 0.5em; cursor: default; } ul.participant-list li.moderator { - color: #FE0007; + color: #8f2831; } .chatroom .participant-list { @@ -181,7 +182,7 @@ ul.participant-list li.moderator { } .chat-message-them { - color: #F62817; + color: #8f2831; } .chat-message-me { @@ -772,6 +773,22 @@ ul.chat-toolbar { height: 20px; } +.chat-toolbar-text { + font-size: 12px; +} + +.not-private { + color: #8f2831; +} + +.unverified { + color: #cf5300; +} + +.private { + color: #4B7003 +} + ul.chat-toolbar li { display: inline-block; list-style: none; diff --git a/mockup.html b/mockup.html index e2baadbee..ddc02969f 100644 --- a/mockup.html +++ b/mockup.html @@ -227,9 +227,12 @@
    • -
    • +
    • + Not private + +