gfse: example-based: some usability improvements

Instead of showing nothing, show disabled buttons and some expanatory text to
provide guidance for users getting started with example-based grammar writing.

src/www/gfse/cloud2.js

@@ -31,10 +31,10 @@ function upload(g) {
 	var form=node("form",{method:"post",action:"/cloud"},
 		      [hidden("dir",dir),hidden("command","make"),
 		       hidden(g.basename+".gf",show_abstract(g))])
-	var files = [g.basename+".gf"]
+	//var files = [g.basename+".gf"]
 	for(var i in g.concretes) {
 	    var cname=g.basename+g.concretes[i].langcode+".gf";
-	    files.push(cname);
+	    //files.push(cname);
 	    form.appendChild(hidden(cname,
 				    show_concrete(g.basename)(g.concretes[i])));
 	}

src/www/gfse/editor.css

@@ -52,7 +52,7 @@ div.template:hover
 .edit { color: orange; }
 .delete { color: red; }
 .error_message,.inError { color: red; }
-.template, .template .sep { color: #999; }
+.template, .template .sep, .unimportant { color: #999; }
 form { display: inline-block; }
 
 table.tabs {

src/www/gfse/editor.js

@@ -990,6 +990,7 @@ function inError(msg,el) {
 function kw(txt) { return wrap_class("span","kw",text(txt)); }
 function sep(txt) { return wrap_class("span","sep",text(txt)); }
 function ident(txt) { return wrap_class("span","ident",text(txt)); }
+function unimportant(txt) { return wrap_class("small","unimportant",text(txt)); }
 function indent(cs) { return div_class("indent",cs); }
 
 function indent_sortable(cs,sort) {

src/www/gfse/example_based.js

@@ -78,15 +78,24 @@ function exb_extra(g,ci) {
     function ask_poss() { ask_possibilities(g,ci) }
 
     if(navigator.onLine && g.concretes.length>1 && conc.example_based && !example_based[ci]) ask_poss();
-    return parser[conc.langcode] && g.concretes.length>1
+    var sb=button("Start",ask_poss)
-	? indent([text("Example based editing: "),
+    if(parser[conc.langcode] && g.concretes.length>1)
-		  conc.example_based
+	return indent([wrap("small",text("Example-based editing: ")),
-		  ? node("span",{},[button("Stop",stop_exb),
+		       conc.example_based
-				    text(" Example language: "),
+		         ? node("span",{},
-				    exblangmenu()
+				[button("Stop",stop_exb),
-				   ])
+				 wrap("small",text(" Example language: ")),
-		  : button("Start",ask_poss)])
+				 exblangmenu()
-	: text("")
+				])
+		         : sb])
+    else {
+	sb.disabled=true;
+	var why= g.concretes.length>1
+	    ? " ("+concname(conc.langcode)+" is not supported yet)"
+	    : " (Add another language to take examples from first.)"
+	return indent([unimportant("Example-based grammar editing: "), sb,
+	          unimportant(why)])
+    }
 }
 
 function fun_lincat(g,conc,fun) {
@@ -158,10 +167,15 @@ function exb_linbuttons(g,ci,f) {
     }
     var buttons=[];
     if(conc.example_based && eb) {
-	if(eb.exready[fun] && fun_lincat(g,conc,fun))
+	if(f.template) {
-	    buttons.push(button("By example",by_example))
+	    var byex=button("By example",by_example);
-	if(eb.testable[fun] && f.eb_lin) {
+	    if(!(eb.exready[fun] && fun_lincat(g,conc,fun)))
+		byex.disabled=true
+	    buttons.push(byex)
+	}
+	else {
 	    var b=button("Test it",test_it);
+	    if(!eb.testable[fun] || !f.eb_lin) b.disabled=true;
 	    buttons.push(b)
 	}
 	var exb_output=node("span",{"class":"exb_output"},[]);