- Only the table name would be clickable and not the complete box - No action on trying to click current table - Text like column name, db name will be clickable
@@ -30,6 +30,13 @@
}
+
+.table-erd {
+ .erd-container .entity-group:first-child .entity-container:first-child .table-entity .table-name span {
+ cursor: auto;
+ }
+}
.erd-animated {
.erd-container {
animation: erd-slide-in 0.25s;
@@ -824,11 +824,13 @@ ${ components.menubar(is_embeddable) }
vueProps: $root.propsMappers.tableERD(database.table().catalogEntry),
vueEvents: {
'entity-clicked': function (event){
- const table = event.detail[0];
- $root.setDbAndTableByName(table.database, table.name, () => $root.currentTab('erd-animated'));
+ const entity = event.detail[0];
+ if(entity.type === 'TABLE') {
+ $root.setDbAndTableByName(entity.database, entity.name, () => $root.currentTab('erd-animated'));
},
- class: $root.currentTab()
+ class: $root.currentTab() + ' table-erd'
"></er-diagram>
<!-- /ko -->
@@ -30,8 +30,6 @@ $bg-color: #FFF;
border-radius: 5px;
padding: 5px;
- cursor: pointer;
-
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(0, 0, 0, 0.15);
background-color: #EFEFEF;
@@ -41,12 +39,18 @@ $bg-color: #FFF;
font-size: 0.8em;
text-align: center;
+ margin-bottom: -5px;
@extend .ellipsis-on-overflow;
.table-name {
color: #0a78a3;
- margin-top: -5px;
+ span {
+ cursor: pointer;
@@ -17,12 +17,14 @@
-->
<template>
- <div class="table-entity" @click="$emit('click')">
+ <div class="table-entity">
<div :title="entity.database" class="db-name">
{{ entity.database }}
</div>
<div :title="entity.name" class="table-name">
- {{ entity.name }}
+ <span @click="$emit('click')">
+ {{ entity.name }}
+ </span>
<div class="columns-container">
<div
@@ -40,8 +40,6 @@ expand-icon{
position: relative;
- user-select: none;
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 20px;
font-size: 14px;