some UI polishing

index.html

@@ -20,7 +20,7 @@ <h1>turtled</h1>
 	<div id="main">
 		<div id="in">
 			<div id="in-support">
-				<span class="ctrl-item" id="examples" title="click to show/hide">Examples ...</span>
+				<span class="ctrl-item" id="examples" title="click to show/hide"><img src="img/examples.png" alt="Examples" id="img-examples" /> Examples ...</span>
 				<span class="ctrl-item"><a href="http://groups.csail.mit.edu/haystack/blog/2008/11/06/a-quick-tutorial-on-the-tutrle-rdf-serialization/" target="_new" title="A Quick Tutorial on the Turtle RDF Serialization">Turtle tutorial ...</a></span>
 				<span class="ctrl-item"><a href="http://prefix.cc/" target="_new" title="namespace lookup for RDF developers">Prefixes ...</a></span>
 			</div>
@@ -31,7 +31,7 @@ <h1>turtled</h1>
 			</div>
 
 			<div id="currententry"></div>
-			<textarea id="tinput" rows="17" cols="70" title="Enter some valid RDF Turtle here and hit the 'Visualise!' button below ...">
+			<textarea id="tinput" rows="15" cols="70" title="Enter some valid RDF Turtle here and hit the 'Visualise!' button below ...">
 @prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
 @prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
 @prefix dc: <http://purl.org/dc/elements/1.1/> .
@@ -43,19 +43,27 @@ <h1>turtled</h1>
    rdfs:label "a thing" ;
 .
 </textarea>
+			<div id="status">Status: waiting for user input</div>
 			<div id="in-ctrl">
-				<button id="vis">Visualise!</button> <span id="restrict" title="click to show/hide">Restrict ...</span>
+				<button id="vis">Visualise!</button>
+				<button id="save">Save ...</button><span id="entries"></span>
+				<div id="restrict" title="click to show/hide"><img src="img/restrict.png" alt="Restrict" id="img-restrict" />Restrict ...</div>
 				<div id="restrictions">
-					<textarea id="sinput" rows="10" cols="70" title="Enter a valid SPARQL CONSTRUCT query here that will be applied to the input ...">
-CONSTRUCT { <http://example.org/#x> <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> ?o }
-WHERE { <http://example.org/#x> <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> ?o  }
+					<p>
+						The SPARQL CONSTRUCT query you enter, below, is applied to the RDF Turtle input before rendering.
+						If you're unfamiliar with SPARQL CONSTRUCT queries, have a look at Olaf Hartig's <a href="http://www2.informatik.hu-berlin.de/~hartig/tmp/HartigTutorialICWE12_2.pdf" title="An Introduction to SPARQL and Queries over Linked Data">tutorial</a>.
+					</p>
+					<textarea id="sinput" rows="8" cols="70" title="Enter a valid SPARQL CONSTRUCT query here that will be applied to the input ...">
+PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+
+CONSTRUCT {
+ <http://example.org/#x> rdf:type ?o .
+}
+WHERE {
+ <http://example.org/#x> rdf:type ?o .
+}
 					</textarea>
 				</div>
-				<div>
-					<button id="save">Save ...</button>
-					<span id="entries"></span>
-				</div>
-				<div id="status">Status: waiting for user input</div>
 			</div>
 		</div>
 		<div id="out"></div>

style.css

@@ -31,6 +31,9 @@ textarea {
 	box-shadow: 1px 1px 10px #303030;
 }
 
+img {
+	vertical-align: middle;
+}
 
 #info {
 	font-size: 50%;
@@ -60,7 +63,7 @@ textarea {
 
 #restrict {
 	font-size: 70%;
-	margin: 0 0 0 .5em;
+	margin: 20px 0 0 0;
 	cursor: pointer;
 }
 
@@ -69,6 +72,14 @@ textarea {
 	margin: 10px 0 0 0;
 }
 
+#restrictions p {
+	color: #a0a0a0;
+	font-weight: 100;
+	font-size: 70%;
+	margin: 1em 0 1em 0;
+	width: 600px;
+}
+
 #entries {
 	margin: 0 0 0 1em;
 }
@@ -89,7 +100,7 @@ textarea {
 
 #status {
 	padding: 5px;
-	margin: 2em 0;
+	margin: 10px 0 20px 0;
 	color: #909090;
 	text-align: right;
 	font-size: 60%;

turtled.js

@@ -103,12 +103,31 @@ $(document).ready(function(){
 		});
 
 		// handling examples
-		$("#examples").click(function(event){ $('#examples-sel').slideToggle('slow'); });
-		$("#ex1").click(function(event){ $('#tinput').val(ex1); });
-		$("#ex2").click(function(event){ $('#tinput').val(ex2); });
+		$("#examples").click(function(event){
+			$("#examples-sel").slideToggle('slow', function() {
+				if($("#examples-sel").is(":visible")){
+					$("#img-examples").css("border-left", "5px solid #f0f0f0"); 
+				}
+				else{
+					$("#img-examples").css("border", "0px solid #fafafa"); 
+				} 
+			  });
+		});
+		$("#ex1").click(function(event){ $("#tinput").val(ex1); });
+		$("#ex2").click(function(event){ $("#tinput").val(ex2); });
 
 		// handling restrictions (via SPARQL query)
-		$("#restrict").click(function(event){ $('#restrictions').slideToggle('slow'); });
+		$("#restrict").click(function(event){ 
+			$("#restrictions").slideToggle('slow', function() {
+				if($("#restrictions").is(":visible")){
+					$("#restrict").css("border-left", "5px solid #f0f0f0"); 
+				}
+				else{
+					$("#restrict").css("border", "0px solid #fafafa"); 
+				} 
+			  });
+
+		});
 
 		// handling entry save and load
 		$("#save").click(function(event){
@@ -212,9 +231,6 @@ function applyRestriction(store, query){
 	});
 }
 
-
-
-
 function renderGraph(containerID){
 	var renderer = Viva.Graph.View.renderer(graph, {
 		graphics: graphics,
@@ -232,8 +248,9 @@ function buildEntryList(){
 	for (var i=0; i < MAX_ENTRIES; i++) {
 		if(turtledstorage.getItem('turtled.net' + i)) {
 			var ename = getCLOB('turtled.net' + i ).name;
-			var timestamp = getCLOB('turtled.net' + i ).timestamp;			
-			$("#entries").append("<span class='entry' title='last updated on " +  timestamp + "' id='turtled.net" + i + "'>" + ename + "</span>");
+			var timestamp = getCLOB('turtled.net' + i ).timestamp;
+			$("#entries").append("<span class='entry' title='last updated on " +  timestamp + "' id='turtled.net" + i + "'><img src='img/entry.png' alt='Saved entry' />" + ename + "</span>");
+			entrycntr = i +  1;
 		}
 	}
 }