refactor: changed material design icon pack

This commit is contained in:
Fabio 2020-08-12 10:48:18 +02:00
parent 7651d05b37
commit 5473858323
25 changed files with 119 additions and 125 deletions

View File

@ -17,7 +17,7 @@ If you are curious to try this early state of Antares you can download and insta
Why am I developing an SQL client when there are a lot of thom on the market?-->
## Hot to contribute
## How to contribute
- [Translate Antares](https://github.com/EStarium/antares/wiki/Translate-Antares)
@ -25,19 +25,19 @@ Why am I developing an SQL client when there are a lot of thom on the market?-->
This is a roadmap with major features will come in near future.
- [ ] Options to insert new database records.
- [ ] Improvements of query editor area.
- [ ] Multiple query tabs.
- [ ] Tables management (add/edit/delete).
- [ ] Stored procedures, schedulers and trigger support.
- [ ] Database tools.
- [ ] Context menu shortcuts.
- [ ] Keyboard shortcuts.
- [ ] More secure password storage.
- [ ] Query logs console.
- [ ] Fake data filler.
- [ ] Import/export and migration.
- [ ] Themes.
- Options to insert new database records.
- Improvements of query editor area.
- Multiple query tabs.
- Tables management (add/edit/delete).
- Stored procedures, views, schedulers and trigger support.
- Database tools.
- Context menu shortcuts.
- Keyboard shortcuts.
- More secure password storage.
- Query logs console.
- Fake data filler.
- Import/export and migration.
- Themes.
## Currently supported

View File

@ -48,11 +48,11 @@
}
},
"dependencies": {
"@mdi/font": "^5.5.55",
"codemirror": "^5.56.0",
"electron-log": "^4.2.2",
"electron-updater": "^4.3.4",
"lodash": "^4.17.19",
"material-design-icons": "^3.0.1",
"moment": "^2.27.0",
"mssql": "^6.2.1",
"mysql": "^2.18.1",

View File

@ -27,7 +27,11 @@ export default class {
name: field.COLUMN_NAME,
key: field.COLUMN_KEY.toLowerCase(),
type: field.DATA_TYPE,
precision: field.DATETIME_PRECISION
numPrecision: field.NUMERIC_PRECISION,
datePrecision: field.DATETIME_PRECISION,
charLength: field.CHARACTER_MAXIMUM_LENGTH,
isNullable: field.IS_NULLABLE,
default: field.COLUMN_DEFAULT
};
});
}

View File

@ -1,14 +1,15 @@
<template>
<div class="toast mt-2" :class="notificationStatus.className">
<span class="p-vcentered text-left" :class="{'expanded': isExpanded}">
<i class="material-icons mr-1">{{ notificationStatus.iconName }}</i>
<i class="mdi mdi-24px mr-2" :class="notificationStatus.iconName" />
<span class="notification-message">{{ message }}</span>
</span>
<i
v-if="isExpandable"
class="material-icons c-hand"
class="mdi mdi-24px c-hand expand-btn"
:class="isExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
@click="toggleExpand"
>{{ isExpanded ? 'expand_less' : 'expand_more' }}</i>
/>
<button class="btn btn-clear ml-2" @click="hideToast" />
</div>
</template>
@ -38,19 +39,19 @@ export default {
switch (this.status) {
case 'success':
className = 'toast-success';
iconName = 'done';
iconName = 'mdi-check';
break;
case 'error':
className = 'toast-error';
iconName = 'error';
iconName = 'mdi-alert-rhombus';
break;
case 'warning':
className = 'toast-warning';
iconName = 'warning';
iconName = 'mdi-alert';
break;
case 'primary':
className = 'toast-primary';
iconName = 'info_outline';
iconName = 'mdi-information-outline';
break;
}
@ -88,6 +89,10 @@ export default {
max-width: 30rem;
}
.expand-btn {
align-items: initial;
}
.expanded .notification-message {
white-space: initial;
}

View File

@ -34,19 +34,19 @@ export default {
switch (this.status) {
case 'success':
className = 'toast-success';
iconTag = '<i class="material-icons mr-1">done</i>';
iconTag = '<i class="mdi mdi-24px mdi-check mr-1"></i>';
break;
case 'error':
className = 'toast-error';
iconTag = '<i class="material-icons mr-1">error</i>';
iconTag = '<i class="mdi mdi-24px mdi-alert-rhombus mr-1"></i>';
break;
case 'warning':
className = 'toast-warning';
iconTag = '<i class="material-icons mr-1">warning</i>';
iconTag = '<i class="mdi mdi-24px mdi-alert mr-1"></i>';
break;
case 'primary':
className = 'toast-primary';
iconTag = '<i class="material-icons mr-1">info_outline</i>';
iconTag = '<i class="mdi mdi-24px mdi-information-outline mr-1"></i>';
break;
}

View File

@ -49,7 +49,7 @@
<div class="form-group mb-4">
<div class="col-6 col-sm-12">
<label class="form-label">
<i class="material-icons md-18 mr-1">translate</i>
<i class="mdi mdi-18px mdi-translate mr-1" />
{{ $t('word.language') }}:
</label>
</div>

View File

@ -1,7 +1,7 @@
<template>
<div class="empty">
<div class="empty-icon">
<i class="material-icons md-48">system_update_alt</i>
<i class="mdi mdi-48px mdi-cloud-download" />
</div>
<p class="empty-title h5">
{{ updateMessage }}

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> {{ $t('word.edit') }}
<i class="mdi mdi-18px mdi-pencil text-light pr-1" /> {{ $t('word.edit') }}
</div>
<div class="context-element" @click="showConfirmModal">
<i class="material-icons md-18 text-light pr-1">delete</i> {{ $t('word.delete') }}
<i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $t('word.delete') }}
</div>
<ConfirmModal

