VAR/VAR.WebFormsCore
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chat: Style changes. And new properties on ChatControl.

Browse Source
This commit is contained in:
Valeriano A.R.
2015-05-29 00:38:37 +02:00
parent f100b4b038
commit 453e637504
3 changed files with 188 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
Scrummer/Code/Controls/ChatControl.cs
View File

@@ -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("<script>RunChat('{0}',{1},'{2}','{3}');</script>",
divChat.ClientID, _idBoard, hidIDMessage.ClientID, hidUserName.ClientID);
litScript.Text = String.Format("<script>RunChat('{0}', '{1}', {2}, '{3}', '{4}', '{5}');</script>",
_serviceUrl, divChat.ClientID, _idBoard, hidIDMessage.ClientID, hidUserName.ClientID, hidLastUser.ClientID);
Controls.Add(litScript);
}
#endregion
}
}

30
Scrummer/Scripts/10. Chat.js
View File

@@ -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();
}

91
Scrummer/Styles/10. Chat.css
View File

@@ -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;
}