Cleanup: remove select2 and use ui-select.

getredash · Jul 28, 2015 · 52f335e · 52f335e
1 parent 8c75082
commit 52f335e
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 18 deletions.
diff --git a/rd_ui/app/index.html b/rd_ui/app/index.html
@@ -14,7 +14,6 @@
     <link rel="stylesheet" href="/bower_components/gridster/dist/jquery.gridster.css">
     <link rel="stylesheet" href="/bower_components/pivottable/dist/pivot.css">
     <link rel="stylesheet" href="/bower_components/cornelius/src/cornelius.css">
-    <link rel="stylesheet" href="/bower_components/select2/select2.css">
     <link rel="stylesheet" href="/bower_components/angular-ui-select/dist/select.css">
     <link rel="stylesheet" href="/bower_components/pace/themes/pace-theme-minimal.css">
     <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.css">
@@ -131,8 +130,6 @@
 <script src="/bower_components/cornelius/src/cornelius.js"></script>
 <script src="/bower_components/mousetrap/mousetrap.js"></script>
 <script src="/bower_components/mousetrap/plugins/global-bind/mousetrap-global-bind.js"></script>
-<script src="/bower_components/select2/select2.js"></script>
-<script src="/bower_components/angular-ui-select2/src/select2.js"></script>
 <script src="/bower_components/angular-ui-select/dist/select.js"></script>
 <script src="/bower_components/underscore.string/lib/underscore.string.js"></script>
 <script src="/bower_components/marked/lib/marked.js"></script>

diff --git a/rd_ui/app/scripts/app.js b/rd_ui/app/scripts/app.js
@@ -7,7 +7,6 @@ angular.module('redash', [
     'redash.renderers',
     'redash.visualization',
     'highchart',
-    'ui.select2',
     'angular-growl',
     'angularMoment',
     'ui.bootstrap',
@@ -16,8 +15,8 @@ angular.module('redash', [
     'ngRoute',
     'ui.select',
     'naif.base64'
-  ]).config(['$routeProvider', '$locationProvider', '$compileProvider', 'growlProvider',
-    function ($routeProvider, $locationProvider, $compileProvider, growlProvider) {
+  ]).config(['$routeProvider', '$locationProvider', '$compileProvider', 'growlProvider', 'uiSelectConfig',
+    function ($routeProvider, $locationProvider, $compileProvider, growlProvider, uiSelectConfig) {
       if (featureFlags.clientSideMetrics) {
         Bucky.setOptions({
           host: '/api/metrics'
@@ -32,6 +31,8 @@ angular.module('redash', [
         return query.$promise;
       };
 
+      uiSelectConfig.theme = "bootstrap";
+
       $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|http|data):/);
       $locationProvider.html5Mode(true);
       growlProvider.globalTimeToLive(2000);

diff --git a/rd_ui/app/scripts/visualizations/base.js b/rd_ui/app/scripts/visualizations/base.js
@@ -84,10 +84,6 @@
       template: '<filters></filters>\n' + Visualization.renderVisualizationsTemplate,
       replace: false,
       link: function (scope) {
-        scope.select2Options = {
-          width: '50%'
-        };
-
         scope.$watch('queryResult && queryResult.getFilters()', function (filters) {
           if (filters) {
             scope.filters = filters;

diff --git a/rd_ui/app/styles/redash.css b/rd_ui/app/styles/redash.css
@@ -137,6 +137,23 @@ a.navbar-brand img {
 
 }
 
+/* Visualization Filters */
+
+.filters-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.filter {
+    width: 33%;
+    padding-left: 5px;
+    padding-bottom: 5px;
+}
+
+.filter > div {
+    width: 100%;
+}
+
 /* Gridster */
 
 .gridster ul {

diff --git a/rd_ui/app/views/alerts/edit.html b/rd_ui/app/views/alerts/edit.html
@@ -8,7 +8,7 @@
             <form name="alertForm" ng-submit="saveChanges()" class="form">
                 <div class="form-group">
                     <label>Query</label>
-                    <ui-select ng-model="alert.query" theme="bootstrap" reset-search-input="false" on-select="onQuerySelected($item)">
+                    <ui-select ng-model="alert.query" reset-search-input="false" on-select="onQuerySelected($item)">
                         <ui-select-match placeholder="Search a query by name">{{$select.selected.name}}</ui-select-match>
                         <ui-select-choices repeat="q in queries"
                                            refresh="searchQueries($select.search)"

diff --git a/rd_ui/app/views/visualizations/filters.html b/rd_ui/app/views/visualizations/filters.html
@@ -1,8 +1,17 @@
-<div class="well well-sm" ng-show="filters">
-    <div ng-repeat="filter in filters">
-        {{filter.friendlyName}}:
-        <select ui-select2='select2Options' ng-model="filter.current" ng-multiple="{{filter.multiple}}">
-            <option ng-repeat="value in filter.values" value="{{value}}">{{value}}</option>
-        </select>
+<div class="well well-sm filters-container" ng-show="filters">
+    <div class="filter" ng-repeat="filter in filters">
+        <ui-select ng-model="filter.current" ng-if="!filter.multiple">
+           <ui-select-match placeholder="Select value for {{filter.friendlyName}}...">{{filter.friendlyName}}: {{$select.selected}}</ui-select-match>
+           <ui-select-choices repeat="value in filter.values | filter: $select.search track by $index">
+               {{value}}
+           </ui-select-choices>
+        </ui-select>
+
+        <ui-select ng-model="filter.current" multiple ng-if="filter.multiple">
+            <ui-select-match placeholder="Select value for {{filter.friendlyName}}...">{{filter.friendlyName}}: {{$item}}</ui-select-match>
+            <ui-select-choices repeat="value in filter.values | filter: $select.search track by $index">
+                {{value}}
+            </ui-select-choices>
+        </ui-select>
     </div>
 </div>
diff --git a/rd_ui/bower.json b/rd_ui/bower.json
@@ -19,7 +19,6 @@
     "cornelius": "https://github.com/restorando/cornelius.git",
     "gridster": "0.2.0",
     "mousetrap": "~1.4.6",
-    "angular-ui-select2": "~0.0.5",
     "jquery-ui": "~1.10.4",
     "underscore.string": "~2.3.3",
     "marked": "~0.3.2",