2014-06-19 21:29:48 +08:00
< template name = "chatbar" >
2014-08-09 03:30:28 +08:00
< div id = "{{id}}" { { visibility name } } class = "component" >
2014-08-07 01:46:54 +08:00
< div id = "chatbar-contents" >
2014-10-28 22:30:07 +08:00
< h3 class = "title gradientBar" >
2014-11-06 12:51:01 +08:00
< span class = "glyphicon glyphicon-comment" > < / span >
2014-10-28 22:30:07 +08:00
{{title}}
{{> extraConversations}}
< / h3 >
2014-10-22 02:11:22 +08:00
{{>tabButtons}} <!-- Display public/options tabs, and private chat tabs -->
2014-08-12 03:43:49 +08:00
{{#if getInSession "display_chatPane"}}
< div id = "chatbody" >
2014-11-06 12:51:01 +08:00
< ul class = "chat" >
2014-08-15 08:28:01 +08:00
{{#each getCombinedMessagesForChat}}
2014-09-11 03:48:23 +08:00
{{#if message}}
< li { { messageFontSize } } > {{> message}}< / li >
{{/if}}
2014-08-12 03:43:49 +08:00
{{/each}}
2014-10-07 23:44:30 +08:00
< bottomEntry > < / bottomEntry > <!-- Intentionally blank, fixes issue of last message being cut off while scrolling -->
2014-08-12 03:43:49 +08:00
< / ul >
< / div >
< div class = "panel-footer" > {{> chatInput}}< / div >
{{else}}
{{> optionsBar}}
{{/if}}
< / div >
< / div >
2014-06-19 21:29:48 +08:00
< / template >
2014-08-09 00:04:04 +08:00
< template name = "chatInput" >
< div class = "chat-input-wrapper" >
2014-09-05 02:54:46 +08:00
< textarea id = "newMessageInput" placeholder = "Write a message..." rel = "tooltip" data-placement = "top" title = "Write a new message" > < / textarea >
2014-08-09 00:04:04 +08:00
< button type = "submit" id = "sendMessageButton" class = "btn" rel = "tooltip" data-placement = "top" title = "Click to send your message" >
Send
< / button >
< / div >
< / template >
2014-08-16 01:17:51 +08:00
< template name = "chatOptions" >
< p > Chat Options:< / p >
{{> optionsFontSize}}
2014-10-23 00:12:05 +08:00
< br / > < br / >
{{> notificationSettings}}
2014-08-16 01:17:51 +08:00
< / template >
2014-10-28 22:30:07 +08:00
< template name = "extraConversations" >
{{#if tooManyConversations}}
< div class = "btn-group" >
< button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown" > Scrollable Menu < span class = "caret" > < / span > < / button >
< ul class = "dropdown-menu extraConversationScrollableMenu" role = "menu" >
{{#each getExtraConversations}}
< li class = "extraConversation" id = "{{safeName name}}" > < a href = "#" > {{safeName name}}< / a > < / li >
{{/each}}
< / ul >
< / div >
{{/if}}
< / template >
2014-06-26 23:13:29 +08:00
<!-- Displays and styles an individual message in the chat -->
2014-06-19 21:29:48 +08:00
< template name = "message" >
2014-08-18 22:16:07 +08:00
< table style = "width:100%" >
< tr >
< td >
{{#if message.from_username}}
2014-09-11 23:04:12 +08:00
< div { { messageFontSize } } class = "userNameEntry" rel = "tooltip" data-placement = "bottom" title = "{{message.from_username}}" >
2014-08-18 22:16:07 +08:00
< strong > {{message.from_username}}< / strong >
< / div >
{{/if}}
< / td >
< td style = "text-align:right" >
{{#if message.from_time}}< small class = "pull-right" > {{toClockTime message.from_time}} < span class = "glyphicon glyphicon-time" > < / span > < / small > {{/if}}
< / td >
< / tr >
< / table >
2014-08-21 22:40:19 +08:00
< div style = "color:{{colourToHex message.from_color}}" > {{{sanitizeAndFormat message.message}}}< / div > <!-- Messages must be safely filtered and stripped -->
2014-09-12 00:28:41 +08:00
{{autoscroll}} <!-- Scroll to the bottom after inserting a new message -->
2014-06-24 21:46:42 +08:00
< / template >
2014-10-23 00:12:05 +08:00
< template name = "notificationSettings" >
2014-11-06 12:51:01 +08:00
New Message Notifications:
2014-10-23 00:12:05 +08:00
< form >
< input type = "radio" name = "chatNotification" id = "chatNotificationOn" value = "chatNotificationOn" checked = "checked" / >
< label for = "chatNotificationOn" > On< / label >
< input type = "radio" name = "chatNotification" id = "chatNotificationOff" value = "chatNotificationOff" / >
< label for = "chatNotificationOff" > Off< / label >
< / form >
< / template >
2014-06-26 23:13:29 +08:00
<!-- Displays the list of options available -->
2014-06-24 21:46:42 +08:00
< template name = "optionsBar" >
2014-08-16 01:17:51 +08:00
< div class = "optionsBar" >
2014-10-09 21:45:49 +08:00
{{#if thereArePeopletoChatWith}} <!-- There are people we can chat with, display the user list -->
< p > Select a person to chat with privately< / p >
< div class = "private-chat-user-box" rel = "tooltip" data-placement = "top" title = "Select a participant to open a private chat" >
{{#Layout template="scrollWindow" id="privateChatUserScrollWindow"}}
{{#contentFor region="scrollContents"}}
< table class = "table table-hover" >
< tbody class = "private-chat-user-list" >
{{#each getUsersInMeeting}}
< tr class = "private-chat-user-entry" >
{{#unless isCurrentUser _id}}
{{user.name}}
{{/unless}}
< / tr >
{{/each}}
< / tbody >
< / table >
{{/contentFor}}
{{/Layout}}
< / div >
{{else}}
< p > There are no participants to chat with right now.< / p >
{{/if}}
2014-08-16 01:17:51 +08:00
< br / >
{{> chatOptions}}
< / div >
< / template >
< template name = "optionsFontSize" >
< div class = "dropdown" style = "float:left" >
< span { { messageFontSize } } > Chat Message Font Size: < / span >
< button class = "btn btn-default dropdown-toggle" type = "button" id = "dropdownMenu1" data-toggle = "dropdown" >
2014-08-16 02:20:21 +08:00
Font Size ({{getInSession "messageFontSize"}})
2014-08-16 01:17:51 +08:00
< span class = "caret" > < / span >
< / button >
< ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1" style = "height:80px; overflow-y:scroll; right:0px;" >
< li role = "presentation" > < a class = "fontSizeSelector" id = "8" role = "menuitem" tabindex = "-1" href = "#" > 8< / a > < / li >
< li role = "presentation" > < a class = "fontSizeSelector" id = "10" role = "menuitem" tabindex = "-1" href = "#" > 10< / a > < / li >
< li role = "presentation" > < a class = "fontSizeSelector" id = "12" role = "menuitem" tabindex = "-1" href = "#" > 12< / a > < / li >
< li role = "presentation" > < a class = "fontSizeSelector" id = "14" role = "menuitem" tabindex = "-1" href = "#" > 14< / a > < / li >
< li role = "presentation" > < a class = "fontSizeSelector" id = "16" role = "menuitem" tabindex = "-1" href = "#" > 16< / a > < / li >
< li role = "presentation" > < a class = "fontSizeSelector" id = "18" role = "menuitem" tabindex = "-1" href = "#" > 18< / a > < / li >
< / ul >
2014-06-24 21:46:42 +08:00
< / div >
< / template >
2014-06-25 02:36:22 +08:00
2014-06-26 23:13:29 +08:00
<!-- Display buttons on the chat tab, public, options, and all the private chat tabs -->
2014-06-25 02:36:22 +08:00
< template name = "tabButtons" >
2014-11-06 12:51:01 +08:00
< ul id = "tabsList" class = "nav nav-tabs" >
{{#each grabChatTabs}}
< li class = "{{isTabActive userId}} tab {{makeSafe class}}" >
< a href = '#' data-toggle = 'tab' id = "#{{makeSafe name}}" class = "{{hasGotUnreadMailClass gotMail}}" >
{{#if equals class "privateChatTab"}}
< button class = "close closeTab" type = "button" > < sup > < b > X< / b > < / sup > < / button >
{{/if}}
{{makeSafe name}}
< / a >
< / li >
{{/each}}
< / ul >
2014-06-25 02:36:22 +08:00
< / template >