bigbluebutton-Github/bigbluebutton-html5/app/client/views/chat/chat_bar.html

141 lines
5.4 KiB
HTML
Executable File

<template name="chatbar">
<div id="{{id}}" {{visibility name}} class="component">
<h3 class="title gradientBar">
<span class="ion-ios-chatbubble"></span>
{{> extraConversations}}
</h3>
{{#if getInSession "display_chatPane"}}
<div id="chatbody">
<ul class="chat" {{messageFontSize}}>
{{#each getCombinedMessagesForChat}}
{{#if message}}
<li>{{> message}}</li>
{{/if}}
{{/each}}
{{#unless userExists}}<li>The user has left</li>{{/unless}}
</ul>
</div>
{{#if userExists}}
<div class="panel-footer">{{> chatInput}}</div>
{{/if}}
{{else}}
{{> optionsBar}}
{{/if}}
</div>
</template>
<template name="chatInput">
<div id="chatInput" class="chat-input-wrapper">
{{#if inPrivateChat}}
{{#if privateChatDisabled}}
<textarea id="newMessageInput" class="disabledChat" placeholder="Private chat is temporarily locked (disabled)" rel="tooltip" data-placement="top" title="Private chat is temporarily locked" disabled></textarea>
{{else}}
<textarea id="newMessageInput" placeholder="Write a message..." rel="tooltip" data-placement="top" title="Write a new message"></textarea>
<button type="submit" id="sendMessageButton" class="btn" rel="tooltip" data-placement="top">
Send
</button>
{{/if}}
{{else}}
{{#if publicChatDisabled}}
<textarea id="newMessageInput" class="disabledChat" placeholder="Public chat is temporarily locked (disabled)" rel="tooltip" data-placement="top" title="Public chat is temporarily locked" disabled></textarea>
{{else}}
<textarea id="newMessageInput" placeholder="Write a message..." rel="tooltip" data-placement="top" title="Write a new message"></textarea>
<button type="submit" id="sendMessageButton" class="btn" rel="tooltip" data-placement="top">
Send
</button>
{{/if}}
{{/if}}
</div>
</template>
<template name="chatOptions">
<p>Chat Options:</p>
{{> optionsFontSize}}
</template>
<template name="extraConversations">
{{#if tooManyConversations}}
<div id="MoreChatsDrop" class="btn-group">
<button type="button" id="MoreChatsbutton" class="btn btn-default dropdown-toggle" data-toggle="dropdown">More Chats<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>
<!-- Displays and styles an individual message in the chat -->
<template name="message">
<span style="float:left;">
{{#if message.from_username}}
<span class="userNameEntry" rel="tooltip" data-placement="bottom" title="{{message.from_username}}">
{{message.from_username}}
</span>
{{/if}}
</span>
<span style="float:right;">
{{#if message.from_time}}
<span {{messageFontSize}}>{{toClockTime message.from_time}}</span>
<span {{messageFontSize}} class="glyphicon glyphicon-time"></span>
{{/if}}
</span>
<br/>
<div style="color:{{colourToHex message.from_color}}">{{{sanitizeAndFormat message.message}}}</div>
{{autoscroll}}
</template>
<!-- Displays the list of options available -->
<template name="optionsBar">
<div class="optionsBar">
{{#if thereArePeopletoChatWith}} <!-- There are people we can chat with, display the user list -->
<p>Chat privately with:</p>
<select id="privateChatSelector" title="Select a participant to open a private chat" class="private-chat-user-box " >
<option value="default" >Select a person</option>
{{#each getUsersInMeeting}}
{{#unless isCurrentUser userId}}
<option value={{userId}} >{{user.name}}</option>
{{/unless}}
{{/each}}
</select>
{{else}}
<p>There are no participants to chat with right now.</p>
{{/if}}
<br/><br/><br/>
{{> chatOptions}}
<br/>
</div>
</template>
<template name="optionsFontSize">
<span class="chatOptionsText" >Chat Message Font Size: </span><br/>
<table id="fontSizeTable">
<tr>
<td id="displayButtons">
<button id="decreaseFontSize" class="glyphicon glyphicon-minus"></button>
<button id="increaseFontSize" class="glyphicon glyphicon-plus"></button>
</td >
<td id="displayLabel"><label class="fontSizeLabel" {{messageFontSize}} >Size({{getInSession "messageFontSize"}})</label></td>
</tr>
</table>
</template>
<!-- Display buttons on the chat tab, public, options, and all the private chat tabs -->
<template name="tabButtons">
<ul id="tabsList" class="nav nav-tabs">
{{#each grabChatTabs}}
<li class="{{isTabActive userId}} tab {{makeSafe class}} {{hasGotUnreadMailClass gotMail}}">
<a href='#' data-toggle='tab' id="#{{makeSafe name}}">
{{#if equals class "privateChatTab"}}
<p class="chatNameSelectorPrivate">{{makeSafe name}}</p>
<button type="button" class="close closeTab">X</button>
{{else}}
<p class="chatNameSelectorPublic">{{makeSafe name}}</p>
{{/if}}
</a>
</li>
{{/each}}
</ul>
</template>