SONAR-6021 Update UI of api documentation page

diff --git a/server/sonar-web/src/main/coffee/api-documentation/app.coffee b/server/sonar-web/src/main/coffee/api-documentation/app.coffee
index 9672844a4f435755ee24b3fe7c29eca8b83f3924..2b23ceadb5263939991e5b8ddbb0c5220bf9f15e 100644 (file)
--- a/server/sonar-web/src/main/coffee/api-documentation/app.coffee
+++ b/server/sonar-web/src/main/coffee/api-documentation/app.coffee
@@ -35,7 +35,8 @@ requirejs [
   # Construct layout
   App.addInitializer ->
     @layout = new ApiDocumentationLayout app: App
-    jQuery('#body').append @layout.render().el
+    jQuery('#api-documentation').append @layout.render().el
+    jQuery('#footer').addClass 'search-navigator-footer'
 
   # Construct sidebar
   App.addInitializer ->

diff --git a/server/sonar-web/src/main/coffee/api-documentation/layout.coffee b/server/sonar-web/src/main/coffee/api-documentation/layout.coffee
index 8113ff822d68a7fd03aa21eff0fd7463713cfbb8..077dfa88163c4b091db39dd8869ebaf7ce96f361 100644 (file)
--- a/server/sonar-web/src/main/coffee/api-documentation/layout.coffee
+++ b/server/sonar-web/src/main/coffee/api-documentation/layout.coffee
@@ -2,20 +2,31 @@ define [
   'templates/api-documentation'
 ], ->
 
-  class AppLayout extends Marionette.Layout
-    className: 'navigator api-documentation-navigator'
+  $ = jQuery
+
+  class extends Marionette.Layout
     template: Templates['api-documentation-layout']
 
+
     regions:
-      resultsRegion: '.navigator-results'
-      detailsRegion: '.navigator-details'
+      resultsRegion: '.api-documentation-results'
+      detailsRegion: '.search-navigator-workspace'
+
 
     events:
       'change #api-documentation-show-internals': 'toggleInternals'
 
-    toggleInternals: (event) ->
-      @app.webServices.toggleInternals()
 
     initialize: (app) ->
       @app = app.app
       @listenTo(@app.webServices, 'sync', @app.refresh)
+
+
+    onRender: ->
+      $('.search-navigator').addClass 'sticky'
+      top = $('.search-navigator').offset().top
+      @$('.search-navigator-side').css({ top: top }).isolatedScroll()
+
+
+    toggleInternals: (event) ->
+      @app.webServices.toggleInternals()

diff --git a/server/sonar-web/src/main/coffee/api-documentation/views/api-documentation-action-view.coffee b/server/sonar-web/src/main/coffee/api-documentation/views/api-documentation-action-view.coffee
index b5b014814087e06f91da67ec6e1cbc7291d6b615..916fda085ae89a9056c37fc2988fdca690e760c3 100644 (file)
--- a/server/sonar-web/src/main/coffee/api-documentation/views/api-documentation-action-view.coffee
+++ b/server/sonar-web/src/main/coffee/api-documentation/views/api-documentation-action-view.coffee
@@ -8,7 +8,6 @@ define [
 ) ->
 
   class ApiDocumentationActionView extends Marionette.ItemView
-    tagName: 'div'
     className: 'api-documentation-action'
     template: Templates['api-documentation-action']
     spinner: '<i class="spinner"></i>'

diff --git a/server/sonar-web/src/main/coffee/api-documentation/views/api-documentation-actions-list-view.coffee b/server/sonar-web/src/main/coffee/api-documentation/views/api-documentation-actions-list-view.coffee
index 0ea6e6c58f81b07bb0160dc2c3795b0cbd311896..3e2305c40728fe22de56e4e0953d4ffef340258c 100644 (file)
--- a/server/sonar-web/src/main/coffee/api-documentation/views/api-documentation-actions-list-view.coffee
+++ b/server/sonar-web/src/main/coffee/api-documentation/views/api-documentation-actions-list-view.coffee
@@ -7,9 +7,14 @@ define [
   ApiDocumentationActionView
 ) ->
 
-  class ApiDocumentationActionsListView extends Marionette.CompositeView
-    tagName: 'div'
+  $ = jQuery
+
+  class extends Marionette.CompositeView
     className: 'api-documentation-actions'
     template: Templates['api-documentation-actions']
     itemView: ApiDocumentationActionView
-    itemViewContainer: '.api-documentation-actions-list'
+    itemViewContainer: '.search-navigator-workspace-list'
+
+    onRender: ->
+      top = $('.search-navigator').offset().top
+      @$('.search-navigator-workspace-header').css top: top

diff --git a/server/sonar-web/src/main/coffee/api-documentation/views/api-documentation-list-view.coffee b/server/sonar-web/src/main/coffee/api-documentation/views/api-documentation-list-view.coffee
index 920dae02ddd1b2ad37a8366b1781d9cd25ee0fed..1efab9de2358d56e76690417ba3d7365cd88390c 100644 (file)
--- a/server/sonar-web/src/main/coffee/api-documentation/views/api-documentation-list-view.coffee
+++ b/server/sonar-web/src/main/coffee/api-documentation/views/api-documentation-list-view.coffee
@@ -4,11 +4,11 @@ define [
   ApiDocumentationWebServiceView
 ) ->
 
-  class ApiDocumentationListView extends Marionette.CollectionView
-    tagName: 'ol'
-    className: 'navigator-results-list'
+  class extends Marionette.CollectionView
+    className: 'list-group'
     itemView: ApiDocumentationWebServiceView
 
+
     itemViewOptions: (model) ->
       app: @options.app
       highlighted: model.get('path') == @highlighted

diff --git a/server/sonar-web/src/main/coffee/api-documentation/views/api-documentation-web-service-view.coffee b/server/sonar-web/src/main/coffee/api-documentation/views/api-documentation-web-service-view.coffee
index e82b95360f71fe66a7cc02b338bc0d1a1902b59a..4d232c544813db16cf8062f594157c76c922ea48 100644 (file)
--- a/server/sonar-web/src/main/coffee/api-documentation/views/api-documentation-web-service-view.coffee
+++ b/server/sonar-web/src/main/coffee/api-documentation/views/api-documentation-web-service-view.coffee
@@ -7,10 +7,11 @@ define [
   ApiDocumentationActionsListView
 ) ->
 
-  class ApiDocumentationWebServiceView extends Marionette.ItemView
-    tagName: 'li'
+  class extends Marionette.ItemView
+    tagName: 'a'
+    className: 'list-group-item'
     template: Templates['api-documentation-web-service']
-    spinner: '<i class="spinner"></i>'
+
 
     modelEvents:
       'change': 'render'

diff --git a/server/sonar-web/src/main/coffee/quality-gate/views/quality-gate-sidebar-list-item-view.coffee b/server/sonar-web/src/main/coffee/quality-gate/views/quality-gate-sidebar-list-item-view.coffee
index 4f2e3eaa14c4a68908f437a6cd56d8343b8db087..8e1e4a12083c08d21ec3c3c6c2c800c7ec1973e5 100644 (file)
--- a/server/sonar-web/src/main/coffee/quality-gate/views/quality-gate-sidebar-list-item-view.coffee
+++ b/server/sonar-web/src/main/coffee/quality-gate/views/quality-gate-sidebar-list-item-view.coffee
@@ -3,7 +3,8 @@ define [
 ], ->
 
   class QualityGateSidebarListItemView extends Marionette.ItemView
-    className: 'facet search-navigator-facet'
+    tagName: 'a'
+    className: 'list-group-item'
     template: Templates['quality-gate-sidebar-list-item']
 
 

diff --git a/server/sonar-web/src/main/coffee/quality-gate/views/quality-gate-sidebar-list-view.coffee b/server/sonar-web/src/main/coffee/quality-gate/views/quality-gate-sidebar-list-view.coffee
index 7cdfbe4a14e2b7c490075bf7edbe90fcb7bf3b47..8cda415579567fc4e41cac303d72f21a53d4556a 100644 (file)
--- a/server/sonar-web/src/main/coffee/quality-gate/views/quality-gate-sidebar-list-view.coffee
+++ b/server/sonar-web/src/main/coffee/quality-gate/views/quality-gate-sidebar-list-view.coffee
@@ -7,7 +7,7 @@ define [
 ) ->
 
   class QualityGateSidebarListView extends Marionette.CollectionView
-    className: 'search-navigator-facet-list'
+    className: 'list-group'
     itemView: QualityGateSidebarListItemView
     emptyView: QualityGateSidebarListEmptyView
 

diff --git a/server/sonar-web/src/main/hbs/api-documentation/api-documentation-actions.hbs b/server/sonar-web/src/main/hbs/api-documentation/api-documentation-actions.hbs
index b5f7dd79a73a6327e5e693fc999b3a6184a2be07..6c03ebefd07243520da8b7aa12f993027caedde5 100644 (file)
--- a/server/sonar-web/src/main/hbs/api-documentation/api-documentation-actions.hbs
+++ b/server/sonar-web/src/main/hbs/api-documentation/api-documentation-actions.hbs
@@ -1,5 +1,5 @@
-<div class="navigator-header">
-  <h1 class="navigator-header-title">{{path}}</h1>
+<div class="search-navigator-workspace-header">
+  <h2 class="search-navigator-header-component">{{path}}</h2>
 </div>
-<p>{{description}}</p>
-<div class="api-documentation-actions-list"></div>
\ No newline at end of file
+
+<div class="search-navigator-workspace-list"></div>

diff --git a/server/sonar-web/src/main/hbs/api-documentation/api-documentation-layout.hbs b/server/sonar-web/src/main/hbs/api-documentation/api-documentation-layout.hbs
index 149427d617b6f118dd4f0fc6baac52f8e9917051..7e0e7c42a31ed36691403158a3e90b521f594cad 100644 (file)
--- a/server/sonar-web/src/main/hbs/api-documentation/api-documentation-layout.hbs
+++ b/server/sonar-web/src/main/hbs/api-documentation/api-documentation-layout.hbs
@@ -1,16 +1,8 @@
-<div class="navigator-content">
-  <div class="navigator-side">
-    <div class="navigator-actions">
-      <h1 class="navigator-header-title">API Documentation</h1>
-    </div>
-    <div class="api-documentation-show-internals subtitle">
-      <label for="api-documentation-show-internals">Show internal services</label>
-      <input type="checkbox" id="api-documentation-show-internals"/>
-    </div>
-    <div class="navigator-results api-documentation-nav"></div>
+<div class="search-navigator-side search-navigator-side-light">
+  <div class="search-navigator-filters">
+    <h1 class="page-title">API Documentation</h1>
   </div>
-  <div class="navigator-main">
-    <!--div class="navigator-header"></div-->
-    <div class="navigator-details"></div>
-  </div>
-</div>
\ No newline at end of file
+  <div class="api-documentation-results panel"></div>
+</div>
+
+<div class="search-navigator-workspace"></div>

diff --git a/server/sonar-web/src/main/hbs/api-documentation/api-documentation-web-service.hbs b/server/sonar-web/src/main/hbs/api-documentation/api-documentation-web-service.hbs
index 1e5965cd4d52fd61e45d861353dcab7fd25f08ac..d5c585b4f4f04ccf7f4003e94f0dc283fecadf04 100644 (file)
--- a/server/sonar-web/src/main/hbs/api-documentation/api-documentation-web-service.hbs
+++ b/server/sonar-web/src/main/hbs/api-documentation/api-documentation-web-service.hbs
@@ -1,5 +1,5 @@
-<div class="line line-small">
-  <h1>{{path}}</h1>
-  <span class="subtitle">{{{description}}}</span>
-  {{#if internal}}<span class="subtitle internal">internal</span>{{/if}}
-</div>
+<h3 class="list-group-item-heading">{{path}}</h3>
+<p class="list-group-item-text">{{{description}}}</p>
+{{#if internal}}
+  <p class="note">internal</p>
+{{/if}}

diff --git a/server/sonar-web/src/main/hbs/quality-gates/quality-gate-sidebar-list-item.hbs b/server/sonar-web/src/main/hbs/quality-gates/quality-gate-sidebar-list-item.hbs
index 2b8f1089eb76311207a0836fc5ba3c16f4d7a843..65810bcdc41df225e53f8460fd015bf9d2cc32ed 100644 (file)
--- a/server/sonar-web/src/main/hbs/quality-gates/quality-gate-sidebar-list-item.hbs
+++ b/server/sonar-web/src/main/hbs/quality-gates/quality-gate-sidebar-list-item.hbs
@@ -1,7 +1,4 @@
-<span class="facet-name">
-  {{name}}
-</span>
-
+{{name}}
 {{#if default}}
-  <span class="facet-stat">{{t 'default'}}</span>
+  <small class="note">{{t 'default'}}</small>
 {{/if}}

diff --git a/server/sonar-web/src/main/hbs/quality-gates/quality-gates-layout.hbs b/server/sonar-web/src/main/hbs/quality-gates/quality-gates-layout.hbs
index d596459b6a704fde1a5032c8cfbd1df8334550d0..e156acf6e18a6c844b56b09bfbf4b625743fd8fc 100644 (file)
--- a/server/sonar-web/src/main/hbs/quality-gates/quality-gates-layout.hbs
+++ b/server/sonar-web/src/main/hbs/quality-gates/quality-gates-layout.hbs
@@ -1,6 +1,6 @@
-<div class="search-navigator-side quality-gates-side">
+<div class="search-navigator-side search-navigator-side-light">
   <div class="search-navigator-filters"></div>
-  <div class="quality-gates-results"></div>
+  <div class="quality-gates-results panel"></div>
 </div>
 
 <div class="search-navigator-workspace">

diff --git a/server/sonar-web/src/main/less/components.less b/server/sonar-web/src/main/less/components.less
index 028babb53a96cda412122aa8c5b68323cf35f356..c64d9930a42efa56db6bf80fcc7e7eb88d6cd13f 100644 (file)
--- a/server/sonar-web/src/main/less/components.less
+++ b/server/sonar-web/src/main/less/components.less
@@ -19,3 +19,5 @@
 @import "components/login";
 @import "components/graphics";
 @import "components/bubble-popup";
+@import "components/list-groups";
+@import "components/panels";

diff --git a/server/sonar-web/src/main/less/components/list-groups.less b/server/sonar-web/src/main/less/components/list-groups.less
new file mode 100644 (file)
index 0000000..06dd68e
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/list-groups.less
@@ -0,0 +1,45 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+
+.list-group {
+  margin-bottom: 20px;
+  padding-left: 0;
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  margin-bottom: -1px;
+  padding: 5px 10px;
+  border: 1px solid transparent;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.active,
+  &.active:hover,
+  &.active:focus {
+    z-index: 2;
+    border-color: @blue !important;
+    background-color: @lightBlue;
+  }
+}
+
+.list-group-item + .list-group-item {
+  border-top-color: @barBorderColor;
+}
+
+a.list-group-item {
+  color: @baseFontColor;
+}
+
+.list-group-item-heading {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+
+.list-group-item-text {
+  margin-bottom: 0;
+  line-height: 1.3;
+}

diff --git a/server/sonar-web/src/main/less/components/panels.less b/server/sonar-web/src/main/less/components/panels.less
new file mode 100644 (file)
index 0000000..6c6cd86
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/panels.less
@@ -0,0 +1,6 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+
+.panel {
+  padding: 10px;
+}

diff --git a/server/sonar-web/src/main/less/components/search-navigator.less b/server/sonar-web/src/main/less/components/search-navigator.less
index 5b7d664110f5ea3205e0de0128199a078e86e190..bf73a8bfc1c9ea5d94116142da6064fdeaadf8a4 100644 (file)
--- a/server/sonar-web/src/main/less/components/search-navigator.less
+++ b/server/sonar-web/src/main/less/components/search-navigator.less
@@ -47,6 +47,10 @@
   overflow-x: hidden;
 }
 
+.search-navigator-side-light {
+  background-color: @barBackgroundColor;
+}
+
 .search-navigator-facet-box {
   background-color: @barBackgroundColor;
   font-size: @baseFontSize;

diff --git a/server/sonar-web/src/main/less/pages/api-documentation.less b/server/sonar-web/src/main/less/pages/api-documentation.less
index e30f8bd8e101f96656463ebeefb58c61a8bc4f2e..174adcf2d945cea92a1eaaef41608a9ba818f412 100644 (file)
--- a/server/sonar-web/src/main/less/pages/api-documentation.less
+++ b/server/sonar-web/src/main/less/pages/api-documentation.less
@@ -4,85 +4,19 @@
 
 @apiDocumentationSidebarWidth: 230px;
 
-.api-documentation-navigator {
-
-  .navigator-side {
-    display: table-cell;
-    vertical-align: top;
-    width: @apiDocumentationSidebarWidth + 2 * @navigatorPadding;
-    min-width: 0;
-  }
-
-  .navigator-header {
-    margin-left: 0;
-    .spinner { margin-top: 9px; }
-  }
-
-  .navigator-actions {
-    height: @navigatorHeaderHeight;
-    width: @apiDocumentationSidebarWidth;
-    margin: @navigatorPadding;
-    padding: 0 @navigatorPadding;
-
-    .navigator-header-title {
-      color: @baseFontColor;
-      font-size: 13px;
-      font-weight: bold;
-      text-transform: uppercase;
-    }
-  }
-
-  .api-documentation-show-internals {
-    margin: @navigatorPadding;
-    padding: 0 @navigatorPadding;
-  }
-
-  .navigator-results {
-    width: @apiDocumentationSidebarWidth;
-    min-width: 0;
-  }
-
-  .navigator-details { margin-left: 0; }
-
-  .internal {
-    color: @navigatorBarBackground;
-    background-color: rgb(127, 127, 127);
-    border-radius: 2px;
-    padding: 1px 5px;
-  }
+.api-documentation-show-internals {
+  margin: @navigatorPadding;
+  padding: 0 @navigatorPadding;
 }
 
-
-.api-documentation-nav {
-
-  .navigator-results-list {
-
-    & > li {
-      border-color: transparent;
-
-      &:hover:not(.active):not(.empty) {
-        background-color: @navigatorBarBackground;
-      }
-
-      &.active {
-        border-color: #4B9FD5;
-      }
-
-      &.empty {
-        cursor: default;
-      }
-
-      .line {
-        padding-top: 2px;
-        padding-bottom: 2px;
-      }
-    }
-  }
+.internal {
+  color: @navigatorBarBackground;
+  background-color: rgb(127, 127, 127);
+  border-radius: 2px;
+  padding: 1px 5px;
 }
 
 .api-documentation-actions {
-  margin-top: 10px;
-  margin-left: 5px;
 
   ol {
     li {
@@ -136,10 +70,6 @@
       }
     }
 
-    .example-response {
-      text-decoration: underline;
-    }
-
     .example-response-content {
       margin: 10px 0;
       padding: 5px;

diff --git a/server/sonar-web/src/main/less/pages/quality-gates.less b/server/sonar-web/src/main/less/pages/quality-gates.less
index eea7e0bf0d0e455b11751b1c9224839bee871632..99007869f61df92a665ba679d5a0be54147514ec 100644 (file)
--- a/server/sonar-web/src/main/less/pages/quality-gates.less
+++ b/server/sonar-web/src/main/less/pages/quality-gates.less
@@ -6,10 +6,6 @@
   background-color: @barBackgroundColor;
 }
 
-.quality-gates-results {
-  padding: 5px 0;
-}
-
 @qualityGateSidebarWidth: 230px;
 
 .quality-gates-navigator {

diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/api_documentation/index.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/api_documentation/index.html.erb
index 2ba2ac6afc396dccf0179704c012ebebde36317d..56a3439dc8808b022ec513a573310765127bd8f1 100644 (file)
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/api_documentation/index.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/api_documentation/index.html.erb
@@ -2,6 +2,4 @@
   <script>require(['api-documentation/app']);</script>
 <% end %>
 
-<div id="api-documentation-page-loader" class="navigator-page-loader">
-  <i class="spinner"></i>
-</div>
+<div id="api-documentation" class="search-navigator"></div>