moved filter button and added indicator

[FIXES JENKINS-38803]
jenkinsci · Oct 14, 2016 · 47dba2e · 47dba2e
1 parent c23fef6
commit 47dba2e
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 14 deletions.
diff --git a/job-dsl-api-viewer/index.html b/job-dsl-api-viewer/index.html
@@ -2,7 +2,6 @@
 <head>
     <title>Jenkins Job DSL Plugin</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.4/themes/default/style.min.css" />
     <link rel="stylesheet" href="build/dist/css/app.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/default.min.css">
@@ -51,7 +50,6 @@
                     <li><a href="http://job-dsl.herokuapp.com">Playground</a></li>
                 </ul>
 
-                <button class="btn pull-right toggle-plugins"><span class="glyphicon glyphicon-filter"></span></button>
                 <select class="version-select form-control">
                     <!-- ADD VERSIONS HERE! -->
                     <option value="build/data/dsl.json">v1.52-SNAPSHOT</option>
@@ -74,8 +72,11 @@
         </nav>
     </div>
     <div class="tree">
-        <div class="search-section">
+        <div class="form-inline search-filter">
             <div class="form-group">
+                <button class="btn btn-default toggle-plugins form-control"><span class="glyphicon glyphicon-filter"></span><span class="filter-active invisible"></span></button>
+            </div>
+            <div class="search-section form-group">
                 <input class="search-input form-control" type="text" placeholder="Search methods...">
                 <span class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true"></span>
                 <span class="glyphicon glyphicon-remove-sign clear-search hide" aria-hidden="true"></span>

diff --git a/job-dsl-api-viewer/src/assets/javascripts/App.js b/job-dsl-api-viewer/src/assets/javascripts/App.js
@@ -21,6 +21,7 @@ Marionette.Renderer.render = function(template, data) {
 
             this.dslLoader = new App.DslLoader();
             this.settings = new App.Settings();
+            this.settings.on('change', this.highlightFilter, this);
 
             this.router = new App.Router();
             this.router.on('route:home',    this.showHome, this);
@@ -56,6 +57,8 @@ Marionette.Renderer.render = function(template, data) {
                 $('.search-input').val('');
                 this.onSearch();
             }.bind(this));
+
+            this.highlightFilter();
         },
 
         showPlugin: function(name) {
@@ -238,6 +241,14 @@ Marionette.Renderer.render = function(template, data) {
                 hljs.highlightBlock(block);
                 $(block).removeClass('ruby'); // TODO hljs bug?
             });
+        },
+
+        highlightFilter: function () {
+            if (this.settings.isPluginExcluded()) {
+                $('.filter-active').removeClass('invisible')
+            } else {
+                $('.filter-active').addClass('invisible')
+            }
         }
     });
 

diff --git a/job-dsl-api-viewer/src/assets/javascripts/Settings.js b/job-dsl-api-viewer/src/assets/javascripts/Settings.js
@@ -13,7 +13,11 @@ App.Settings = Marionette.Object.extend({
     },
 
     isPluginExcluded: function(name) {
-        return _.contains(this.excludedPlugins, name);
+        if (name) {
+            return _.contains(this.excludedPlugins, name);
+        } else {
+            return this.excludedPlugins.length !== 0;
+        }
     },
 
     isPluginsExcluded: function(plugins) {

diff --git a/job-dsl-api-viewer/src/assets/stylesheets/main.less b/job-dsl-api-viewer/src/assets/stylesheets/main.less
@@ -13,15 +13,30 @@
   text-overflow: ellipsis;
 }
 
-.search-section {
+.search-filter {
   padding: 10px;
   border-bottom: 1px solid #aaa;
-  .form-group {
+  .toggle-plugins {
+    position: relative;
+    .filter-active {
+      border-radius: 50%;
+      background-color: #337ab7;
+      width: 5px;
+      height: 5px;
+      display: block;
+      position: absolute;
+      right: 10px;
+      bottom: 8px;
+    }
+  }
+  .search-section {
     position: relative;
     margin-bottom: 0;
+    width: ~"calc(100% - 45px)";
     .search-input {
       padding-left: 29px;
       padding-right: 29px;
+      width: 100%;
     }
     .glyphicon-search {
       left: 0;
@@ -155,16 +170,8 @@
     width: auto;
     float: right;
     margin-top: 8px;
-    margin-right: 10px;
     display: none;
   }
-  .toggle-plugins {
-    margin-top: 8px;
-    background-color: #fff;
-    span {
-      line-height: 20px;
-    }
-  }
 }
 
 .plugins {