View File

@ -2,7 +2,7 @@
<div class="columns">
<div class="column col-12 empty text-light">
<div class="empty-icon">
<i class="material-icons md-48">mood</i>
<i class="mdi mdi-48px mdi-emoticon" />
</div>
<p class="empty-title h5">
{{ $t('message.appWelcome') }}

View File

@ -3,7 +3,7 @@
<div class="footer-left-elements">
<ul class="footer-elements">
<li class="footer-element">
<i class="material-icons md-18 mr-1">memory</i>
<i class="mdi mdi-18px mdi-memory mr-1" />
<small>{{ appVersion }}</small>
</li>
</ul>
@ -12,14 +12,14 @@
<div class="footer-right-elements">
<ul class="footer-elements">
<li class="footer-element footer-link" @click="openOutside('https://www.patreon.com/fabio286')">
<i class="material-icons md-18 mr-1">favorite</i>
<i class="mdi mdi-18px mdi-coffee mr-1" />
<small>{{ $t('word.donate') }}</small>
</li>
<li class="footer-element footer-link" @click="openOutside('https://github.com/EStarium/antares/issues')">
<i class="material-icons md-18">bug_report</i>
<i class="mdi mdi-18px mdi-bug" />
</li>
<li class="footer-element footer-link" @click="showSettingModal('about')">
<i class="material-icons md-18">info_outline</i>
<i class="mdi mdi-18px mdi-information-outline" />
</li>
</ul>
</div>

View File

@ -28,7 +28,7 @@
@click="showNewConnModal"
@mouseover.self="tooltipPosition"
>
<i class="settingbar-element-icon material-icons text-light">add</i>
<i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
<span class="ex-tooltip-content">{{ $t('message.addConnection') }}</span>
</li>
</ul>
@ -37,7 +37,7 @@
<div class="settingbar-bottom-elements">
<ul class="settingbar-elements">
<li class="settingbar-element btn btn-link ex-tooltip" @click="showSettingModal('general')">
<i class="settingbar-element-icon material-icons text-light">settings</i>
<i class="settingbar-element-icon mdi mdi-24px mdi-cog text-light" />
<span class="ex-tooltip-content">{{ $t('word.settings') }}</span>
</li>
</ul>

View File

@ -13,24 +13,24 @@
class="titlebar-element"
@click="openDevTools"
>
<i class="material-icons">code</i>
<i class="mdi mdi-24px mdi-code-tags" />
</div>
<div
v-if="isDevelopment"
class="titlebar-element"
@click="reload"
>
<i class="material-icons">refresh</i>
<i class="mdi mdi-24px mdi-refresh" />
</div>
<div class="titlebar-element" @click="minimizeApp">
<i class="material-icons">remove</i>
<i class="mdi mdi-24px mdi-minus" />
</div>
<div class="titlebar-element" @click="toggleFullScreen">
<i v-if="isMaximized" class="material-icons">fullscreen_exit</i>
<i v-else class="material-icons">fullscreen</i>
<i v-if="isMaximized" class="mdi mdi-24px mdi-fullscreen-exit" />
<i v-else class="mdi mdi-24px mdi-fullscreen" />
</div>
<div class="titlebar-element close-button" @click="closeApp">
<i class="material-icons">close</i>
<i class="mdi mdi-24px mdi-close" />
</div>
</div>
</div>

View File

