From 5eab89d1f04419b8430408577102475b408725da Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@osmosoft.com>
Date: Fri, 2 Mar 2012 15:54:05 +0000
Subject: [PATCH] Improved styles for JavaScript comments

Because we all want skeuomorphic post-it note comments on our code
---
 js/JavaScriptParser.js | 15 ++++++++++-----
 tiddlywiki5/styles.css | 17 +++++++++++++++--
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/js/JavaScriptParser.js b/js/JavaScriptParser.js
index 53edc41eb..298a024be 100644
--- a/js/JavaScriptParser.js
+++ b/js/JavaScriptParser.js
@@ -48,20 +48,25 @@ JavaScriptParser.prototype.parse = function(type,code) {
 		renderComment = function(comment) {
 			var text = comment.value,
 				element,
-				classes = [];
+				classes = ["javascript-comment"],
+				content = [];
 			renderWhitespace(comment.range[0]);
 			if(comment.type === "Block") {
 				element = "div";
 				classes.push("javascript-block-comment");
+				content.push(Renderer.TextNode("/*"));
 			} else {
 				element = "span";
 				classes.push("javascript-line-comment");
+				content.push(Renderer.TextNode("//"));
 			}
-			result.push(Renderer.ElementNode(element,{"class": classes},
-					self.store.parseText("text/x-tiddlywiki",text).tree));
-			if(comment.type === "Line") {
-				result.push(Renderer.TextNode("\n"));
+			content.push.apply(content,self.store.parseText("text/x-tiddlywiki",text).tree);
+			if(comment.type === "Block") {
+				content.push(Renderer.TextNode("*/"));
+			} else {
+				content.push(Renderer.TextNode("\n"));
 			}
+			result.push(Renderer.ElementNode(element,{"class": classes},content));
 			currPos = comment.range[1] + 1;
 		},
 		renderToken = function(token) {
diff --git a/tiddlywiki5/styles.css b/tiddlywiki5/styles.css
index f1fe9d25d..52e1ecc92 100644
--- a/tiddlywiki5/styles.css
+++ b/tiddlywiki5/styles.css
@@ -301,14 +301,27 @@ a.tw-slider-label::after {
     color: #388;
 }
 
+.javascript-source .javascript-comment {
+    padding: 4px 4px 4px 4px;
+    border: 1px solid #feed77;
+    background: #feed77;
+    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#dede80),color-stop(7%,#feed77),color-stop(92%,#feed77),color-stop(100%,#dede80));
+    background: -webkit-linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0) 25%),-webkit-linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%);
+    background:    -moz-linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0) 25%),   -moz-linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%);
+    background:      -o-linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0) 25%),     -o-linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%);
+    background:     -ms-linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0) 25%),    -ms-linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%);
+    background:         linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0) 25%),        linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%);
+    -webkit-box-shadow: 1px 1px 6px rgba(0,0,0,0.4);
+       -moz-box-shadow: 1px 1px 6px rgba(0,0,0,0.4);
+            box-shadow: 1px 1px 6px rgba(0,0,0,0.4);
+}
+
 .javascript-source .javascript-block-comment {
     font-family: Helvetica, Arial, sans-serif;
-    background: #fff;
 }
 
 .javascript-source .javascript-line-comment {
     font-family: Helvetica, Arial, sans-serif;
-    background: #ff0;
 }