From 71d81d2df924f850beb956ac0cb0baba7ef2e272 Mon Sep 17 00:00:00 2001 From: "Valeriano A.R" Date: Wed, 17 Jun 2015 00:05:13 +0200 Subject: [PATCH] Cards: Editing mode --- Scrummer/Controls/CardBoardControl.cs | 2 + Scrummer/Scripts/05. Cards.js | 103 +++++++++++++++++++++++++- Scrummer/Styles/05. Cards.css | 52 ++++++++++--- 3 files changed, 144 insertions(+), 13 deletions(-) diff --git a/Scrummer/Controls/CardBoardControl.cs b/Scrummer/Controls/CardBoardControl.cs index 02952af..6c757a1 100644 --- a/Scrummer/Controls/CardBoardControl.cs +++ b/Scrummer/Controls/CardBoardControl.cs @@ -83,6 +83,8 @@ namespace Scrummer.Controls sbCfg.AppendFormat(" ServiceUrl: \"{0}\",\n", _serviceUrl); sbCfg.AppendFormat(" TimePoolData: {0},\n", _timePoolData); sbCfg.AppendFormat(" Texts: {{\n"); + sbCfg.AppendFormat(" Accept: \"Accept\",\n"); + sbCfg.AppendFormat(" Cancel: \"Cancel\",\n"); sbCfg.AppendFormat(" ConfirmDelete: \"Are you sure to delete?\",\n"); sbCfg.AppendFormat(" StringEmpty: \"\"\n"); sbCfg.AppendFormat(" }}\n"); diff --git a/Scrummer/Scripts/05. Cards.js b/Scrummer/Scripts/05. Cards.js index 61ccbac..ba95dd1 100644 --- a/Scrummer/Scripts/05. Cards.js +++ b/Scrummer/Scripts/05. Cards.js @@ -29,16 +29,32 @@ this.btnEdit = document.createElement("button"); this.divCard.appendChild(this.btnEdit); - this.btnEdit.className = "btnEdit"; + this.btnEdit.className = "btnCard btnEdit"; this.btnEdit.innerHTML = "E"; this.btnEdit.addEventListener("click", Card.prototype.btnEdit_Click.bind(this), false); this.btnDelete = document.createElement("button"); this.divCard.appendChild(this.btnDelete); - this.btnDelete.className = "btnDelete"; + this.btnDelete.className = "btnCard btnDelete"; this.btnDelete.innerHTML = "X"; this.btnDelete.addEventListener("click", Card.prototype.btnDelete_Click.bind(this), false); + this.txtTitle = document.createElement("input"); + this.txtTitle.className = "txtTitle"; + + this.txtBody = document.createElement("textarea"); + this.txtBody.className = "txtBody"; + + this.btnAcceptEdit = document.createElement("button"); + this.btnAcceptEdit.className = "btnCard"; + this.btnAcceptEdit.innerHTML = this.cfg.Texts.Accept; + this.btnAcceptEdit.addEventListener("click", Card.prototype.btnAcceptEdit_Click.bind(this), false); + + this.btnCancelEdit = document.createElement("button"); + this.btnCancelEdit.className = "btnCard"; + this.btnCancelEdit.innerHTML = this.cfg.Texts.Cancel; + this.btnCancelEdit.addEventListener("click", Card.prototype.btnCancelEdit_Click.bind(this), false); + // Bind mouse event handlers this.bindedMouseDown = Card.prototype.MouseDown.bind(this); this.bindedMouseMove = Card.prototype.MouseMove.bind(this); @@ -59,6 +75,7 @@ this.newTitle = this.Title; this.newBody = this.Body; this.deleteCallback = null; + this.Editing = false; }; Card.prototype = { InsertInContainer: function (container) { @@ -71,12 +88,19 @@ Card.prototype = { Move: function (x, y) { this.X = x; this.Y = y; + this.newX = x; + this.newY = y; this.divCard.style.left = this.X + "px"; this.divCard.style.top = this.Y + "px"; }, Edit: function (title, body) { + if (this.Editing) { + this.ExitEditionMode(); + } this.Title = title; this.Body = body; + this.newTitle = title; + this.newBody = body; this.divTitle.innerHTML = this.Title; this.divBody.innerHTML = this.Body; }, @@ -129,6 +153,35 @@ Card.prototype = { }); } }, + OnEdit: function () { + if (this.Title != this.newTitle || this.Body != this.newBody) { + var card = this; + if (this.cfg.Connected == false) { + card.Reset(); + } + var data = { + "IDBoard": this.cfg.IDBoard, + "Command": "Edit", + "IDCard": this.IDCard, + "Title": this.newTitle, + "Body": this.newBody, + "TimeStamp": new Date().getTime() + }; + SendData(this.cfg.ServiceUrl, data, + function (responseText) { + try { + var recvData = JSON.parse(responseText); + if (recvData && recvData instanceof Object && recvData.IsOK == true) { + card.SetNew(); + } else { + card.Reset(); + } + } catch (e) { } + }, function () { + card.Reset(); + }); + } + }, GetRelativePosToContainer: function (pos) { var tempElem = this.container; var relPos = { x: pos.x, y: pos.y }; @@ -201,9 +254,53 @@ Card.prototype = { evt.preventDefault(); return false; }, + EnterEditionMode: function(){ + this.divTitle.innerHTML = ""; + this.txtTitle.value = this.Title; + this.divTitle.appendChild(this.txtTitle); + + this.divBody.innerHTML = ""; + this.txtBody.value = this.Body; + this.divBody.appendChild(this.txtBody); + this.divBody.appendChild(document.createElement("br")); + this.divBody.appendChild(this.btnAcceptEdit); + this.divBody.appendChild(this.btnCancelEdit); + + this.divOverlay.style.display = "none"; + this.Editing = true; + }, + ExitEditionMode: function(){ + this.divTitle.removeChild(this.txtTitle); + this.divBody.removeChild(this.txtBody); + this.divBody.removeChild(this.btnAcceptEdit); + this.divBody.removeChild(this.btnCancelEdit); + this.divOverlay.style.display = ""; + this.Editing = false; + }, btnEdit_Click: function (evt) { evt.preventDefault(); - + if (this.Editing == false) { + this.EnterEditionMode(); + } else { + this.ExitEditionMode(); + this.Reset(); + } + return false; + }, + btnAcceptEdit_Click: function (evt) { + evt.preventDefault(); + this.newTitle = this.txtTitle.value; + this.newBody = this.txtBody.value; + this.ExitEditionMode(); + this.divTitle.innerHTML = this.newTitle; + this.divBody.innerHTML = this.newBody; + this.OnEdit(); + return false; + }, + btnCancelEdit_Click: function (evt) { + evt.preventDefault(); + this.ExitEditionMode(); + this.Reset(); return false; }, btnDelete_Click: function (evt) { diff --git a/Scrummer/Styles/05. Cards.css b/Scrummer/Styles/05. Cards.css index 7c03834..bdfac31 100644 --- a/Scrummer/Styles/05. Cards.css +++ b/Scrummer/Styles/05. Cards.css @@ -9,10 +9,16 @@ } .divCard .divTitle{ + padding-bottom: 5px; + padding-right: 44px; + font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; + font-size: 12px; font-weight: bold; text-align: center; - padding-bottom: 5px; - padding-right: 44px +} +.divCard .divBody{ + font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; + font-size: 12px; } .divCard .divOverlay{ @@ -25,23 +31,49 @@ right: 0; } -.divCard .btnEdit, -.divCard .btnDelete{ - position:absolute; +.divCard .btnCard{ + margin-top: 5px; + margin-right: 5px; + padding: 2px; border:solid 1px black; - width:16px; - top: 4px; color: black; background-color: transparent; + font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; + font-size: 12px; } -.divCard .btnEdit:hover, -.divCard .btnDelete:hover{ +.divCard .btnCard:hover{ color: yellow; background-color: black; } .divCard .btnEdit{ + margin:0; + top: 4px; + position:absolute; + width:16px; right: 24px; } .divCard .btnDelete { + margin:0; + top: 4px; + position:absolute; + width:16px; right: 4px -} \ No newline at end of file +} + +.divCard .txtTitle { + width:100%; + font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; + font-size: 12px; + background-color: transparent; + border:solid 1px black; + padding: 2px; +} +.divCard .txtBody { + min-height: 150px; + width:100%; + font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; + font-size: 12px; + background-color: transparent; + border:solid 1px black; + padding: 2px; +}