Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Enable typeahead on the input and style the suggestions dropdown. updates #215

Browse Source
This commit is contained in:
JC Brand 2014-08-27 11:16:11 +02:00
parent f1555774f0
commit 84c2242c91
5 changed files with 68 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
converse.js
View File

@ -1999,6 +1999,19 @@
}
},
initTypeAheadInviteWidget: function () {
this.$('input.invited-contact').typeahead({
minLength: 1,
highlight: true
}, {
name: 'contacts-dataset',
source: function (query, cb) {
cb([{ val: 'dog' }, { val: 'pig' }, { val: 'moose' }]);
}
});
return this;
},
renderChatArea: function () {
if (!this.$el.find('.chat-area').length) {
this.$el.find('.chat-body').empty().append(
@ -2007,7 +2020,7 @@
'label_message': __('Message')
})
);
this.renderToolbar();
this.initTypeAheadInviteWidget().renderToolbar();
}
return this;
},

23
css/converse.css
View File

@ -567,10 +567,25 @@ span.spinner.hor_centered {
background-color: white;
overflow: auto;
border-left: 1px solid #AAA;
width: 100px;
border-bottom-right-radius: 4px;
width: 100px;
height: 100%;
}
#conversejs .tt-highlight {
background-color: #00230F;
}
#conversejs div.tt-suggestion p {
color: white;
text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
cursor: pointer;
}
#conversejs .tt-dropdown-menu {
margin: 0 1px 0 1px;
min-width: 96px;
background: #27774A;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
#conversejs .chatroom div.participants label {
font-style: italic;
}
@ -578,10 +593,10 @@ span.spinner.hor_centered {
margin-left: 2px;
font-size: 12px;
}
#conversejs .chatroom #invited-contact {
margin: 1px;
margin-top: 2px;
#conversejs .chatroom .invited-contact {
margin: 2px 1px 0 1px;
width: 96px;
border: 1px solid #999;
}
#conversejs .participants ul.participant-list li {
overflow: hidden;

28
less/converse.less
View File

@ -2,7 +2,7 @@
* Converse.js (Web-based XMPP instant messaging client)
* http://conversejs.org
*
* Copyright (c) 2012-2014, Jan-Carel Brand <jc@opkode.com>
* Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
* Licensed under the Mozilla Public License
*/
@ -609,11 +609,29 @@ span.spinner.hor_centered {
background-color: white;
overflow: auto;
border-left: 1px solid #AAA;
width: 100px;
border-bottom-right-radius: 4px;
width: 100px;
height: 100%;
}
#conversejs .tt-highlight {
background-color: #00230F;
}
#conversejs div.tt-suggestion p {
color: white;
text-shadow: rgba(0,0,0,0.51) 0 -1px 0;
cursor: pointer;
}
#conversejs .tt-dropdown-menu {
margin: 0 1px 0 1px;
min-width: 96px;
background: #27774A;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
#conversejs .chatroom div.participants label {
font-style: italic;
}
@ -623,10 +641,10 @@ span.spinner.hor_centered {
font-size: 12px;
}
#conversejs .chatroom #invited-contact {
margin: 1px;
margin-top: 2px;
#conversejs .chatroom .invited-contact {
margin: 2px 1px 0 1px;
width: 96px;
border: 1px solid #999;
}
#conversejs .participants ul.participant-list li {

2
mockup/index.html
View File

@ -402,7 +402,7 @@
</div>
<div class="participants">
<form class="room-invite">
<input id="invited-contact" placeholder="Invite someone" type="text"/>
<input class="invited-contact" placeholder="Invite someone" type="text"/>
</form>
<label>Participants:</label>
<ul class="participant-list">

3
src/templates/chatarea.html
View File

@ -10,7 +10,8 @@
</div>
<div class="participants">
<form class="room-invite">
<input id="invited-contact" placeholder="Invite someone" type="text"/>
<input class="invited-contact" placeholder="Invite someone" type="text"/>
</form>
<label>Participants:</label>
<ul class="participant-list"></ul>
</div>