feat(spie-ui): add better icons

robsonos · Dec 31, 2024 · 5c1a660 · 5c1a660
1 parent 142c851
commit 5c1a660
Show file tree

Hide file tree

Showing 15 changed files with 115 additions and 73 deletions.
diff --git a/apps/spie-ui-e2e/src/e2e/connect.cy.ts b/apps/spie-ui-e2e/src/e2e/connect.cy.ts
@@ -113,7 +113,9 @@ describe('Connect routine', () => {
   });
 
   it('should open and close the advanced modal', () => {
-    cy.get('app-connection-component ion-button [name="settings-outline"]')
+    cy.get(
+      'app-connection-component ion-button [name="icon-settings-outlined"]'
+    )
       .parent()
       .click();
     cy.get('ion-modal ion-toolbar ion-title').should(
@@ -127,7 +129,9 @@ describe('Connect routine', () => {
   it('should reconnect after changing advanced settings', () => {
     cy.connect(mockSerialPortList[0].path, 9600);
 
-    cy.get('app-connection-component ion-button [name="settings-outline"]')
+    cy.get(
+      'app-connection-component ion-button [name="icon-settings-outlined"]'
+    )
       .parent()
       .click();
 

diff --git a/apps/spie-ui-e2e/src/e2e/plotter.cy.ts b/apps/spie-ui-e2e/src/e2e/plotter.cy.ts
@@ -264,7 +264,7 @@ describe('Plotter routine', () => {
   });
 
   it('should open and close the advanced modal', () => {
-    cy.get('app-plotter-component ion-button [name="settings-outline"]')
+    cy.get('app-plotter-component ion-button [name="icon-settings-outlined"]')
       .parent()
       .click();
     cy.get('ion-modal ion-toolbar ion-title').should(
@@ -276,7 +276,7 @@ describe('Plotter routine', () => {
   });
 
   it('should use timestamps if it is set', () => {
-    cy.get('app-plotter-component ion-button [name="settings-outline"]')
+    cy.get('app-plotter-component ion-button [name="icon-settings-outlined"]')
       .parent()
       .click();
     cy.get('ion-modal ion-toolbar ion-title').should(

diff --git a/apps/spie-ui-e2e/src/e2e/send.cy.ts b/apps/spie-ui-e2e/src/e2e/send.cy.ts
@@ -69,7 +69,7 @@ describe('Send routine', () => {
   });
 
   it('should open and close the advanced modal', () => {
-    cy.get('app-send-component ion-button [name="settings-outline"]')
+    cy.get('app-send-component ion-button [name="icon-settings-outlined"]')
       .parent()
       .click();
     cy.get('ion-modal ion-toolbar ion-title').should(
@@ -86,7 +86,7 @@ describe('Send routine', () => {
       .invoke('val', mockData)
       .trigger('input');
 
-    cy.get('app-send-component ion-button [name="settings-outline"]')
+    cy.get('app-send-component ion-button [name="icon-settings-outlined"]')
       .parent()
       .click();
     cy.getAdvancedModalSelectElement(
@@ -102,7 +102,7 @@ describe('Send routine', () => {
     const mockData = 'test test test test test test test test test test';
     const expectedHexData = 'EE EE EE EE EE';
 
-    cy.get('app-send-component ion-button [name="settings-outline"]')
+    cy.get('app-send-component ion-button [name="icon-settings-outlined"]')
       .parent()
       .click();
     cy.getAdvancedModalSelectElement(
@@ -125,7 +125,7 @@ describe('Send routine', () => {
     const mockData = 'test test test test test test test test test test\n\n\n';
     const formattedData = 'EEEEEEEEEE';
 
-    cy.get('app-send-component ion-button [name="settings-outline"]')
+    cy.get('app-send-component ion-button [name="icon-settings-outlined"]')
       .parent()
       .click();
     cy.getAdvancedModalSelectElement(
@@ -153,7 +153,7 @@ describe('Send routine', () => {
     const mockData = 'test test test test test test test test test test';
     const formattedData = `${mockData}\r\n`;
 
-    cy.get('app-send-component ion-button [name="settings-outline"]')
+    cy.get('app-send-component ion-button [name="icon-settings-outlined"]')
       .parent()
       .click();
     cy.getAdvancedModalSelectElement(

diff --git a/apps/spie-ui-e2e/src/e2e/terminal.cy.ts b/apps/spie-ui-e2e/src/e2e/terminal.cy.ts
@@ -91,7 +91,7 @@ describe('Terminal routine', () => {
   });
 
   it('should open and close the advanced modal', () => {
-    cy.get('app-terminal-component ion-button [name="settings-outline"]')
+    cy.get('app-terminal-component ion-button [name="icon-settings-outlined"]')
       .parent()
       .click();
     cy.get('ion-modal ion-toolbar ion-title').should(
@@ -112,7 +112,7 @@ describe('Terminal routine', () => {
       }
     });
 
-    cy.get('app-terminal-component ion-button [name="settings-outline"')
+    cy.get('app-terminal-component ion-button [name="icon-settings-outlined"')
       .parent()
       .click();
     cy.getAdvancedModalSelectElement(
@@ -136,7 +136,7 @@ describe('Terminal routine', () => {
       }
     });
 
-    cy.get('app-terminal-component ion-button [name="settings-outline"')
+    cy.get('app-terminal-component ion-button [name="icon-settings-outlined"')
       .parent()
       .click();
     cy.getAdvancedModalCheckboxElement(
@@ -153,7 +153,7 @@ describe('Terminal routine', () => {
   it('should not auto scroll when auto scroll is disabled and data is emitted', () => {
     let initialScrollTop = 0;
 
-    cy.get('app-terminal-component ion-button [name="settings-outline"')
+    cy.get('app-terminal-component ion-button [name="icon-settings-outlined"')
       .parent()
       .click();
     cy.getAdvancedModalCheckboxElement(

diff --git a/apps/spie-ui/src/app/app.component.ts b/apps/spie-ui/src/app/app.component.ts
@@ -1,23 +1,23 @@
 import { Component } from '@angular/core';
 import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
-import { addIcons } from 'ionicons';
 import {
-  cloudUploadOutline,
-  documentOutline,
-  helpCircleOutline,
-  logInOutline,
-  logOutOutline,
-  pauseOutline,
-  playOutline,
-  pulseOutline,
-  sendOutline,
-  settingsOutline,
-  speedometerOutline,
-  statsChartOutline,
-  terminalOutline,
-  timeOutline,
-  trashOutline,
-} from 'ionicons/icons';
+  iconDeleteOutlineOutlined,
+  iconDownloadingOutlined,
+  iconFolderZipOutlined,
+  iconHelpOutlineOutlined,
+  iconHourglassBottomOutlined,
+  iconIncompleteCircleOutlined,
+  iconInsightsOutlined,
+  iconPauseOutlined,
+  iconPlayArrowOutlined,
+  iconPowerOffOutlined,
+  iconPowerOutlined,
+  iconSendOutlined,
+  iconSettingsOutlined,
+  iconSpeedOutlined,
+  iconTerminalOutlined,
+} from '@robsonos/ionic-mdi';
+import { addIcons } from 'ionicons';
 
 @Component({
   selector: 'app-root',
@@ -28,21 +28,21 @@ import {
 export class AppComponent {
   constructor() {
     addIcons({
-      cloudUploadOutline,
-      documentOutline,
-      helpCircleOutline,
-      logInOutline,
-      logOutOutline,
-      pauseOutline,
-      playOutline,
-      pulseOutline,
-      sendOutline,
-      settingsOutline,
-      speedometerOutline,
-      statsChartOutline,
-      terminalOutline,
-      timeOutline,
-      trashOutline,
+      iconDeleteOutlineOutlined,
+      iconDownloadingOutlined,
+      iconFolderZipOutlined,
+      iconHelpOutlineOutlined,
+      iconHourglassBottomOutlined,
+      iconIncompleteCircleOutlined,
+      iconInsightsOutlined,
+      iconPauseOutlined,
+      iconPlayArrowOutlined,
+      iconPowerOffOutlined,
+      iconPowerOutlined,
+      iconSendOutlined,
+      iconSettingsOutlined,
+      iconSpeedOutlined,
+      iconTerminalOutlined,
     });
   }
 }
diff --git a/apps/spie-ui/src/app/components/connection/connection.component.html b/apps/spie-ui/src/app/components/connection/connection.component.html
@@ -55,7 +55,9 @@
               >
                 <ion-icon
                   slot="start"
-                  [name]="isOpen() ? 'log-out-outline' : 'log-in-outline'"
+                  [name]="
+                    isOpen() ? 'icon-power-off-outlined' : 'icon-power-outlined'
+                  "
                 ></ion-icon>
                 {{ isOpen() ? 'Disconnect' : 'Connect' }}
               </ion-button>
@@ -66,7 +68,7 @@
                 color="secondary"
                 (click)="onClickConnectionAdvancedModal()"
               >
-                <ion-icon name="settings-outline"></ion-icon>
+                <ion-icon name="icon-settings-outlined"></ion-icon>
               </ion-button>
             </ion-col>
           </ion-row>

diff --git a/apps/spie-ui/src/app/components/plotter-advanced-modal/plotter-advanced-modal.component.html b/apps/spie-ui/src/app/components/plotter-advanced-modal/plotter-advanced-modal.component.html
@@ -21,7 +21,7 @@
             >Use sample counter<ion-icon
               color="warning"
               class="tooltipIcon-top"
-              name="help-circle-outline"
+              name="icon-help-outline-outlined"
               matTooltip="The system may not be able to capture the time of the data event on fast data rates. Use this option to use the sample count instead of the timestamp for the xaxis. You will still be able to see the timestamp information when the chart is paused "
             ></ion-icon
           ></ion-checkbox>

diff --git a/apps/spie-ui/src/app/components/plotter/plotter.component.html b/apps/spie-ui/src/app/components/plotter/plotter.component.html
@@ -32,8 +32,8 @@
               slot="start"
               [name]="
                 isPausedSubject.getValue() && isOpen()
-                  ? 'pause-outline'
-                  : 'play-outline'
+                  ? 'icon-pause-outlined'
+                  : 'icon-play-arrow-outlined'
               "
             ></ion-icon>
             {{ isPausedSubject.getValue() && isOpen() ? 'Continue' : 'Pause' }}
@@ -46,7 +46,10 @@
             color="secondary"
             (click)="onClickClearSeries()"
           >
-            <ion-icon slot="start" name="trash-outline"></ion-icon>
+            <ion-icon
+              slot="start"
+              name="icon-delete-outline-outlined"
+            ></ion-icon>
             Clear
           </ion-button>
         </ion-col>
@@ -56,7 +59,7 @@
             color="secondary"
             (click)="onClickPlotterAdvancedModal()"
           >
-            <ion-icon name="settings-outline"></ion-icon>
+            <ion-icon name="icon-settings-outlined"></ion-icon>
           </ion-button>
         </ion-col>
       </ion-row>

diff --git a/apps/spie-ui/src/app/components/send/send.component.html b/apps/spie-ui/src/app/components/send/send.component.html
@@ -24,7 +24,7 @@
             [disabled]="!isOpen() || !sendOptions().isSendInputValid"
             (click)="onClickSend()"
           >
-            <ion-icon slot="start" name="send-outline"></ion-icon>
+            <ion-icon slot="start" name="icon-send-outlined"></ion-icon>
             Clear Send
           </ion-button>
         </ion-col>
@@ -34,7 +34,7 @@
             color="secondary"
             (click)="onClickSendAdvancedModal()"
           >
-            <ion-icon name="settings-outline"></ion-icon>
+            <ion-icon name="icon-settings-outlined"></ion-icon>
           </ion-button>
         </ion-col>
       </ion-row>

diff --git a/...spie-ui/src/app/components/terminal-advanced-modal/terminal-advanced-modal.component.html b/...spie-ui/src/app/components/terminal-advanced-modal/terminal-advanced-modal.component.html
@@ -87,7 +87,7 @@
             >Use readline parser<ion-icon
               color="warning"
               class="tooltipIcon-top"
-              name="help-circle-outline"
+              name="icon-help-outline-outlined"
               matTooltip="Data received by the serialport library might arrive in multiple packets. Use this option to make terminal timestamps more readable if your data is terminated with a new line (\n) character."
             ></ion-icon
           ></ion-checkbox>

diff --git a/apps/spie-ui/src/app/components/terminal/terminal.component.html b/apps/spie-ui/src/app/components/terminal/terminal.component.html
@@ -30,8 +30,8 @@
               slot="start"
               [name]="
                 isPausedSubject.getValue() && isOpen()
-                  ? 'pause-outline'
-                  : 'play-outline'
+                  ? 'icon-pause-outlined'
+                  : 'icon-play-arrow-outlined'
               "
             ></ion-icon>
             {{ isPausedSubject.getValue() && isOpen() ? 'Continue' : 'Pause' }}
@@ -44,7 +44,10 @@
             color="secondary"
             (click)="onClickClearTerminal()"
           >
-            <ion-icon slot="start" name="trash-outline"></ion-icon>
+            <ion-icon
+              slot="start"
+              name="icon-delete-outline-outlined"
+            ></ion-icon>
             Clear
           </ion-button>
         </ion-col>
@@ -54,7 +57,7 @@
             color="secondary"
             (click)="onClickTerminalAdvancedModal()"
           >
-            <ion-icon name="settings-outline"></ion-icon>
+            <ion-icon name="icon-settings-outlined"></ion-icon>
           </ion-button>
         </ion-col>
       </ion-row>

diff --git a/apps/spie-ui/src/app/components/update-modal/update-modal.component.html b/apps/spie-ui/src/app/components/update-modal/update-modal.component.html
@@ -15,40 +15,46 @@
     <ion-content>
       <ion-list lines="none">
         <ion-item lines="none">
-          <ion-icon name="document-outline" slot="start"></ion-icon>
-          <ion-label> Total Size </ion-label>
+          <ion-icon name="icon-folder-zip-outlined" slot="start"></ion-icon>
+          <ion-label>Total Size</ion-label>
           <ion-note slot="end">{{
             formatBytes(progressInfo().total)
           }}</ion-note>
         </ion-item>
 
         <ion-item lines="none">
-          <ion-icon name="cloud-upload-outline" slot="start"></ion-icon>
-          <ion-label> Transferred </ion-label>
+          <ion-icon
+            name="icon-incomplete-circle-outlined"
+            slot="start"
+          ></ion-icon>
+          <ion-label>Transferred</ion-label>
           <ion-note slot="end">{{
             formatBytes(progressInfo().transferred)
           }}</ion-note>
         </ion-item>
 
         <ion-item lines="none">
-          <ion-icon name="speedometer-outline" slot="start"></ion-icon>
-          <ion-label> Speed </ion-label>
+          <ion-icon name="icon-speed-outlined" slot="start"></ion-icon>
+          <ion-label>Speed</ion-label>
           <ion-note slot="end"
             >{{ formatBytes(progressInfo().bytesPerSecond) }}/s</ion-note
           >
         </ion-item>
 
         <ion-item lines="none">
-          <ion-icon name="stats-chart-outline" slot="start"></ion-icon>
-          <ion-label> Progress </ion-label>
+          <ion-icon name="icon-downloading-outlined" slot="start"></ion-icon>
+          <ion-label>Progress</ion-label>
           <ion-note slot="end"
             >{{ progressInfo().percent | number : '1.2-2' }}%</ion-note
           >
         </ion-item>
 
         <ion-item lines="none">
-          <ion-icon name="time-outline" slot="start"></ion-icon>
-          <ion-label> Time Remaining </ion-label>
+          <ion-icon
+            name="icon-hourglass-bottom-outlined"
+            slot="start"
+          ></ion-icon>
+          <ion-label>Time Remaining</ion-label>
           <ion-note slot="end">{{ getEstimatedTime() }}</ion-note>
         </ion-item>
       </ion-list>

diff --git a/apps/spie-ui/src/app/pages/home/home.page.html b/apps/spie-ui/src/app/pages/home/home.page.html
@@ -3,12 +3,12 @@
 
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="terminal" href="/terminal">
-      <ion-icon name="terminal-outline"></ion-icon>
+      <ion-icon name="icon-terminal-outlined"></ion-icon>
       <ion-label>Terminal</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="plotter" href="/plotter">
-      <ion-icon name="pulse-outline"></ion-icon>
+      <ion-icon name="icon-insights-outlined"></ion-icon>
       <ion-label>Plotter</ion-label>
     </ion-tab-button>
   </ion-tab-bar>