@ -8,7 +8,7 @@
class="tab-item"
>
<a class="tab-link">
<i class="material-icons md-18 mr-1">tune</i>
<i class="mdi mdi-18px mdi-tune mr-1" />
<span :title="workspace.breadcrumbs.table">{{ $t('word.properties').toUpperCase() }}: {{ workspace.breadcrumbs.table }}</span>
</a>
</li>
@ -19,7 +19,7 @@
@click="selectTab({uid: workspace.uid, tab: 1})"
>
<a class="tab-link">
<i class="material-icons md-18 mr-1">grid_on</i>
<i class="mdi mdi-18px mdi-table mr-1" />
<span :title="workspace.breadcrumbs.table">{{ $t('word.data').toUpperCase() }}: {{ workspace.breadcrumbs.table }}</span>
</a>
</li>

View File

@ -2,7 +2,7 @@
<div class="columns">
<div class="column col-12 empty text-light">
<div class="empty-icon">
<i class="material-icons md-48">cloud_off</i>
<i class="mdi mdi-48px mdi-power-plug-off" />
</div>
<p class="empty-title h5">
{{ $t('word.disconnected') }}

View File

@ -10,16 +10,16 @@
<span class="workspace-explorebar-title">{{ connectionName }}</span>
<span v-if="workspace.connected" class="workspace-explorebar-tools">
<i
class="material-icons md-18 c-hand"
class="mdi mdi-18px mdi-refresh c-hand"
:class="{'rotate':isRefreshing}"
:title="$t('word.refresh')"
@click="refresh"
>refresh</i>
/>
<i
class="material-icons md-18 c-hand mr-1 ml-2"
class="mdi mdi-18px mdi-power-plug-off c-hand mr-1 ml-2"
:title="$t('word.disconnect')"
@click="disconnectWorkspace(connection.uid)"
>exit_to_app</i>
/>
</span>
</div>
<WorkspaceConnectPanel

View File

@ -5,8 +5,8 @@
:class="{'text-bold': breadcrumbs.schema === database.name}"
@click="changeBreadcrumbs({schema: database.name, table:null})"
>
<i class="icon material-icons md-18 mr-1">navigate_next</i>
<i class="material-icons md-18 mr-1">view_agenda</i>
<i class="icon mdi mdi-18px mdi-chevron-right" />
<i class="mdi mdi-18px mdi-database mr-1" />
<span>{{ database.name }}</span>
</summary>
<div class="accordion-body">
@ -20,7 +20,7 @@
@click="changeBreadcrumbs({schema: database.name, table: table.TABLE_NAME})"
>
<a class="table-name">
<i class="material-icons md-18 mr-1">grid_on</i>
<i class="mdi mdi-18px mdi-table mr-1" />
<span>{{ table.TABLE_NAME }}</span>
</a>
</li>

View File

@ -11,7 +11,7 @@
@click="runQuery(query)"
>
<span>{{ $t('word.run') }}</span>
<i class="material-icons text-success">play_arrow</i>
<i class="mdi mdi-24px mdi-play text-success" />
</button>
</div>
<div class="workspace-query-info">

View File

@ -23,12 +23,16 @@
<div class="table-column-title" @click="sort(field.name)">
<i
v-if="field.key"
class="material-icons column-key c-help"
class="mdi mdi-key column-key c-help"
:class="`key-${field.key}`"
:title="keyName(field.key)"
>vpn_key</i>
/>
<span>{{ field.name }}</span>
<i v-if="currentSort === field.name" class="material-icons sort-icon">{{ currentSortDir === 'asc' ? 'arrow_upward':'arrow_downward' }}</i>
<i
v-if="currentSort === field.name"
class="mdi sort-icon"
:class="currentSortDir === 'asc' ? 'mdi-sort-ascending':'mdi-sort-descending'"
/>
</div>
</div>
</div>
@ -148,7 +152,7 @@ export default {
let length = 0;
const field = this.fields.filter(field => field.name === cKey)[0];
if (field)
length = field.precision;
length = field.datePrecision;
return length;
},
@ -291,23 +295,4 @@ export default {
line-height: 1;
margin-left: 0.2rem;
}
.column-key {
transform: rotate(90deg);
font-size: 0.7rem;
line-height: 1.5;
margin-right: 0.2rem;
&.key-pri {
color: goldenrod;
}
&.key-uni {
color: deepskyblue;
}
&.key-mul {
color: palegreen;
}
}
</style>

View File

@ -4,7 +4,7 @@
@closeContext="closeContext"
>
<div class="context-element" @click="showConfirmModal">
<i class="material-icons md-18 text-light pr-1">delete</i> {{ $tc('message.deleteRows', selectedRows.length) }}
<i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $tc('message.deleteRows', selectedRows.length) }}
</div>
<ConfirmModal

