Revize fe611231

fixed Group name not to overflow its container

sources/src/main/webapp/css/main.css

@@ -449 +449 @@
 }
 
 .viewport .group .group-name {
+	display: inline-block;
+	white-space: nowrap;
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
 	cursor: text;
 }
 
@@ -607 +612 @@
 }
 
 .sidebar .group-name {
-    position: absolute;
-    top: 0;
-    left: 70px;
-    font-size: 1.2em;
+	position: absolute;
+	top: 0;
+	left: 70px;
+	width: 230px;
+	font-size: 1.2em;
 	line-height: 1.6rem;
+	white-space: nowrap;
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
 	cursor: text;
 }
 

sources/src/main/webapp/js/components/group.js

@@ -510 +510 @@
 		}));
 
 		// name
-		var nameText = app.utils.createSvgElement('text', {
+		var nameTextInner = app.dom.createHtmlElement('span', {
 			'class': 'group-name',
-			'x': 5,
-			'y': 15,
 		});
-		nameText.appendChild(document.createTextNode(this.name));
+		nameTextInner.appendChild(app.dom.createTextElement(this.name));
+
+		var nameText = app.utils.createSvgElement('foreignObject', {
+			'x': 4,
+			'y': 4,
+			'width': 46,
+			'height': 16,
+		});
+		nameText.appendChild(nameTextInner);
 		nameText.addEventListener('click', nameClick.bind(this));
 		rootElement.appendChild(nameText);
 
@@ -535 +541 @@
 		dissolveButton.appendChild(app.utils.createSvgElement('rect', {
 			'rx': 4,
 			'ry': 4,
-			'x': 52,
+			'x': 54,
 			'y': 4,
 			'height': 14,
 			'width': 14,
 		}));
 		dissolveButton.appendChild(app.utils.createSvgElement('line', {
-			'x1': 55,
+			'x1': 57,
 			'y1': 7,
-			'x2': 63,
+			'x2': 65,
 			'y2': 15,
 		}));
 		dissolveButton.appendChild(app.utils.createSvgElement('line', {
-			'x1': 63,
+			'x1': 65,
 			'y1': 7,
-			'x2': 55,
+			'x2': 57,
 			'y2': 15,
 		}));
 		dissolveButton.addEventListener('click', dissolveClick.bind(this));
@@ -731 +737 @@
 		if (newValue !== null) {
 			this.name = newValue;
 
-			rootElement.querySelector('.group-name').textContent = this.name;
+			rootElement.querySelector('.group-name').innerText = this.name;
 		}
 	}