From 453e637504223a47f65a916b281fad353536b106 Mon Sep 17 00:00:00 2001 From: "Valeriano A.R" Date: Fri, 29 May 2015 00:38:37 +0200 Subject: [PATCH] Chat: Style changes. And new properties on ChatControl. --- Scrummer/Code/Controls/ChatControl.cs | 103 +++++++++++++++++++++++--- Scrummer/Scripts/10. Chat.js | 30 +++++--- Scrummer/Styles/10. Chat.css | 91 +++++++++++++++++++---- 3 files changed, 188 insertions(+), 36 deletions(-) diff --git a/Scrummer/Code/Controls/ChatControl.cs b/Scrummer/Code/Controls/ChatControl.cs index 211ade1..c03eaf7 100644 --- a/Scrummer/Code/Controls/ChatControl.cs +++ b/Scrummer/Code/Controls/ChatControl.cs @@ -10,14 +10,71 @@ namespace Scrummer.Code.Controls { public class ChatControl : Control { + #region Declarations + + private string _serviceUrl = "ChatHandler"; + private int _idBoard = 0; + private string _userName = string.Empty; + + private Unit _width = new Unit(500, UnitType.Pixel); + private Unit _height = new Unit(300, UnitType.Pixel); + + private Panel _divChatWindow = null; + + #endregion + + #region Properties + + public string ServiceUrl + { + get { return _serviceUrl; } + set { _serviceUrl = value; } + } + public int IDBoard { get { return _idBoard; } set { _idBoard = value; } } + public string UserName + { + get { return _userName; } + set { _userName = value; } + } + + public Unit Width + { + get { return _width; } + set + { + _width = value; + if (_divChatWindow != null) + { + _divChatWindow.Width = value; + } + } + } + + public Unit Height + { + get { return _height; } + set + { + _height = value; + if (_divChatWindow != null) + { + _divChatWindow.Height = value; + } + } + } + + #endregion + + #region Control Life cycle + public ChatControl() { Init += ChatControl_Init; @@ -25,28 +82,50 @@ namespace Scrummer.Code.Controls void ChatControl_Init(object sender, EventArgs e) { - var divChat = new Panel { ID = "divChat", CssClass = "divChat" }; - Controls.Add(divChat); + InitializeControls(); + } - var hidUserName = new HiddenField { ID = "hidUserName", Value = "VAR" }; - Controls.Add(hidUserName); + #endregion + + #region Private methods + + private void InitializeControls() + { + _divChatWindow = new Panel { ID = "divChatWindow", CssClass = "divChatWindow" }; + Controls.Add(_divChatWindow); + _divChatWindow.Width = _width; + _divChatWindow.Height = _height; + + var divChat = new Panel { ID = "divChat", CssClass = "divChat" }; + _divChatWindow.Controls.Add(divChat); + + var divChatControls = new Panel { ID = "divChatControls", CssClass = "divChatControls" }; + _divChatWindow.Controls.Add(divChatControls); + + var hidUserName = new HiddenField { ID = "hidUserName", Value = _userName }; + divChatControls.Controls.Add(hidUserName); var hidIDMessage = new HiddenField { ID = "hidIDMessage", Value = "0" }; - Controls.Add(hidIDMessage); + divChatControls.Controls.Add(hidIDMessage); + + var hidLastUser = new HiddenField { ID = "hidLastUser", Value = "" }; + divChatControls.Controls.Add(hidLastUser); var txtText = new TextBox { ID = "txtText", CssClass = "chatTextBox" }; - Controls.Add(txtText); + txtText.Attributes.Add("autocomplete", "off"); + divChatControls.Controls.Add(txtText); var btnSend = new Button { ID = "btnSend", Text = "Send", CssClass = "chatButton" }; - Controls.Add(btnSend); - btnSend.Attributes.Add("onclick", String.Format("SendChat('{0}',{1}, '{2}'); return false;", - txtText.ClientID, _idBoard, hidUserName.ClientID)); - + divChatControls.Controls.Add(btnSend); + btnSend.Attributes.Add("onclick", String.Format("SendChat('{0}', '{1}', {2}, '{3}'); return false;", + _serviceUrl, txtText.ClientID, _idBoard, hidUserName.ClientID)); LiteralControl litScript = new LiteralControl(); - litScript.Text = String.Format("", - divChat.ClientID, _idBoard, hidIDMessage.ClientID, hidUserName.ClientID); + litScript.Text = String.Format("", + _serviceUrl, divChat.ClientID, _idBoard, hidIDMessage.ClientID, hidUserName.ClientID, hidLastUser.ClientID); Controls.Add(litScript); } + + #endregion } } \ No newline at end of file diff --git a/Scrummer/Scripts/10. Chat.js b/Scrummer/Scripts/10. Chat.js index 35ed801..e189670 100644 --- a/Scrummer/Scripts/10. Chat.js +++ b/Scrummer/Scripts/10. Chat.js @@ -1,9 +1,10 @@ -function RunChat(divContainer, idBoard, hidIDMessage, hidUserName) { +function RunChat(serviceUrl, divContainer, idBoard, hidIDMessage, hidUserName, hidLastUser) { divContainer = GetElement(divContainer); hidIDMessage = GetElement(hidIDMessage); hidUserName = GetElement(hidUserName); + hidLastUser = GetElement(hidLastUser); - var CreateMessageDOM = function (message, selfMessage) { + var CreateMessageDOM = function (message, selfMessage, hidLastUser) { var divMessageRow = document.createElement("DIV"); if (selfMessage) { divMessageRow.className = "selfMessageRow"; @@ -15,10 +16,13 @@ divMessage.className = "message"; divMessageRow.appendChild(divMessage); - var divUser = document.createElement("DIV"); - divUser.className = "user"; - divUser.innerHTML = escapeHTML(message.UserName); - divMessage.appendChild(divUser); + if (hidLastUser.value !== message.UserName) { + var divUser = document.createElement("DIV"); + divUser.className = "user"; + divUser.innerHTML = escapeHTML(message.UserName); + divMessage.appendChild(divUser); + hidLastUser.value = message.UserName; + } var text = message.Text; @@ -31,7 +35,7 @@ }; var RequestChatData = function () { - var requestUrl = "ChatHandler?idBoard=" + idBoard + "&idMessage=" + hidIDMessage.value; + var requestUrl = serviceUrl + "?idBoard=" + idBoard + "&idMessage=" + hidIDMessage.value; var ReciveChatData = function (responseText) { recvMsgs = JSON.parse(responseText); @@ -43,7 +47,7 @@ if (idMessage < msg.IDMessage) { hidIDMessage.value = msg.IDMessage; idMessage = msg.IDMessage; - var elemMessage = CreateMessageDOM(msg, (msg.UserName == hidUserName.value)); + var elemMessage = CreateMessageDOM(msg, (msg.UserName == hidUserName.value), hidLastUser); frag.appendChild(elemMessage); } } @@ -70,14 +74,20 @@ RequestChatData(); } -function SendChat(txtText, idBoard, hidUserName) { +function SendChat(serviceUrl, txtText, idBoard, hidUserName) { txtText = GetElement(txtText); hidUserName = GetElement(hidUserName); + + if (txtText.value.trim() == "") { + return; + } + var data = { "text": txtText.value, "idBoard": idBoard, "userName": hidUserName.value }; txtText.value = ""; - SendData("ChatHandler", data, null, null); + SendData(serviceUrl, data, null, null); + txtText.focus(); } \ No newline at end of file diff --git a/Scrummer/Styles/10. Chat.css b/Scrummer/Styles/10. Chat.css index fb40772..1b13285 100644 --- a/Scrummer/Styles/10. Chat.css +++ b/Scrummer/Styles/10. Chat.css @@ -1,6 +1,21 @@ -.divChat { +.divChatWindow{ + box-sizing: border-box; + overflow: hidden; + border: solid 1px black; + padding: 5px; + border-radius: 5px; + background-color: rgb(220,220,220); + box-shadow: 0px 0px 5px black; +} + +.divChat { + box-sizing: border-box; overflow: auto; - height: 300px; + height: calc(100% - 37px); + margin-bottom: 5px; + border-radius: 5px; + border: solid 1px black; + box-shadow: inset 0px 0px 5px black; } .messageRow, @@ -14,27 +29,75 @@ .selfMessageRow { text-align: right; } -.message{ - display:inline-block; - vertical-align:top; - border: solid 1px rgb(32,32,32); - background-color:rgb(220,220,220); - border-radius:5px; - box-shadow: 0 0 10px rgb(0,0,0), - inset 0 2px 5px rgb(255,255,255), - inset 0 -2px 5px rgb(128,128,128); - margin:5px; - padding:5px; - font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; +.message { + box-sizing: border-box; + display: inline-block; + vertical-align: top; + border: solid 1px rgb(32, 32, 32); + background-color: rgb(220,220,220); + border-radius: 5px; + box-shadow: + 0px 0px 10px rgba(0,0,0,0.5), + inset 0px 2px 5px rgba(255,255,255,0.5), + inset 0px -2px 5px rgba(128,128,128,0.5); + margin: 2px; + padding: 5px; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } +.messageRow .message { + background-color: rgb(220,200,200); +} +.selfMessageRow .message { + background-color: rgb(200,220,200); +} + .message .user{ + box-sizing: border-box; color:rgb(64,64,64); text-shadow: 0 0 1px rgba(0,0,0,0.3); font-size:10px; font-weight:bold; } .message .text{ + box-sizing: border-box; color:rgb(32,32,32); text-shadow: 0 0 1px rgba(0,0,0,0.3); font-size:12px; } + +.divChatControls{ + +} + +.chatTextBox { + box-sizing: border-box; + padding: 5px; + box-shadow: inset 0px 0px 5px black; + width: calc(100% - 52px); + border-radius: 5px; + border: solid 1px black; + margin: 0 2px 0 0; + vertical-align: top; + height: 30px; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-size: 12px; + text-align: left; +} + + +.chatButton { + box-sizing: border-box; + padding: 5px; + box-shadow: + 0px 0px 10px rgba(0,0,0,0.5), + inset 0px 2px 5px rgba(255,255,255,1), + inset 0px -2px 5px rgba(128,128,128,1); + width: 50px; + vertical-align: top; + border-radius: 5px; + border: solid 1px black; + height: 30px; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-size: 12px; + text-align: center; +}