Add config node filter

jjfattz · Jan 12, 2016 · a0cc1e6 · a0cc1e6
1 parent 50399c6
commit a0cc1e6
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 54 deletions.
diff --git a/editor/js/ui/deploy.js b/editor/js/ui/deploy.js
@@ -1,5 +1,5 @@
 /**
- * Copyright 2015 IBM Corp.
+ * Copyright 2016 IBM Corp.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -242,8 +242,9 @@ RED.deploy = (function() {
                 }
             }).done(function(data,textStatus,xhr) {
                 if (hasUnusedConfig) {
-                    RED.notify(RED._("deploy.successfulDeploy")+
-                    '<p><br>You have some unused configuration nodes. <a href="#" onclick="RED.sidebar.config.show(); return false;" >Click here</a> to see them</p>',"success",false,6000);
+                    RED.notify(
+                    '<p>'+RED._("deploy.successfulDeploy")+'</p>'+
+                    '<p>'+RED._("deploy.unusedConfigNodes")+' <a href="#" onclick="RED.sidebar.config.show(true); return false;">'+RED._("deploy.unusedConfigNodesLink")+'</a></p>',"success",false,6000);
                 } else {
                     RED.notify(RED._("deploy.successfulDeploy"),"success");
                 }

diff --git a/editor/js/ui/notifications.js b/editor/js/ui/notifications.js
@@ -1,5 +1,5 @@
 /**
- * Copyright 2013 IBM Corp.
+ * Copyright 2013, 2016 IBM Corp.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -48,6 +48,13 @@ RED.notify = (function() {
                 });
             };
         })();
+        $(n).click((function() {
+            var nn = n;
+            return function() {
+                nn.close();
+                window.clearTimeout(nn.timeoutid);
+            };
+        })());
         if (!fixed) {
             n.timeoutid = window.setTimeout(n.close,timeout||3000);
         }

diff --git a/editor/js/ui/tab-config.js b/editor/js/ui/tab-config.js
@@ -1,5 +1,5 @@
 /**
- * Copyright 2013, 2015 IBM Corp.
+ * Copyright 2013, 2016 IBM Corp.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,28 +19,24 @@ RED.sidebar.config = (function() {
     var content = document.createElement("div");
     content.className = "sidebar-node-config"
 
-    var toolbar = $('<div id="palette-footer">'+
-        //'<a class="sidebar-button text-button" id="workspace-config-node-filter-unused" href="#"><i class="fa fa-square-o"></i> <span data-i18n="sidebar.config.filterUnused"></span></a> '+
-        '<a class="sidebar-button" id="workspace-config-node-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a> '+
-        '<a class="sidebar-button" id="workspace-config-node-expand-all" href="#"><i class="fa fa-angle-double-down"></i></a>'+
-        '</div>');
+    $('<div id="sidebar-node-config-header">'+
+      '<a class="sidebar-header-button selected" id="workspace-config-node-filter-all" href="#"><span data-i18n="sidebar.config.filterAll"></span></a>'+
+      '<a class="sidebar-header-button" id="workspace-config-node-filter-unused" href="#"><span data-i18n="sidebar.config.filterUnused"></span></a> '+
+      '</div>'
+    ).appendTo(content);
+
 
+    var toolbar = $('<div>'+
+        '<a class="sidebar-footer-button" id="workspace-config-node-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a> '+
+        '<a class="sidebar-footer-button" id="workspace-config-node-expand-all" href="#"><i class="fa fa-angle-double-down"></i></a>'+
+        '</div>');
 
+    var globalCategories = $("<div>").appendTo(content);
     var flowCategories = $("<div>").appendTo(content);
     var subflowCategories = $("<div>").appendTo(content);
-    var globalCategories = $("<div>").appendTo(content);
 
     var showUnusedOnly = false;
 
-    // $('<div class="palette-category">'+
-    //   '<div class="workspace-config-node-tray-header palette-header"><i class="fa fa-angle-down expanded"></i><span data-i18n="sidebar.config.local"></span></div>'+
-    // '<ul id="workspace-config-node-tray-locals" class="palette-content config-node-list"></ul>'+
-    // '</div>'+
-    // '<div class="palette-category">'+
-    //     '<div class="workspace-config-node-tray-header palette-header"><i class="fa fa-angle-down expanded"></i><span data-i18n="sidebar.config.global"></span></div>'+
-    //     '<ul id="workspace-config-node-tray-globals" class="palette-content config-node-list"></ul>'+
-    // '</div>').appendTo(content);
-
     var categories = {};
 
     function getOrCreateCategory(name,parent,label) {
@@ -80,11 +76,14 @@ RED.sidebar.config = (function() {
                             result.list.slideUp();
                         }
                     }
+                },
+                isOpen: function() {
+                    return icon.hasClass("expanded");
                 }
             };
 
             header.on('click', function(e) {
-                if (icon.hasClass("expanded")) {
+                if (result.isOpen()) {
                     result.close();
                 } else {
                     result.open();
@@ -109,7 +108,6 @@ RED.sidebar.config = (function() {
                 return n.users.length === 0;
             })
         }
-        // console.log(list);
         list.empty();
         if (nodes.length === 0) {
             $('<li class="config_node_none" data-i18n="sidebar.config.none">NONE</li>').i18n().appendTo(list);
@@ -237,20 +235,35 @@ RED.sidebar.config = (function() {
                 }
             }
         });
-        $('#workspace-config-node-filter-unused').on("click",function(e) {
+        $('#workspace-config-node-filter-all').on("click",function(e) {
             e.preventDefault();
             if (showUnusedOnly) {
-                $(this).find("i").addClass('fa-square-o').removeClass('fa-check-square-o');
-            } else {
-                $(this).find("i").removeClass('fa-square-o').addClass('fa-check-square-o');
+                $(this).addClass('selected');
+                $('#workspace-config-node-filter-unused').removeClass('selected');
+                showUnusedOnly = !showUnusedOnly;
+                refreshConfigNodeList();
             }
-            showUnusedOnly = !showUnusedOnly;
-            refreshConfigNodeList();
-        })
+        });
+        $('#workspace-config-node-filter-unused').on("click",function(e) {
+            e.preventDefault();
+            if (!showUnusedOnly) {
+                $(this).addClass('selected');
+                $('#workspace-config-node-filter-all').removeClass('selected');
+                showUnusedOnly = !showUnusedOnly;
+                refreshConfigNodeList();
+            }
+        });
 
 
     }
-    function show() {
+    function show(unused) {
+        if (unused !== undefined) {
+            if (unused) {
+                $('#workspace-config-node-filter-unused').click();
+            } else {
+                $('#workspace-config-node-filter-all').click();
+            }
+        }
         refreshConfigNodeList();
         RED.sidebar.show("config");
     }

diff --git a/editor/sass/mixins.scss b/editor/sass/mixins.scss
@@ -57,6 +57,11 @@
         background: $workspace-button-background-active;
         text-decoration: none;
     }
+    &.selected:not(.disabled) {
+        color: $workspace-button-color-active;
+        background: $workspace-button-background-active;
+        cursor: default;
+    }
 }
 @mixin component-footer {
     border-top: 1px solid $primary-border-color;

diff --git a/editor/sass/notifications.scss b/editor/sass/notifications.scss
@@ -33,6 +33,12 @@
     border: 1px solid #325C80;
     border-left-width: 16px;
 }
+.notification a {
+    text-decoration: none;
+    &:hover {
+        text-decoration: underline;
+    }
+}
 
 .notification-success {
     border-color: #4B8400;

diff --git a/editor/sass/sidebar.scss b/editor/sass/sidebar.scss
@@ -66,6 +66,12 @@
     @include component-footer;
 }
 
-.sidebar-button {
+.sidebar-footer-button {
     @include component-footer-button;
 }
+.sidebar-header-button {
+    @include workspace-button;
+    font-size: 13px;
+    line-height: 13px;
+    padding: 5px 8px;
+}
diff --git a/editor/sass/tab-config.scss b/editor/sass/tab-config.scss
@@ -47,23 +47,34 @@
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
      }
- }
- .config_node_type {
-     color: #999;
-     text-align: right;
-     padding-right: 3px;
-     &:not(:first-child) {
-         margin-top: 20px;
-     }
- }
- .config_node_none {
-     color: #ddd;
-     text-align:right;
-     padding-right: 3px;
- }
- .config_node_unused {
-     border-color: #aaa;
-     background: #f9f9f9;
-     border-style: dashed;
-     color: #aaa;
- }
+}
+.config_node_type {
+    color: #999;
+    text-align: right;
+    padding-right: 3px;
+    &:not(:first-child) {
+        margin-top: 20px;
+    }
+}
+.config_node_none {
+    color: #ddd;
+    text-align:right;
+    padding-right: 3px;
+}
+.config_node_unused {
+    border-color: #aaa;
+    background: #f9f9f9;
+    border-style: dashed;
+    color: #aaa;
+}
+
+#sidebar-node-config-header {
+    color: #666;
+    text-align: right;
+    padding: 8px 10px;
+    background: #f3f3f3;
+    border-bottom: 1px solid $secondary-border-color;
+}
+.sidebar-header-button:not(:first-child) {
+    border-left: none;
+}
diff --git a/red/api/locales/en-US/editor.json b/red/api/locales/en-US/editor.json
@@ -83,7 +83,8 @@
         "modifiedNodes": "Modified Nodes",
         "modifiedNodesDesc": "Only deploys nodes that have changed",
         "successfulDeploy": "Successfully deployed",
-
+        "unusedConfigNodes":"You have some unused configuration nodes.",
+        "unusedConfigNodesLink":"Click here to see them",
         "errors": {
             "noResponse": "no response from server"
         },
@@ -201,11 +202,12 @@
         "config": {
             "name": "Configuration nodes",
             "label": "config",
-            "global": "Global Nodes",
+            "global": "Global",
             "none": "none",
             "subflows": "subflows",
             "flows": "flows",
-            "filterUnused":"show unused only"
+            "filterUnused":"unused",
+            "filterAll":"all"
         }
     },
     "typedInput": {