Merge pull request #88 from TheDMSGroup/ENG-262-date-formatting-ui

[ENG-262] Refactor field tokenization

Assets/css/00.codemirror.css

@@ -1,24 +1,77 @@
-/* Codemirror Mustache tags to style like our tag-editor tags (sorta) */
-@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
+/* Custom theme to be more friendly to non-developers */
+.cm-s-cc {
+    background: #fff;
+    color: #424242;
+    line-height: 22px;
+    font-family: 'Roboto Mono', Menlo, Monaco, Consolas, "Courier New", monospace !important;
+    font-size: 13px;
+    font-weight: normal;
+    padding: 0px;
+}
+
+.cm-s-cc .CodeMirror-gutters {
+    background: #fff;
+    color: #616161;
+    border: none;
+}
+/*.cm-s-cc .CodeMirror-cursors { visibility: visible !important; }*/
+.cm-s-cc .CodeMirror-cursor { border-left: 1px solid #303030 !important; background: #303030; width: 2px; }
+.cm-s-cc .CodeMirror-guttermarker,
+.cm-s-cc .CodeMirror-guttermarker-subtle,
+.cm-s-cc .CodeMirror-linenumber { color: rgb(83,127,126); }
+.cm-s-cc .CodeMirror-activeline-background { background: #b0bec5; }
+/*.cm-s-cc .CodeMirror-selected { background: #b0bec5; }*/
+.cm-s-cc .cm-comment { color: #616161; }
+.cm-s-cc .cm-string { color: #009688; }
+.cm-s-cc .cm-string-2 { color: #80CBC4; }
+.cm-s-cc .cm-number { color: #7e57c2; }
+.cm-s-cc .cm-atom { color: #7e57c2; }
+.cm-s-cc .cm-keyword { color: #ff5722; }
+.cm-s-cc .cm-variable { color: #009688; }
+.cm-s-cc .cm-def { color: #FD971F; }
+.cm-s-cc .cm-property { color: #0288d1; }
+.cm-s-cc .cm-tag { color: #1c75d1; }
+.cm-s-cc .cm-error { color: #EC5F67; }
+.cm-s-cc .cm-meta { color: #80CBC4; }
+.cm-s-cc .cm-operator { color: rgb(60, 73, 128); }
+.cm-s-cc .cm-variable-2 { color: #80CBC4; }
+.cm-s-cc .cm-variable-3 { color: #82B1FF; }
+.cm-s-cc .cm-builtin { color: #ad9e53; }
+.cm-s-cc .cm-attribute { color: #caa155; }
+.cm-s-cc .cm-qualifier { color: #a69850; }
+.cm-s-cc .CodeMirror-matchingbracket { font-weight: bold; color: #3c4980 !important; }
 
+/* Codemirror Mustache tags to style like our tag-editor tags (sorta) */
 .cm-mustache,
 .cm-mustache-danger,
 .cm-mustache-warn {
-    color: #fff;
-    background-color: #216EAB;
+    color: #424242;
+    background-color: rgba(187, 210, 236, 0.8);
     border-radius: 3px;
+    padding: 2px;
 }
 
 .cm-mustache-danger {
-    background-color: #d9534f;
+    /*background-color: #d9534f;*/
+    background-color: rgba(255, 124, 114, 0.8);
 }
 
 .cm-mustache-warn {
-    background-color: #e2a231;
+    /*background-color: #e2a231;*/
+    background-color: rgba(255, 195, 86, 0.8);
+}
+.cm-mustache.CodeMirror-matchingbracket,
+.cm-mustache-danger.CodeMirror-matchingbracket,
+.cm-mustache-warn.CodeMirror-matchingbracket {
+    color: #424242 !important;
+    font-weight: bold;
+    border-radius: 3px;
+    padding: 2px 0;
+    /*margin: 0 -1px;*/
 }
 
-.CodeMirror {
-    font-family: 'Source Code Pro', monospace;
-    font-size: 13px;
-    font-weight: normal;
+.cm-mustache.CodeMirror-selected,
+.cm-mustache-danger.CodeMirror-selected,
+.cm-mustache-warn.CodeMirror-selected {
+    background: #fff;
 }

Assets/css/03.api_payload.css

@@ -3,11 +3,6 @@
     margin-top: 42px;
 }
 
-.api_payload .CodeMirror,
-#contactclient_api_payload_codemirror .CodeMirror {
-    border: 0;
-}
-
 #api_payload_buttons {
     margin-bottom: -19px;
     position: relative;

Assets/css/03.api_payload_json.css

@@ -1,4 +1,11 @@
 /* ContactClient API Payload - JSON Editor customizations */
+.api_payload .contactclient_jsoneditor input[type="text"].form-control {
+    line-height: normal;
+    font-family: 'Roboto Mono', Menlo, Monaco, Consolas, "Courier New", monospace !important;
+    font-size: 13px;
+    font-weight: normal;
+    padding: 3px 6px;
+}
 .api_payload .contactclient_jsoneditor .well {
     background: none;
     border: 0;

Assets/css/13.ui.css

@@ -55,6 +55,10 @@ ul.CodeMirror-hints,
     padding: 4px;
     overflow-x: hidden;
     overflow-y: auto;
+    line-height: 22px;
+    font-family: 'Roboto Mono', Menlo, Monaco, Consolas, "Courier New", monospace !important;
+    font-size: 13px;
+    font-weight: normal;
 }
 
 ul.CodeMirror-hints li,
@@ -66,6 +70,6 @@ ul.CodeMirror-hints li,
 
 ul.CodeMirror-hints li.CodeMirror-hint-active,
 .nav.nav-pills.nav-stacked.bs-autocomplete-menu li.ui-menu-item.ui-state-focus {
-    background-color: #467ca2;
-    color: white;
+    color: #fff;
+    background-color: rgba(0, 86, 171, 0.8);
 }