View File

@ -83,16 +83,16 @@
class="img-responsive p-centered bg-checkered"
>
<div v-else class="text-center">
<i class="material-icons md-36">insert_drive_file</i>
<i class="mdi mdi-36px mdi-file" />
</div>
<div class="editor-buttons mt-2">
<button class="btn btn-link btn-sm" @click="downloadFile">
<span>{{ $t('word.download') }}</span>
<i class="material-icons ml-1">file_download</i>
<i class="mdi mdi-24px mdi-download ml-1" />
</button>
<button class="btn btn-link btn-sm" @click="prepareToDelete">
<span>{{ $t('word.delete') }}</span>
<i class="material-icons ml-1">delete_forever</i>
<i class="mdi mdi-24px mdi-delete-forever ml-1" />
</button>
</div>
</div>
@ -255,7 +255,7 @@ export default {
let length = 0;
const field = this.fields.filter(field => field.name === cKey)[0];
if (field)
length = field.precision;
length = field.datePrecision;
return length;
},
@ -346,7 +346,7 @@ export default {
const downloadLink = document.createElement('a');
downloadLink.href = `data:${this.contentInfo.mime};base64, ${bufferToBase64(this.editingContent)}`;
downloadLink.setAttribute('download', `${this.field}.${this.contentInfo.ext}`);
downloadLink.setAttribute('download', `${this.editingField}.${this.contentInfo.ext}`);
document.body.appendChild(downloadLink);
downloadLink.click();

View File

@ -9,7 +9,7 @@
@click="reloadTable"
>
<span>{{ $t('word.refresh') }}</span>
<i class="material-icons ml-1">refresh</i>
<i class="mdi mdi-24px mdi-refresh ml-1" />
</button>
<button
class="btn btn-link btn-sm"
@ -17,7 +17,7 @@
@click="showAddModal"
>
<span>{{ $t('word.add') }}</span>
<i class="material-icons ml-1">playlist_add</i>
<i class="mdi mdi-24px mdi-playlist-plus ml-1" />
</button>
</div>
<div class="workspace-query-info">
@ -64,7 +64,8 @@ export default {
isQuering: false,
results: {},
fields: [],
lastTable: null
lastTable: null,
isAddModal: false
};
},
computed: {
@ -138,7 +139,12 @@ export default {
reloadTable () {
this.getTableData();
},
showAddModal () {}
showAddModal () {
this.isAddModal = true;
},
hideAddModal () {
this.isAddModal = false;
}
}
};
</script>

View File

@ -2,7 +2,7 @@
import Vue from 'vue';
import 'material-design-icons/iconfont/material-icons.css';
import '@mdi/font/css/materialdesignicons.css';
import '@/scss/main.scss';
import App from '@/App.vue';

View File

@ -1,38 +1,9 @@
.material-icons {
// TODO: rewrite with rem
.mdi {
display: flex;
align-items: center;
justify-content: center;
/* Rules for sizing the icon. */
&.md-18 {
font-size: 18px;
}
&.md-24 {
font-size: 24px;
}
&.md-36 {
font-size: 36px;
}
&.md-48 {
font-size: 48px;
}
/* Rules for using icons as black on a light background. */
&.md-dark {
color: rgba(0, 0, 0, 0.54);
}
&.md-dark.md-inactive {
color: rgba(0, 0, 0, 0.26);
}
/* Rules for using icons as white on a dark background. */
&.md-light {
color: rgba(255, 255, 255, 1);
}
&.md-light.md-inactive {
color: rgba(255, 255, 255, 0.3);
&::before {
line-height: 1;
}
}

View File

@ -0,0 +1,18 @@
.column-key {
transform: rotate(90deg);
font-size: 0.7rem;
line-height: 1.5;
margin-right: 0.2rem;
&.key-pri {
color: goldenrod;
}
&.key-uni {
color: deepskyblue;
}
&.key-mul {
color: palegreen;
}
}

View File

@ -2,6 +2,7 @@
@import "variables";
@import "transitions";
@import "data-types";
@import "table-keys";
@import "fake-tables";
@import "mdi-additions";
@import "db-icons";
@ -133,6 +134,10 @@ body {
background: $bg-color-gray;
}
.form-input:not(:placeholder-shown):invalid:focus {
background: $bg-color-gray;
}
.form-select:not([multiple]):not([size]):focus {
border-color: $primary-color;
}
@ -156,7 +161,7 @@ body {
}
.btn.loading {
> .material-icons,
> .mdi,
> span {
visibility: hidden;
}