Merge pull request #2030 from canton7/feature/issue-2029

Use bootstrap grid instead of column-count:3 for aligning checkboxes (fixes #2029)

gui/index.html

@@ -601,11 +601,13 @@
                 <div class="form-group">
                   <label translate for="folders">Share Folders With Device</label>
                   <p translate class="help-block">Select the folders to share with this device.</p>
-                  <div class="three-columns">
-                    <div class="checkbox" ng-repeat="folder in folderList()">
-                      <label>
-                        <input type="checkbox" ng-model="currentDevice.selectedFolders[folder.id]"> {{folder.id}}
-                      </label>
+                  <div class="container-fluid">
+                    <div class="row" ng-repeat="folderGroup in folderList() | group:3">
+                      <div class="checkbox col-md-4" ng-repeat="folder in folderGroup">
+                        <label>
+                          <input type="checkbox" ng-model="currentDevice.selectedFolders[folder.id]"> {{folder.id}}
+                        </label>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -766,11 +768,13 @@
                 <div class="form-group">
                   <label translate for="devices">Share With Devices</label>
                   <p translate class="help-block">Select the devices to share this folder with.</p>
-                  <div class="three-columns">
-                    <div class="checkbox" ng-repeat="device in otherDevices()">
-                      <label>
-                        <input type="checkbox" ng-model="currentFolder.selectedDevices[device.deviceID]"> {{deviceName(device)}}
-                      </label>
+                  <div class="container-fluid">
+                    <div class="row" ng-repeat="deviceGroup in otherDevices() | group:3">
+                      <div class="checkbox col-md-4" ng-repeat="device in deviceGroup">
+                        <label>
+                          <input type="checkbox" ng-model="currentFolder.selectedDevices[device.deviceID]"> {{deviceName(device)}}
+                        </label>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -1259,9 +1263,12 @@
   <script src="scripts/syncthing/core/filters/basenameFilter.js"></script>
   <script src="scripts/syncthing/core/filters/binaryFilter.js"></script>
   <script src="scripts/syncthing/core/filters/durationFilter.js"></script>
+  <script src="scripts/syncthing/core/filters/groupFilter.js"></script>
   <script src="scripts/syncthing/core/filters/naturalFilter.js"></script>
   <script src="scripts/syncthing/core/filters/lastErrorComponentFilter.js"></script>
+  <script src="scripts/syncthing/core/services/filterStabilize.js"></script>
   <script src="scripts/syncthing/core/services/localeService.js"></script>
+  <script src="scripts/syncthing/core/services/memoize.js"></script>
 
   <script src="assets/lang/valid-langs.js"></script>
   <script src="assets/lang/prettyprint.js"></script>

gui/scripts/syncthing/core/filters/groupFilter.js

@@ -0,0 +1,25 @@
+/**
+ * Groups input in chunks of the specified size
+ *
+ * E.g. [1, 2, 3, 4, 5] with groupSize = 3 => [[1, 2, 3], [4, 5]]
+ * Uses pmkr.memoize to avoid infdig, see 'Johnny Hauser's "Filter Stablize" Solution'
+ * here: http://sobrepere.com/blog/2014/10/14/creating-groupby-filter-angularjs/
+ */
+angular.module('syncthing.core')
+    .filter('group', [
+        'pmkr.filterStabilize', 
+        function (stabilize) {
+            return stabilize(function(items, groupSize) {
+                var groups = [];
+                var inner;
+                for (var i = 0; i < items.length; i++) {
+                    if (i % groupSize === 0) {
+                        inner = [];
+                        groups.push(inner);
+                    }
+                    inner.push(items[i]);
+                }
+                return groups;
+            });
+        }
+    ]);

gui/scripts/syncthing/core/services/filterStabilize.js

@@ -0,0 +1,27 @@
+/**
+ * m59peacemaker's filterStabilize
+ *
+ * See https://github.com/m59peacemaker/angular-pmkr-components/tree/master/src/services/filterStabilize
+ * Released under the MIT license
+ */
+angular.module('syncthing.core')
+    .factory('pmkr.filterStabilize', [
+        'pmkr.memoize',
+        function(memoize) {
+            function service(fn) {
+                function filter() {
+                    var args = [].slice.call(arguments);
+                    // always pass a copy of the args so that the original input can't be modified
+                    args = angular.copy(args);
+                    // return the `fn` return value or input reference (makes `fn` return optional)
+                    var filtered = fn.apply(this, args) || args[0];
+                    return filtered;
+                }
+
+                var memoized = memoize(filter);
+                return memoized;
+
+            }
+            return service;
+        }
+    ]);

gui/scripts/syncthing/core/services/memoize.js

@@ -0,0 +1,28 @@
+/**
+ * m59peacemaker's memoize
+ * 
+ * See https://github.com/m59peacemaker/angular-pmkr-components/tree/master/src/services/memoize
+ * Released under the MIT license
+ */
+angular.module('syncthing.core')
+    .factory('pmkr.memoize', [
+        function() {
+            function service() {
+                return memoizeFactory.apply(this, arguments);
+            }
+            function memoizeFactory(fn) {
+                var cache = {};
+                function memoized() {
+                    var args = [].slice.call(arguments);
+                    var key = JSON.stringify(args);
+                    if (cache.hasOwnProperty(key)) {
+                        return cache[key];
+                    }
+                    cache[key] = fn.apply(this, arguments);
+                    return cache[key];
+                }
+                return memoized;
+            }
+            return service;
+        }
+    ]);