Improve UI

Change adjuster icon
Polish sidebar alignment
Move service-calls to button
Add gettext

src/adjuster/adjuster-sidebar-btn.directive.html

@@ -1,5 +1,5 @@
-<a href="#" class="sidebar-item list-group-item" ng-if="HsCore.exists('pra.adjuster')" ng-click="setMainPanel('adjuster')"
+<a href="#" class="flex-fill hs-sidebar-item list-group-item hs-panel-hidden" ng-if="HsCore.exists('pra.adjuster')" ng-click="setMainPanel('adjuster')"
   title="{{'Adjust factors'|translate}}" ng-class="{active: HsCore.mainpanel == 'adjuster'}">
-  <span class="menu-icon icon-alertpay"></span>
-  <span class="sidebar-item-title" translate>Adjust factors</span>
+  <i class="menu-icon icon-analytics-piechart" data-toggle="tooltip" data-container="body" data-placement="auto"></i>
+  <span class="hs-sidebar-item-title" translate>Adjust factors</span>
 </a>

src/adjuster/adjuster.directive.html

@@ -11,6 +11,7 @@
     }
   </style>
   <div class="card-body">
+    <button type="button" class="btn btn-primary" ng-click="PraAdjusterService.apply()">Calculate clusters</button>
     <div class="card-body">
       <div ng-repeat="factor in PraAdjusterService.factors">
         <div class="d-flex flex-row">
@@ -19,14 +20,14 @@
           </div>
           <div class="p-2">{{(factor.weight * 100).toFixed(0)}}&nbsp;%</div>
         </div>
-        <input type="range" class="custom-range" ng-change="PraAdjusterService.apply()" ng-model="factor.weight" min="0"
+        <input type="range" class="custom-range" ng-model="factor.weight" min="0"
           max="1.0" step="0.05">
-        <span class="glyphicon" ng-class="datasetlistVisible ? 'icon-chevron-down' : 'icon-chevron-right'"
+        <span class="glyphicon" ng-class="datasetlistVisible ? 'icon-chevron-left' : 'icon-chevron-right'"
           ng-click="datasetlistVisible = !datasetlistVisible"></span>
         <div ng-init="datasetlistVisible = false" ng-show="datasetlistVisible">
           <div ng-repeat="dataset in factor.datasets">
             <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
-              ng-click="dataset.included = !dataset.included;PraAdjusterService.apply();$event.stopPropagation()"
+              ng-click="dataset.included = !dataset.included;$event.stopPropagation()"
               ng-class="dataset.included ? 'hs-checkmark' : 'hs-uncheckmark'"></button>
             <label>{{dataset.name}}</label>
           </div>

src/app.js

@@ -110,20 +110,21 @@ nuts3Layer.set('hoveredKeysTranslations', {
 
 angular
   .module('hs', [
-    'hs.sidebar',
+    'hs.addLayers',
+    'hs.datasource_selector',
     'hs.draw',
+    'hs.geolocation',
     'hs.info',
-    'hs.toolbar',
     'hs.layermanager',
-    'hs.query',
-    'hs.search',
-    'hs.print',
+    'hs.measure',
     'hs.permalink',
-    'hs.geolocation',
-    'hs.datasource_selector',
+    'hs.print',
+    'hs.query',
     'hs.save-map',
-    'hs.measure',
-    'hs.addLayers',
+    'hs.search',
+    'hs.sidebar',
+    'hs.toolbar',
+    'gettext',
     'pra.adjuster',
   ])
   .directive('hs', function (HsConfig, HsCore) {
@@ -180,9 +181,11 @@ angular
   })
   .controller('MainController', function (
     $scope,
-    HsCore,
     $compile,
+    gettext,
+    HsCore,
     HsLayoutService,
+    HsSidebarService,
     PraAdjusterService
   ) {
     'ngInject';