nitweb: add dropdown menu to cards

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

diff --git a/share/nitweb/directives/entity/card.html b/share/nitweb/directives/entity/card.html
index aa9ccb3..5d7202c 100644 (file)
--- a/share/nitweb/directives/entity/card.html
+++ b/share/nitweb/directives/entity/card.html
@@ -1,11 +1,42 @@
 <div class='card'>
-       <div class='card-left text-center'>
-               <entity-tag mentity='mentity' />
-       </div>
        <div class='card-body'>
-               <h5 class='card-heading'>
-                       <entity-signature mentity='mentity'/>
-               </h5>
-               <span class='synopsis' ng-bind-html='mentity.mdoc.html_synopsis' />
+               <div class='pull-right'>
+                       <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 == "signature" ? "active" : ""'>
+                                               <a ng-click='currentTab = "signature"'>Signature</a>
+                                       </li>
+                                       <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}}-signature' class='tab-pane'
+                         ng-class='currentTab == "signature" ? "active" : ""'>
+                               <div class='pull-left text-center'>
+                                       <entity-tag mentity='mentity' />
+                               </div>
+                               <h5 class='card-heading'>
+                                       <entity-signature mentity='mentity'/>
+                               </h5>
+                               <span class='synopsis' ng-bind-html='mentity.mdoc.html_synopsis' />
+                       </div>
+                       <div id='{{mentity.html_id}}-doc' class='tab-pane'
+                         ng-class='currentTab == "doc" ? "active" : ""'>
+                               <entity-doc mentity='mentity' />
+                       </div>
+                       <div id='{{mentity.html_id}}-grade' class='tab-pane'
+                         ng-class='currentTab == "grade" ? "active" : ""'>
+                               <entity-rating mentity='mentity'>
+                       </div>
+               </div>
        </div>
 </div>

diff --git a/share/nitweb/directives/entity/doc.html b/share/nitweb/directives/entity/doc.html
index e54e556..c42d029 100644 (file)
--- a/share/nitweb/directives/entity/doc.html
+++ b/share/nitweb/directives/entity/doc.html
@@ -1,29 +1,6 @@
-<div class='card' ng-if='mentity.mdoc'>
-       <div class='card-body'>
-               <div class='pull-right'>
-                       <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>
+<div ng-if='mentity.mdoc'>
+       <div ng-bind-html='mentity.mdoc.html_documentation'></div>
+</div>
+<div ng-if='!mentity.mdoc'>
+       <i class='text-muted'>No documentation for this entity.</i>
 </div>

diff --git a/share/nitweb/javascripts/entities.js b/share/nitweb/javascripts/entities.js
index eb65e93..3fd473f 100644 (file)
--- a/share/nitweb/javascripts/entities.js
+++ b/share/nitweb/javascripts/entities.js
@@ -90,10 +90,7 @@
                                scope: {
                                        mentity: '='
                                },
-                               templateUrl: '/directives/entity/doc.html',
-                               link: function ($scope, element, attrs) {
-                                       $scope.currentTab = 'doc';
-                               }
+                               templateUrl: '/directives/entity/doc.html'
                        };
                })
 
@@ -154,10 +151,14 @@
                        return {
                                restrict: 'E',
                                scope: {
-                                       mentity: '='
+                                       mentity: '=',
+                                       defaultTab: '@'
                                },
                                replace: true,
-                               templateUrl: '/directives/entity/card.html'
+                               templateUrl: '/directives/entity/card.html',
+                               link: function ($scope, element, attrs) {
+                                       $scope.currentTab = $scope.defaultTab ? $scope.defaultTab : 'signature';
+                               }
                        };
                })
 

diff --git a/share/nitweb/stylesheets/nitweb.css b/share/nitweb/stylesheets/nitweb.css
index 348f447..6088827 100644 (file)
--- a/share/nitweb/stylesheets/nitweb.css
+++ b/share/nitweb/stylesheets/nitweb.css
@@ -45,11 +45,13 @@ a {
        padding: 15px;
 }
 
-.card-left, .card>.pull-left {
+.card-left, .card .pull-left {
        float: left;
+       padding: 0 15px 15px 0;
 }
-.card-right, .card>.pull-right {
+.card-right, .card .pull-right {
        float: right;
+       padding: 0 0 15px 15px;
 }
 
 .card-list {

diff --git a/share/nitweb/views/class.html b/share/nitweb/views/class.html
index 278d5e9..fbb9aaf 100644 (file)
--- a/share/nitweb/views/class.html
+++ b/share/nitweb/views/class.html
@@ -28,7 +28,7 @@
 
 <div class='tab-content'>
        <div role='tabpanel' class='tab-pane fade in active' id='doc'>
-               <entity-doc mentity='mentity'/>
+               <entity-card mentity='mentity' default-tab='doc'/>
 
                <entity-list list-title='Parents'
                        list-entities='mentity.parents'

diff --git a/share/nitweb/views/group.html b/share/nitweb/views/group.html
index f7f60db..1af3d15 100644 (file)
--- a/share/nitweb/views/group.html
+++ b/share/nitweb/views/group.html
@@ -18,7 +18,7 @@
 
 <div class='tab-content'>
        <div role='tabpanel' class='tab-pane fade in active' id='doc'>
-               <entity-doc mentity='mentity'/>
+               <entity-card mentity='mentity' default-tab='doc'/>
 
                <entity-list list-title='Parent group' list-entities='[mentity.parent]'
                        list-object-filter='{}' ng-if='mentity.parent' />

diff --git a/share/nitweb/views/module.html b/share/nitweb/views/module.html
index 6288013..5f8b4a3 100644 (file)
--- a/share/nitweb/views/module.html
+++ b/share/nitweb/views/module.html
@@ -28,7 +28,7 @@
 
 <div class='tab-content'>
        <div role='tabpanel' class='tab-pane fade in active' id='doc'>
-               <entity-doc mentity='mentity'/>
+               <entity-card mentity='mentity' default-tab='doc'/>
 
                <entity-list list-title='Imported modules' list-entities='mentity.imports'
                        list-object-filter='{}' />

diff --git a/share/nitweb/views/package.html b/share/nitweb/views/package.html
index 306dd52..10ea7f6 100644 (file)
--- a/share/nitweb/views/package.html
+++ b/share/nitweb/views/package.html
@@ -18,7 +18,7 @@
 
 <div class='tab-content'>
        <div role='tabpanel' class='tab-pane fade in active' id='doc'>
-               <entity-doc mentity='mentity'/>
+               <entity-card mentity='mentity' default-tab='doc'/>
 
                <entity-list list-title='Groups' list-entities='mentity.mgroups'
                        list-object-filter='{}' />

diff --git a/share/nitweb/views/property.html b/share/nitweb/views/property.html
index 6d8d483..d43410d 100644 (file)
--- a/share/nitweb/views/property.html
+++ b/share/nitweb/views/property.html
@@ -13,7 +13,7 @@
 
 <div class='tab-content'>
        <div role='tabpanel' class='tab-pane fade in active' id='doc'>
-               <entity-doc mentity='mentity'/>
+               <entity-card mentity='mentity' default-tab='doc'/>
        </div>
        <div role='tabpanel' class='tab-pane fade' id='linearization'>
                <entity-linearization