feat(UI): query tab name based on content

This commit is contained in:
Fabio Di Stasio 2021-08-05 13:30:33 +02:00
parent 1573de5b1f
commit 065de3a0a2
2 changed files with 18 additions and 8 deletions

View File

@ -27,7 +27,7 @@
<a v-if="tab.type === 'query'" class="tab-link"> <a v-if="tab.type === 'query'" class="tab-link">
<i class="mdi mdi-18px mdi-code-tags mr-1" /> <i class="mdi mdi-18px mdi-code-tags mr-1" />
<span> <span>
Query #{{ tab.index }} <span>{{ tab.content || 'Query' | cutText }} #{{ tab.index }}</span>
<span <span
class="btn btn-clear" class="btn btn-clear"
:title="$t('word.close')" :title="$t('word.close')"
@ -44,7 +44,7 @@
> >
<i class="mdi mdi-18px mr-1" :class="tab.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" /> <i class="mdi mdi-18px mr-1" :class="tab.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
<span :title="`${$t('word.data').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`"> <span :title="`${$t('word.data').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
<span class=" text-italic">{{ tab.elementName }}</span> <span class=" text-italic">{{ tab.elementName | cutText }}</span>
<span <span
class="btn btn-clear" class="btn btn-clear"
:title="$t('word.close')" :title="$t('word.close')"
@ -57,7 +57,7 @@
<a v-else-if="tab.type === 'data'" class="tab-link"> <a v-else-if="tab.type === 'data'" class="tab-link">
<i class="mdi mdi-18px mr-1" :class="tab.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" /> <i class="mdi mdi-18px mr-1" :class="tab.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
<span :title="`${$t('word.data').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`"> <span :title="`${$t('word.data').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
{{ tab.elementName }} {{ tab.elementName | cutText }}
<span <span
class="btn btn-clear" class="btn btn-clear"
:title="$t('word.close')" :title="$t('word.close')"
@ -74,7 +74,7 @@
> >
<i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" /> <i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
<span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`"> <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
{{ tab.elementName }} {{ tab.elementName | cutText }}
<span <span
class="btn btn-clear" class="btn btn-clear"
:title="$t('word.close')" :title="$t('word.close')"
@ -91,7 +91,7 @@
> >
<i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" /> <i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
<span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`"> <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
{{ tab.elementName }} {{ tab.elementName | cutText }}
<span <span
class="btn btn-clear" class="btn btn-clear"
:title="$t('word.close')" :title="$t('word.close')"
@ -109,7 +109,7 @@
> >
<i class="mdi mdi-18px mdi-tune-vertical-variant mr-1" /> <i class="mdi mdi-18px mdi-tune-vertical-variant mr-1" />
<span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`"> <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
<span class=" text-italic">{{ tab.elementName }}</span> <span class=" text-italic">{{ tab.elementName | cutText }}</span>
<span <span
class="btn btn-clear" class="btn btn-clear"
:title="$t('word.close')" :title="$t('word.close')"
@ -126,7 +126,7 @@
> >
<i class="mdi mdi-18px mdi-tune-vertical-variant mr-1" /> <i class="mdi mdi-18px mdi-tune-vertical-variant mr-1" />
<span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`"> <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
{{ tab.elementName }} {{ tab.elementName | cutText }}
<span <span
class="btn btn-clear" class="btn btn-clear"
:title="$t('word.close')" :title="$t('word.close')"
@ -312,6 +312,15 @@ export default {
ModalProcessesList, ModalProcessesList,
ModalDiscardChanges ModalDiscardChanges
}, },
filters: {
cutText (string) {
const limit = 20;
const escapedString = string.replace(/\s{2,}/g, ' ');
if (escapedString.length > limit)
return `${escapedString.substr(0, limit)}...`;
return escapedString;
}
},
props: { props: {
connection: Object connection: Object
}, },

View File

@ -473,7 +473,8 @@ export default {
line-height: 1.2; line-height: 1.2;
position: relative; position: relative;
&:hover { &:hover,
&.selected {
border-radius: $border-radius; border-radius: $border-radius;
} }
} }