SONAR-5007 Display details of a rule and actions relating to it

5 files changed, 240 insertions, 57 deletions

diff --git a/sonar-server/src/main/webapp/stylesheets/coding-rules.css b/sonar-server/src/main/webapp/stylesheets/coding-rules.css
index d6a637f0d0d..f8dd46015ec 100644
--- a/sonar-server/src/main/webapp/stylesheets/coding-rules.css
+++ b/sonar-server/src/main/webapp/stylesheets/coding-rules.css
@@ -37,10 +37,50 @@
   display: inline-block;
   vertical-align: middle;
   font-size: 13px;
+  height: 22px;
+  line-height: 22px;
+}
+.coding-rules-detail-property .select2-search-field {
+  line-height: 1;
 }
 .coding-rules-detail-property + .coding-rules-detail-property {
   margin-left: 20px;
 }
+.coding-rules-detail-tag + .coding-rules-detail-tag {
+  margin-left: 10px;
+}
+.coding-rules-detail-tag-delete {
+  position: relative;
+  top: -1px;
+  transition: all 0.3s ease;
+}
+.coding-rules-detail-tag-delete:hover,
+.coding-rules-detail-tag-delete:focus {
+  color: #d4333f;
+}
+.coding-rules-detail-tag-add {
+  transition: all 0.3s ease;
+}
+.coding-rules-detail-tag-add:hover,
+.coding-rules-detail-tag-add:focus {
+  color: #85bb43;
+}
+.coding-rules-detail-tag + .coding-rules-detail-tags-change {
+  margin-left: 15px;
+}
+.coding-rules-detail-add-tag-box {
+  position: absolute;
+  width: 200px;
+  padding: 10px;
+  border: 1px solid #e1e1e1;
+  background-color: #fff;
+}
+.coding-rules-detail-add-tag-list-item {
+  padding: 3px 0;
+}
+.coding-rules-detail-add-tag-list-item input[type=text] {
+  width: 120px;
+}
 .coding-rules-detail-description {
   margin: 20px 0;
   padding-left: 10px;
diff --git a/sonar-server/src/main/webapp/stylesheets/coding-rules.less b/sonar-server/src/main/webapp/stylesheets/coding-rules.less
index 2bfcfa5e460..a2c5fa9ad5e 100644
--- a/sonar-server/src/main/webapp/stylesheets/coding-rules.less
+++ b/sonar-server/src/main/webapp/stylesheets/coding-rules.less
@@ -45,12 +45,52 @@
   display: inline-block;
   vertical-align: middle;
   font-size: @baseFontSize;
+  height: 22px;
+  line-height: 22px;
+
+  .select2-search-field { line-height: 1; }
 }
 
 .coding-rules-detail-property + .coding-rules-detail-property {
   margin-left: 2 * @navigatorPadding;
 }
 
+.coding-rules-detail-tag + .coding-rules-detail-tag {
+  margin-left: @navigatorPadding;
+}
+
+.coding-rules-detail-tag-delete {
+  position: relative;
+  top: -1px;
+  .trans;
+
+  &:hover, &:focus { color: @red; }
+}
+
+.coding-rules-detail-tag-add {
+  .trans;
+
+  &:hover, &:focus { color: @green; }
+}
+
+.coding-rules-detail-tag + .coding-rules-detail-tags-change {
+  margin-left: 1.5 * @navigatorPadding;
+}
+
+.coding-rules-detail-add-tag-box {
+  position: absolute;
+  width: 200px;
+  padding: @navigatorPadding;
+  border: 1px solid @navigatorBorderLightColor;
+  background-color: #fff;
+}
+
+.coding-rules-detail-add-tag-list-item {
+  padding: 3px 0;
+
+  input[type=text] { width: 120px; }
+}
+
 .coding-rules-detail-description {
   margin: 2 * @navigatorPadding 0;
   padding-left: @navigatorPadding;
diff --git a/sonar-server/src/main/webapp/stylesheets/icons.css b/sonar-server/src/main/webapp/stylesheets/icons.css
index e621957bec3..aa150eafb4d 100644
--- a/sonar-server/src/main/webapp/stylesheets/icons.css
+++ b/sonar-server/src/main/webapp/stylesheets/icons.css
@@ -31,6 +31,10 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+a[class^="icon-"],
+a[class*=" icon-"] {
+  text-decoration: none !important;
+}
 /*
  * Severity
  */
@@ -108,24 +112,6 @@
   line-height: 12px;
 }
 /*
- * Resolution
- */
-.icon-resolution-fixed:before {
-  content: "\f05d";
-  color: #444444;
-  font-size: 14px;
-}
-.icon-resolution-false-positive:before {
-  content: "\f05c";
-  color: #444444;
-  font-size: 14px;
-}
-.icon-resolution-removed:before {
-  content: "\f05e";
-  color: #444444;
-  font-size: 14px;
-}
-/*
  * Alert
  */
 .icon-alert-ok:before {
@@ -149,6 +135,21 @@
   font-size: 16px;
 }
 /*
+ * Qualifier
+ */
+.icon-qualifier-dir:before {
+  content: "\f07b";
+  font-size: 16px;
+}
+.icon-qualifier-fil:before {
+  content: "\f0f6";
+  font-size: 16px;
+}
+.icon-qualifier-lib:before {
+  content: "\e600";
+  font-size: 16px;
+}
+/*
  * Common
  */
 .icon-list:before {
@@ -217,6 +218,56 @@
   content: "\f073";
   font-size: 14px;
 }
