-Added clear button directive.

-Added filter button directive.
-Moved the UI stuff to stf/common-ui.
-Added optional filtering to Details.
-Sync active tabs to local forage.
-Device List status filters by usability.
-Removed 750ms delay from filtering.

res/app/components/stf/common-ui/clear-button/clear-button-directive.js

@@ -0,0 +1,8 @@
+module.exports = function clearButtonDirective() {
+  return {
+    restrict: 'EA',
+    replace: true,
+    scope: {},
+    template: require('./clear-button.jade')
+  }
+}

res/app/components/stf/common-ui/clear-button/clear-button-spec.js

@@ -0,0 +1,23 @@
+describe('clearButton', function () {
+
+  beforeEach(module('stf.clear-button'));
+
+  var scope, compile;
+
+  beforeEach(inject(function ($rootScope, $compile) {
+    scope = $rootScope.$new();
+    compile = $compile;
+  }));
+
+  it('should ...', function () {
+
+    /* 
+     To test your directive, you need to create some html that would use your directive,
+     send that through compile() then compare the results.
+
+     var element = compile('<div clear-button name="name">hi</div>')(scope);
+     expect(element.text()).toBe('hello, world');
+     */
+
+  });
+});

res/app/components/stf/common-ui/clear-button/clear-button.jade

@@ -0,0 +1,3 @@
+button.btn.btn-sm.btn-danger-outline.pull-right
+  i.fa.fa-trash-o
+  span(translate) Clear

res/app/components/stf/common-ui/clear-button/index.js

@@ -0,0 +1,2 @@
+module.exports = angular.module('stf.clear-button', [])
+  .directive('clearButton', require('./clear-button-directive'))

res/app/components/stf/common-ui/filter-button/filter-button-directive.js

@@ -0,0 +1,9 @@
+module.exports = function filterButtonDirective() {
+  return {
+    require: 'ngModel',
+    restrict: 'EA',
+    replace: true,
+    scope: {},
+    template: require('./filter-button.jade')
+  }
+}

res/app/components/stf/common-ui/filter-button/filter-button-spec.js

@@ -0,0 +1,23 @@
+describe('filterButton', function () {
+
+  beforeEach(module('stf.filter-button'));
+
+  var scope, compile;
+
+  beforeEach(inject(function ($rootScope, $compile) {
+    scope = $rootScope.$new();
+    compile = $compile;
+  }));
+
+  it('should ...', function () {
+
+    /* 
+     To test your directive, you need to create some html that would use your directive,
+     send that through compile() then compare the results.
+
+     var element = compile('<div clear-button name="name">hi</div>')(scope);
+     expect(element.text()).toBe('hello, world');
+     */
+
+  });
+});

res/app/components/stf/common-ui/filter-button/filter-button.jade

@@ -0,0 +1,3 @@
+button(btn-checkbox, title='{{"Filter"|translate}}').btn.btn-sm.btn-primary-outline.pull-right
+  i.fa.fa-filter
+  span {{"Filter"|translate}}

res/app/components/stf/common-ui/filter-button/index.js

@@ -0,0 +1,2 @@
+module.exports = angular.module('stf.filter-button', [])
+  .directive('filterButton', require('./filter-button-directive'))

res/app/components/stf/common-ui/index.js

@@ -0,0 +1,5 @@
+module.exports = angular.module('stf/common-ui', [
+  require('./clear-button').name,
+  require('./filter-button').name,
+  require('./nothing-to-show').name
+])

res/app/components/stf/common-ui/nothing-to-show/index.js

@@ -0,0 +1,4 @@
+require('./nothing-to-show.css')
+
+module.exports = angular.module('stf/common-ui/nothing-to-show', [])
+  .directive('nothingToShow', require('./nothing-to-show-directive'))

res/app/components/stf/common-ui/nothing-to-show/nothing-to-show-directive.js

@@ -0,0 +1,14 @@
+module.exports = function () {
+  return {
+    restrict: 'EA',
+    scope: {
+      icon: '@',
+      message: '@'
+    },
+    template: require('./nothing-to-show.html'),
+    link: function (scope, element, attrs) {
+      scope.icon = attrs.icon;
+      scope.message = attrs.message;
+    }
+  }
+}

res/app/components/stf/common-ui/nothing-to-show/nothing-to-show.css

@@ -0,0 +1,9 @@
+.nothing-to-show {
+    color: #b7b7b7;
+    min-height: 130px;
+    text-align: center;
+}
+
+.nothing-to-show p {
+    font-size: 20px;
+}

res/app/components/stf/common-ui/nothing-to-show/nothing-to-show.html

@@ -0,0 +1,4 @@
+<div class="nothing-to-show vertical-center">
+    <i class="fa fa-4x" ng-class="icon"></i>
+    <p ng-bind="message"></p>
+</div>