SONAR-9580 Use fixed width layout on Rules page

8 files changed, 36 insertions, 262 deletions

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/filters-view.js b/server/sonar-web/src/main/js/apps/coding-rules/filters-view.js
deleted file mode 100644
index abc63f8807b..00000000000
--- a/server/sonar-web/src/main/js/apps/coding-rules/filters-view.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2017 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import Marionette from 'backbone.marionette';
-import Template from './templates/coding-rules-filters.hbs';
-
-export default Marionette.ItemView.extend({
-  template: Template
-});
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/init.js b/server/sonar-web/src/main/js/apps/coding-rules/init.js
index af9a1b27e24..d3f6fcd3587 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/init.js
+++ b/server/sonar-web/src/main/js/apps/coding-rules/init.js
@@ -32,7 +32,6 @@ import Router from '../../components/navigator/router';
 import WorkspaceListView from './workspace-list-view';
 import WorkspaceHeaderView from './workspace-header-view';
 import FacetsView from './facets-view';
-import FiltersView from './filters-view';
 import { areThereCustomOrganizations } from '../../store/organizations/utils';
 
 const App = new Marionette.Application();
@@ -103,11 +102,6 @@ App.on('start', function(options: {
       });
       this.layout.facetsRegion.show(this.facetsView);
 
-      this.filtersView = new FiltersView({
-        app: this
-      });
-      this.layout.filtersRegion.show(this.filtersView);
-
       key.setScope('list');
       this.router = new Router({
         app: this
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/layout.js b/server/sonar-web/src/main/js/apps/coding-rules/layout.js
index ba874e70120..19cd60f028b 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/layout.js
+++ b/server/sonar-web/src/main/js/apps/coding-rules/layout.js
@@ -25,33 +25,31 @@ export default Marionette.LayoutView.extend({
   template: Template,
 
   regions: {
-    filtersRegion: '.search-navigator-filters',
-    facetsRegion: '.search-navigator-facets',
-    workspaceHeaderRegion: '.search-navigator-workspace-header',
-    workspaceListRegion: '.search-navigator-workspace-list',
-    workspaceDetailsRegion: '.search-navigator-workspace-details'
+    facetsRegion: '.layout-page-filters',
+    workspaceHeaderRegion: '.coding-rules-header',
+    workspaceListRegion: '.coding-rules-list',
+    workspaceDetailsRegion: '.coding-rules-details'
   },
 
   onRender() {
-    const navigator = this.$('.search-navigator');
+    const navigator = this.$('.layout-page');
     const top = navigator.offset().top;
-    this.$('.search-navigator-workspace-header').css({ top });
-    this.$('.search-navigator-side').css({ top }).isolatedScroll();
+    this.$('.layout-page-side').css({ top });
   },
 
   showDetails() {
     this.scroll = $(window).scrollTop();
-    this.$('.search-navigator').addClass('search-navigator-extended-view');
+    this.$('.coding-rules').addClass('coding-rules-extended-view');
   },
 
   hideDetails() {
-    this.$('.search-navigator').removeClass('search-navigator-extended-view');
+    this.$('.coding-rules').removeClass('coding-rules-extended-view');
     if (this.scroll != null) {
       $(window).scrollTop(this.scroll);
     }
   },
 
   detailsShow() {
-    return this.$('.search-navigator').is('.search-navigator-extended-view');
+    return this.$('.coding-rules').is('.coding-rules-extended-view');
   }
 });
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-filters.hbs b/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-filters.hbs
deleted file mode 100644
index e307b61b100..00000000000
--- a/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-filters.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<h1 class="page-title">
-  {{t 'coding_rules.page'}}
-</h1>
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-layout.hbs b/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-layout.hbs
index 3290b738558..51efa6c6f8b 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-layout.hbs
+++ b/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-layout.hbs
@@ -1,12 +1,20 @@
-<div class="coding-rules search-navigator sticky">
-  <div class="search-navigator-side">
-    <div class="search-navigator-filters"></div>
-    <div class="search-navigator-facets"></div>
+<div class="layout-page coding-rules">
+  <div class="layout-page-side-outer">
+    <div class="layout-page-side">
+      <div class="layout-page-side-inner">
+        <div class="layout-page-filters">
+        </div>
+      </div>
+    </div>
   </div>
 
-  <div class="search-navigator-workspace">
-    <div class="search-navigator-workspace-header"></div>
-    <div class="search-navigator-workspace-list"></div>
-    <div class="search-navigator-workspace-details"></div>
+  <div class="layout-page-main">
+    <div class="layout-page-header-panel layout-page-main-header">
+      <div class="layout-page-header-panel-inner layout-page-main-header-inner">
+        <div class="layout-page-main-inner coding-rules-header"></div>
+      </div>
+    </div>
+    <div class="layout-page-main-inner coding-rules-list"></div>
+    <div class="layout-page-main-inner coding-rules-details"></div>
   </div>
 </div>
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-workspace-header.hbs b/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-workspace-header.hbs
index acb9af21724..53dcba3b520 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-workspace-header.hbs
+++ b/server/sonar-web/src/main/js/apps/coding-rules/templates/coding-rules-workspace-header.hbs
@@ -1,4 +1,4 @@
-<div class="search-navigator-header-component">
+<div class="pull-left">
   {{#if state.rule}}
     <a class="js-back">{{t 'coding_rules.return_to_list'}}</a>
   {{else}}
@@ -7,7 +7,7 @@
 </div>
 
 
-<div class="search-navigator-header-actions">
+<div class="pull-right">
   {{#notNull state.total}}
     <div class="search-navigator-header-pagination flash flash-heavy">
       <strong>
diff --git a/server/sonar-web/src/main/less/components/rules.less b/server/sonar-web/src/main/less/components/rules.less
index 05a3270dd9e..eb2ec7037e9 100644
--- a/server/sonar-web/src/main/less/components/rules.less
+++ b/server/sonar-web/src/main/less/components/rules.less
@@ -96,9 +96,7 @@
 }
 
 .coding-rule-section-separator {
-  height: 10px;
-  margin: 0 -10px;
+  height: 0;
+  margin: 10px 0;
   border-top: 1px solid @barBorderColor;
-  border-bottom: 1px solid @barBorderColor;
-  background-color: @barBackgroundColor;
 }
diff --git a/server/sonar-web/src/main/less/pages/coding-rules.less b/server/sonar-web/src/main/less/pages/coding-rules.less
index fefd9a34845..d1ec59b1eaa 100644
--- a/server/sonar-web/src/main/less/pages/coding-rules.less
+++ b/server/sonar-web/src/main/less/pages/coding-rules.less
@@ -22,47 +22,13 @@
 @import (reference) '../init/links';
 @import (reference) '../components/ui';
 
-@facetsHeight: 36px;
-
-.coding-rules-page {
-  .navigator-facets {
-    min-height: 3 * @facetsHeight;
-  }
-
-  .navigator-results .spinner {
-    margin: @navigatorPadding;
-  }
-
-  .navigator-results .line-right {
-    margin-top: -14px;
-    float: none;
-    text-align: right;
-  }
-
-  .navigator-results-list .line {
-    padding-top: 3px;
-    padding-bottom: 3px;
+.coding-rules-extended-view {
+  .coding-rules-list {
+    display: none;
   }
 
-  .navigator-results-list .line + .line {
-    padding-top: 0;
-  }
-
-  .navigator-results-list .line-small {
-    color: @secondFontColor;
-  }
-}
-
-.navigator-filter-query {
-  min-width: 40em;
-  padding: 0 5px;
-
-  input {
-    height: 80%;
-    width: 100%;
-    font-size: @baseFontSize;
-    vertical-align: middle;
-    vertical-align: -webkit-baseline-middle;
+  .coding-rules-details {
+    display: block;
   }
 }
 
@@ -72,50 +38,12 @@
 
 .coding-rules-detail-title {
   position: relative;
+  display: inline-block;
+  margin: 16px 0;
   font-size: @bigFontSize;
   font-weight: 400;
 }
 
-.coding-rules-detail-title,
-.coding-rules-detail-actions {
-  margin: 16px 0;
-}
-
-.coding-rules-detail-title {
-  display: inline-block;
-}
-
-.coding-rules-detail-title-first {
-  margin-top: 6px;
-}
-
-.coding-rules-detail-context {
-  margin-bottom: @navigatorPadding;
-  padding: @navigatorPadding / 2;
-  border: 1px solid @contextBorder;
-  background-color: @contextBackground;
-
-  .coding-rules-detail-quality-profile {
-    margin-left: 0;
-  }
-  .coding-rules-detail-quality-profile-name,
-  .coding-rules-detail-quality-profile-severity,
-  .coding-rules-detail-quality-profile-parameters,
-  .coding-rules-detail-quality-profile-actions {
-    vertical-align: top;
-  }
-  .coding-rules-detail-quality-profile-name,
-  .coding-rules-detail-quality-profile-severity {
-    width: 1px;
-    padding-right: @navigatorPadding;
-    white-space: nowrap;
-  }
-
-  .coding-rules-detail-quality-profile-parameter {
-    display: table-cell;
-  }
-}
-
 .coding-rules-detail-quality-profile-parameter {
   display: block;
   height: 100%;
@@ -144,40 +72,6 @@
   margin-top: 0;
 }
 
-.coding-rules-detail-context-actions {
-  padding: @navigatorPadding / 2;
-  background-color: @contextBackground;
-  border: 1px solid @contextBorder;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.coding-rules-detail-context-actions-quality-profile {
-  vertical-align: middle;
-  margin-right: @navigatorPadding;
-  font-weight: bold;
-}
-
-.coding-rules-detail-context-actions-item {
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: @navigatorPadding;
-
-  .limited {
-    display: inline-block;
-    vertical-align: middle;
-    max-width: 180px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .limited-big {
-    max-width: 480px;
-  }
-}
-
 .coding-rules-detail-properties {
   margin: @navigatorPadding 0;
   font-size: 0;
@@ -200,16 +94,6 @@
   }
 }
 
-.coding-rules-subcharacteristic {
-  cursor: pointer;
-}
-
-.coding-rules-debt-popup {
-  h3 {
-    display: inline;
-  }
-}
-
 .coding-rules-detail-tag + .coding-rules-detail-tag {
   margin-left: @navigatorPadding;
 }
@@ -249,9 +133,6 @@
   margin: @navigatorPadding 0 @navigatorPadding * 2;
 }
 
-.coding-rules-detail-parameter {
-}
-
 .coding-rules-detail-parameter-name {
   width: 1px;
   vertical-align: top;
@@ -269,24 +150,7 @@
   word-break: break-all;
 }
 
-.coding-rules-detail-parameter-details {
-  display: inline-block;
-  font-size: @baseFontSize;
-  padding-left: 5px;
-}
-
-.coding-rules-detail-parameter-original {
-  margin-left: @navigatorPadding;
-  font-size: @smallFontSize;
-}
-
 // Quality Profiles
-.coding-rules-detail-quality-profiles-section {
-}
-
-.coding-rules-detail-quality-profiles-header {
-  margin-top: 3 * @navigatorPadding;
-}
 
 .coding-rules-detail-quality-profiles,
 .coding-rules-detail-list {
@@ -355,43 +219,7 @@
   margin-left: @navigatorPadding;
 }
 
-.coding-rules-detail-quality-profiles-template-caption {
-  margin-bottom: @navigatorPadding;
-}
-
 // Bulk Change
-.coding-rules-bulk-change-dropdown {
-  position: absolute;
-  z-index: @dropdown-menu-z-index;
-  width: 200px;
-  border: 1px solid @barBorderColor;
-  box-sizing: border-box;
-  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
-  background-color: #fff;
-}
-
-.coding-rules-bulk-change-dropdown-link {
-  display: block;
-  max-width: 190px;
-  height: 30px;
-  line-height: 30px;
-  padding: 0 @navigatorPadding;
-  font-size: @smallFontSize;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  .link-no-underline;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background-color: @barBackgroundColor;
-  }
-
-  strong {
-    font-weight: bold;
-  }
-}
-
 input.coding-rules-name-key {
   width: 100%;
 }
@@ -401,30 +229,6 @@ textarea.coding-rules-markdown-description {
   margin-bottom: 4px;
 }
 
-.coding-rules-modal .property {
-  input,
-  textarea {
-    width: 100%;
-  }
-}
-
-.coding-rules-subcharacteristic-more {
-  display: none;
-}
-
-.coding-rules-list-tags {
-  display: inline-block;
-  vertical-align: top;
-  max-width: 50%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  .icon-tags:before {
-    font-size: 12px;
-  }
-}
-
 .coding-rules-most-violated-projects {
   td {
     border-top-color: transparent;