+.icon-favorite:before {
+  content: "\f005";
+  color: #ff9900;
+  font-size: 16px;
+}
+.icon-not-favorite:before {
+  content: "\f005";
+  color: #cdcdcd;
+  font-size: 16px;
+}
+.icon-help:before {
+  content: "\f059";
+  color: #4b9fd5;
+  font-size: 16px;
+}
+.icon-info:before {
+  content: "\f05a";
+  color: #4b9fd5;
+  font-size: 16px;
+}
+.icon-uniF060:before {
+  content: "\f060";
+}
+.icon-uniF061:before {
+  content: "\f061";
+}
+.icon-uniF062:before {
+  content: "\f062";
+}
+.icon-uniF063:before {
+  content: "\f063";
+}
+.icon-comment:before {
+  content: "\f075";
+}
+.icon-delete:before {
+  content: "\f00d";
+}
+.icon-compare:before {
+  content: "\f0c5";
+}
+.icon-link:before {
+  content: "\f0c1";
+}
+.icon-inheritance:before {
+  content: "\f126";
+}
+.icon-plus:before {
+  content: "\f067";
+}
 /*
  * Spinner
  */
diff --git a/sonar-server/src/main/webapp/stylesheets/icons.less b/sonar-server/src/main/webapp/stylesheets/icons.less
index cd2bc385f38..5c8bc983bd1 100644
--- a/sonar-server/src/main/webapp/stylesheets/icons.less
+++ b/sonar-server/src/main/webapp/stylesheets/icons.less
@@ -24,6 +24,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+a[class^="icon-"], a[class*=" icon-"] {
+  text-decoration: none !important;
+}
+
 
 /*
  * Severity
@@ -38,31 +42,31 @@
 .icon-severity-4:before {
   content: "\f000";
   color: @severityBlockerColor;
-  font-size: @iconFontSize;
+  font-size: @iconSmallFontSize;
 }
 .icon-severity-critical:before,
 .icon-severity-3:before {
   content: "\f001";
   color: @severityCriticalColor;
-  font-size: @iconFontSize;
+  font-size: @iconSmallFontSize;
 }
 .icon-severity-major:before,
 .icon-severity-2:before {
   content: "\f002";
   color: @severityMajorColor;
-  font-size: @iconFontSize;
+  font-size: @iconSmallFontSize;
 }
 .icon-severity-minor:before,
 .icon-severity-1:before {
   content: "\f003";
   color: @severityMinorColor;
-  font-size: @iconFontSize;
+  font-size: @iconSmallFontSize;
 }
 .icon-severity-info:before,
 .icon-severity-0:before {
   content: "\f004";
   color: @severityInfoColor;
-  font-size: @iconFontSize;
+  font-size: @iconSmallFontSize;
 }
 
 
@@ -78,79 +82,76 @@
 .icon-status-open:before {
   content: "\f010";
   color: @statusOpenColor;
-  font-size: @iconFontSize;
+  font-size: @iconSmallFontSize;
   line-height: @iconLineHeight;
 }
 .icon-status-confirmed:before {
   content: "\f011";
   color: @statusConfirmedColor;
-  font-size: @iconFontSize;
+  font-size: @iconSmallFontSize;
   line-height: @iconLineHeight;
 }
 .icon-status-reopened:before {
   content: "\f012";
   color: @statusReopenedColor;
-  font-size: @iconFontSize;
+  font-size: @iconSmallFontSize;
   line-height: @iconLineHeight;
 }
 .icon-status-resolved:before {
   content: "\f013";
   color: @statusResolvedColor;
-  font-size: @iconFontSize;
+  font-size: @iconSmallFontSize;
   line-height: @iconLineHeight;
 }
 .icon-status-closed:before {
   content: "\f014";
   color: @statusClosedColor;
-  font-size: @iconFontSize;
+  font-size: @iconSmallFontSize;
   line-height: @iconLineHeight;
 }
 
 
 /*
- * Resolution
- */
-
-.icon-resolution-fixed:before {
-  content: "\f05d";
-  color: @resolutionFixedColor;
-  font-size: @iconFontSize;
-}
-.icon-resolution-false-positive:before {
-  content: "\f05c";
-  color: @resolutionFalsePositiveColor;
-  font-size: @iconFontSize;
-}
-.icon-resolution-removed:before {
-  content: "\f05e";
-  color: @resolutionRemovedColor;
-  font-size: @iconFontSize;
-}
-
-
-/*
  * Alert
  */
 
 .icon-alert-ok:before {
   content: "\f013";
   color: @green;
-  font-size: @iconFontSize + 2px;
+  font-size: @iconFontSize;
 }
 .icon-alert-warn:before {
   content: "\f000";
   color: @orange;
-  font-size: @iconFontSize + 2px;
+  font-size: @iconFontSize;
 }
 .icon-alert-error:before {
   content: "\f057";
   color: @red;
-  font-size: @iconFontSize + 2px;
+  font-size: @iconFontSize;
 }
 .icon-alert-none:before {
   content: "\f059";
   color: @blue;
-  font-size: @iconFontSize + 2px;
+  font-size: @iconFontSize;
+}
+
+
+/*
+ * Qualifier
+ */
+
+.icon-qualifier-dir:before {
+  content: "\f07b";
+  font-size: @iconFontSize;
+}
+.icon-qualifier-fil:before {
+  content: "\f0f6";
+  font-size: @iconFontSize;
+}
+.icon-qualifier-lib:before {
+  content: "\e600";
+  font-size: @iconFontSize;
 }
 
 
