New toasts and icons

.gitignore

@@ -32,3 +32,5 @@ cypress/screenshots
 cypress/downloads/*
 cypress/tests/__image_snapshots__
 .cursorignore
+.cursorrules
+.venv/

angular.json

@@ -232,7 +232,8 @@
               }
             ],
             "styles": [
-              "projects/hslayers/css/hslayers-ng.scss"
+              "projects/hslayers/css/hslayers-ng.scss",
+              "projects/test-app/custom-fa-icons.css"
             ],
             "scripts": [],
             "customWebpackConfig": {

cypress/tests/layer-editor.cy.ts

@@ -7,22 +7,22 @@ describe('Hslayers application', () => {
   });
 
   it('Should not be possible to change base/thematic type for vector layer', () => {
-    cy.get('[data-test="Points"] span.icon-settingsthree-gears ').click();
+    cy.get('[data-test="Points"] span.fa-gears ').click();
     cy.get('hs-layer-editor form').within(() => {
       cy.get('hs-layer-type-switcher-widget').should('exist');
       cy.get('hs-layer-type-switcher-widget div').should('not.exist');
     });
   });
 
   it('Should be possible to find base/thematic type toggle for WMS layer', () => {
-    cy.get('[data-test="EVI"] span.icon-settingsthree-gears ').click();
+    cy.get('[data-test="EVI"] span.fa-gears ').click();
     cy.get('hs-layer-editor form').within(() => {
       cy.get('hs-layer-type-switcher-widget div').should('exist');
     });
   });
 
   it.only('Should be possible to change type of WMS layer back and forth', () => {
-    cy.get('[data-test="EVI"] span.icon-settingsthree-gears ').click();
+    cy.get('[data-test="EVI"] span.fa-gears ').click();
 
     //Change to BASE
     cy.get('hs-layer-editor form hs-layer-type-switcher-widget div')

cypress/tests/layermanager.cy.ts

@@ -78,7 +78,7 @@ describe('Hslayers application', () => {
     //Enable EVI layer and zoom to its extent
     cy.get('[data-test="EVI"] button.hs-lm-item-visibility').click();
     cy.wait(2000);
-    cy.get('[data-test="EVI"] span.icon-settingsthree-gears ').click();
+    cy.get('[data-test="EVI"] span.fa-gears ').click();
     cy.get('.card-footer button[title="Zoom to layer"]').click();
 
     /**
@@ -92,7 +92,7 @@ describe('Hslayers application', () => {
 
     //Zoom to different layer
     cy.get(
-      '[data-test="Latvian municipalities (1 sub-layer)"] span.icon-settingsthree-gears ',
+      '[data-test="Latvian municipalities (1 sub-layer)"] span.fa-gears ',
     ).click();
     cy.get('.card-footer button[title="Zoom to layer"]').click();
 
@@ -102,7 +102,7 @@ describe('Hslayers application', () => {
         throw new Error('UNexpected getMap request was intercepted.');
       } else {
         //Ignore extent eg. allow requests to be made no matter the extent
-        cy.get('[data-test="EVI"] span.icon-settingsthree-gears ').click();
+        cy.get('[data-test="EVI"] span.fa-gears ').click();
         cy.get(
           'hs-layer-editor hs-extent-widget #hs-layer-extent-toggle',
         ).click();

cypress/tests/sidebar.cy.ts

@@ -46,12 +46,12 @@ describe('Hslayers application', () => {
   /**
    * This changes based on current test-app config
    */
-  it('Only 9 sidebar panels should be visible', () => {
+  it('Only 6 sidebar panels should be visible', () => {
     cy.viewport(600, 1000);
     // Wait for the layout to update
     cy.wait(500);
     cy.get('hs-sidebar  span.hs-sidebar-item:not(.hs-panel-hidden)')
       .its('length')
-      .should('equal', 9);
+      .should('equal', 6);
   });
 });

package.json

@@ -41,7 +41,8 @@
     "commit": "git-cz",
     "deps-graph": "madge --exclude '.*(layer-extensions)\\.ts$' --dot projects/decoupling-test-app/src/hslayers-app/hslayers-app.module.ts > graph.gv",
     "proxy": "cd ./projects/hslayers-server && node server.js -l",
