light styling of keywords in hint menu
authorNicholas Bollweg (Nick) <nick.bollweg@gmail.com>
Sun, 03 Nov 2013 08:48:48 -0500
changeset 2085 d33c7240318c
parent 2084 0a3d183d5236
child 2086 b36f07f5d785
light styling of keywords in hint menu
playground/index.html
playground/jsonld-hint.js
playground/playground.css
--- a/playground/index.html	Sun Nov 03 08:48:08 2013 -0500
+++ b/playground/index.html	Sun Nov 03 08:48:48 2013 -0500
@@ -29,6 +29,9 @@
     
     <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/theme/elegant.css" id="theme-stylesheet">
     
+    <link rel="stylesheet" type="text/css" href="./playground.css">
+    
+    
     <link rel="shortcut icon" href="../favicon.ico" />
   </head>
 
--- a/playground/jsonld-hint.js	Sun Nov 03 08:48:08 2013 -0500
+++ b/playground/jsonld-hint.js	Sun Nov 03 08:48:48 2013 -0500
@@ -30,12 +30,15 @@
   
   function keywordsLike(str){
     str = str ? String(str).trim() : "";
-    var result = accum(ldKeywords, function(_, kw, i){
+    var result = accum(ldKeywords, function(_, kw){
       !str || ~kw.indexOf(str) ? _('@' + kw) : null;
     });
     
     if(str){ result.sort(relevanceComparator(str)); }
-    return result;
+    
+    return accum(result, function(_, kw){
+      _({text: kw, className: "cm-meta"});
+    });
   }
   
   function contextLike(str, doc){
--- a/playground/playground.css	Sun Nov 03 08:48:08 2013 -0500
+++ b/playground/playground.css	Sun Nov 03 08:48:48 2013 -0500
@@ -1,97 +1,3 @@
-/**
- * Styling for the JSON-LD playground UI.
- */
-textarea:focus, input:focus {
-  border: 2px solid #900;
-}
-
-textarea {
-  display: inline;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  width:99% !important;
-  min-height:200px !important;
-}
-
-textarea.compressed {
-  display: inline;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  width:49% !important;
-  min-height:200px !important;
-}
-
-.clear { /* generic container (i.e. div) for floating buttons */
-  overflow: hidden;
-  width: 100%;
-}
-
-.input-header {
-  overflow: hidden;
-  width: 100%;
-  padding-top: 10px;
-}
-
-.input-header .left {
-  display: inline-block;
-}
-
-.input-header .right {
-  display: inline-block;
-  float: right;
-  width: 49% !important;
-}
-
-.errors {
-  font-style: bold;
-  color: red;
-}
-
-li.button-list {
-  display: inline-block;
-  margin-right: 6px;
-}
-
-li.button {
-  background: transparent url('images/bg_button.gif') no-repeat scroll top right;
-  color: #444;
-  display: inline-block;
-  font: normal 12px arial, sans-serif;
-  height: 24px;
-  margin-right: 6px;
-  padding-right: 18px; /* sliding doors padding */
-  text-decoration: none;
-  cursor: pointer;
-}
-
-li.button span {
-  background: transparent url('images/bg_button_span.gif') no-repeat;
-  display: block;
-  line-height: 14px;
-  padding: 5px 0 5px 18px;
-}
-
-li.button:active {
-  background-position: bottom right;
-  color: #000;
-  outline: none; /* hide dotted outline in Firefox */
-}
-
-li.button:active span {
-  background-position: bottom left;
-  padding: 6px 0 4px 18px; /* push text down 1px */
-}
-
-#permalink {
-  text-align: right;
-}
-
-
-/* Overrides for standard prettify.css */
-
-.prettyprint {
-  font-size: 0.8em;
-  overflow: auto;
-}
-
-#frame {display: none;}
+.CodeMirror-hint.cm-meta {
+  font-style: oblique;
+} 
\ No newline at end of file