style: UI improvements

This commit is contained in:
Fabio 2020-08-12 18:11:48 +02:00
parent 5473858323
commit 128a6cd9e8
12 changed files with 40 additions and 22 deletions

View File

@ -2,7 +2,7 @@
<div class="modal active" :class="modalSizeClass">
<a class="modal-overlay" @click="hideModal" />
<div class="modal-container">
<div v-if="hasHeader" class="modal-header">
<div v-if="hasHeader" class="modal-header pl-2">
<div class="modal-title h6">
<slot name="header" />
</div>

View File

@ -31,7 +31,7 @@ export default {
},
methods: {
close () {
this.$emit('closeContext');
this.$emit('close-context');
}
}
};
@ -57,7 +57,7 @@ export default {
.context-container {
min-width: 100px;
max-width: 150px;
z-index: 1;
z-index: 10;
box-shadow: 0 0 1px 0 #000;
padding: 0;
background: #1d1d1d;

View File

@ -2,9 +2,11 @@
<div class="modal active modal-sm">
<a class="modal-overlay" />
<div class="modal-container p-0">
<div class="modal-header">
<div class="modal-header pl-2">
<div class="modal-title h6">
{{ $t('word.credentials') }}
<div class="d-flex">
<i class="mdi mdi-24px mdi-key-variant mr-1" /> {{ $t('word.credentials') }}
</div>
</div>
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
</div>

View File

@ -2,9 +2,11 @@
<div class="modal active">
<a class="modal-overlay c-hand" @click="closeModal" />
<div class="modal-container">
<div class="modal-header">
<div class="modal-header pl-2">
<div class="modal-title h6">
{{ $t('message.editConnection') }}
<div class="d-flex">
<i class="mdi mdi-24px mdi-server mr-1" /> {{ $t('message.editConnection') }}
</div>
</div>
<a class="btn btn-clear c-hand" @click="closeModal" />
</div>

View File

@ -2,9 +2,11 @@
<div class="modal active">
<a class="modal-overlay c-hand" @click="closeModal" />
<div class="modal-container">
<div class="modal-header">
<div class="modal-header pl-2">
<div class="modal-title h6">
{{ $t('message.createNewConnection') }}
<div class="d-flex">
<i class="mdi mdi-24px mdi-server-plus mr-1" /> {{ $t('message.createNewConnection') }}
</div>
</div>
<a class="btn btn-clear c-hand" @click="closeModal" />
</div>

View File

@ -2,9 +2,12 @@
<div id="settings" class="modal active">
<a class="modal-overlay c-hand" @click="closeModal" />
<div class="modal-container">
<div class="modal-header">
<div class="modal-title h5">
{{ $t('word.settings') }}
<div class="modal-header pl-2">
<div class="modal-title h6">
<div class="d-flex">
<i class="mdi mdi-24px mdi-cog mr-1" />
{{ $t('word.settings') }}
</div>
</div>
<a class="btn btn-clear c-hand" @click="closeModal" />
</div>

View File

@ -1,7 +1,7 @@
<template>
<BaseContextMenu
:context-event="contextEvent"
@closeContext="$emit('closeContext')"
@close-context="$emit('close-context')"
>
<div class="context-element" @click="showEditModal(contextConnection)">
<i class="mdi mdi-18px mdi-pencil text-light pr-1" /> {{ $t('word.edit') }}
@ -16,7 +16,9 @@
@hide="hideConfirmModal"
>
<template :slot="'header'">
{{ $t('message.deleteConnection') }}
<div class="d-flex">
<i class="mdi mdi-24px mdi-server-remove mr-1" /> {{ $t('message.deleteConnection') }}
</div>
</template>
<div :slot="'body'">
<div class="mb-2">

View File

@ -77,7 +77,7 @@ export default {
<style lang="scss">
#notifications-board {
position: absolute;
z-index: 9;
z-index: 999;
right: 1rem;
bottom: 1rem;
}

View File

@ -5,7 +5,7 @@
v-if="isContext"
:context-event="contextEvent"
:context-connection="contextConnection"
@closeContext="isContext = false"
@close-context="isContext = false"
/>
<ul class="settingbar-elements">
<draggable v-model="connections">

View File

@ -6,7 +6,7 @@
@click="changeBreadcrumbs({schema: database.name, table:null})"
>
<i class="icon mdi mdi-18px mdi-chevron-right" />
<i class="mdi mdi-18px mdi-database mr-1" />
<i class="database-icon 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="mdi mdi-18px mdi-table mr-1" />
<i class="table-icon mdi mdi-18px mdi-table mr-1" />
<span>{{ table.TABLE_NAME }}</span>
</a>
</li>
@ -77,6 +77,11 @@ export default {
background: rgba($color: #fff, $alpha: 0.05);
border-radius: 2px;
}
.database-icon,
.table-icon {
opacity: 0.7;
}
}
.menu-item {

View File

@ -9,7 +9,7 @@
:context-event="contextEvent"
:selected-rows="selectedRows"
@deleteSelected="deleteSelected"
@closeContext="isContext = false"
@close-context="isContext = false"
/>
<div ref="table" class="table table-hover">
<div class="thead">

View File

@ -1,7 +1,7 @@
<template>
<BaseContextMenu
:context-event="contextEvent"
@closeContext="closeContext"
@close-context="closeContext"
>
<div class="context-element" @click="showConfirmModal">
<i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $tc('message.deleteRows', selectedRows.length) }}
@ -13,7 +13,9 @@
@hide="hideConfirmModal"
>
<template :slot="'header'">
{{ $tc('message.deleteRows', selectedRows.length) }}
<div class="d-flex">
<i class="mdi mdi-24px mdi-delete mr-1" /> {{ $tc('message.deleteRows', selectedRows.length) }}
</div>
</template>
<div :slot="'body'">
<div class="mb-2">
@ -58,7 +60,7 @@ export default {
this.isConfirmModal = false;
},
closeContext () {
this.$emit('closeContext');
this.$emit('close-context');
},
deleteRows () {
this.$emit('deleteSelected');