-    "prepare-release": "cd ./scripts && bump-version.sh"
+    "prepare-release": "cd ./scripts && bump-version.sh",
+    "subset-icons": "python projects/hslayers/css/icons/create-fa-icons.py"
   },
   "private": true,
   "dependencies": {
@@ -104,6 +105,7 @@
     "@compodoc/compodoc": "^1.1.26",
     "@cypress/schematic": "^3.0.0",
     "@eslint/compat": "^1.2.6",
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "@frsource/cypress-plugin-visual-regression-diff": "^3.2.14",
     "@types/jasmine": "^5.1.5",
     "@types/jasminewd2": "~2.0.12",
@@ -156,4 +158,4 @@
     "path": false,
     "fs": false
   }
-}
+}

projects/hslayers-cesium/src/toggle-view/toggle-view.component.html

@@ -2,6 +2,6 @@
     <button class="btn rounded-0 hs-toolbar-button btn-3d-toggle btn-outline-secondary"
         [ngClass]="{'btn-3d-active': hsCesiumService.visible}" [title]="'TOOLBAR.toggle3d' | translateHs"
         (click)="hsCesiumService.toggleCesiumMap();loseFocus($event.target)">
-        <i class="icon-globealt"></i>
+        <i class="fa-solid fa-globe"></i>
     </button>
-</div>
+</div>

projects/hslayers-sensors/src/components/sensors/partials/sensors.component.html

@@ -31,28 +31,28 @@
           </ul><!-- Tab panes -->
         </div>
         <div class="col-3 text-end">
-          <!-- <button type="button" class="btn btn-sm" (click)="toggleExpansion()"><i
-        [ngClass]="{'icon-calcminus': viewExpanded, 'icon-calcplus':!viewExpanded}"></i>
-      </button> -->
+          <button type="button" class="btn btn-sm" (click)="toggleExpansion()">
+            <i [ngClass]="{'fa-solid fa-square-minus': viewExpanded, 'fa-solid fa-square-plus':!viewExpanded}"></i>
+          </button>
+        </div>
+      </div>
     </div>
-  </div>
-</div>
-@if (hsSensorsService.units.length > 0) {
-  <ul class="list-group">
-    @for (unit of filterQuery(query); track unit) {
-      <li class="list-group-item">
-        <!-- TODO: Remove function call from template -->
-        <hs-sensor-unit-list-item [unit]="unit" [expanded]="viewExpanded" [view-mode]="viewMode">
-        </hs-sensor-unit-list-item>
-      </li>
+    @if (hsSensorsService.units.length > 0) {
+      <ul class="list-group">
+        @for (unit of filterQuery(query); track unit) {
+          <li class="list-group-item">
+            <!-- TODO: Remove function call from template -->
+            <hs-sensor-unit-list-item [unit]="unit" [expanded]="viewExpanded" [view-mode]="viewMode">
+            </hs-sensor-unit-list-item>
+          </li>
+        }
+      </ul>
     }
-  </ul>
-}
-@else {
-<div class="alert alert-warning m-2 text-center" role="alert">
-  {{'SENSORS.noUnitsFound' | translateHs}}
+    @else {
+    <div class="alert alert-warning m-2 text-center" role="alert">
+      {{'SENSORS.noUnitsFound' | translateHs}}
+    </div>
+    }
+  </div>
 </div>
 }
-</div>
-</div>
-}

projects/hslayers-sensors/src/components/sensors/partials/unit-dialog.component.html

@@ -70,7 +70,7 @@ <h4 class="modal-title">
                     [placeholder]="'COMMON.from' | translateHs" #d="ngbDatepicker"
                     [(ngModel)]="customInterval.fromTime" (dateSelect)="customIntervalChanged()" />
                   <button class="btn btn-sm  btn-outline-secondary" (click)="d.toggle()" type="button"><i
-                  class="icon-calendarthree"></i></button>
+                  class="fa-solid fa-calendar"></i></button>
                 </div>
               </div>
               <div class="m-1">
