Minor test UI tweaks

Author: gskinner

dev/sass/views/text.scss

@@ -10,6 +10,7 @@
 			padding-bottom: $pad*0.275;
 
 			&:last-child::after {
+				transition: opacity 1s;
 				font-size: 0.625rem;
 				padding: 0.25em 0.5em;
 				display: inline-block;
@@ -56,6 +57,10 @@
 		}
 	}
 
+	&.tests-viewed > header .modelist li:last-child::after {
+		opacity: 0;
+	}
+
 	.editor {
 		position: relative;
 		box-sizing: border-box;
@@ -102,13 +107,17 @@
 		overflow: auto;
 
 		.default {
-			display: none;
+			transition: opacity 1s;
 			padding: $pad $pad * 0.5;
 			color: $doc-dark;
 		}
 
 		.list:empty ~ .default {
-			display: block;
+			opacity: 1;
+		}
+
+		&.tests-added .default {
+			opacity: 0;
 		}
 
 		.add.button {

dev/src/views/Text.js

@@ -54,7 +54,10 @@ export default class Text extends EventDispatcher {
 	}
 
 	set tests(val) {
-		val = val instanceof Array ? val : [];
+		if (!(val instanceof Array)) {
+			val = [];
+			$.removeClass(this.testsEl, "tests-added");
+		}
 		this._tests = this.testList.data = val;
 		this._testMatches = null;
 		this._reselectTest();
@@ -96,6 +99,15 @@ export default class Text extends EventDispatcher {
 		}
 		return null;
 	}
+
+	getEmptyTest() {
+		return {
+			id: UID.id,
+			name: "",
+			text: "Enter your test text here.",
+			type: "any"
+		}
+	}
 
 // private methods:
 	_initUI(el) {
@@ -142,6 +154,7 @@ export default class Text extends EventDispatcher {
 	_handleModeChange(evt) {
 		this.dispatchEvent("modechange");
 		if (this.mode === "text") { this.editor.refresh(); }
+		else { $.addClass(this.el, "tests-viewed"); }
 	}
 
 	_setResult(val) {
@@ -276,10 +289,11 @@ export default class Text extends EventDispatcher {
 		];
 		this.typeLabels = types.reduce((o, t) => { o[t.id] = t.label; return o; }, {});
 
+		this.testsEl = $.query(".tests", el);
 		this.testItemEl = $.query("#library > #tests_item");
-		this.testListEl = $.query(".tests .list", el);
+		this.testListEl = $.query(".list", this.testsEl);
 		this.testList = new List(this.testListEl, {template:(o) => this._testItemTemplate(o)});
-		this.testList.scrollEl = $.query(".tests", el);
+		this.testList.scrollEl = this.testsEl;
 
 		this.testList.on("change", (evt) => this._handleTestChange(evt));
 
@@ -364,16 +378,12 @@ export default class Text extends EventDispatcher {
 	}
 
 	_addTest() {
-		const o = {
-			id: UID.id,
-			name: "",
-			text: "Enter your test text here.",
-			type: "any"
-		}
+		const o = this.getEmptyTest();
 		this._tests.push(o);
 		this.testList.addItem(o, true);
 		this._handleTestChange();
 		this.testEditor.execCommand("selectAll");
+		$.addClass(this.testsEl, "tests-added");
 		this._change();
 	}