From d805cba78286d5e30540583c1ebb4463dd79e3e4 Mon Sep 17 00:00:00 2001
From: Roman Hotsiy <gotsijroman@gmail.com>
Date: Sat, 23 Jan 2016 17:49:44 +0200
Subject: [PATCH] Fix nested schema representation issues

---
 .../JsonSchema/json-schema-common.scss        | 156 +++++++++++++++++
 lib/components/JsonSchema/json-schema.scss    | 158 +-----------------
 lib/components/ParamsList/params-list.scss    |   2 +-
 3 files changed, 162 insertions(+), 154 deletions(-)
 create mode 100644 lib/components/JsonSchema/json-schema-common.scss

diff --git a/lib/components/JsonSchema/json-schema-common.scss b/lib/components/JsonSchema/json-schema-common.scss
new file mode 100644
index 00000000..44ccf1e4
--- /dev/null
+++ b/lib/components/JsonSchema/json-schema-common.scss
@@ -0,0 +1,156 @@
+@import '../../common/styles/variables';
+$lines-width: 1px;
+$bullet-size: 7px;
+$cell-spacing: 25px;
+$cell-padding: 10px;
+$bullet-margin: 10px;
+$line-border: $lines-width solid $tree-lines-color;
+$line-border-erase: ($lines-width + 1px) solid white;
+
+$param-name-height: 20px;
+
+$sub-schema-offset: ($bullet-size/2) + $bullet-margin;
+
+.param-schema {
+  padding-left: $sub-schema-offset - $lines-width;
+  border-left: $line-border;
+}
+
+.param-wrap {
+  position: relative;
+}
+
+.param-schema:before {
+  content: "";
+  position: absolute;
+  left: $sub-schema-offset;
+  top: ($param-name-height/2) + $cell-padding;
+  bottom: 0;
+  border-left: $line-border;
+}
+
+.param-name {
+  font-size: 14px;
+  padding: $cell-padding $cell-spacing $cell-padding 0;
+  font-weight: bold;
+  box-sizing: border-box;
+  line-height: $param-name-height;
+  border-left: $line-border;
+  white-space: nowrap;
+  position: relative;
+}
+
+.param-info {
+  width: 100%;
+  padding: $cell-padding 0;
+  box-sizing: border-box;
+  border-bottom: 1px solid #ccc;
+}
+
+.param {
+  display: flex;
+}
+
+.param-required {
+  color: red;
+  font-weight: bold;
+  font-size: 12px;
+  line-height: $param-name-height;
+  vertical-align: middle;
+}
+
+.param-type {
+  color: #999;
+  font-size: 12px;
+  line-height: $param-name-height;
+  vertical-align: middle;
+  font-weight: bold;
+}
+
+.param-type.array:before {
+  content: "Array of ";
+  color: #999;
+}
+
+.param-type.string {
+  color: rgba(0, 80, 0, 0.7);
+}
+
+.param-type.integer {
+  color: rgba(30, 0, 80, 0.7);
+}
+
+.param-type.object {
+  color: rgba(139, 0, 0, 0.67);
+}
+
+.param-type.with-hint {
+  &:before, &:after {
+    content: "\\00a0";
+  }
+  background-color: rgba(0, 50, 159, 0.1);
+  padding: 0.2em 0;
+  font-size: 0.85em;
+  border-radius: 3px;
+  cursor: help;
+}
+
+.param-type-trivial {
+  margin: 10px 10px 0;
+  display: inline-block;
+}
+
+/* tree */
+
+// Bullet
+.param-name > span:before {
+  content: "";
+  display: inline-block;
+  width: $bullet-size;
+  height: $bullet-size;
+  background-color: $tree-lines-color;
+  margin: 0 $bullet-margin;
+  vertical-align: middle;
+}
+
+.param-name > span:after {
+  content: "";
+  position: absolute;
+  border-top: $line-border;
+  width: $bullet-margin;
+  left: 0;
+  top: ($param-name-height/2) + $cell-padding;
+}
+
+.param-wrap:first-of-type > .param > .param-name:before {
+  content: "";
+  display: block;
+  position: absolute;
+  left: -$lines-width;
+  top: 0;
+  border-left: $line-border-erase;
+  height: ($param-name-height/2) + $cell-padding;
+}
+
+.param-wrap:last-of-type > .param > .param-name {
+  position: static;
+
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    left: -$lines-width;
+    border-left: $line-border-erase;
+    top: ($param-name-height/2) + $cell-padding + $lines-width;
+    background-color: white;
+    bottom: 0;
+  }
+}
+
+.param-wrap:last-of-type > .param-schema {
+  border-left-color: transparent;
+}
+
+.param-schema .param-wrap:first-of-type .param-name:before {
+  display: none !important;
+}
diff --git a/lib/components/JsonSchema/json-schema.scss b/lib/components/JsonSchema/json-schema.scss
index e76a6715..ce1605d1 100644
--- a/lib/components/JsonSchema/json-schema.scss
+++ b/lib/components/JsonSchema/json-schema.scss
@@ -1,156 +1,4 @@
-@import '../../common/styles/variables';
-$lines-width: 1px;
-$bullet-size: 7px;
-$cell-spacing: 25px;
-$cell-padding: 10px;
-$bullet-margin: 10px;
-$line-border: $lines-width solid $tree-lines-color;
-$line-border-erase: ($lines-width + 1px) solid white;
-
-$param-name-height: 20px;
-
-$sub-schema-offset: ($bullet-size/2) + $bullet-margin;
-
-.param-schema {
-  padding-left: $sub-schema-offset - $lines-width;
-  border-left: $line-border;
-}
-
-.param-wrap {
-  position: relative;
-}
-
-.param-schema:before {
-  content: "";
-  position: absolute;
-  left: $sub-schema-offset;
-  top: ($param-name-height/2) + $cell-padding;
-  bottom: 0;
-  border-left: $line-border;
-}
-
-.param-name {
-  font-size: 14px;
-  padding: $cell-padding $cell-spacing $cell-padding 0;
-  font-weight: bold;
-  box-sizing: border-box;
-  line-height: $param-name-height;
-  border-left: $line-border;
-  white-space: nowrap;
-  position: relative;
-}
-
-.param-info {
-  width: 100%;
-  padding: $cell-padding 0;
-  box-sizing: border-box;
-  border-bottom: 1px solid #ccc;
-}
-
-.param {
-  display: flex;
-}
-
-.param-required {
-  color: red;
-  font-weight: bold;
-  font-size: 12px;
-  line-height: $param-name-height;
-  vertical-align: middle;
-}
-
-.param-type {
-  color: #999;
-  font-size: 12px;
-  line-height: $param-name-height;
-  vertical-align: middle;
-  font-weight: bold;
-}
-
-.param-type.array:before {
-  content: "Array of ";
-  color: #999;
-}
-
-.param-type.string {
-  color: rgba(0, 80, 0, 0.7);
-}
-
-.param-type.integer {
-  color: rgba(30, 0, 80, 0.7);
-}
-
-.param-type.object {
-  color: rgba(139, 0, 0, 0.67);
-}
-
-.param-type.with-hint {
-  &:before, &:after {
-    content: "\\00a0";
-  }
-  background-color: rgba(0, 50, 159, 0.1);
-  padding: 0.2em 0;
-  font-size: 0.85em;
-  border-radius: 3px;
-  cursor: help;
-}
-
-.param-type-trivial {
-  margin: 10px 10px 0;
-  display: inline-block;
-}
-
-/* tree */
-
-// Bullet
-.param-name > span:before {
-  content: "";
-  display: inline-block;
-  width: $bullet-size;
-  height: $bullet-size;
-  background-color: $tree-lines-color;
-  margin: 0 $bullet-margin;
-  vertical-align: middle;
-}
-
-.param-name > span:after {
-  content: "";
-  position: absolute;
-  border-top: $line-border;
-  width: $bullet-margin;
-  left: 0;
-  top: ($param-name-height/2) + $cell-padding;
-}
-
-.param-wrap:first-of-type .param-name:before {
-  content: "";
-  display: block;
-  position: absolute;
-  left: -$lines-width;
-  top: 0;
-  border-left: $line-border-erase;
-  height: ($param-name-height/2) + $cell-padding;
-}
-
-.param-wrap:last-of-type > .param > .param-name:after {
-  content: "";
-  display: block;
-  position: absolute;
-  left: -$lines-width - 1px;
-  border-left: $line-border-erase;
-  top: ($param-name-height/2) + $cell-padding + $lines-width;
-  background-color: white;
-  bottom: 0;
-}
-
-.param-wrap:last-of-type > .param-schema {
-  border-left-color: transparent;
-}
-
-.param-schema .param-wrap:first-of-type .param-name:before {
-  display: none !important;
-}
-
+@import 'json-schema-common';
 
 /* styles for array-schema for array */
 $array-marker-font-sz: 12px;
@@ -193,6 +41,10 @@ $array-marker-line-height: 1.5;
   height: ($param-name-height/2) + $cell-padding;
 }
 
+.params-wrap > .param > .param-schema.param-array {
+  border-left-color: transparent;
+}
+
 .param.discriminator {
   > div {
     padding-bottom: 0;
diff --git a/lib/components/ParamsList/params-list.scss b/lib/components/ParamsList/params-list.scss
index 80ec160d..23c9b10a 100644
--- a/lib/components/ParamsList/params-list.scss
+++ b/lib/components/ParamsList/params-list.scss
@@ -7,7 +7,7 @@
   font-weight: normal;
 }
 
-@import '../JsonSchema/json-schema.scss';
+@import '../JsonSchema/json-schema-common';
 
 
 // paramters can't be multilevel so table representation works for it without javascript