summaryrefslogtreecommitdiff
path: root/src/ws
diff options
context:
space:
mode:
Diffstat (limited to 'src/ws')
-rw-r--r--src/ws/munia.css110
-rw-r--r--src/ws/node.js20
-rw-r--r--src/ws/view.js13
3 files changed, 86 insertions, 57 deletions
diff --git a/src/ws/munia.css b/src/ws/munia.css
index 8abfa08..6841731 100644
--- a/src/ws/munia.css
+++ b/src/ws/munia.css
@@ -1,38 +1,46 @@
-/* Prevent the text contents of draggable elements from being selectable. */
-[draggable]
-{
- -moz-user-select: none;
- -khtml-user-select: none;
- -webkit-user-select: none;
- user-select: none;
-}
-
body
{
cursor: default;
font-family: helvetica, arial, sans-serif;
font-size: 0.8em;
+ color: #4d596c;
+ background-color: #f4f5f7;
}
.node
{
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- -o-user-select: none;
user-select: none;
cursor: move;
- background-color: #aaa;
+ background-color: white;
border-style: solid;
border-width: 1px;
- border-color: black;
+ border-color: #dadde2;
border-radius: 3px;
- padding: 0px;
+ padding: 1em;
margin: 0px;
margin-left: auto;
margin-right: auto;
+ box-shadow: 1px 1px 1px #666;
+}
+
+.board .node
+{
+ background-color: #edf5ff;
+}
+
+.board .node .children
+{
+ background-color: #edf5ff;
+}
+
+.children .node
+{
+ background-color: white;
+}
+
+.children .node .children
+{
+ background-color: #f4f5f7;
}
.node + .node
@@ -42,7 +50,6 @@ body
.node .data
{
- background-color: grey;
}
.node .id
@@ -54,39 +61,49 @@ body
min-width: 2.8em;
display: inline-block;
pointer-events: none;
- margin-left: 2px;
+ padding-right: 0.3px;
}
.node .title
{
+ clear: both;
float: left;
font-weight: bold;
font-size: 1.1em;
background: transparent;
pointer-events: auto;
- width: 65%;
+ min-width: 20em;
+ width: 100%;
min-height: 1.1em;
+ padding-top: 0.4em;
+}
+
+.title:hover,
+.description:hover
+{
+ background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.07), rgba(0,0,0,0));
}
.node .state
{
float: right;
- padding-left: 5px;
- padding-right: 5px;
- background: transparent;
+ padding: 0.3em 1em 0.3em 1em;
+ margin-right: 0.3em;
pointer-events: auto;
cursor: pointer;
- background-color: #aaa;
- border: solid 1px #666;
+ border-radius: 3px;
+ text-transform: uppercase;
+ font-size: 0.8em;
+ font-weight: bold;
+ color: black;
}
.node .description
{
- border-top: solid black 1px;
display: block;
clear: both;
- padding-left: 5px;
- background: #999;
+ padding-top: 0.5em;
+ padding-bottom: 1em;
pointer-events: auto;
min-height: 0.5em;
}
@@ -107,14 +124,20 @@ body
.node .button
{
float: right;
- display: inline-box;
- width: 1em;
+ width: 1.6em;
+ height: 1.5em;
+ padding-top: 0.1em;
vertical-align: text-center;
text-align: center;
cursor: pointer;
pointer-events: auto;
- background-color: #aaa;
- border: solid 1px #666;
+ background-color: #ebedf0;
+ border-radius: 3px;
+}
+
+.button + .button
+{
+ margin-right: 0.3em;
}
.node .children
@@ -122,30 +145,33 @@ body
clear: both;
padding: 6px;
min-height: 5px;
- border: dotted 1px black;
overflow: hidden;
+ background-color: #f4f5f7;
}
.collapsed .children
{
- clear: both;
- background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
- max-height: 0px;
- padding-top: 0px;
- opacity: 0.2;
+ display: none;
}
.collapsed .description
{
height: 0px;
+ padding: 0px;
overflow: hidden;
min-height: 0px;
}
+.collapsed .title
+{
+ clear: none;
+ padding: 0px;
+ width: unset;
+}
+
.board
{
- min-height: 200px;
- width: 500px;
+ width: 48%;
padding: 8px;
margin: 2px;
display: inline-box;
@@ -162,6 +188,6 @@ body
color: #0f0;
background-color: #111;
border: 1px solid #030;
- border-radius: 4px;
+ border-radius: 3px;
overflow: auto;
}
diff --git a/src/ws/node.js b/src/ws/node.js
index 76ad7e3..4c63496 100644
--- a/src/ws/node.js
+++ b/src/ws/node.js
@@ -173,11 +173,6 @@ Node.prototype.create = function()
this.id_element.appendChild(id_txt);
this.data_element.appendChild(this.id_element);
- this.title_element = document.createElement("div");
- this.title_element.setAttribute("class", "title");
- this.title_element.setAttribute("ondblclick", "editTitle(event)");
- this.data_element.appendChild(this.title_element);
-
var add_child_button = document.createElement("div");
add_child_button.name = "add_button";
add_child_button.setAttribute("onclick", "addChild(event)");
@@ -199,9 +194,14 @@ Node.prototype.create = function()
this.state_element.setAttribute("onclick", "changeState(event)");
this.state_element.setAttribute("nodeid", this.id);
this.state_element.setAttribute("class", "state");
- this.state_element.innerHTML = "todo";
+ this.setAttribute("state", "todo");
this.data_element.appendChild(this.state_element);
+ this.title_element = document.createElement("div");
+ this.title_element.setAttribute("class", "title");
+ this.title_element.setAttribute("ondblclick", "editTitle(event)");
+ this.data_element.appendChild(this.title_element);
+
this.description_element = document.createElement("div");
this.description_element.setAttribute("class", "description");
this.description_element.setAttribute("ondblclick", "editDescription(event)");
@@ -332,19 +332,19 @@ Node.prototype.setAttribute = function(name, value)
this.state_element.appendChild(txt);
if(value == "done")
{
- this.state_element.style.color = "green";
+ this.state_element.style.backgroundColor = "#36b37e";
}
else if(value == "in-progress")
{
- this.state_element.style.color = "yellow";
+ this.state_element.style.backgroundColor = "#ffd351";
}
else if(value == "blocked")
{
- this.state_element.style.color = "red";
+ this.state_element.style.backgroundColor = "#da4343";
}
else
{
- this.state_element.style.color = "black";
+ this.state_element.style.backgroundColor = "#ebedf0";
}
}
};
diff --git a/src/ws/view.js b/src/ws/view.js
index 1586389..4be20aa 100644
--- a/src/ws/view.js
+++ b/src/ws/view.js
@@ -125,7 +125,8 @@ function dragenter(e)
{
return;
}
- e.target.style.backgroundColor = "#646588";
+
+ e.target.style.backgroundColor = "#c4ffd0";
last_over = e.target;
}
@@ -139,7 +140,7 @@ function dragover(e)
// }
e.preventDefault();
-
+/*
var after = getElementAfter(e);
if(last_after != null)
{
@@ -150,6 +151,7 @@ function dragover(e)
after.style.borderColor = "red black black black";
}
last_after = after;
+*/
}
function dragleave(e)
@@ -160,7 +162,7 @@ function dragleave(e)
return;
}
- e.target.style.backgroundColor = "#aaa";
+ e.target.style.backgroundColor = "";
}
function dragEnd(e)
@@ -177,7 +179,7 @@ function dragEnd(e)
// return;
// }
- e.target.style.backgroundColor = "#aaa";
+ //e.target.style.backgroundColor = "";
if(last_after != null)
{
@@ -187,7 +189,7 @@ function dragEnd(e)
if(last_over != null)
{
- last_over.style.backgroundColor = "#aaa";
+ last_over.style.backgroundColor = "";
last_over = null;
}
@@ -352,6 +354,7 @@ function onLostFocusHandler(e)
function editTitle(e)
{
+ console.log("!");
e.stopPropagation();
const idstr = e.target.parentElement.parentElement.id;
var node = findNodeFromString(idstr);
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-28 15:41:06 +0000