nitweb: doc card use dropdown to switch between doc and grade

Signed-off-by: Alexandre Terrasa <alexandre@moz-code.org>

diff --git a/share/nitweb/directives/entity/doc.html b/share/nitweb/directives/entity/doc.html
index bf271c3..e54e556 100644 (file)
--- a/share/nitweb/directives/entity/doc.html
+++ b/share/nitweb/directives/entity/doc.html
@@ -1,8 +1,29 @@
 <div class='card' ng-if='mentity.mdoc'>
        <div class='card-body'>
                <div class='pull-right'>
-                       <entity-rating mentity='mentity' />
+                       <div class='dropdown'>
+                               <button class='btn btn-link dropdown-toggle' type='button' data-toggle='dropdown'>
+                                       <span class='glyphicon glyphicon-chevron-down'></span>
+                               </button>
+                               <ul class='dropdown-menu dropdown-menu-right'>
+                                       <li ng-class='currentTab == "doc" ? "active" : ""'>
+                                               <a ng-click='currentTab = "doc"'>Doc</a>
+                                       </li>
+                                       <li ng-class='currentTab == "grade" ? "active" : ""'>
+                                               <a ng-click='currentTab = "grade"'>Grade</a>
+                                       </li>
+                               </ul>
+                       </div>
+               </div>
+               <div class='tab-content'>
+                       <div id='{{mentity.html_id}}-doc' class='tab-pane'
+                         ng-class='currentTab == "doc" ? "active" : ""'>
+                               <div ng-bind-html='mentity.mdoc.html_documentation'></div>
+                       </div>
+                       <div id='{{mentity.html_id}}-grade' class='tab-pane'
+                         ng-class='currentTab == "grade" ? "active" : ""'>
+                               <entity-rating mentity='mentity'>
+                       </div>
                </div>
-               <div ng-bind-html='mentity.mdoc.html_documentation'></div>
        </div>
 </div>

diff --git a/share/nitweb/javascripts/entities.js b/share/nitweb/javascripts/entities.js
index 67c68bd..5d8a7dd 100644 (file)
--- a/share/nitweb/javascripts/entities.js
+++ b/share/nitweb/javascripts/entities.js
@@ -90,7 +90,10 @@
                                scope: {
                                        mentity: '='
                                },
-                               templateUrl: '/directives/entity/doc.html'
+                               templateUrl: '/directives/entity/doc.html',
+                               link: function ($scope, element, attrs) {
+                                       $scope.currentTab = 'doc';
+                               }
                        };
                })