gui: Improve display of local size, ignore pattern status (fixes #3623)

The discrepancy between global and local sizes is fine and expected in
the presence of ignores. This just moves the "we have ignore patterns"
indication to the actual local size metric, as an explanation of why it
may differ from the global size...

gui/default/assets/lang/lang-en.json

@@ -135,6 +135,7 @@
    "Quick guide to supported patterns": "Quick guide to supported patterns",
    "RAM Utilization": "RAM Utilization",
    "Random": "Random",
+   "Reduced by ignore patterns": "Reduced by ignore patterns",
    "Release Notes": "Release Notes",
    "Remote Devices": "Remote Devices",
    "Remove": "Remove",
@@ -230,6 +231,8 @@
    "Yes": "Yes",
    "You must keep at least one version.": "You must keep at least one version.",
    "days": "days",
+   "directories": "directories",
+   "files": "files",
    "full documentation": "full documentation",
    "items": "items",
    "{%device%} wants to share folder \"{%folder%}\".": "{{device}} wants to share folder \"{{folder}}\".",

gui/default/index.html

@@ -322,12 +322,13 @@
                         {{model[folder.id].localFiles | alwaysNumber}} <span translate>files</span>,
                         {{model[folder.id].localDirectories | alwaysNumber}} <span translate>directories</span>,
                         ~{{model[folder.id].localBytes | binary}}B
+                        <span ng-if="model[folder.id].ignorePatterns"><br/><i><small translate class="text-muted">Reduced by ignore patterns</small></i></span>
                       </td>
                     </tr>
-                    <tr ng-if="model[folder.id].needFiles > 0">
+                    <tr ng-if="neededItems(folder.id) > 0">
                       <th><span class="fa fa-fw fa-cloud-download"></span>&nbsp;<span translate>Out of Sync Items</span></th>
                       <td class="text-right">
-                        <a href="" ng-click="showNeed(folder.id)">{{model[folder.id].needFiles+model[folder.id].needDirectories+model[folder.id].needSymlinks+model[folder.id].needDeletes | alwaysNumber}} <span translate>items</span>, ~{{model[folder.id].needBytes | binary}}B</a>
+                        <a href="" ng-click="showNeed(folder.id)">{{neededItems(folder.id) | alwaysNumber}} <span translate>items</span>, ~{{model[folder.id].needBytes | binary}}B</a>
                       </td>
                     </tr>
                     <tr ng-if="folderStatus(folder) === 'scanning' && scanRate(folder.id) > 0">
@@ -354,12 +355,6 @@
                         <span ng-if="folder.type != 'readonly'">{{ folder.type.charAt(0).toUpperCase() + folder.type.slice(1) }}</span>
                       </td>
                     </tr>
-                    <tr ng-if="model[folder.id].ignorePatterns">
-                      <th><span class="fa fa-fw fa-eye-slash"></span>&nbsp;<span translate>Ignore Patterns</span></th>
-                      <td class="text-right">
-                        <span translate>Yes</span>
-                      </td>
-                    </tr>
                     <tr ng-if="folder.ignorePerms">
                       <th><span class="fa fa-fw fa-minus-square-o"></span>&nbsp;<span translate>Ignore Permissions</span></th>
                       <td class="text-right">

gui/default/syncthing/core/syncthingController.js

@@ -690,6 +690,15 @@ angular.module('syncthing.core')
             return 'info';
         };
 
+        $scope.neededItems = function (folderID) {
+            if (!$scope.model[folderID]) {
+                return 0
+            }
+
+            return $scope.model[folderID].needFiles + $scope.model[folderID].needDirectories +
+                $scope.model[folderID].needSymlinks + $scope.model[folderID].needDeletes;
+        };
+
         $scope.syncPercentage = function (folder) {
             if (typeof $scope.model[folder] === 'undefined') {
                 return 100;