Fix network visualization buttons

After the icons were not bundled in the built because their names were only referenced in JS, not in the HTML.
dainst · Oct 24, 2024 · 8fedca7 · 8fedca7
1 parent 3049830
commit 8fedca7
Show file tree

Hide file tree

Showing 3 changed files with 162 additions and 69 deletions.
diff --git a/frontend/app/con10t-widgets/network/con10t-paginated-item-list.directive.js b/frontend/app/con10t-widgets/network/con10t-paginated-item-list.directive.js
@@ -50,44 +50,40 @@ export default function() {
                 }
             };
 
-            scope.updateDisplayedList = function(){
+            scope.updateDisplayedList = function () {
 
-                if(typeof scope.itemList === 'undefined'){
+                if (typeof scope.itemList === 'undefined') {
                     return;
                 }
                 scope.displayedList = angular.copy(scope.itemList);
 
-                if(scope.orderType === 0) {
-                    scope.orderGlyph = 'glyphicon-sort-by-alphabet';
+                if (scope.orderType === 0) {
                     scope.displayedList.sort(function (a, b) {
                         return a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1;
                     });
-                } else if(scope.orderType === 1){
-                    scope.orderGlyph = 'glyphicon-sort-by-alphabet-alt';
+                } else if (scope.orderType === 1) {
                     scope.displayedList.sort(function (a, b) {
                         return a.label.toLowerCase() > b.label.toLowerCase() ? -1 : 1;
                     });
-                } else if(scope.orderType === 2){
-                    scope.orderGlyph =  'glyphicon-sort-by-order-alt';
-                    scope.displayedList.sort(function(a, b){
-                        if(a.count > b.count){
+                } else if (scope.orderType === 2) {
+                    scope.displayedList.sort(function (a, b) {
+                        if (a.count > b.count) {
                             return -1;
                         } else if (a.count < b.count) {
                             return 1;
                         } else {
-                            return  a.label.toLowerCase() < b.label.toLowerCase() ? -1 : 1;
+                            return a.label.toLowerCase() < b.label.toLowerCase() ? -1 : 1;
                         }
                     });
                 } else {
-                    scope.orderGlyph = 'glyphicon-sort-by-order';
                     scope.displayedList.sort(function (a, b) {
 
-                        if(a.count > b.count){
+                        if (a.count > b.count) {
                             return 1;
                         } else if (a.count < b.count) {
                             return -1;
                         } else {
-                            return  a.label.toLowerCase() < b.label.toLowerCase() ? -1 : 1;
+                            return a.label.toLowerCase() < b.label.toLowerCase() ? -1 : 1;
                         }
                     });
                 }

diff --git a/frontend/app/con10t-widgets/network/con10t-paginated-item-list.html b/frontend/app/con10t-widgets/network/con10t-paginated-item-list.html
@@ -3,8 +3,13 @@ <h4>{{heading}}</h4>
 <div class="row">
     <div class="btn-group btn-group-justified" role="group" aria-label="...">
         <div class="btn-group" role="group">
-        <button class="btn btn-default btn-sm clickable glyphicon {{orderGlyph}}" aria-hidden="true"
-                ng-click="toggleListOrder()"></button>
+
+            <button class="btn btn-default btn-sm clickable glyphicon
+                {{(orderType == 0) ? ' glyphicon-sort-by-alphabet'  : ''}}
+                {{(orderType == 1) ? ' glyphicon-sort-by-alphabet-alt'  : ''}}
+                {{(orderType == 2) ? ' glyphicon-sort-by-order-alt'  : ''}}
+                {{(orderType == 3) ? ' glyphicon-sort-by-order'  : ''}}
+                " aria-hidden="true" ng-click="toggleListOrder()"></button>
         </div>
         <div class="btn-group" role="group">
         <button class="btn btn-success btn-sm" aria-hidden="true" ng-click="selectAll()">Select all</button>