refactor: move to new material icons library

package-lock.json

@@ -11,6 +11,7 @@
       "license": "MIT",
       "dependencies": {
         "@electron/remote": "~2.0.1",
+        "@mdi/font": "~7.2.96",
         "@vueuse/core": "~8.7.5",
         "electron-log": "~4.4.1",
         "electron-store": "~8.1.0",
@@ -2106,6 +2107,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@mdi/font": {
+      "version": "7.2.96",
+      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.2.96.tgz",
+      "integrity": "sha512-e//lmkmpFUMZKhmCY9zdjRe4zNXfbOIJnn6xveHbaV2kSw5aJ5dLXUxcRt1Gxfi7ZYpFLUWlkG2MGSFAiqAu7w=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "dev": true,
@@ -14934,6 +14940,11 @@
       "version": "2.0.4",
       "dev": true
     },
+    "@mdi/font": {
+      "version": "7.2.96",
+      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.2.96.tgz",
+      "integrity": "sha512-e//lmkmpFUMZKhmCY9zdjRe4zNXfbOIJnn6xveHbaV2kSw5aJ5dLXUxcRt1Gxfi7ZYpFLUWlkG2MGSFAiqAu7w=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "dev": true,

package.json

@@ -97,6 +97,7 @@
   },
   "dependencies": {
     "@electron/remote": "~2.0.1",
+    "@mdi/font": "~7.2.96",
     "@vueuse/core": "~8.7.5",
     "electron-log": "~4.4.1",
     "electron-store": "~8.1.0",

src/renderer/components/AppHeader.vue

@@ -10,9 +10,9 @@
             <transition name="fade">
                <i
                   v-if="clientStatus === 1"
-                  class="material-icons running"
+                  class="mdi mdi-play running"
                   :title="t('message.running')"
-               >play_arrow</i>
+               />
             </transition>
          </div>
          <div
@@ -24,9 +24,9 @@
             <transition name="fade">
                <i
                   v-if="serverStatus === 1"
-                  class="material-icons running"
+                  class="mdi mdi-play running"
                   :title="t('message.running')"
-               >play_arrow</i>
+               />
             </transition>
          </div>
       </nav>
@@ -35,7 +35,7 @@
          :title="t('word.settings')"
          @click="isSettingModal=true"
       >
-         <i class="material-icons">settings</i>
+         <i class="mdi mdi-cog" />
       </div>
       <ModalSettings v-if="isSettingModal" @hide-settings="isSettingModal=false" />
    </header>

src/renderer/components/ClientTab.vue

@@ -144,13 +144,13 @@
             </fieldset>
             <div class="buttons">
                <div v-if="running === 0" class="button-wrap">
-                  <i class="material-icons white">play_arrow</i>
+                  <i class="mdi mdi-play white" />
                   <button class="confirm" type="submit">
                      {{ t('word.start') }}
                   </button>
                </div>
                <div v-if="running !== 0 && params.stepTest" class="button-wrap">
-                  <i class="material-icons white">message</i>
+                  <i class="mdi mdi-message white" />
                   <button
                      class="confirm"
                      :title="t('message.sendMessages')"
@@ -160,7 +160,7 @@
                   </button>
                </div>
                <div v-if="running !== 0" class="button-wrap">
-                  <i class="material-icons white">stop</i>
+                  <i class="mdi mdi-stop white" />
                   <button class="stop" @click.prevent="stopTest">
                      {{ t('word.stop') }}
                   </button>
@@ -187,7 +187,7 @@ import { ref, computed, Ref, onBeforeUnmount } from 'vue';
 import { storeToRefs } from 'pinia';
 import Console from './BaseConsole.vue';
 import Hosts from './ClientTabHosts.vue';
-import Messages from './ClientMessages.vue';
+import Messages from './ClientTabMessages.vue';
 import NewHost from './ModalNewHost.vue';
 import NewMessage from './ModalNewMessage.vue';
 import EditMessage from './ModalEditMessage.vue';

src/renderer/components/ClientTabHosts.vue

@@ -5,14 +5,17 @@
       class="box-100"
    >
       <h3>
-         <span class="toggle-select"><i class="material-icons" @click="toggleCheck(checkStatus)">{{ checkIcon(checkStatus)
+         <span class="toggle-select"><i
-         }}</i></span><span>
+            class="mdi"
+            :class="[checkIcon(checkStatus)]"
+            @click="toggleCheck(checkStatus)"
+         /></span><span>
             {{ t('word.host', 2) }}</span>
       </h3>
       <div class="tools-box">
          <div class="round-button green-bg" @click="showAdd">
             <span>{{ t('message.addHost') }}</span>
-            <i class="material-icons">add</i>
+            <i class="mdi mdi-plus" />
          </div>
       </div>
       <ul id="hostList">
@@ -27,10 +30,10 @@
                <span>{{ host.host }}:{{ host.port }}</span>
             </label>
             <i
-               class="material-icons deleteHost"
+               class="mdi mdi-close deleteHost"
                :title="t('message.deleteHost', {host: `${host.host}:${host.port}`})"
                @click="deleteHost(index)"
-            >clear</i>
+            />
          </li>
       </ul>
    </div>
@@ -83,11 +86,11 @@ const deleteHost = (value: number) => {
 const checkIcon = (status: number) => {
    switch (status) {
       case 0:
-         return 'check_box_outline_blank';
+         return 'mdi-checkbox-blank-outline';
       case 1:
-         return 'indeterminate_check_box';
+         return 'mdi-minus-box';
       case 2:
-         return 'check_box';
+         return 'mdi-checkbox-marked';
    }
 };
 

src/renderer/components/ClientTabMessages.vue

@@ -4,11 +4,17 @@
       ref="root"
       class="box-100"
    >
-      <h3><span class="toggle-select"><i class="material-icons" @click="toggleCheck(checkStatus)">{{ checkIcon(checkStatus) }}</i></span><span>{{ t('word.message', 2) }}</span></h3>
+      <h3>
+         <span class="toggle-select"><i
+            class="mdi"
+            :class="[checkIcon(checkStatus)]"
+            @click="toggleCheck(checkStatus)"
+         /></span><span>{{ t('word.message', 2) }}</span>
+      </h3>
       <div class="tools-box">
          <div class="round-button green-bg" @click="showAdd">
             <span>{{ t('message.addMessage') }}</span>
-            <i class="material-icons">add</i>
+            <i class="mdi mdi-plus" />
          </div>
       </div>
       <ul id="messageList">
@@ -24,15 +30,15 @@
                <span>{{ truncate(message.name, 25, '...') }}</span>
             </label>
             <i
-               class="material-icons editMessage"
+               class="mdi mdi-pencil editMessage"
                :title="t('message.editMessage', { message: message.name })"
                @click="showEdit(index)"
-            >edit</i>
+            />
             <i
-               class="material-icons deleteMessage"
+               class="mdi mdi-close deleteMessage"
                :title="t('message.deleteMessage', { message: message.name })"
                @click="deleteMessage(index)"
-            >clear</i>
+            />
          </li>
       </ul>
    </div>
@@ -99,11 +105,11 @@ const deleteMessage = (index: number) => {
 const checkIcon = (status: number) => {
    switch (status) {
       case 0:
-         return 'check_box_outline_blank';
+         return 'mdi-checkbox-blank-outline';
       case 1:
-         return 'indeterminate_check_box';
+         return 'mdi-minus-box';
       case 2:
-         return 'check_box';
+         return 'mdi-checkbox-marked';
    }
 };
 

src/renderer/components/ClientTabReports.vue

@@ -14,7 +14,7 @@
             <tr v-for="(report, index) in reports" :key="index">
                <td>{{ report.host }}</td>
                <td>{{ report.sockets }}</td>
-               <td><span :title="t('word.sent', 2)">{{ report.messages.toLocaleString() }}</span> <i class="material-icons">import_export</i><span :title="t('word.received', 2)">{{ report.received }}</span></td>
+               <td><span :title="t('word.sent', 2)">{{ report.messages.toLocaleString() }}</span><i class="mdi mdi-swap-vertical" /><span :title="t('word.received', 2)">{{ report.received }}</span></td>
                <td><span :title="t('word.sent', 2)">{{ report.data.toLocaleString() }} B</span></td>
             </tr>
          </tbody>
@@ -22,7 +22,7 @@
             <tr>
                <td>{{ t('word.total', 2) }}</td>
                <td>{{ totSockets }}</td>
-               <td><span :title="t('word.sent', 2)">{{ totMessages.toLocaleString() }}</span> <i class="material-icons">import_export</i><span :title="t('word.received', 2)">{{ totReceived.toLocaleString() }}</span></td>
+               <td><span :title="t('word.sent', 2)">{{ totMessages.toLocaleString() }}</span><i class="mdi mdi-swap-vertical" /><span :title="t('word.received', 2)">{{ totReceived.toLocaleString() }}</span></td>
                <td><span :title="t('word.sent', 2)">{{ totData.toLocaleString() }} B</span></td>
             </tr>
          </tfoot>

src/renderer/components/ServerTab.vue

@@ -52,13 +52,13 @@
             </fieldset>
             <div class="buttons">
                <div v-if="running === 0" class="button-wrap">
-                  <i class="material-icons white">play_arrow</i>
+                  <i class="mdi mdi-play white" />
                   <button class="confirm" type="submit">
                      {{ t('word.start') }}
                   </button>
                </div>
                <div v-if="running === 1" class="button-wrap">
-                  <i class="material-icons white">stop</i>
+                  <i class="mdi mdi-stop white" />
                   <button class="stop" @click="stopServer">
                      {{ t('word.stop') }}
                   </button>

src/renderer/components/ServerTabPorts.vue

@@ -4,11 +4,17 @@
       ref="root"
       class="box-100"
    >
-      <h3><span class="toggle-select"><i class="material-icons" @click="toggleCheck(checkStatus)">{{ checkIcon(checkStatus) }}</i></span><span>{{ t('word.port', 2) }}</span></h3>
+      <h3>
+         <span class="toggle-select"><i
+            class="mdi"
+            :class="[checkIcon(checkStatus)]"
+            @click="toggleCheck(checkStatus)"
+         /></span><span>{{ t('word.port', 2) }}</span>
+      </h3>
       <div class="tools-box">
          <div class="round-button green-bg" @click="showAdd">
             <span>{{ t('message.addPort') }}</span>
-            <i class="material-icons">add</i>
+            <i class="mdi mdi-plus" />
          </div>
       </div>
       <ul id="portList">
@@ -23,10 +29,10 @@
                <span>{{ port.port }}</span>
             </label>
             <i
-               class="material-icons deletePort"
+               class="mdi mdi-close deletePort"
                :title="`Elimina porta ${port.port}`"
                @click="deletePort(index)"
-            >clear</i>
+            />
          </li>
       </ul>
    </div>
@@ -79,11 +85,11 @@ const deletePort = (value: number) => {
 const checkIcon = (status: number) => {
    switch (status) {
       case 0:
-         return 'check_box_outline_blank';
+         return 'mdi-checkbox-blank-outline';
       case 1:
-         return 'indeterminate_check_box';
+         return 'mdi-minus-box';
       case 2:
-         return 'check_box';
+         return 'mdi-checkbox-marked';
    }
 };
 

src/renderer/components/ServerTabReports.vue

@@ -29,7 +29,7 @@
       </table>
       <div class="buttons">
          <div class="button-wrap">
-            <i class="material-icons">replay</i>
+            <i class="mdi mdi-replay" />
             <button
                class="save"
                :title="t('message.resetReceivedData')"

src/renderer/index.ts

@@ -2,6 +2,7 @@
 import { ipcRenderer } from 'electron';
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
+import '@mdi/font/css/materialdesignicons.css';
 import '@/css/reset.css';
 import '@/scss/main.scss';
 

src/renderer/scss/main.scss

@@ -1,19 +1,6 @@
 /* stylelint-disable block-no-empty */
 /* stylelint-disable selector-class-pattern */
 /* stylelint-disable selector-id-pattern */
-@font-face {
-  font-family: "Material Icons";
-  font-style: normal;
-  font-weight: 400;
-  src: url("@/fonts/MaterialIcons-Regular.eot"); /* For IE6-8 */
-  src:
-    local("Material Icons"),
-    local("MaterialIcons-Regular"),
-    url("@/fonts/MaterialIcons-Regular.woff2") format("woff2"),
-    url("@/fonts/MaterialIcons-Regular.woff") format("woff"),
-    url("@/fonts/MaterialIcons-Regular.ttf") format("truetype");
-}
-
 @font-face {
   font-family: "Roboto Regular";
   font-style: normal;
@@ -28,32 +15,6 @@
   src: url("@/fonts/RobotoMono-Regular.ttf") format("truetype");
 }
 
-.material-icons {
-  font-family: "Material Icons";
-  font-style: normal;
-  font-weight: normal;
-  font-size: 14px;
-  display: inline-flex;
-  vertical-align: middle;
-  text-decoration: inherit;
-  margin-right: 2px;
-  text-align: center;
-  line-height: 1;
-  text-transform: initial;
-
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizelegibility;
-
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Support for IE. */
-  font-feature-settings: "liga";
-}
-
 /* Generale */
 
 * {
@@ -174,7 +135,7 @@ label {
   margin-bottom: 10px;
 }
 
-#header .material-icons {
+#header .mdi {
   font-size: 24px;
   margin-top: -2px;
 }
@@ -374,9 +335,9 @@ label {
   transition: opacity 0.2s;
 }
 
-#hostBox .round-button .material-icons,
+#hostBox .round-button .mdi,
-#portBox .round-button .material-icons,
+#portBox .round-button .mdi,
-#messageBox .round-button .material-icons {
+#messageBox .round-button .mdi {
   font-size: 16px;
   height: 16px;
   margin: 0;
@@ -628,7 +589,7 @@ fieldset:not(:disabled) #messageList li:hover .editMessage {
   margin: 20px 5px;
 }
 
-.button-wrap .material-icons {
+.button-wrap .mdi {
   position: absolute;
   top: 11px;
   left: 8px;
@@ -701,7 +662,7 @@ input[type="submit"] {
   width: max-content;
 }
 
-.button-wrap .material-icons.white {
+.button-wrap .mdi.white {
   color: #fff;
 }
 
@@ -768,7 +729,7 @@ fieldset:disabled .checkbox {
   position: relative;
 }
 
-.toggle-select .material-icons {
+.toggle-select .mdi {
   font-size: 18px;
   color: #1565c0;
   z-index: 1;
@@ -796,7 +757,7 @@ fieldset:disabled .checkbox {
   min-width: 14px;
   background: #ebebeb;
   margin-right: 5px;
-  border: 2px solid #1565c0;
+  border: 2px solid #1565c0cc;
   border-radius: 2px;
   justify-content: center;
   align-items: center;
@@ -808,50 +769,16 @@ fieldset:disabled .checkbox {
 }
 
 .checkbox input:checked + .checkbox-block {
-  background: #1565c0;
+  background: transparent;
 }
 
 .checkbox input:checked + .checkbox-block::before {
-  content: "done";
+  content: "\F0132";
-  display: block;
+  display: inline-block;
-  font-family: "Material Icons";
+  color: #1565c0;
-  color: #fcfcfc;
+  font: normal normal normal 18px/1 "Material Design Icons";
-  font-size: 14px;
+  text-rendering: auto;
-
+  line-height: inherit;
-  /* Support for all WebKit browsers. */
   -webkit-font-smoothing: antialiased;
-
+  border: 2px solid transparent;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizelegibility;
-
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Support for IE. */
-  font-feature-settings: "liga";
-}
-
-/* TABLET PORTRAIT */
-
-@media only screen and (min-width: 768px) {
-  /* 768px-HEADER */
-
-  /* 768px-MAIN */
-
-  /* 768px-FOOTER */
-}
-
-/* TABLET LANDSCAPE & NETBOOK */
-@media only screen and (min-width: 1024px) {
-  /* 1024px-HEADER */
-
-  /* 1024px-MAIN */
-
-  /* SIDEBAR */
-
-  /* 1024px-FOOTER */
-}
-
-/* DESKTOP */
-@media only screen and (min-width: 1200px) {
 }