@@ -210,22 +211,72 @@
 }
 .icon-lang:before {
   content: "\f024";
-  font-size: @iconFontSize;
+  font-size: @iconSmallFontSize;
 }
 .icon-quality-profile:before {
   content: "\f022";
-  font-size: @iconFontSize;
+  font-size: @iconSmallFontSize;
 }
 .icon-tags:before {
   content: "\f02c";
-  font-size: @iconFontSize;
+  font-size: @iconSmallFontSize;
 }
 .icon-calendar:before {
   position: relative;
   top: -0.1em;
   content: "\f073";
+  font-size: @iconSmallFontSize;
+}
+.icon-favorite:before {
+  content: "\f005";
+  color: @orange;
   font-size: @iconFontSize;
 }
+.icon-not-favorite:before {
+  content: "\f005";
+  color: @darkGrey;
+  font-size: @iconFontSize;
+}
+.icon-help:before {
+  content: "\f059";
+  color: @blue;
+  font-size: @iconFontSize;
+}
+.icon-info:before {
+  content: "\f05a";
+  color: @blue;
+  font-size: @iconFontSize;
+}
+.icon-uniF060:before {
+  content: "\f060";
+}
+.icon-uniF061:before {
+  content: "\f061";
+}
+.icon-uniF062:before {
+  content: "\f062";
+}
+.icon-uniF063:before {
+  content: "\f063";
+}
+.icon-comment:before {
+  content: "\f075";
+}
+.icon-delete:before {
+  content: "\f00d";
+}
+.icon-compare:before {
+  content: "\f0c5";
+}
+.icon-link:before {
+  content: "\f0c1";
+}
+.icon-inheritance:before {
+  content: "\f126";
+}
+.icon-plus:before {
+  content: "\f067";
+}
 
 
 /*
diff --git a/sonar-server/src/main/webapp/stylesheets/variables.less b/sonar-server/src/main/webapp/stylesheets/variables.less
index 2f40167a92c..b43675bf36c 100644
--- a/sonar-server/src/main/webapp/stylesheets/variables.less
+++ b/sonar-server/src/main/webapp/stylesheets/variables.less
@@ -32,7 +32,8 @@
  * Icons
  */
 
-@iconFontSize: 14px;
+@iconSmallFontSize: 14px;
+@iconFontSize: 16px;
 @iconLineHeight: 12px;
 
 @severityBlockerColor: @red;