Start showing resource level documentation

jcenturion · jcenturion · commit 433428e71e9a · 2015-02-20T16:44:20.000-03:00
diff --git a/dist/examples/leagues.raml b/dist/examples/leagues.raml
@@ -50,6 +50,8 @@ securedBy: [ basic, digest_auth, oauth_2_0 ]
 
 /teams:
   displayName: Teams
+  description: |
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sagittis ipsum felis, sed aliquam massa egestas vel. Sed scelerisque leo lorem, a gravida enim congue eget. Sed rutrum quis odio vitae sollicitudin. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc pulvinar arcu at diam pharetra finibus. Curabitur malesuada hendrerit odio id consectetur. Etiam felis augue, malesuada ut turpis vel, tincidunt sodales justo. Donec quam eros, accumsan ut elementum et, euismod placerat ligula. Phasellus consequat velit lacus. Aenean vel massa et sapien molestie imperdiet et id ex. Nulla quis suscipit libero.
   post:
     description: Delete an item by Code.
     headers:
@@ -426,6 +428,8 @@ securedBy: [ basic, digest_auth, oauth_2_0 ]
             Unable to find a team with that identifier
 /positions:
   displayName: Position Table
+  description: |
+    Nam lacinia suscipit sapien id consectetur. Sed cursus luctus elit id dictum. Praesent vulputate dui ac nulla vehicula dignissim. Vestibulum iaculis lorem ut arcu ultrices, et dictum velit tincidunt. Sed iaculis turpis vel feugiat interdum. Fusce neque augue, lobortis vel purus mattis, condimentum mollis tortor. Donec ligula est, rutrum ut maximus in, commodo non orci. Nunc dapibus lectus sit amet risus vulputate porta. Aliquam ut ultrices neque. Phasellus ultrices ac nisl eu dignissim. Quisque non magna rhoncus, luctus urna quis, mollis dolor. Integer sit amet elit massa. Morbi molestie sapien ut lorem porta pellentesque.
   get:
     description: Retrieve the current standing for the current season
     responses:
@@ -510,8 +514,8 @@ securedBy: [ basic, digest_auth, oauth_2_0 ]
 
 /fixture:
   displayName: Fixture
-  #description: |
-  #  A collection of teams that are participating in La Liga. Teams API allow you add, remove and retrieve individual team information from La Liga.
+  description: |
+    Sed nec enim mollis, tristique arcu at, ornare eros. Vivamus posuere tortor sit amet ipsum tempus, id vestibulum odio vulputate. Nunc fermentum sed metus sed viverra. Cras at maximus arcu. Donec lobortis faucibus blandit. Nunc et dolor accumsan mauris imperdiet pellentesque. Sed suscipit sem in interdum suscipit. Duis dapibus neque eget libero egestas, ut rutrum nisi congue. Maecenas auctor nec erat sit amet mattis. Morbi vestibulum ante lacus, a tempor risus tristique eu. Mauris euismod metus eget ligula pharetra, vehicula interdum nibh rutrum. Aenean semper turpis sed ligula congue egestas. Donec nec orci in arcu auctor accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur viverra est urna, vel convallis est hendrerit quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
   get:
     description: Retrieve a list of matches for the current season
     responses:
diff --git a/dist/scripts/api-console.js b/dist/scripts/api-console.js
@@ -1621,6 +1621,13 @@
           $this.toggleClass('raml-console-is-active');
         };
 
