SONAR-5718 Improve saved filters UI

diff --git a/server/sonar-web/src/main/coffee/issues/filters-view.coffee b/server/sonar-web/src/main/coffee/issues/filters-view.coffee
index 1d9f9e9eaed6b0fb347c97eb45fc7928e325dc1b..04b47024403227438e371bc30cded07d3c6020d6 100644 (file)
--- a/server/sonar-web/src/main/coffee/issues/filters-view.coffee
+++ b/server/sonar-web/src/main/coffee/issues/filters-view.coffee
@@ -16,11 +16,11 @@ define [
     events:
       'click .js-issues-toggle-filters': 'toggleFilters'
       'click .js-issues-filter': 'applyFilter'
-      'click .js-issues-new-search': 'newSearch'
-      'click .js-issues-save-as': 'saveAs'
-      'click .js-issues-save': 'save'
-      'click .js-issues-copy': 'copy'
-      'click .js-issues-edit': 'edit'
+      'click #issues-new-search': 'newSearch'
+      'click #issues-filter-save-as': 'saveAs'
+      'click #issues-filter-save': 'save'
+      'click #issues-filter-copy': 'copy'
+      'click #issues-filter-edit': 'edit'
 
 
     initialize: (options) ->
@@ -34,6 +34,10 @@ define [
           filter.fetch().done => @options.app.controller.applyFilter filter
 
 
+    onRender: ->
+      @$el.toggleClass 'issues-filters-selected', @options.app.state.has('filter')
+
+
     toggleFilters: ->
       @$('.issues-filters-list').toggle()
 
@@ -75,3 +79,4 @@ define [
       _.extend super,
         state: @options.app.state.toJSON()
         filter: @options.app.state.get('filter')?.toJSON()
+        currentUser: window.SS.user

diff --git a/server/sonar-web/src/main/hbs/issues/_issues-filter-name.hbs b/server/sonar-web/src/main/hbs/issues/_issues-filter-name.hbs
new file mode 100644 (file)
index 0000000..27a5547
--- /dev/null
+++ b/server/sonar-web/src/main/hbs/issues/_issues-filter-name.hbs
@@ -0,0 +1,18 @@
+{{#if filter.name}}
+  {{filter.name}}
+  <span class="subtitle nowrap">
+    {{#unless filter.shared}}
+      [{{t 'issue_filter.private'}}]
+    {{else}}
+      {{#eq filter.user currentUser}}
+        [{{t 'issue_filter.shared_with_all_users'}}]
+      {{else}}
+        {{#if filter.user}}
+          [{{t 'issue_filter.shared'}}]
+        {{/if}}
+      {{/eq}}
+    {{/unless}}
+  </span>
+{{else}}
+  {{t 'issues'}}
+{{/if}}

diff --git a/server/sonar-web/src/main/hbs/issues/issues-filters.hbs b/server/sonar-web/src/main/hbs/issues/issues-filters.hbs
index 7009e8b38cc4f02459fdd8d111c1752d5a17c1ab..066b9dfc7975e26d43c1b38d2663a815c04a6a95 100644 (file)
--- a/server/sonar-web/src/main/hbs/issues/issues-filters.hbs
+++ b/server/sonar-web/src/main/hbs/issues/issues-filters.hbs
@@ -6,29 +6,31 @@
 </div>
 
 <div class="issues-filters-header">
-  {{#notEmpty items}}
-    <a class="issues-filters-button issues-filters-header-filters js-issues-toggle-filters">
-      {{default filter.name "Saved Filters"}}
+  {{#if state.canManageFilters}}
+    <a class="issues-filters-show-list js-issues-toggle-filters">
+      <i class="icon-list"></i>&nbsp;<span class="issues-filters-name">{{> '_issues-filter-name'}}</span>
     </a>
-  {{/notEmpty}}
+    {{#if filter.description}}
+      <div class="issues-filters-description">{{filter.description}}</div>
+    {{/if}}
+  {{else}}
+    <span class="issues-filters-name">{{t 'issues'}}</span>
+  {{/if}}
+</div>
 
-  <span class="issues-filters-header-actions">
-    <a class="issues-filters-button js-issues-new-search">New Search</a>
+<div class="issues-filters-actions">
+  <div class="button-group">
+    <button id="issues-new-search">{{t 'issue_filter.new_search'}}</button>
 
     {{#if state.canManageFilters}}
       {{#if filter.canModify}}
-        {{#if state.changed}}
-          <a class="issues-filters-button js-issues-save">{{t 'save'}}</a>
-        {{/if}}
+        {{#if state.changed}}<button id="issues-filter-save">{{t 'save'}}</button>{{/if}}
       {{/if}}
-
-      {{#unless filter.id}}<a class="issues-filters-button js-issues-save-as">{{t 'save_as'}}</a>{{/unless}}
-
-      {{#if filter.id}}<a class="issues-filters-button js-issues-copy">{{t 'copy'}}</a>{{/if}}
-
+      {{#unless filter.id}}<button id="issues-filter-save-as">{{t 'save_as'}}</button>{{/unless}}
+      {{#if filter.id}}<button id="issues-filter-copy">{{t 'copy'}}</button>{{/if}}
       {{#if filter.canModify}}
-        {{#if filter.id}}<a class="issues-filters-button js-issues-edit">{{t 'edit'}}</a>{{/if}}
+        {{#if filter.id}}<button id="issues-filter-edit">{{t 'edit'}}</button>{{/if}}
       {{/if}}
     {{/if}}
-  </span>
+  </div>
 </div>

diff --git a/server/sonar-web/src/main/less/issues.less b/server/sonar-web/src/main/less/issues.less
index 01de0dc07c3fd8760d56a9da55fde3e087f0728a..bbb0fb80b0b170fb859f7cbeb5c6a57589135ac6 100644 (file)
--- a/server/sonar-web/src/main/less/issues.less
+++ b/server/sonar-web/src/main/less/issues.less
@@ -38,9 +38,7 @@
   width: @sideWidth;
   top: 30px; left: 0; bottom: 0;
   .box-sizing(border-box);
-  border-right: 1px solid @barBorderColor;
   background-color: @barBorderColor;
-  color: #fff;
   overflow-x: hidden;
 }
 
@@ -142,11 +140,21 @@
 
 .issues-filters {
   .clearfix;
-  padding: 8px 10px;
+  padding: 5px 10px;
   background-color: @barBackgroundColor;
-  color: @secondFontColor;
-  font-size: @smallFontSize;
-  font-weight: 300;
+}
+
+.issues-filters-selected {
+  margin-bottom: 5px;
+
+  .issues-filters-header {
+    float: none;
+  }
+
+  .issues-filters-actions {
+    float: none;
+    margin-top: 5px;
+  }
 }
 
 .issues-filters-list {
@@ -160,32 +168,30 @@
 }
 
 .issues-filters-header {
-  font-size: @smallFontSize;
-  font-weight: 300;
-}
-
-.issues-filters-header-filters {
-  display: inline-block;
-  max-width: 50%;
-  .text-ellipsis;
+  float: left;
+  line-height: 22px;
 }
 
-.issues-filters-header-actions {
-  float: right;
+.issues-filters-name {
+  vertical-align: top;
+  font-size: @bigFontSize;
 }
 
-.issues-filters-button {
-  border-bottom-color: @secondFontColor;
-  color: @secondFontColor;
+.issues-filters-description {
+  margin: 4px 0;
   font-size: @smallFontSize;
-  font-weight: 300;
-  .trans(color);
+  font-style: italic;
+}
 
-  &:hover, &:active {
-    color: #fff;
-  }
+.issues-filters-show-list {
+  margin-right: 4px;
+  border-bottom: none;
+  color: @baseFontColor;
+  font-size: @iconSmallFontSize;
+}
 
-  &:focus {}
+.issues-filters-actions {
+  float: right;
 }
 
 .issues-workspace {
@@ -196,9 +202,8 @@
   .clearfix;
   margin-bottom: 10px;
   padding: 5px 0;
-  border: 1px solid @barBorderColor;
-  border-left: none;
-  background: @barBackgroundColor;
+  line-height: 22px;
+  background-color: @barBackgroundColor;
   font-size: @smallFontSize;
 }
 

diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
index 65212efea1c741e3e14929839c181625082e48b1..aab51c3127431ce0329d1ab7171d48d4231ed6e4 100644 (file)
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
@@ -26,6 +26,7 @@
     <%# The two lines below mean that before full removal of Rails, we have to find a way to handle config properties %>
     window.SS = typeof window.SS === 'object' ? window.SS : {};
     window.SS.hoursInDay = <%= configuration('sonar.technicalDebt.hoursInDay', 8) %>;
+    window.SS.user = '<%= current_user.login if current_user -%>';
   </script>
   <script src="<%= ApplicationController.root_context -%>/js/sonar.js"></script>
   <script>