@@ -79,12 +79,12 @@ <h4 class="modal-title">
                     [placeholder]="'COMMON.to' | translateHs" #d2="ngbDatepicker"
                     [(ngModel)]="customInterval.toTime" (dateSelect)="customIntervalChanged()" />
                   <button class="btn btn-sm btn-outline-secondary" (click)="d2.toggle()" type="button"><i
-                  class="icon-calendarthree"></i></button>
+                  class="fa-solid fa-calendar"></i></button>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
+  </div>

projects/hslayers/common/add-to-map/add-to-map.component.ts

@@ -15,7 +15,7 @@ import {TranslateCustomPipe} from 'hslayers-ng/services/language';
     >
       @if (!loading) {
         <span class="d-flex justify-content-center align-items-baseline gap-1">
-          <i class="icon-plus"> </i>{{ 'COMMON.addToMap' | translateHs }}
+          <i class="fa-solid fa-plus"> </i>{{ 'COMMON.addToMap' | translateHs }}
         </span>
       } @else {
         <span>

projects/hslayers/common/clipboard-text/clipboard-text.component.ts

@@ -18,7 +18,11 @@ import {TranslateCustomPipe} from 'hslayers-ng/services/language';
       [title]="'COMMON.copyToClipboard' | translateHs"
       (click)="copyToClipBoard()"
     >
-      <i [class.icon-check]="showCheck" [class.icon-copy]="!showCheck"></i>
+      <i
+        class="fa-solid"
+        [class.fa-square-check]="showCheck"
+        [class.fa-copy]="!showCheck"
+      ></i>
     </button>
   `,
   styles: `
@@ -42,7 +46,7 @@ export class HsClipboardTextComponent {
         'COMMON.copyToClipboard',
         'COMMON.copyToClipboardFailure',
         {
-          toastStyleClasses: 'bg-danger text-white',
+          type: 'danger',
         },
       );
       return;

projects/hslayers/common/dialog-csw-layers/csw-layers-dialog.component.html

@@ -21,7 +21,7 @@ <h4 class="modal-title">{{'COMPOSITIONS.cswDialog.loadComposition' | translateHs
                             <button ngbAccordionButton
                                 class="accordion-button justify-content-between">{{service.title}}
                                 <span class="ml-auto pe-3">
-                                    <i class="icon-trash text-secondary" role="button"
+                                    <i class="fa-solid fa-trash text-secondary" role="button"
                                         (click)="$event.stopPropagation();removeService(service)"
                                         [title]="'COMMON.delete' | translateHs"></i>
                                 </span>

projects/hslayers/common/dialog-set-permissions/set-permissions.component.html

@@ -24,7 +24,7 @@ <h4 class="modal-title">{{'COMMON.selectAndSavePermissions' | translateHs}}: {{d
           <button (click)="close()" type="button"
             class="btn btn-success align-items-center d-flex justify-content-around gap-2">{{'COMMON.done' |
             translateHs }}
-            <i class="icon-check"></i>
+            <i class="fa-solid fa-square-check"></i>
           </button>
           }
           @case ('error') {
@@ -39,4 +39,4 @@ <h4 class="modal-title">{{'COMMON.selectAndSavePermissions' | translateHs}}: {{d
         </div>
       </div>
     </div>
-  </div>
+  </div>

projects/hslayers/common/filters/add-filter-button/add-filter-button.component.html

@@ -2,7 +2,7 @@
   <div class="p-1">
     <div ngbDropdown class="d-inline-block" #menu="ngbDropdown">
       <button class="btn btn-outline-primary btn-sm" [title]="'STYLER.addFilter' | translateHs" ngbDropdownToggle>
-        <span class="icon-plus"></span>
+        <span class="fa-solid fa-plus"></span>
       </button>
       <div ngbDropdownMenu>
         @for (filter of filterOptions; track filter) {

projects/hslayers/common/filters/comparison-filter/comparison-filter.component.html

@@ -49,7 +49,7 @@
   </div>
   <div>
     <button class="btn btn-outline-danger btn-sm rounded-0" style="height: 100%" (click)="remove()">
-      <span class="icon-trash"></span>
+      <span class="fa-solid fa-trash"></span>
     </button>
   </div>
 

projects/hslayers/common/filters/filter.component.html

@@ -7,7 +7,7 @@
       <hs-add-filter-button (clicks)="hsFiltersService.add($event.type, true, filter)"></hs-add-filter-button>
       <button class="btn btn-outline-danger btn-sm m-1" [title]="'STYLER.removeFilter' | translateHs"
         (click)="remove()">
-        <span class="icon-trash"></span>
+        <span class="fa-solid fa-trash"></span>
       </button>
     </div>
     @for (item of filter; track item; let i = $index) {
@@ -22,4 +22,4 @@
   @if (filter.length > 1 && !(hsFiltersService.isLogOp(filter))) {
   <hs-comparison-filter [filter]="filter" (changes)="emitChange()" [parent]="parent"></hs-comparison-filter>
   }<!-- TODO: Remove function call from template -->
-</div>
+</div>

projects/hslayers/common/filters/filters.component.html

@@ -11,7 +11,7 @@
       <hs-add-filter-button (clicks)="add($event.type, true)"></hs-add-filter-button>
       <button class="btn btn-outline-danger btn-sm m-1" [title]="'STYLER.removeFilter' | translateHs"
         (click)="remove()">
-        <span class="icon-trash"></span>
+        <span class="fa-solid fa-trash"></span>
       </button>
     </div>
     @for (item of rule.filter; track item; let i = $index) {

projects/hslayers/common/filters/filters.service.ts

@@ -140,7 +140,7 @@ export class HsFiltersService {
       'STYLER.removeFilter',
       message,
       {
-        toastStyleClasses: 'text-bg-warning',
+        type: 'warning',
         serviceCalledFrom: 'HsFiltersService',
       },
     );

projects/hslayers/common/layer-table/layer-table.component.html

@@ -60,7 +60,7 @@
         @if (type === "arcgis" && data.serviceExpanded) {
         <button type="button" class="btn btn-sm px-2 border-0 d-flex" (click)="collapseServices()"
           [title]="'COMMON.back' | translateHs">
-          <i class="glyphicon icon-chevron-left text-black-50"></i>
+          <i class="fa-solid fa-chevron-left text-black-50"></i>
           <span class="text-black-50 fw-bold">{{
             "COMMON.back" | translateHs
             }}</span>
@@ -78,7 +78,7 @@
         <td (click)="expandService(service)" data-toggle="tooltip"
           [title]="'ADDDATA.requestServiceLayers' | translateHs" style="cursor: pointer">
           {{ service.name }}
-          <span style="font-size: x-small"><i class="icon-chevron-right"></i></span>
+          <span style="font-size: x-small"><i class="fa-solid fa-chevron-right"></i></span>
         </td>
       </tr>
     </tbody>
@@ -144,4 +144,4 @@
     </div>
   </div>
   }
-</div>
+</div>

projects/hslayers/common/layman/access-rights/layman-access-rights.component.html

@@ -22,7 +22,7 @@
 <ul class="nav nav-tabs justify-content-end my-2 mb-3">
   <button (click)="resetToDefault()" class="btn btn-light btn-sm position-absolute text-secondary" type="button" style="left: 0;
     transform: translateX(50%);" [title]="'COMMON.resetToDefault' | translateHs">
-    <i class="icon-fatredo"></i>
+    <i class="fa-solid fa-rotate-right"></i>
   </button>
   @for (option of grantingOptions; track $index) {
   <li class="nav-item" (click)="changeGrantingOptions(option)">
@@ -81,4 +81,4 @@
   </div>
   }
 </div>
-}
+}

projects/hslayers/common/pager/pager.component.html

@@ -31,7 +31,7 @@
       <div class="btn-group">
         <button class="but-title-sm m-1" data-toggle="tooltip"
           [title]="'ADDDATA.CATALOGUE.theNumberOfRecords' | translateHs ">
-          <i class="icon-question-sign"></i>
+          <i class="fa-solid fa-circle-question"></i>
         </button>
         <button ngbDropdownToggle type="button" data-cy="hs-pager-menu-toggle"
           class="btn btn-outline-secondary btn-sm dropdown-toggle dropdown-toggle-split rounded-0"
@@ -46,4 +46,4 @@
     </li>
   </ul>
 </div>
-}
+}