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

Localization support

This commit is contained in:
Fabio 2020-05-25 15:37:59 +02:00
parent 755c34f782
commit 6fd9884d0b
19 changed files with 169 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,13 +29,13 @@
class="btn btn-primary mr-2"
@click="confirmModal"
>
{{ confirmText }}
{{ $t('word.confirm') }}
</button>
<button
class="btn btn-link"
@click="hideModal"
>
Cancel
{{ $t('word.cancel') }}
</button>
</div>
</div>
@ -45,12 +45,6 @@
<script>
export default {
name: 'BaseConfirmModal',
props: {
confirmText: {
type: String,
default: 'Confirm'
}
},
computed: {
hasHeader () {
return !!this.$slots.header;

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

@ -54,15 +54,15 @@ export default {
pointer-events: none;
.context-container{
min-width: 100px;
max-width: 150px;
z-index: 1;
box-shadow: 0px 1px 1px 0px #000;
box-shadow: 0px 0px 1px 0px #000;
padding: 0;
background: #1d1d1d;
border-radius: 0.1rem;
display: flex;
flex-direction: column;
width: 100%;
position: absolute;
pointer-events: initial;

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

@ -5,7 +5,7 @@
<i class="material-icons md-48">cloud_off</i>
</div>
<p class="empty-title h5">
Disconnected
{{ $t('word.disconnected') }}
</p>
<div class="empty-action">
<button
@ -13,7 +13,7 @@
:class="{'loading': isConnecting}"
@click="startConnection"
>
Connect
{{ $t('word.connect') }}
</button>
</div>
</div>

6
src/renderer/components/DatabaseExploreBar.vue
View File

@ -1,17 +1,17 @@
<template>
<div class="workspace-explorebar column">
<div class="workspace-explorebar-header">
<span class="workspace-explorebar-title">{{ connection.user }}@{{ connection.host }}:{{ connection.port }}</span>
<span class="workspace-explorebar-title">{{ connection.ask ? '': connection.user+'@' }}{{ connection.host }}:{{ connection.port }}</span>
<span v-if="workspace.connected" class="workspace-explorebar-tools">
<i
class="material-icons md-18 c-hand"
:class="{'rotate':isRefreshing}"
title="Refresh"
:title="$t('word.refresh')"
@click="refresh"
>refresh</i>
<i
class="material-icons md-18 c-hand mr-1 ml-2"
title="Disconnect"
:title="$t('word.disconnect')"
@click="disconnectWorkspace(connection.uid)"
>exit_to_app</i>
</span>

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

@ -4,7 +4,7 @@
<div class="modal-container p-0">
<div class="modal-header text-light">
<div class="modal-title h6">
Credentials
{{ $t('word.credentials') }}
</div>
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
</div>
@ -13,7 +13,7 @@
<form class="form-horizontal">
<div class="form-group">
<div class="col-3">
<label class="form-label">User:</label>
<label class="form-label">{{ $t('word.user') }}:</label>
</div>
<div class="col-9">
<input
@ -25,7 +25,7 @@
</div>
<div class="form-group">
<div class="col-3">
<label class="form-label">Password:</label>
<label class="form-label">{{ $t('word.password') }}:</label>
</div>
<div class="col-9">
<input
@ -40,10 +40,10 @@
</div>
<div class="modal-footer text-light">
<button class="btn btn-primary mr-2" @click.stop="sendCredentials">
Send
{{ $t('word.send') }}
</button>
<button class="btn btn-link" @click.stop="closeModal">
Close
{{ $t('word.close') }}
</button>
</div>
</div>

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

@ -4,7 +4,7 @@
<div class="modal-container">
<div class="modal-header text-light">
<div class="modal-title h6">
Edit connection
{{ $t('message.editConnection') }}
</div>
<a class="btn btn-clear c-hand" @click="closeModal" />
</div>
@ -14,7 +14,7 @@
<fieldset class="m-0" :disabled="isTesting">
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">Client:</label>
<label class="form-label">{{ $t('word.client') }}:</label>
</div>
<div class="col-9 col-sm-12">
<select v-model="localConnection.client" class="form-select">
@ -35,7 +35,7 @@
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">Host name/IP:</label>
<label class="form-label">{{ $t('word.hostName') }}/IP:</label>
</div>
<div class="col-9 col-sm-12">
<input
@ -47,7 +47,7 @@
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">Port:</label>
<label class="form-label">{{ $t('word.port') }}:</label>
</div>
<div class="col-9 col-sm-12">
<input
@ -61,7 +61,7 @@
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">User:</label>
<label class="form-label">{{ $t('word.user') }}:</label>
</div>
<div class="col-9 col-sm-12">
<input
@ -74,7 +74,7 @@
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">Password:</label>
<label class="form-label">{{ $t('word.password') }}:</label>
</div>
<div class="col-9 col-sm-12">
<input
@ -89,7 +89,7 @@
<div class="col-3 col-sm-12" />
<div class="col-9 col-sm-12">
<label class="form-checkbox form-inline">
<input v-model="localConnection.ask" type="checkbox"><i class="form-icon" /> Ask for credentials
<input v-model="localConnection.ask" type="checkbox"><i class="form-icon" /> {{ $t('message.askCredentials') }}
</label>
</div>
</div>
@ -108,13 +108,13 @@
:class="{'loading': isTesting}"
@click="startTest"
>
Test connection
{{ $t('message.testConnection') }}
</button>
<button class="btn btn-primary mr-2" @click="saveEditConnection">
Save
{{ $t('word.save') }}
</button>
<button class="btn btn-link" @click="closeModal">
Close
{{ $t('word.close') }}
</button>
</div>
</div>

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

@ -4,7 +4,7 @@
<div class="modal-container">
<div class="modal-header text-light">
<div class="modal-title h6">
Create a new connection
{{ $t('message.createNewConnection') }}
</div>
<a class="btn btn-clear c-hand" @click="closeModal" />
</div>
@ -14,7 +14,7 @@
<fieldset class="m-0" :disabled="isTesting">
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">Client:</label>
<label class="form-label">{{ $t('word.client') }}:</label>
</div>
<div class="col-9 col-sm-12">
<select
@ -39,7 +39,7 @@
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">Host name/IP:</label>
<label class="form-label">{{ $t('word.hostName') }}/IP:</label>
</div>
<div class="col-9 col-sm-12">
<input
@ -51,7 +51,7 @@
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">Port:</label>
<label class="form-label">{{ $t('word.port') }}:</label>
</div>
<div class="col-9 col-sm-12">
<input
@ -65,7 +65,7 @@
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">User:</label>
<label class="form-label">{{ $t('word.user') }}:</label>
</div>
<div class="col-9 col-sm-12">
<input
@ -78,7 +78,7 @@
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">Password:</label>
<label class="form-label">{{ $t('word.password') }}:</label>
</div>
<div class="col-9 col-sm-12">
<input
@ -93,7 +93,7 @@
<div class="col-3 col-sm-12" />
<div class="col-9 col-sm-12">
<label class="form-checkbox form-inline">
<input v-model="connection.ask" type="checkbox"><i class="form-icon" /> Ask for credentials
<input v-model="connection.ask" type="checkbox"><i class="form-icon" /> {{ $t('message.askCredentials') }}
</label>
</div>
</div>
@ -112,13 +112,13 @@
:class="{'loading': isTesting}"
@click="startTest"
>
Test connection
{{ $t('message.testConnection') }}
</button>
<button class="btn btn-primary mr-2" @click="saveNewConnection">
Save
{{ $t('word.save') }}
</button>
<button class="btn btn-link" @click="closeModal">
Close
{{ $t('word.close') }}
</button>
</div>
</div>

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

@ -4,10 +4,10 @@
@closeContext="$emit('closeContext')"
>
<div class="context-element" @click="showEditModal(contextConnection)">
<i class="material-icons md-18 text-light pr-1">edit</i> Edit
<i class="material-icons md-18 text-light pr-1">edit</i> {{ $t('word.edit') }}
</div>
<div class="context-element" @click="showConfirmModal">
<i class="material-icons md-18 text-light pr-1">delete</i> Delete
<i class="material-icons md-18 text-light pr-1">delete</i> {{ $t('word.delete') }}
</div>
<ConfirmModal
@ -16,11 +16,11 @@
@hide="hideConfirmModal"
>
<template :slot="'header'">
Delete connection
{{ $t('message.deleteConnection') }}
</template>
<div :slot="'body'">
<div class="mb-2">
Do you confirm the cancellation of <b>{{ contextConnection.user }}@{{ contextConnection.host }}:{{ contextConnection.port }}</b>?
{{ $t('message.deleteConnectionCorfirm') }} <b>{{ contextConnection.user }}@{{ contextConnection.host }}:{{ contextConnection.port }}</b>?
</div>
</div>
</ConfirmModal>

6
src/renderer/components/TheAppWelcome.vue
View File

@ -5,14 +5,14 @@
<i class="material-icons md-48">mood</i>
</div>
<p class="empty-title h5">
Welcome to Antares SQL Client!
{{ $t('message.appWelcome') }}
</p>
<p class="empty-subtitle">
Your first step: create a new database connection.
{{ $t('message.appFirstStep') }}
</p>
<div class="empty-action">
<button class="btn btn-primary" @click="$emit('newConn')">
Create connection
{{ $t('message.createConnection') }}
</button>
</div>
</div>

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

@ -15,7 +15,7 @@
draggable="true"
class="settingbar-element btn btn-link tooltip tooltip-right"
:class="{'selected': connection.uid === selectedWorkspace}"
:data-tooltip="`${connection.user}@${connection.host}:${connection.port}`"
:data-tooltip="`${connection.ask ? '': connection.user+'@'}${connection.host}:${connection.port}`"
@click="selectWorkspace(connection.uid)"
@contextmenu.prevent="contextMenu($event, connection)"
>
@ -24,7 +24,7 @@
</draggable>
<li
class="settingbar-element btn btn-link tooltip tooltip-right pt-3"
data-tooltip="Add connection"
:data-tooltip="$t('message.addConnection')"
@click="showNewConnModal"
>
<i class="settingbar-element-icon material-icons text-light">add</i>

48
src/renderer/i18n/en-US.js Normal file
View File

@ -0,0 +1,48 @@
module.exports = {
word: {
edit: 'Edit',
save: 'Save',
close: 'Close',
delete: 'Delete',
confirm: 'Confirm',
cancel: 'Cancel',
send: 'Send',
client: 'Client',
hostName: 'Host name',
port: 'Port',
user: 'User',
password: 'Password',
credentials: 'Credentials',
connect: 'Connect',
connected: 'Connected',
disconnect: 'Disconnect',
disconnected: 'Disconnected',
refresh: 'Refresh'
},
message: {
appWelcome: 'Welcome to Antares SQL Client!',
appFirstStep: 'Your first step: create a new database connection.',
addConnection: 'Add connection',
createConnection: 'Create connection',
createNewConnection: 'Create new connection',
askCredentials: 'Ask for credentials',
testConnection: 'Test connection',
editConnection: 'Edit connection',
deleteConnection: 'Delete connection',
deleteConnectionCorfirm: 'Do you confirm the cancellation of'
},
// Date and Time
short: {
year: 'numeric',
month: 'short',
day: 'numeric'
},
long: {
year: 'numeric',
month: 'short',
day: 'numeric',
weekday: 'short',
hour: 'numeric',
minute: 'numeric'
}
};

12
src/renderer/i18n/index.js Normal file
View File

@ -0,0 +1,12 @@
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const i18n = new VueI18n({
messages: {
'en-US': require('./en-US'),
'it-IT': require('./it-IT')
}
});
export default i18n;

48
src/renderer/i18n/it-IT.js Normal file
View File

@ -0,0 +1,48 @@
module.exports = {
word: {
edit: 'Modifica',
save: 'Salva',
close: 'Chiudi',
delete: 'Elimina',
confirm: 'Conferma',
cancel: 'Annulla',
send: 'Invia',
client: 'Client',
hostName: 'Nome host',
port: 'Porta',
user: 'Utente',
password: 'Password',
credentials: 'Credenziali',
connect: 'Connetti',
connected: 'Connesso',
disconnect: 'Disconnetti',
disconnected: 'Disconnesso',
refresh: 'Aggiorna'
},
message: {
appWelcome: 'Benvenuto in Antares SQL Client!',
appFirstStep: 'Primo step: crea una nuova connessione.',
addConnection: 'Aggiunti connessione',
createConnection: 'Crea connessione',
createNewConnection: 'Crea nuova connessione',
askCredentials: 'Chiedi credenziali',
testConnection: 'Testa connessione',
editConnection: 'Modifica connessione',
deleteConnection: 'Elimina connessione',
deleteConnectionCorfirm: 'Confermi l\'eliminazione di'
},
// Date and Time
short: {
year: 'numeric',
month: 'short',
day: 'numeric'
},
long: {
year: 'numeric',
month: 'short',
day: 'numeric',
weekday: 'short',
hour: 'numeric',
minute: 'numeric'
}
};

5
src/renderer/main.js
View File

@ -7,10 +7,13 @@ import '@/scss/main.scss';
import App from '@/App.vue';
import store from '@/store';
import i18n from '@/i18n';
i18n.locale = store.state.application.locale;
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
store
store,
i18n
}).$mount('#app');

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

@ -46,7 +46,7 @@ body{
}
&.dbi-oracledb{
background-image: url('/svg/oracledb3.svg');
background-image: url('/svg/oracledb.svg');
}
}

14
src/renderer/store/modules/application.store.js
View File

@ -1,24 +1,34 @@
'use strict';
import i18n from '@/i18n';
export default {
namespaced: true,
strict: true,
state: {
app_name: 'Antares - SQL Client',
is_loading: false
is_loading: false,
locale: 'it-IT'
},
getters: {
isLoading: state => state.is_loading,
appName: state => state.app_name
appName: state => state.app_name,
getLocale: state => state.locale
},
mutations: {
SET_LOADING_STATUS (state, payload) {
state.is_loading = payload;
},
SET_LOCALE (state, locale) {
state.locale = locale;
i18n.locale = locale;
}
},
actions: {
setLoadingStatus ({ commit }, payload) {
commit('SET_LOADING_STATUS', payload);
},
changeLocale ({ commit }, locale) {
commit('SET_LOCALE', locale);
}
}
};

2
static/svg/oracledb.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#fff" d="M16 27.534c-5.323 0-9.641-1.44-9.641-3.214v-3.214c0-.279.14-.545.341-.803 1.075 1.384 4.813 2.41 9.301 2.41s8.226-1.026 9.301-2.41c.201.259.34.524.34.803v3.214c0 1.773-4.318 3.214-9.641 3.214zm0-6.428c-5.323 0-9.641-1.441-9.641-3.214v-3.214c0-.17.064-.336.151-.5.049-.103.113-.204.19-.304 1.075 1.383 4.813 2.41 9.301 2.41s8.226-1.027 9.301-2.41c.077.1.141.201.19.304.086.164.151.33.151.5v3.214c0 1.773-4.318 3.214-9.641 3.214zm0-6.427c-5.323 0-9.641-1.44-9.641-3.214V9.858 8.251c0-1.774 4.318-3.214 9.641-3.214s9.641 1.44 9.641 3.214v3.214c0 1.774-4.318 3.214-9.641 3.214zm0-8.034c-3.55 0-6.427.718-6.427 1.607S12.451 9.859 16 9.859c3.55 0 6.427-.718 6.427-1.607S19.549 6.645 16 6.645z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path fill="#fff" d="M489.6 184.6c230.2-2.7 423.6 57.3 431.7 133.7 8.1 76.5-172.3 140.8-402.5 143.4C288.6 464.5 95.1 404.5 87.1 328 79 251.6 259.3 187.3 489.6 184.6z"/><path fill="#fff" d="M87.1 501.5c-.4-3.3-.4-6.6 0-9.8V340.2h.2c-.4 3.2-.3 6.4 0 9.7 8 76.5 201.5 136.4 431.7 133.8 220.3-2.6 394.9-61.5 402.5-133.6v151.5h-.3c-7.4 72.1-182.1 131.2-402.5 133.8C288.6 637.9 95.1 578 87.1 501.5z"/><path fill="#fff" d="M87.1 678.8c-.4-3.3-.4-6.6 0-9.8V517.5h.2c-.4 3.2-.3 6.5 0 9.7 8 76.5 201.5 136.4 431.7 133.8 220.3-2.6 394.9-61.6 402.5-133.6v151.4h-.3c-7.3 72.2-182 131.2-402.4 133.8-230.2 2.6-423.6-57.3-431.7-133.8z"/><path fill="#fff" d="M87.1 856.1c-.4-3.3-.4-6.6 0-9.8V694.8h.2c-.4 3.2-.3 6.5 0 9.7 8 76.5 201.5 136.4 431.7 133.8 220.3-2.6 394.9-61.5 402.5-133.6v151.5h-.3c-7.4 72.2-182.1 131.2-402.5 133.8-230.1 2.6-423.5-57.4-431.6-133.9zM700.7 10H683v116.2h83.1l11.3-19h-76.6V10zm-242.4 5.8l-64.8 110.5h21.4l19.5-33.4h41.8l11-19h-41.8l22.8-38.3 53.3 90.6H543L477.6 15.5c-4-7.2-14.7-7.2-19.3.3zM584 29h74.3l11-18.9h-85.8c-29.9 0-49.6 26-49.6 58.1s19.7 58.1 49.6 58.1l72.6-.1 11.4-18.8H584c-20.1 0-31.9-17.5-31.9-39.2 0-21.7 11.7-39.2 31.9-39.2zM204.6 10H128c-29.9 0-49.5 26-49.5 58.1s19.7 58.1 49.5 58.1h76.6c29.9 0 49.5-26 49.5-58.1S234.4 10 204.6 10zm0 97.3H128c-20.1 0-31.9-17.5-31.9-39.2S107.8 29 128 29h76.6c20.1 0 31.9 17.5 31.9 39.2s-11.8 39.1-31.9 39.1zm592.2-30h93.6l11.3-19H796.8c3-16.8 14.1-29.4 31.1-29.4h74.4l11-18.9h-85.8C797.6 10 778 36 778 68.1s19.7 58.1 49.5 58.1l72.6-.1 11.4-18.8H828c-17.3 0-28.3-12.8-31.2-30zM354.9 79c17.7 0 32.1-15.4 32.1-34.5 0-19-14.4-34.5-32.1-34.5h-90.2v116.2h19.8V29h70.3c8 0 14.5 6.9 14.5 15.6 0 8.6-6.5 15.6-14.5 15.6h-56.4l63.6 66h25.6l-45.5-47 12.8-.2z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 799 B

After

Width:  |  Height:  |  Size: 1.7 KiB

1
static/svg/oracledb2.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" fill="#fff"><path d="M438.7 408.1c270.6 0 459.4-68.6 459.4-153.1v-91.9C898.1 78.6 709.4 10 438.7 10 168.1 10 10 78.6 10 163.1V255c0 84.6 158.1 153.1 428.7 153.1zM383.2 774.6c-185.9-6.9-294.4-49.3-351.5-106.1C17.1 683 10 698.4 10 714.4v122.5C10 921.5 168.1 990 438.7 990c27.1 0 53.5-.9 79.4-2.2-69.5-50-119.1-125.6-134.9-213.2zM377.6 713c.3-81 29.1-155.2 77-213.1-5.8 0-11.4.1-17.4.1-219.4 0-343.1-45.1-405.6-107.2-14.5 14.5-21.6 29.9-21.6 46v122.5c0 77.9 134.6 142.1 367.6 151.7zM730.1 608.7c-26.9 0-50.1 9.8-69.5 29.3-19.4 19.6-31.3 45.1-35.7 76.8-4.5 31.9.2 57.5 13.7 76.7 13.6 19.3 33.6 28.9 59.8 28.9 28.2 0 51.6-9.3 70.2-27.7 18.6-18.5 30.3-44.2 34.9-77.4 4.7-34 .5-60.3-12.6-78.8-13.2-18.6-33.4-27.8-60.8-27.8z"/><path d="M714.4 438.8c-152.2 0-275.6 123.4-275.6 275.6 0 152.2 123.4 275.6 275.6 275.6C866.6 990 990 866.6 990 714.4c0-152.2-123.4-275.6-275.6-275.6zM840 711.2c-6 42.8-22.2 76.8-48.6 101.9-26.5 25.1-58.9 37.6-97.2 37.6-37.5 0-65.8-12.3-85-37-19.2-24.7-26-56.7-20.5-96.3 5.9-42.6 22.2-76.5 48.7-101.7 26.6-25.2 59.5-37.8 99-37.8 36.7 0 64.5 12.3 83.4 36.9 19 24.9 25.7 56.9 20.2 96.4z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

1
static/svg/oracledb3.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#fff" d="M55.387 66.469h8.333l-4.407-7.09-8.088 12.819h-3.681l9.838-15.398c.428-.622 1.14-.998 1.931-.998.765 0 1.478.363 1.892.972l9.876 15.424h-3.681l-1.736-2.865h-8.438l-1.839-2.864zm38.235 2.864v-13.375h-3.123v14.685c0 .402.156.791.454 1.089.298.298.7.466 1.141.466h14.244l1.841-2.865h-14.557zm-51.677-2.397c3.033 0 5.496-2.449 5.496-5.482s-2.462-5.496-5.496-5.496h-13.665v16.241h3.123v-13.377h10.335c1.452 0 2.618 1.18 2.618 2.631s-1.167 2.631-2.618 2.631l-8.806-.013 9.324 8.127h4.538l-6.274-5.263h1.425zm-32.886 5.262c-4.483 0-8.122-3.629-8.122-8.114s3.638-8.127 8.122-8.127h9.439c4.485 0 8.121 3.643 8.121 8.127s-3.636 8.114-8.121 8.114h-9.439zm9.229-2.865c2.905 0 5.258-2.346 5.258-5.249 0-2.903-2.353-5.263-5.258-5.263h-9.021c-2.902 0-5.256 2.359-5.256 5.263 0 2.903 2.354 5.249 5.256 5.249h9.021zm59.314 2.865c-4.484 0-8.126-3.629-8.126-8.114s3.642-8.127 8.126-8.127h11.212l-1.829 2.864h-9.175c-2.904 0-5.264 2.359-5.264 5.263 0 2.903 2.36 5.249 5.264 5.249h11.263l-1.84 2.865h-9.631zm38.197-2.865c-2.397 0-4.433-1.607-5.055-3.824h13.35l1.84-2.864h-15.19c.622-2.203 2.658-3.824 5.055-3.824h9.163l1.854-2.864h-11.225c-4.484 0-8.126 3.643-8.126 8.127s3.642 8.114 8.126 8.114h9.631l1.841-2.865h-11.264"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB