diff options
Diffstat (limited to 'view')
| -rw-r--r-- | view/css/mod_chat.css | 102 | ||||
| -rw-r--r-- | view/theme/redbasic/css/style.css | 7 | ||||
| -rw-r--r-- | view/tpl/chat.tpl | 156 | ||||
| -rw-r--r-- | view/tpl/chatroomlist.tpl | 3 |
4 files changed, 167 insertions, 101 deletions
diff --git a/view/css/mod_chat.css b/view/css/mod_chat.css index c59d8d459..69c2e1528 100644 --- a/view/css/mod_chat.css +++ b/view/css/mod_chat.css @@ -20,77 +20,67 @@ padding: 7px 10px; } +section, +aside { + padding-bottom: 0px; +} + +#chatTopBar { + float: left; + height: 400px; + overflow-y: auto; +} - #chatContainer { - height: 100%; - width: 100%; - } - - #chatTopBar { - float: left; - height: 400px; - width: 77%; - overflow-y: auto; - } - - #chatSide { - float: right; - width: 20%; - height: 100%; - } - - #chatDrop { - margin: 20px 0; - float: right; -} - - #chatUsers { - border: 1px solid #000; -} - - #chatBottomBar { - position: relative; - bottom: 0; - height: 150px; - margin-top: 20px; - } - -#chatOptionsBar { - margin-top: 20px; -} - - #chatText { - width: 100%; - } - - section { - padding-bottom: 0; - } -.chat-item { - padding: 3px; +#chatUsers img { + float: left; + margin-right: 5px; +} + +.name { + font-weight: bold; } -.chat-item-end { - clear: both; +#chatBottomBar { + position: relative; + bottom: 0; + margin-top: 10px; +} + +.chat-item { + display: table; + table-layout: fixed; + } .chat-item-photo { - float: left; + display: table-cell; height: 32px; width: 32px; + vertical-align: top; } .chat-body { - float: left; - width: 80%; - margin-left: 15px; + display: table-cell; + vertical-align: top; + padding: 0px 0px 20px 10px; } -.chat-item-text { - float: left; - padding: 3px; +.chat-item-title { display: inline-block; + padding: 3px; + margin-bottom: 3px; } +.online { + color: green; +} + +.away { + color: orange; +} + +.leave { + color: red; +} diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index b92fe5afe..7f9f621a3 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -1263,7 +1263,8 @@ img.mail-conv-sender-photo { .wall-item-content, .mail-conv-body, -.page-body { +.page-body, +.chat-item-text { font-size: $font_size; clear: both; } @@ -1366,9 +1367,9 @@ img.mail-conv-sender-photo { border-radius: $radiuspx; } -.chat-item-text { +.chat-item-title { border-radius: $radiuspx; - background-color: #eee; + background-color: $item_colour; } /* nav bootstrap */ diff --git a/view/tpl/chat.tpl b/view/tpl/chat.tpl index 5ea1ae22e..a040cbd3f 100644 --- a/view/tpl/chat.tpl +++ b/view/tpl/chat.tpl @@ -1,44 +1,101 @@ -<div class="generic-content-wrapper-styled"> - - {{if $is_owner}} - <div id="chatDrop"> - <form id="chat-destroy" method="post" action="chat"> - <input type="hidden" name="room_name" value="{{$room_name}}" /> - <input type="hidden" name="action" value="drop" /> - <input type="submit" name="submit" value="{{$drop}}" onclick="return confirmDelete();"/> - </form> - </div> - {{/if}} - -<h1>{{$room_name}}</h1> - - -<div id="chatContainer"> - - <div id="chatTopBar"> - <div id="chatLineHolder"></div> - </div> - - <div id="chatSide"> - - <div id="chatUsers"></div><br /> +<div class="generic-content-wrapper"> + <div class="section-title-wrapper"> + {{if $is_owner}} + <div id="chatDrop" class="pull-right"> + <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="icon-trash"></i> {{$drop}}</button> + </form> + </div> + {{/if}} + <h2>{{$room_name}}</h2> + <div class="clear"></div> </div> - <div class="clear"></div> - <div id="chatBottomBar"> - <div class="tip"></div> - - <form id="chat-form" method="post" action="#"> - <input type="hidden" name="room_id" value="{{$room_id}}" /> - <textarea id="chatText" name="chat_text" rows=3></textarea><br /> - <input type="submit" name="submit" value="{{$submit}}" /> - </form> - - </div> - <div id="chatOptionsBar"> - <a href="{{$baseurl}}/chat/{{$nickname}}/{{$room_id}}/leave">{{$leave}}</a> | <a href="{{$baseurl}}/chatsvc?f=&room_id={{$room_id}}&status=away">{{$away}}</a> | <a href="{{$baseurl}}/chatsvc?f=&room_id={{$room_id}}&status=online">{{$online}}</a>{{if $bookmark_link}} | <a href="{{$bookmark_link}}" target="_blank" >{{$bookmark}}</a>{{/if}} + <div id="chatContainer" class="section-content-wrapper"> + <div id="chatTopBar"> + <div id="chatLineHolder"></div> + </div> + + + <div class="clear"></div> + + <div id="chatBottomBar" > + <div class="tip"></div> + <form id="chat-form" method="post" action="#"> + <input type="hidden" name="room_id" value="{{$room_id}}" /> + <textarea id="chatText" name="chat_text" class="form-control"></textarea> + <div class="form-group"> + + </div> + <div id="chat-submit-wrapper" class="form-group"> + <div id="chat-submit" class="btn-group dropup pull-right"> + <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"><i class="icon-caret-down"></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="icon-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="icon-circle away"></i> {{$away}}</a></li> + <li class="nav-item"><a class="nav-link" href="{{$baseurl}}/chat/{{$nickname}}/{{$room_id}}/leave"><i class="icon-circle leave"></i> {{$leave}}</a></li> + {{if $bookmark_link}} + <li class="divider"></li> + <li class="nav-item"><a class="nav-link" href="{{$bookmark_link}}" target="_blank" ><i class="icon-bookmark"></i> {{$bookmark}}</a></li> + {{/if}} + </ul> + </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;"> + <i class="icon-bold jot-icons"></i> + </button> + <button id="main-editor-italic" class="btn btn-default btn-sm" title="{{$italic}}" onclick="inserteditortag('i', 'chatText'); return false;"> + <i class="icon-italic jot-icons"></i> + </button> + <button id="main-editor-underline" class="btn btn-default btn-sm" title="{{$underline}}" onclick="inserteditortag('u', 'chatText'); return false;"> + <i class="icon-underline jot-icons"></i> + </button> + <button id="main-editor-quote" class="btn btn-default btn-sm" title="{{$quote}}" onclick="inserteditortag('quote', 'chatText'); return false;"> + <i class="icon-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;"> + <i class="icon-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;" > + <i id="chat-link" class="icon-link jot-icons" title="{{$insert}}" ></i> + </button--> + </div> + {{if $feature_encrypt}} + <div class="btn-group hidden-sm hidden-xs"> + <button id="chat-encrypt-wrapper" class="btn btn-default btn-sm" onclick="red_encrypt('{{$cipher}}', '#chatText', $('#chatText').val()); return false;"> + <i id="chat-encrypt" class="icon-key jot-icons" title="{{$encrypt}}" ></i> + </button> + </div> + {{/if}} + <div class="btn-group visible-xs visible-sm"> + <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="icon-caret-down 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="icon-link"></i> {{$insert}}</a></li> + {{if $feature_encrypt}} + <li class="divider visible-xs"></li> + <li class="visible-sm visible-xs"><a href="#" onclick="red_encrypt('{{$cipher}}', '#chatText' ,$('#chatText').val()); return false;"><i class="icon-key"></i> {{$encrypt}}</a></li> + {{/if}} + </ul> + </div> + + + </div> + <div id="chat-rotator-wrapper" class="pull-left"> + <div id="chat-rotator"></div> + </div> + <div class="clear"></div> + </div> + </form> + </div> </div> </div> -</div> <script> var room_id = {{$room_id}}; @@ -63,7 +120,6 @@ $('#chat-form').submit(function(ev) { }); function load_chats() { - $.get("chatsvc?f=&room_id=" + room_id + '&last=' + last_chat + ((stopped) ? '&stopped=1' : ''),function(data) { if(data.success && (! stopped)) { update_inroom(data.inroom); @@ -80,7 +136,7 @@ function update_inroom(inroom) { var count = inroom.length; $.each( inroom, function(index, item) { var newNode = document.createElement('div'); - $(newNode).html('<img style="height: 32px; width: 32px;" src="' + item.img + '" alt="' + item.name + '" /> ' + item.status + '<br />' + item.name + '<br/>'); + $(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>'); html.appendChild(newNode); }); $('#chatUsers').html(html); @@ -93,7 +149,7 @@ function update_chats(chats) { last_chat = item.id; var newNode = document.createElement('div'); newNode.setAttribute('class', 'chat-item'); - $(newNode).html('<img class="chat-item-photo" src="' + item.img + '" alt="' + item.name + '" /><div class="chat-body"><span class="chat-item-name">' + item.name + ' </span><span class="autotime chat-item-time" title="' + item.isotime + '">' + item.localtime + '</span><br /><span class="chat-item-text">' + item.text + '</span></div><div class="chat-item-end"></div>'); + $(newNode).html('<img class="chat-item-photo" src="' + item.img + '" alt="' + item.name + '" /><div class="chat-body"><div class="chat-item-title"><span class="chat-item-name">' + item.name + ' </span><span class="autotime chat-item-time" title="' + item.isotime + '">' + item.localtime + '</span></div><div class="chat-item-text">' + item.text + '</div></div><div class="chat-item-end"></div>'); $('#chatLineHolder').append(newNode); $(".autotime").timeago(); @@ -103,6 +159,22 @@ function update_chats(chats) { } + +function chatJotGetLink() { + reply = prompt("{{$linkurl}}"); + if(reply && reply.length) { + $('#chat-rotator').spin('tiny'); + $.get('linkinfo?f=&url=' + reply, function(data) { + addmailtext(data); + $('#chat-rotator').spin(false); + }); + } +} + +function addmailtext(data) { + var currentText = $("#chatText").val(); + $("#chatText").val(currentText + data); +} </script> <script> function isMobile() { @@ -127,7 +199,7 @@ $(function(){ } else if (e.keyCode == 13) { e.preventDefault(); - $(this).parent('form').trigger('submit'); + $('#chat-form').trigger('submit'); } }); }); diff --git a/view/tpl/chatroomlist.tpl b/view/tpl/chatroomlist.tpl index dfdce8afb..542ff9a0c 100644 --- a/view/tpl/chatroomlist.tpl +++ b/view/tpl/chatroomlist.tpl @@ -8,5 +8,8 @@ {{/foreach}} </ul> {{/if}} + <div id="chatSide"> + <div id="chatUsers"></div> + </div> </div> |