+        $scope.showResourceDescription = function ($event) {
+          var $this      = jQuery($event.currentTarget);
+          var $container = $this.closest('.raml-console-resource-list-item');
+
+          $container.find('.raml-console-resource-description').toggleClass('ng-hide');
+        };
+
         $scope.toggleInverted = function ($event) {
           var $section    = jQuery($event.currentTarget)
             .closest('.raml-console-resource-list-item')
@@ -5519,16 +5526,15 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
     "            <button class=\"raml-console-resource-root-toggle\" ng-class=\"{'raml-console-is-active': collapsed}\" ng-if=\"resourceGroup.length > 1\" ng-click=\"toggle($event)\"></button>\n" +
     "\n" +
     "            <h2 class=\"raml-console-resource-heading raml-console-resource-heading-large\">\n" +
-    "              <a class=\"raml-console-resource-path-active\" ng-repeat='segment in resource.pathSegments' ng-if=\"resourceGroup.length > 1\" ng-click=\"toggleInverted($event)\">{{segment.toString()}}</a>\n" +
+    "              <a class=\"raml-console-resource-path-active\" ng-class=\"{'raml-console-resource-heading-hover':resourceGroup.length > 1}\" ng-repeat='segment in resource.pathSegments' ng-if=\"resourceGroup.length > 1\" ng-click=\"toggleInverted($event)\">{{segment.toString()}}</a>\n" +
     "\n" +
-    "              <span class=\"raml-console-resource-path-active\" ng-repeat='segment in resource.pathSegments' ng-if=\"resourceGroup.length <= 1\">{{segment.toString()}}</span>\n" +
+    "              <span class=\"raml-console-resource-path-active\" ng-class=\"{'raml-console-resource-heading-hover':resource.description}\" ng-repeat='segment in resource.pathSegments' ng-if=\"resourceGroup.length <= 1\" ng-click=\"showResourceDescription($event)\">{{segment.toString()}}</span>\n" +
     "            </h2>\n" +
     "\n" +
     "            <resource-type></resource-type>\n" +
     "            <span ng-if=\"methodInfo.is\" class=\"raml-console-flag raml-console-resource-heading-flag raml-console-resource-trait\"><b>Trait:</b> {{traits}}</span>\n" +
     "\n" +
     "          </div>\n" +
-    "\n" +
     "          <method-list></method-list>\n" +
     "          <close-button></close-button>\n" +
     "        </header>\n" +
@@ -5537,6 +5543,14 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
     "\n" +
     "        <!-- Child Resources -->\n" +
     "        <ol class=\"raml-console-resource-list\" ng-class=\"{'raml-console-is-collapsed': collapsed}\">\n" +
+    "\n" +
+    "          <li class=\"raml-console-resource-list-item raml-console-resource-description\" ng-show=\"resourceGroup.length > 1\" ng-if=\"resource.description\">\n" +
+    "            <div class=\"raml-console-resource-panel-primary-row raml-console-resource-panel-content raml-console-is-active\">\n" +
+    "              <h3 class=\"raml-console-resource-heading-a\">Description</h3>\n" +
+    "              <p marked=\"resource.description\" opts=\"markedOptions\"></p>\n" +
+    "            </div>\n" +
+    "          </li>\n" +
+    "\n" +
     "          <li id=\"{{generateId(resource.pathSegments)}}\" class=\"raml-console-resource-list-item\" ng-repeat=\"resource in resourceGroup\" ng-if=\"!$first\">\n" +
     "            <div class=\"raml-console-resource raml-console-clearfix\" ng-class=\"{ 'raml-console-is-active':showPanel }\">\n" +
     "              <div class=\"raml-console-resource-path-container\">\n" +
diff --git a/dist/styles/api-console-dark-theme.css b/dist/styles/api-console-dark-theme.css
@@ -1761,6 +1761,24 @@ ol.raml-console-resources-container {
   margin-top: -5px;
 }
 
+.raml-console-resource-description {
+  border-bottom: 1px solid #282a30;
+}
+
+.raml-console-resource-description div {
+  padding: 17px;
+  background: #FAFAFA;
+}
+
+.raml-console-resource-description div h3 {
+  font-size: 12px;
+  margin: 0 0 11px;
+}
+
+.raml-console-resource-description div p {
+  font-size: 12px;
+}
+
 .raml-console-resource-menu-item {
   padding-left: 0 !important;
   height: 48px;
@@ -2086,6 +2104,11 @@ a.raml-console-resource-path-active {
   cursor: pointer;
 }
 
+.raml-console-resource-heading-hover:hover {
+  cursor: pointer;
+  background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 1px, #999 2px, rgba(255, 255, 255, 0) 1px);
+}
+
 .raml-console-resource-heading {
   display: inline-block;
   margin: 0;
@@ -2094,10 +2117,6 @@ a.raml-console-resource-path-active {
   font-size: 10px;
 }
 
-.raml-console-resource:not(.raml-console-is-active) .raml-console-resource-heading:hover {
-  background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 1px, #999 2px, rgba(255, 255, 255, 0) 1px);
-}
-
 @media only screen and (min-width: 600px) {
   .raml-console-resource-heading {
     margin-right: 15px;
diff --git a/dist/styles/api-console-light-theme.css b/dist/styles/api-console-light-theme.css
@@ -1761,6 +1761,24 @@ ol.raml-console-resources-container {
   margin-top: -5px;
 }
 
+.raml-console-resource-description {
+  border-bottom: 1px solid #ccc;
+}
+
+.raml-console-resource-description div {
+  padding: 17px;
+  background: #FAFAFA;
+}
+
+.raml-console-resource-description div h3 {
+  font-size: 12px;
+  margin: 0 0 11px;
+}
+
+.raml-console-resource-description div p {
+  font-size: 12px;
+}
+
 .raml-console-resource-menu-item {
   padding-left: 0 !important;
   height: 48px;
@@ -2086,6 +2104,11 @@ a.raml-console-resource-path-active {
   cursor: pointer;
 }
 
+.raml-console-resource-heading-hover:hover {
+  cursor: pointer;
+  background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 1px, #999 2px, rgba(255, 255, 255, 0) 1px);
+}
+
 .raml-console-resource-heading {
   display: inline-block;
   margin: 0;
@@ -2094,10 +2117,6 @@ a.raml-console-resource-path-active {
   font-size: 10px;
 }
 
-.raml-console-resource:not(.raml-console-is-active) .raml-console-resource-heading:hover {
-  background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 1px, #999 2px, rgba(255, 255, 255, 0) 1px);
-}
-
 @media only screen and (min-width: 600px) {
   .raml-console-resource-heading {
     margin-right: 15px;
diff --git a/src/app/resources/resources.js b/src/app/resources/resources.js
@@ -62,6 +62,13 @@
           $this.toggleClass('raml-console-is-active');
         };
 
+        $scope.showResourceDescription = function ($event) {
+          var $this      = jQuery($event.currentTarget);
+          var $container = $this.closest('.raml-console-resource-list-item');
+
+          $container.find('.raml-console-resource-description').toggleClass('ng-hide');
+        };
+
         $scope.toggleInverted = function ($event) {
           var $section    = jQuery($event.currentTarget)
             .closest('.raml-console-resource-list-item')
diff --git a/src/app/resources/resources.tpl.html b/src/app/resources/resources.tpl.html
@@ -43,16 +43,15 @@ <h2 class="raml-console-resource-section-title">
             <button class="raml-console-resource-root-toggle" ng-class="{'raml-console-is-active': collapsed}" ng-if="resourceGroup.length > 1" ng-click="toggle($event)"></button>
 
             <h2 class="raml-console-resource-heading raml-console-resource-heading-large">
-              <a class="raml-console-resource-path-active" ng-repeat='segment in resource.pathSegments' ng-if="resourceGroup.length > 1" ng-click="toggleInverted($event)">{{segment.toString()}}</a>
+              <a class="raml-console-resource-path-active" ng-class="{'raml-console-resource-heading-hover':resourceGroup.length > 1}" ng-repeat='segment in resource.pathSegments' ng-if="resourceGroup.length > 1" ng-click="toggleInverted($event)">{{segment.toString()}}</a>
 
-              <span class="raml-console-resource-path-active" ng-repeat='segment in resource.pathSegments' ng-if="resourceGroup.length <= 1">{{segment.toString()}}</span>
+              <span class="raml-console-resource-path-active" ng-class="{'raml-console-resource-heading-hover':resource.description}" ng-repeat='segment in resource.pathSegments' ng-if="resourceGroup.length <= 1" ng-click="showResourceDescription($event)">{{segment.toString()}}</span>
             </h2>
 
             <resource-type></resource-type>
             <span ng-if="methodInfo.is" class="raml-console-flag raml-console-resource-heading-flag raml-console-resource-trait"><b>Trait:</b> {{traits}}</span>
 
           </div>
-
           <method-list></method-list>
           <close-button></close-button>
         </header>
@@ -61,6 +60,14 @@ <h2 class="raml-console-resource-heading raml-console-resource-heading-large">
 
         <!-- Child Resources -->
         <ol class="raml-console-resource-list" ng-class="{'raml-console-is-collapsed': collapsed}">
+
+          <li class="raml-console-resource-list-item raml-console-resource-description" ng-show="resourceGroup.length > 1" ng-if="resource.description">
+            <div class="raml-console-resource-panel-primary-row raml-console-resource-panel-content raml-console-is-active">
+              <h3 class="raml-console-resource-heading-a">Description</h3>
+              <p marked="resource.description" opts="markedOptions"></p>
+            </div>
+          </li>
+
           <li id="{{generateId(resource.pathSegments)}}" class="raml-console-resource-list-item" ng-repeat="resource in resourceGroup" ng-if="!$first">
             <div class="raml-console-resource raml-console-clearfix" ng-class="{ 'raml-console-is-active':showPanel }">
               <div class="raml-console-resource-path-container">
diff --git a/src/assets/examples/leagues.raml b/src/assets/examples/leagues.raml
@@ -50,6 +50,8 @@ securedBy: [ basic, digest_auth, oauth_2_0 ]
 
 /teams:
   displayName: Teams
+  description: |
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sagittis ipsum felis, sed aliquam massa egestas vel. Sed scelerisque leo lorem, a gravida enim congue eget. Sed rutrum quis odio vitae sollicitudin. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc pulvinar arcu at diam pharetra finibus. Curabitur malesuada hendrerit odio id consectetur. Etiam felis augue, malesuada ut turpis vel, tincidunt sodales justo. Donec quam eros, accumsan ut elementum et, euismod placerat ligula. Phasellus consequat velit lacus. Aenean vel massa et sapien molestie imperdiet et id ex. Nulla quis suscipit libero.
   post:
     description: Delete an item by Code.
     headers:
@@ -426,6 +428,8 @@ securedBy: [ basic, digest_auth, oauth_2_0 ]
             Unable to find a team with that identifier
 /positions:
   displayName: Position Table
+  description: |
+    Nam lacinia suscipit sapien id consectetur. Sed cursus luctus elit id dictum. Praesent vulputate dui ac nulla vehicula dignissim. Vestibulum iaculis lorem ut arcu ultrices, et dictum velit tincidunt. Sed iaculis turpis vel feugiat interdum. Fusce neque augue, lobortis vel purus mattis, condimentum mollis tortor. Donec ligula est, rutrum ut maximus in, commodo non orci. Nunc dapibus lectus sit amet risus vulputate porta. Aliquam ut ultrices neque. Phasellus ultrices ac nisl eu dignissim. Quisque non magna rhoncus, luctus urna quis, mollis dolor. Integer sit amet elit massa. Morbi molestie sapien ut lorem porta pellentesque.
   get:
     description: Retrieve the current standing for the current season
     responses:
@@ -510,8 +514,8 @@ securedBy: [ basic, digest_auth, oauth_2_0 ]
 
 /fixture:
   displayName: Fixture
-  #description: |
-  #  A collection of teams that are participating in La Liga. Teams API allow you add, remove and retrieve individual team information from La Liga.
+  description: |
+    Sed nec enim mollis, tristique arcu at, ornare eros. Vivamus posuere tortor sit amet ipsum tempus, id vestibulum odio vulputate. Nunc fermentum sed metus sed viverra. Cras at maximus arcu. Donec lobortis faucibus blandit. Nunc et dolor accumsan mauris imperdiet pellentesque. Sed suscipit sem in interdum suscipit. Duis dapibus neque eget libero egestas, ut rutrum nisi congue. Maecenas auctor nec erat sit amet mattis. Morbi vestibulum ante lacus, a tempor risus tristique eu. Mauris euismod metus eget ligula pharetra, vehicula interdum nibh rutrum. Aenean semper turpis sed ligula congue egestas. Donec nec orci in arcu auctor accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur viverra est urna, vel convallis est hendrerit quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
   get:
     description: Retrieve a list of matches for the current season
     responses:
diff --git a/src/scss/_resource.scss b/src/scss/_resource.scss
@@ -20,6 +20,24 @@ ol.resources-container {
   margin-top: -5px;
 }
 
+.resource-description {
+  border-bottom: 1px solid $color-console-border;
+
+  div {
+    padding: 17px;
+    background: #FAFAFA;
+
+    h3 {
+      font-size: 12px;
+      margin: 0 0 11px;
+    }
+
+    p {
+      font-size: 12px;
+    }
+  }
+}
+
 .resource-menu-item {
   padding-left: 0 !important;
   height: 48px;
@@ -334,6 +352,11 @@ a.resource-path-active {
   cursor: pointer;
 }
 
+.resource-heading-hover:hover {
+  cursor: pointer;
+  background-image: linear-gradient(to top, rgba(255,255,255,0) 1px, #999 2px, rgba(255,255,255,0) 1px);
+}
+
 .resource-heading {
   // font-family: 'Source Code Pro';
   display: inline-block;
@@ -343,9 +366,9 @@ a.resource-path-active {
   color: #b9b9b9;
   font-size: 10px;
 
-  .resource:not(.is-active) &:hover {
-    background-image: linear-gradient(to top, rgba(255,255,255,0) 1px, #999 2px, rgba(255,255,255,0) 1px);
-  }
+  // .resource:not(.is-active) &:hover {
+  //   background-image: linear-gradient(to top, rgba(255,255,255,0) 1px, #999 2px, rgba(255,255,255,0) 1px);
+  // }
 
   @media only screen and (min-width: $medium-screen) {
     margin-right: 15px;
