fabio286
/
mizar
mirror of https://github.com/Fabio286/mizar.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: move to new material icons library

This commit is contained in:
Fabio Di Stasio 2023-04-17 18:02:15 +02:00
parent 8d5fbf600f
commit 3f1ea87194
16 changed files with 82 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -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,

1
package.json
View File

@ -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",

10
src/renderer/components/AppHeader.vue
View File

@ -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>

8
src/renderer/components/ClientTab.vue
View File

@ -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';

19
src/renderer/components/ClientTabHosts.vue
View File

@ -5,14 +5,17 @@
class="box-100"
>
<h3>
<span class="toggle-select"><i class="material-icons" @click="toggleCheck(checkStatus)">{{ checkIcon(checkStatus)
}}</i></span><span>
<span class="toggle-select"><i
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';
}
};

24
src/renderer/components/ClientMessages.vue → src/renderer/components/ClientTabMessages.vue
View File

@ -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';
}
};

4
src/renderer/components/ClientTabReports.vue
View File

@ -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>

4
src/renderer/components/ServerTab.vue
View File

@ -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>

20
src/renderer/components/ServerTabPorts.vue
View File

@ -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';
}
};

2
src/renderer/components/ServerTabReports.vue
View File

@ -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')"

BIN
src/renderer/fonts/MaterialIcons-Regular.eot
View File

Binary file not shown.

BIN
src/renderer/fonts/MaterialIcons-Regular.ttf
View File

Binary file not shown.

BIN
src/renderer/fonts/MaterialIcons-Regular.woff
View File

Binary file not shown.

BIN
src/renderer/fonts/MaterialIcons-Regular.woff2
View File

Binary file not shown.

1
src/renderer/index.ts
View File

@ -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';

105
src/renderer/scss/main.scss
View File

@ -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,
#portBox .round-button .material-icons,
#messageBox .round-button .material-icons {
#hostBox .round-button .mdi,
#portBox .round-button .mdi,
#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";
display: block;
font-family: "Material Icons";
color: #fcfcfc;
font-size: 14px;
/* Support for all WebKit browsers. */
content: "\F0132";
display: inline-block;
color: #1565c0;
font: normal normal normal 18px/1 "Material Design Icons";
text-rendering: auto;
line-height: inherit;
-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";
}
/* 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) {
border: 2px solid transparent;
}