diff options
Diffstat (limited to 'view/tpl/chat.tpl')
-rw-r--r-- | view/tpl/chat.tpl | 90 |
1 files changed, 47 insertions, 43 deletions
diff --git a/view/tpl/chat.tpl b/view/tpl/chat.tpl index 31be4136f..c189cbd15 100644 --- a/view/tpl/chat.tpl +++ b/view/tpl/chat.tpl @@ -5,17 +5,20 @@ <form id="chat-destroy" method="post" action="chat"> <input type="hidden" name="room_name" value="{{$room_name}}" /> <input type="hidden" name="action" value="drop" /> - <button class="btn btn-danger btn-xs" type="submit" name="submit" value="{{$drop}}" onclick="return confirmDelete();"><i class="fa fa-trash-o"></i> {{$drop}}</button> + <button class="btn btn-danger btn-sm" type="submit" name="submit" value="{{$drop}}" onclick="return confirmDelete();"><i class="fa fa-trash-o"></i> {{$drop}}</button> </form> {{/if}} - <button id="fullscreen-btn" type="button" class="btn btn-default btn-xs" onclick="makeFullScreen(); adjustFullscreenTopBarHeight();"><i class="fa fa-expand"></i></button> - <button id="inline-btn" type="button" class="btn btn-default btn-xs" onclick="makeFullScreen(false); adjustInlineTopBarHeight();"><i class="fa fa-compress"></i></button> + <button id="fullscreen-btn" type="button" class="btn btn-outline-secondary btn-sm" onclick="makeFullScreen(); adjustFullscreenTopBarHeight();"><i class="fa fa-expand"></i></button> + <button id="inline-btn" type="button" class="btn btn-outline-secondary btn-sm" onclick="makeFullScreen(false); adjustInlineTopBarHeight();"><i class="fa fa-compress"></i></button> </div> <h2>{{$room_name}}</h2> <div class="clear"></div> </div> <div id="chatContainer" class="section-content-wrapper"> <div id="chatTopBar"> + <div id="chat-top-spinner" class="spinner-wrapper"> + <div class="spinner m"></div> + </div> <div id="chatLineHolder"></div> </div> <div class="clear"></div> @@ -25,70 +28,71 @@ <div class="form-group"> <textarea id="chatText" name="chat_text" class="form-control"></textarea> </div> - <div id="chat-submit-wrapper"> + <div id="chat-submit-wrapper" class="clearfix"> <div id="chat-submit" class="dropup pull-right"> - <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-caret-up"></i></button> + <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-cog"></i></button> <button class="btn btn-primary btn-sm" type="submit" id="chat-submit" name="submit" value="{{$submit}}">{{$submit}}</button> - <ul class="dropdown-menu"> - <li class="nav-item"><a class="nav-link" href="{{$baseurl}}/chatsvc?f=&room_id={{$room_id}}&status=online"><i class="fa fa-circle online"></i> {{$online}}</a></li> - <li class="nav-item"><a class="nav-link" href="{{$baseurl}}/chatsvc?f=&room_id={{$room_id}}&status=away"><i class="fa fa-circle away"></i> {{$away}}</a></li> - <li class="nav-item"><a class="nav-link" href="{{$baseurl}}/chat/{{$nickname}}/{{$room_id}}/leave"><i class="fa fa-circle leave"></i> {{$leave}}</a></li> - <li class="divider"></li> - <li class="nav-item" id="toggle-notifications"><a class="nav-link" href="" onclick="toggleChatNotifications(); return false;"><i id="toggle-notifications-icon" class="fa fa-bell-slash-o"></i> Toggle notifications</a></li> - <li class="nav-item disabled" id="toggle-notifications-audio"><a class="nav-link" href="" onclick="toggleChatNotificationAudio(); return false;"><i id="toggle-notifications-audio-icon" class="fa fa-volume-off"></i> Toggle sound</a></li> + <div class="dropdown-menu dropdown-menu-right"> + <a class="dropdown-item" href="{{$baseurl}}/chatsvc?f=&room_id={{$room_id}}&status=online"><i class="fa fa-circle online"></i> {{$online}}</a> + <a class="dropdown-item" href="{{$baseurl}}/chatsvc?f=&room_id={{$room_id}}&status=away"><i class="fa fa-circle away"></i> {{$away}}</a> + <a class="dropdown-item" href="{{$baseurl}}/chat/{{$nickname}}/{{$room_id}}/leave"><i class="fa fa-circle leave"></i> {{$leave}}</a> + <div class="dropdown-divider"></div> + <a id="toggle-notifications" class="dropdown-item" href="" onclick="toggleChatNotifications(); return false;"><i id="toggle-notifications-icon" class="fa fa-bell-slash-o"></i> Toggle notifications</a> + <a id="toggle-notifications-audio" class="dropdown-item disabled" href="" onclick="toggleChatNotificationAudio(); return false;"><i id="toggle-notifications-audio-icon" class="fa fa-volume-off"></i> Toggle sound</a> {{if $bookmark_link}} - <li class="divider"></li> - <li class="nav-item"><a class="nav-link" href="{{$bookmark_link}}" target="_blank" ><i class="fa fa-bookmark"></i> {{$bookmark}}</a></li> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="{{$bookmark_link}}" target="_blank" ><i class="fa fa-bookmark"></i> {{$bookmark}}</a> {{/if}} - </ul> + </div> </div> - <div id="chat-tools" class="btn-toolbar pull-left"> - <div class="btn-group"> - <button id="main-editor-bold" class="btn btn-default btn-sm" title="{{$bold}}" onclick="inserteditortag('b', 'chatText'); return false;"> + <div id="chat-tools" class="btn-toolbar"> + <div class="btn-group mr-2"> + <button id="main-editor-bold" class="btn btn-outline-secondary btn-sm" title="{{$bold}}" onclick="inserteditortag('b', 'chatText'); return false;"> <i class="fa fa-bold jot-icons"></i> </button> - <button id="main-editor-italic" class="btn btn-default btn-sm" title="{{$italic}}" onclick="inserteditortag('i', 'chatText'); return false;"> + <button id="main-editor-italic" class="btn btn-outline-secondary btn-sm" title="{{$italic}}" onclick="inserteditortag('i', 'chatText'); return false;"> <i class="fa fa-italic jot-icons"></i> </button> - <button id="main-editor-underline" class="btn btn-default btn-sm" title="{{$underline}}" onclick="inserteditortag('u', 'chatText'); return false;"> + <button id="main-editor-underline" class="btn btn-outline-secondary btn-sm" title="{{$underline}}" onclick="inserteditortag('u', 'chatText'); return false;"> <i class="fa fa-underline jot-icons"></i> </button> - <button id="main-editor-quote" class="btn btn-default btn-sm" title="{{$quote}}" onclick="inserteditortag('quote', 'chatText'); return false;"> + <button id="main-editor-quote" class="btn btn-outline-secondary btn-sm" title="{{$quote}}" onclick="inserteditortag('quote', 'chatText'); return false;"> <i class="fa fa-quote-left jot-icons"></i> </button> - <button id="main-editor-code" class="btn btn-default btn-sm" title="{{$code}}" onclick="inserteditortag('code', 'chatText'); return false;"> + <button id="main-editor-code" class="btn btn-outline-secondary btn-sm" title="{{$code}}" onclick="inserteditortag('code', 'chatText'); return false;"> <i class="fa fa-terminal jot-icons"></i> </button> </div> - <div class="btn-group hidden-xs"> - <button id="chat-link-wrapper" class="btn btn-default btn-sm" onclick="chatJotGetLink(); return false;" > + <div class="btn-group mr-2 d-none d-md-flex"> + <button id="chat-link-wrapper" class="btn btn-outline-secondary btn-sm" onclick="chatJotGetLink(); return false;" > <i id="chat-link" class="fa fa-link jot-icons" title="{{$insert}}" ></i> </button> </div> {{if $feature_encrypt}} - <div class="btn-group hidden-xs"> - <button id="chat-encrypt-wrapper" class="btn btn-default btn-sm" onclick="red_encrypt('{{$cipher}}', '#chatText', $('#chatText').val()); return false;"> + <div class="btn-group mr-2 d-none d-md-flex"> + <button id="chat-encrypt-wrapper" class="btn btn-outline-secondary btn-sm" onclick="red_encrypt('{{$cipher}}', '#chatText', $('#chatText').val()); return false;"> <i id="chat-encrypt" class="fa fa-key jot-icons" title="{{$encrypt}}" ></i> </button> </div> {{/if}} - <div class="btn-group dropup visible-xs"> - <button type="button" id="more-tools" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> - <i id="more-tools-icon" class="fa fa-caret-up jot-icons"></i> + <div class="btn-group dropup d-md-none"> + <button type="button" id="more-tools" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <i id="more-tools-icon" class="fa fa-cog jot-icons"></i> </button> - <ul class="dropdown-menu dropdown-menu-right" role="menu"> - <li class="visible-xs"><a href="#" onclick="chatJotGetLink(); return false;" ><i class="fa fa-link"></i> {{$insert}}</a></li> + <div class="dropdown-menu"> + <a class="dropdown-item" href="#" onclick="chatJotGetLink(); return false;" ><i class="fa fa-link"></i> {{$insert}}</a> {{if $feature_encrypt}} - <li class="divider"></li> - <li class="visible-xs"><a href="#" onclick="red_encrypt('{{$cipher}}', '#chatText' ,$('#chatText').val()); return false;"><i class="fa fa-key"></i> {{$encrypt}}</a></li> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="#" onclick="red_encrypt('{{$cipher}}', '#chatText' ,$('#chatText').val()); return false;"><i class="fa fa-key"></i> {{$encrypt}}</a> {{/if}} - </ul> + </div> + </div> + <div class="btn-group"> + <div id="chat-rotator" class="mt-2 spinner-wrapper"> + <div class="spinner s"></div> + </div> </div> </div> - <div id="chat-rotator-wrapper" class="pull-left"> - <div id="chat-rotator"></div> - </div> - <div class="clear"></div> </div> </form> </div> @@ -101,7 +105,7 @@ var last_chat = 0; var chat_timer = null; $(document).ready(function() { - $('#chatTopBar').spin('small'); + $('#chat-top-spinner').show(); chat_timer = setTimeout(load_chats,300); $('#chatroom_bookmarks, #vcard').hide(); $('#chatroom_list, #chatroom_members').show(); @@ -134,7 +138,7 @@ function load_chats() { if(data.success && (! stopped)) { update_inroom(data.inroom); update_chats(data.chats); - $('#chatTopBar').spin(false); + $('#chat-top-spinner').hide(); } }); @@ -150,7 +154,7 @@ function update_inroom(inroom) { $.each( inroom, function(index, item) { var newNode = document.createElement('div'); newNode.setAttribute('class', 'member-item'); - $(newNode).html('<img style="height: 32px; width: 32px;" src="' + item.img + '" alt="' + item.name + '" /> ' + '<span class="name">' + item.name + '</span><br /><span class="' + item.status_class + '">' + item.status + '</span>'); + $(newNode).html('<img class="menu-img-2" src="' + item.img + '" alt="' + item.name + '" /> ' + '<span class="contactname">' + item.name + '</span><span class="' + item.status_class + '">' + item.status + '</span>'); html.appendChild(newNode); }); memberChange = chatRoomMembersChange(inroom); // get list of arrivals and departures @@ -293,10 +297,10 @@ function toggleChatNotifications() { function chatJotGetLink() { reply = prompt("{{$linkurl}}"); if(reply && reply.length) { - $('#chat-rotator').spin('tiny'); + $('#chat-rotator').show(); $.get('linkinfo?f=&url=' + reply, function(data) { addmailtext(data); - $('#chat-rotator').spin(false); + $('#chat-rotator').hide(); }); } } |