Updated: Use different color for User

slims · Jun 6, 2015 · 71ae0df · 71ae0df
1 parent b5810a2
commit 71ae0df
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 27 deletions.
diff --git a/admin/admin_template/default/assets/css/style.css b/admin/admin_template/default/assets/css/style.css
@@ -2209,13 +2209,34 @@ table {
 
 /* Chat
  ================================ */
+
+#pchat-toggle {
+  background-color: #fff;
+  border-radius: 50px;
+  position: absolute;
+  top: 25px;
+  color: #282828;
+  width:30px;
+  height:30px;
+  padding-top: 3px;
+  text-align: center;
+  vertical-align: middle;
+  right: 15px;  
+  z-index:4001;
+}
+
+@media only screen and (min-width : 768px) {
+  #pchat-toggle {
+    right: 100px;  
+  }
+}
+
 .s-chat {
   z-index:3099;
-  display: block;
   position: fixed;
   bottom: 51px;
   right: 12px;
-  text-align: center;
+  text-align: left;
   width:275px;
   background: #fff;
   padding: 0;
@@ -2225,6 +2246,7 @@ table {
 }
 
 .s-chat-header {
+  text-align: center;
   border-bottom: solid 1px #333;
   display: block;
   background-color: #282828;
@@ -2256,20 +2278,45 @@ table {
 }
 
 .s-chat-content label {
-    padding:10px 0;
-    font-size: 8px;
-    text-transform: uppercase;
-    letter-spacing: 4px;
+  padding:10px 0;
+  font-size: 8px;
+  text-transform: uppercase;
+  letter-spacing: 4px;
 }
 
+.s-chat-content #log {
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: 200px;
+  padding:10px;
+  width: 100%;
+  border: solid 1px #ddd;
+  font-size: 12px;
+}
+
+.s-chat-content #log p {
+  line-height: 1;
+  padding-bottom:5px;
+  margin: 0;
+}
+
+/* Chat theme */
+.c1,  .c6, .c11, .c16 { color: #3E966E !important; }
+.c2,  .c7, .c12, .c17 { color: #F36C32 !important; }
+.c3,  .c8, .c13, .c18 { color: #2A7BCC !important; }
+.c4,  .c9, .c14, .c19 { color: #7C378A !important; }
+.c5, .c10, .c15, .c20 { color: #333333 !important; }
+
+
 .s-chat-content textarea,
-.s-chat-content input {
+#message {
   width: 100%;
   border: solid 1px #ddd;
-  padding:10px;
   font-size: 12px;
+  padding:10px;
 }
 
+.s-chat-content #log,
 .s-chat-content textarea {
   min-height: 200px;
   line-height: 24px;
@@ -2282,7 +2329,7 @@ table {
 }
 
 .s-minimize {
-  bottom: -357px;
+  bottom: -355px;
   -webkit-transition: all 150ms ease;
   transition: all 150ms ease;
 }

diff --git a/admin/admin_template/default/index_template.inc.php b/admin/admin_template/default/index_template.inc.php
@@ -128,7 +128,7 @@
   <aside class="s-chat s-maximize">
     <a href="#" id="pchat-hide" class="s-chat-header"><?php echo __('Chat With Members'); ?></a>
     <div class="s-chat-content">
-      <textarea id="log" name="log" readonly="readonly"></textarea>
+      <div id="log"></div>
       <label for="message">Message</label>
       <input type="text" id="message" name="message" />
     </div>
@@ -141,7 +141,7 @@
     function log( text ) {
       $log = $('#log');
       //Add text to log
-      $log.append(($log.val()?"\n":'')+text);
+      $log.append(($log.html()?'<br>':'') + text);
       //Autoscroll
       $log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight;
     }
@@ -156,8 +156,7 @@ function send( text ) {
       $('#message').keypress(function(e) {
         if ( e.keyCode == 13 && this.value ) {
           log( 'You: ' + this.value );
-          send( 'Librarian|'+this.value );
-
+          send( '<?php echo $_SESSION["realname"]?>|'+this.value);
           $(this).val('');
         }
       });

diff --git a/admin/logout.php b/admin/logout.php
@@ -38,7 +38,7 @@
 $msg .= 'location.href = \''.SWB.'index.php?p=login\';';
 
 // Disconnect Websocket
-$msg .= 'Server = new FancyWebSocket("ws://'.$sysconf['chat_system']['host'].':'.$sysconf['chat_system']['port'].'");';
+$msg .= 'Server = new FancyWebSocket("ws://'.$sysconf['chat_system']['server'].':'.$sysconf['chat_system']['server_port'].'");';
 $msg .= 'Server.bind("close", function( data ) { log( "Disconnected." ); });';
 $msg .= '</script>';
 

diff --git a/chatserver.php b/chatserver.php
@@ -28,7 +28,7 @@ function wsOnMessage($clientID, $message, $messageLength, $binary) {
 		foreach ( $Server->wsClients as $id => $client )
 			if ( $id != $clientID ) {
 				$_message = explode("|", $message);
-				$Server->wsSend($id, $_message[0]." ".$clientID." : ".$_message[1]);
+				$Server->wsSend($id, '<strong class="c'.$clientID.'">'.$_message[0].":</strong> ".$_message[1]);
 			}
 }
 

diff --git a/template/default/index_template.inc.php b/template/default/index_template.inc.php
@@ -215,7 +215,7 @@
 <aside class="s-chat s-maximize">
   <a href="#" id="pchat-hide" class="s-chat-header"><?php echo __('Chat With Librarian'); ?></a>
   <div class="s-chat-content">
-    <textarea id="log" name="log" readonly="readonly"></textarea>
+    <div id="log"></div>
     <label for="message">Message</label>
     <input type="text" id="message" name="message" />
   </div>
@@ -227,7 +227,7 @@
   function log( text ) {
     $log = $('#log');
     //Add text to log
-    $log.append(($log.val()?"\n":'')+text);
+    $log.append(($log.html()?'<br>':'') + text);
     //Autoscroll
     $log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight;
   }
@@ -242,8 +242,7 @@ function send( text ) {
     $('#message').keypress(function(e) {
       if ( e.keyCode == 13 && this.value ) {
         log( 'You: ' + this.value );
-        send( 'Member|'+this.value );
-
+        send( 'Member|' + this.value );
         $(this).val('');
       }
     });

diff --git a/template/default/less/chat.less b/template/default/less/chat.less
@@ -28,7 +28,7 @@
   position: fixed;
   bottom: 51px;
   right: 12px;
-  text-align: center;
+  text-align: left;
   width:275px;
   background: #fff;
   padding: 0;
@@ -38,6 +38,7 @@
 }
 
 .s-chat-header {
+  text-align: center;
   border-bottom: solid 1px #333;
   display: block;
   background-color: #282828;
@@ -69,20 +70,45 @@
 }
 
 .s-chat-content label {
-    padding:10px 0;
-    font-size: 8px;
-    text-transform: uppercase;
-    letter-spacing: 4px;
+  padding:10px 0;
+  font-size: 8px;
+  text-transform: uppercase;
+  letter-spacing: 4px;
 }
 
+.s-chat-content #log {
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: 200px;
+  padding:10px;
+  width: 100%;
+  border: solid 1px #ddd;
+  font-size: 12px;
+}
+
+.s-chat-content #log p {
+  line-height: 1;
+  padding-bottom:5px;
+  margin: 0;
+}
+
+/* Chat theme */
+.c1,  .c6, .c11, .c16 { color: #3E966E !important; }
+.c2,  .c7, .c12, .c17 { color: #F36C32 !important; }
+.c3,  .c8, .c13, .c18 { color: #2A7BCC !important; }
+.c4,  .c9, .c14, .c19 { color: #7C378A !important; }
+.c5, .c10, .c15, .c20 { color: #333333 !important; }
+
+
 .s-chat-content textarea,
-.s-chat-content input {
+#message {
   width: 100%;
   border: solid 1px #ddd;
-  padding:10px;
   font-size: 12px;
+  padding:10px;
 }
 
+.s-chat-content #log,
 .s-chat-content textarea {
   min-height: 200px;
   line-height: 24px;
@@ -95,7 +121,7 @@
 }
 
 .s-minimize {
-  bottom: -357px;
+  bottom: -215px;
   -webkit-transition: all 150ms ease;
   transition: all 150ms ease;
 }