From 5ccfb909e64c152be04e6e2f77ed7546170176c0 Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Fri, 25 Dec 2015 16:48:15 +0100
Subject: [PATCH] New design

---
 src/css/contextmenu.css          |  5 ++-
 src/css/img/jsoneditor-icons.svg | 68 ++++++++++++++++----------------
 src/css/jsoneditor.css           |  2 +-
 src/css/menu.css                 | 24 +++++------
 src/css/searchbox.css            |  2 +-
 src/js/ace/theme-jsoneditor.js   |  4 +-
 src/js/textmode.js               | 22 ++++++-----
 7 files changed, 66 insertions(+), 61 deletions(-)

diff --git a/src/css/contextmenu.css b/src/css/contextmenu.css
index ea1f71d..5a9ef80 100644
--- a/src/css/contextmenu.css
+++ b/src/css/contextmenu.css
@@ -145,7 +145,8 @@
 /* ContextMenu - sub menu */
 
 .jsoneditor-contextmenu ul li .selected {
-  background-color: #D5DDF6;
+  color: white;
+  background-color: #ec3f29;
 }
 
 .jsoneditor-contextmenu ul li {
@@ -174,12 +175,12 @@
 
 .jsoneditor-contextmenu ul li ul li button {
   padding-left: 24px;
+  animation: all ease-in-out 1s;
 }
 
 .jsoneditor-contextmenu ul li ul li button:hover,
 .jsoneditor-contextmenu ul li ul li button:focus {
   background-color: #f5f5f5;
-
 }
 
 .jsoneditor-contextmenu button.type-string > .icon {
diff --git a/src/css/img/jsoneditor-icons.svg b/src/css/img/jsoneditor-icons.svg
index 397f265..bb1341d 100644
--- a/src/css/img/jsoneditor-icons.svg
+++ b/src/css/img/jsoneditor-icons.svg
@@ -11,7 +11,7 @@
    height="144"
    id="svg4136"
    version="1.1"
-   inkscape:version="0.91 r13725"
+   inkscape:version="0.91 r"
    sodipodi:docname="jsoneditor-icons.svg">
   <title
      id="title6512">JSON Editor Icons</title>
@@ -38,17 +38,17 @@
      guidetolerance="10"
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
-     inkscape:window-width="1858"
-     inkscape:window-height="1057"
+     inkscape:window-width="1920"
+     inkscape:window-height="1028"
      id="namedview4144"
      showgrid="true"
      inkscape:zoom="4"
-     inkscape:cx="131.6245"
-     inkscape:cy="122.77857"
-     inkscape:window-x="-8"
-     inkscape:window-y="-8"
+     inkscape:cx="41.516298"
+     inkscape:cy="105.31073"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
      inkscape:window-maximized="1"
-     inkscape:current-layer="g4430"
+     inkscape:current-layer="g4394"
      showguides="false"
      borderlayer="false"
      inkscape:showpageshadow="true"
@@ -78,9 +78,9 @@
          width="16"
          y="3.999995"
          x="28.000006"
-         style="fill:#fd3118;fill-opacity:1;stroke:none;stroke-width:0" />
+         style="fill:#ec3f29;fill-opacity:0.94117647;stroke:none;stroke-width:0" />
       <rect
-         style="fill:#97b0f8;fill-opacity:1;stroke:none;stroke-width:0"
+         style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
          x="52.000004"
          y="3.999995"
          width="16"
@@ -92,14 +92,14 @@
          width="16"
          y="3.9999852"
          x="172.00002"
-         style="fill:#98b0f6;stroke:none;stroke-width:0" />
+         style="fill:#4c4c4c;stroke:none;stroke-width:0;fill-opacity:1" />
       <rect
          id="rect4175-3"
          height="16"
          width="16"
          y="3.999995"
          x="196"
-         style="fill:#98b0f6;stroke:none;stroke-width:0" />
+         style="fill:#4c4c4c;stroke:none;stroke-width:0;fill-opacity:1" />
       <g
          id="g4299"
          style="stroke:none">
@@ -145,7 +145,7 @@
          x="55.000004"
          style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
       <rect
-         style="fill:#ffffff;fill-opacity:1;stroke:#98b0f6;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none"
+         style="fill:#ffffff;fill-opacity:1;stroke:#4c4c4c;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          x="58"
          y="10.00001"
          width="6.9999909"
@@ -157,7 +157,7 @@
          width="6.9999909"
          y="10.000005"
          x="58.000004"
-         style="fill:#ffffff;fill-opacity:1;stroke:#98b0f6;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none" />
+         style="fill:#ffffff;fill-opacity:1;stroke:#3c80df;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
       <g
          id="g4378">
         <rect
@@ -208,7 +208,7 @@
            id="rect4389" />
       </g>
       <rect
-         style="fill:#97b0f8;fill-opacity:1;stroke:none"
+         style="fill:#4c4c4c;fill-opacity:1;stroke:none"
          id="rect3754-4"
          width="16"
          height="16"
@@ -227,7 +227,7 @@
          inkscape:connector-curvature="0"
          sodipodi:nodetypes="cccccccc" />
       <rect
-         style="fill:#97b0f8;fill-opacity:1;stroke:none"
+         style="fill:#4c4c4c;fill-opacity:1;stroke:none"
          id="rect3754-25"
          width="16"
          height="16"
@@ -244,7 +244,7 @@
          id="path2987-1"
          inkscape:connector-curvature="0" />
       <rect
-         style="fill:#97b0f8;fill-opacity:1;stroke:none"
+         style="fill:#4c4c4c;fill-opacity:1;stroke:none"
          id="rect3754-73"
          width="16"
          height="16"
@@ -257,12 +257,12 @@
          inkscape:connector-curvature="0"
          sodipodi:nodetypes="ccccccccc" />
       <path
-         style="fill:#97b0f8;fill-opacity:1;stroke:none"
+         style="fill:#4c4c4c;fill-opacity:1;stroke:none"
          d="m 129.72704,13.478838 4.60852,0.01 -2.30426,-5.5497996 z"
          id="path3782"
          inkscape:connector-curvature="0" />
       <rect
-         style="fill:#97b0f8;fill-opacity:1;stroke:none"
+         style="fill:#4c4c4c;fill-opacity:1;stroke:none"
          id="rect3754-35"
          width="16"
          height="16"
@@ -717,72 +717,72 @@
      width="15.99999"
      y="101"
      x="76.000008"
-     style="fill:#4c4c4c;fill-opacity:0.8;stroke:none;stroke-width:0" />
+     style="fill:#ffffff;fill-opacity:0.80000007;stroke:none;stroke-width:0" />
   <rect
      id="rect4761-0"
      height="1.9999945"
      width="15.99999"
      y="105"
      x="76.000008"
-     style="fill:#4c4c4c;fill-opacity:0.8;stroke:none;stroke-width:0" />
+     style="fill:#ffffff;fill-opacity:0.80000007;stroke:none;stroke-width:0" />
   <rect
      id="rect4761-7"
      height="1.9999945"
      width="9"
      y="109"
      x="76.000008"
-     style="fill:#4c4c4c;fill-opacity:0.8;stroke:none;stroke-width:0" />
+     style="fill:#ffffff;fill-opacity:0.80000007;stroke:none;stroke-width:0" />
   <rect
      id="rect4761-1-1"
      height="1.9999945"
      width="12"
      y="125"
      x="76.000008"
-     style="fill:#4c4c4c;fill-opacity:0.8;stroke:none;stroke-width:0" />
+     style="fill:#ffffff;fill-opacity:0.80000007;stroke:none;stroke-width:0" />
   <rect
      id="rect4761-1-1-4"
      height="1.9999945"
      width="10"
      y="137"
      x="76.000008"
-     style="fill:#4c4c4c;fill-opacity:0.8;stroke:none;stroke-width:0" />
+     style="fill:#ffffff;fill-opacity:0.80000007;stroke:none;stroke-width:0" />
   <rect
      id="rect4761-1-1-4-4"
      height="1.9999945"
      width="10"
      y="129"
      x="82"
-     style="fill:#4c4c4c;fill-opacity:0.8;stroke:none;stroke-width:0" />
+     style="fill:#ffffff;fill-opacity:0.80000007;stroke:none;stroke-width:0" />
   <rect
      id="rect4761-1-1-4-4-3"
      height="1.9999945"
      width="9"
      y="133"
      x="82"
-     style="fill:#4c4c4c;fill-opacity:0.8;stroke:none;stroke-width:0" />
+     style="fill:#ffffff;fill-opacity:0.80000007;stroke:none;stroke-width:0" />
   <path
      inkscape:connector-curvature="0"
-     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.8;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.8;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
      d="m 36.398438,100.0254 c -0.423362,-0.013 -0.846847,0.01 -1.265626,0.062 -1.656562,0.2196 -3.244567,0.9739 -4.507812,2.2266 L 29,100.5991 l -2.324219,7.7129 7.826172,-1.9062 -1.804687,-1.9063 c 1.597702,-1.5308 4.048706,-1.8453 5.984375,-0.7207 1.971162,1.1452 2.881954,3.3975 2.308593,5.5508 -0.573361,2.1533 -2.533865,3.6953 -4.830078,3.6953 l 0,3.0742 c 3.550756,0 6.710442,-2.4113 7.650391,-5.9414 0.939949,-3.5301 -0.618463,-7.2736 -3.710938,-9.0703 -1.159678,-0.6738 -2.431087,-1.0231 -3.701171,-1.0625 z"
      id="path4138" />
   <path
      inkscape:connector-curvature="0"
-     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.8;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.8;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
      d="m 59.722656,99.9629 c -1.270084,0.039 -2.541493,0.3887 -3.701172,1.0625 -3.092475,1.7967 -4.650886,5.5402 -3.710937,9.0703 0.939949,3.5301 4.09768,5.9414 7.648437,5.9414 l 0,-3.0742 c -2.296214,0 -4.256717,-1.542 -4.830078,-3.6953 -0.573361,-2.1533 0.337432,-4.4056 2.308594,-5.5508 1.935731,-1.1246 4.38863,-0.8102 5.986326,0.7207 l -1.806638,1.9063 7.828128,1.9062 -2.32422,-7.7129 -1.62696,1.7168 c -1.26338,-1.2531 -2.848917,-2.0088 -4.505855,-2.2285 -0.418778,-0.055 -0.842263,-0.076 -1.265625,-0.062 z"
      id="path4138-1" />
   <path
      inkscape:connector-curvature="0"
-     style="opacity:0.8;fill:#4d4d4d;fill-opacity:1;stroke:none"
+     style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.966;stroke-miterlimit:4;stroke-dasharray:none"
      d="m 10.5,100 0,2 -2.4999996,0 L 12,107 l 4,-5 -2.5,0 0,-2 -3,0 z"
      id="path3055-0-77" />
   <path
-     style="opacity:0.8;fill:none;stroke:#4d4d4d;stroke-width:1.96577585;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     style="opacity:0.8;fill:none;stroke:#ffffff;stroke-width:1.966;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
      d="m 4.9850574,108.015 14.0298856,-0.03"
      id="path5244-5-0-5"
      inkscape:connector-curvature="0"
      sodipodi:nodetypes="cc" />
   <path
-     style="opacity:0.8;fill:none;stroke:#4d4d4d;stroke-width:1.96577585;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     style="opacity:0.8;fill:none;stroke:#ffffff;stroke-width:1.966;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
      d="m 4.9849874,132.015 14.0298866,-0.03"
      id="path5244-5-0-5-8"
      inkscape:connector-curvature="0"
@@ -800,17 +800,17 @@
   <path
      id="path6191"
      d="m 10.5,116 0,-2 -2.4999996,0 L 12,109 l 4,5 -2.5,0 0,2 -3,0 z"
-     style="opacity:0.8;fill:#4d4d4d;fill-opacity:1;stroke:none"
+     style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.966;stroke-miterlimit:4;stroke-dasharray:none"
      inkscape:connector-curvature="0" />
   <path
      inkscape:connector-curvature="0"
-     style="opacity:0.8;fill:#4d4d4d;fill-opacity:1;stroke:none"
+     style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.966;stroke-miterlimit:4;stroke-dasharray:none"
      d="m 10.5,129 0,-2 -2.4999996,0 L 12,122 l 4,5 -2.5,0 0,2 -3,0 z"
      id="path6193" />
   <path
      id="path6195"
      d="m 10.5,135 0,2 -2.4999996,0 L 12,142 l 4,-5 -2.5,0 0,-2 -3,0 z"
-     style="opacity:0.8;fill:#4d4d4d;fill-opacity:1;stroke:none"
+     style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.966;stroke-miterlimit:4;stroke-dasharray:none"
      inkscape:connector-curvature="0" />
   <path
      sodipodi:type="star"
diff --git a/src/css/jsoneditor.css b/src/css/jsoneditor.css
index 1585a6a..4314f0c 100644
--- a/src/css/jsoneditor.css
+++ b/src/css/jsoneditor.css
@@ -138,7 +138,7 @@
 
 .jsoneditor {
   color: #1A1A1A;
-  border: 1px solid #97B0F8;
+  border: 1px solid #4095d9;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
diff --git a/src/css/menu.css b/src/css/menu.css
index fd5fe54..edbf8ce 100644
--- a/src/css/menu.css
+++ b/src/css/menu.css
@@ -9,9 +9,9 @@
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 
-  color: #1A1A1A;
-  background-color: #D5DDF6;
-  border-bottom: 1px solid #97B0F8;
+  color: white;
+  background-color: #3c80d9;
+  border-bottom: 1px solid #3c80d9;
 }
 
 .jsoneditor .menu button {
@@ -20,9 +20,9 @@
   margin: 2px;
   padding: 0;
   border-radius: 2px;
-  border: 1px solid #aec0f8;
-  background: #e3eaf6 url('img/jsoneditor-icons.svg');
-  color: #4D4D4D;
+  border: 1px solid transparent;
+  background: transparent url('img/jsoneditor-icons.svg');
+  color: white;
   opacity: 0.8;
 
   font-family: arial, sans-serif;
@@ -32,14 +32,15 @@
 }
 
 .jsoneditor .menu button:hover {
-  background-color: #f0f2f5;
+  background-color: rgba(255,255,255,0.2);
+  border: 1px solid rgba(255,255,255,0.4);
 }
 .jsoneditor .menu button:focus,
 .jsoneditor .menu button:active {
-  background-color: #ffffff;
+  background-color: rgba(255,255,255,0.3);
 }
 .jsoneditor .menu button:disabled {
-  background-color: #e3eaf6;
+  opacity: 0.5;
 }
 
 .jsoneditor .menu button.collapse-all {
@@ -81,12 +82,13 @@
 .jsoneditor .menu a {
   font-family: arial, sans-serif;
   font-size: 10pt;
-  color: #97B0F8;
+  color: white;
+  opacity: 0.8;
   vertical-align: middle;
 }
 
 .jsoneditor .menu a:hover {
-  color: red;
+  opacity: 1;
 }
 
 .jsoneditor .menu a.poweredBy {
diff --git a/src/css/searchbox.css b/src/css/searchbox.css
index 64ca605..9c70be1 100644
--- a/src/css/searchbox.css
+++ b/src/css/searchbox.css
@@ -14,7 +14,7 @@
 }
 
 .jsoneditor .search .frame {
-  border: 1px solid #97B0F8;
+  border: 1px solid transparent;
   background-color: white;
   padding: 0 2px;
   margin: 0;
diff --git a/src/js/ace/theme-jsoneditor.js b/src/js/ace/theme-jsoneditor.js
index 802e732..6cec3a6 100644
--- a/src/js/ace/theme-jsoneditor.js
+++ b/src/js/ace/theme-jsoneditor.js
@@ -62,7 +62,7 @@ border-left: 0px;\
 border-bottom: 1px solid #000000\
 }\
 .ace-jsoneditor .ace_marker-layer .ace_selection {\
-background: #D5DDF6\
+background: lightgray\
 }\
 .ace-jsoneditor.ace_multiselect .ace_selection.ace_start {\
 box-shadow: 0 0 3px 0px #FFFFFF;\
@@ -82,7 +82,7 @@ background: #FFFBD1\
 background-color : #dcdcdc\
 }\
 .ace-jsoneditor .ace_marker-layer .ace_selected-word {\
-border: 1px solid #D5DDF6\
+border: 1px solid lightgray\
 }\
 .ace-jsoneditor .ace_invisible {\
 color: #BFBFBF\
diff --git a/src/js/textmode.js b/src/js/textmode.js
index 9e2d390..03a9305 100644
--- a/src/js/textmode.js
+++ b/src/js/textmode.js
@@ -147,16 +147,18 @@ textmode.create = function (container, options) {
     this.aceEditor = aceEditor;
 
     // TODO: deprecated since v5.0.0. Cleanup backward compatibility some day
-    Object.defineProperty(this, 'editor', {
-      get: function () {
-        console.warn('Property "editor" has been renamed to "aceEditor".');
-        return me.aceEditor;
-      },
-      set: function (aceEditor) {
-        console.warn('Property "editor" has been renamed to "aceEditor".');
-        me.aceEditor = aceEditor;
-      }
-    });
+    if (!this.hasOwnProperty('editor')) {
+      Object.defineProperty(this, 'editor', {
+        get: function () {
+          console.warn('Property "editor" has been renamed to "aceEditor".');
+          return me.aceEditor;
+        },
+        set: function (aceEditor) {
+          console.warn('Property "editor" has been renamed to "aceEditor".');
+          me.aceEditor = aceEditor;
+        }
+      });
+    }
 
     var poweredBy = document.createElement('a');
     poweredBy.appendChild(document.createTextNode('powered by ace'));