[preview] use a lighter switch in schema model

swagger-api · Feb 16, 2015 · b639f60 · b639f60
1 parent 722e314
commit b639f60
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 47 deletions.
diff --git a/app/styles/components/schema-model.less b/app/styles/components/schema-model.less
@@ -2,44 +2,22 @@
 @import "../fonts";
 
 .schema-model {
-  margin-left: 14px;
-  border-radius: none;
 
   &.hidden {
     display: none;
   }
 
-  >header {
-
-    span, a {
-      font-size: 13px;
-      padding: .2em;
-      white-space: pre;
-      display: none;
-
-      &.pipe {
-      color: darken(@gray-lt, 10%);
-      }
-
-
-      &.active {
-        display: inline-block;
-        font-weight: 700;
-      }
-
-
-      &:hover {
-        background: rgba(255,255,255,0.5);
-        cursor: pointer;
-      }
-    }
-  }
-
-  >section {
-
-    &.json, &.model {
-      font-size: 14px;
-      padding: 0.4em;
+  a.toggle {
+    // TODO: hardcoded color
+    color: rgb(66, 90, 66);
+    text-decoration: none;
+    margin: 0 0.3em;
+    padding: 0 0.2em;
+    border-radius: 3px;
+
+    &:hover {
+      background: rgb(66, 90, 66);
+      color: white;
     }
   }
 }

diff --git a/app/templates/schema-model.html b/app/templates/schema-model.html
@@ -1,14 +1,13 @@
-<div class="schema-model" ng-class="{hidden: !schema}">
-  <header>
-    <a ng-click="mode = 'json'" ng-class="{active: mode === 'model'}">JSON</a> <span ng-class="{active: mode === 'json'}">JSON</span>
-    <span class="active pipe">|</span>
-    <a ng-click="mode = 'model'" ng-class="{active: mode === 'json'}">Model</a> <span ng-class="{active: mode === 'model'}">Model</span>
-  </header>
-
-  <section class="json animate-if" ng-if="mode === 'json'" >
-    <json-formatter json="json" open="1"></json-formatter>
-  </section>
-  <section class="model animate-if" ng-if="mode === 'model'">
-    <json-schema-view schema="json" open="0"></json-schema-view>
-  </section>
-</div>
+<table class="schema-model" ng-class="{hidden: !schema}">
+  <tr>
+    <td>
+      <a class="toggle" ng-click="mode = mode == 'model' ? 'json' : 'model'" title="Switch to {{mode == 'model' ? 'json' : 'model'}}">⇄</a>
+    </td>
+    <td class="json animate-if" ng-if="mode === 'json'" >
+      <json-formatter json="json" open="1"></json-formatter>
+    </td>
+    <td class="model animate-if" ng-if="mode === 'model'">
+      <json-schema-view schema="json" open="0"></json-schema-view>
+    </td>
+  </tr>
+</table>