mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-07 02:28:54 +08:00
minor changes
This commit is contained in:
@@ -1,14 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="tabs-container">
|
<div id="tabs">
|
||||||
<div id="tabs__header" v-if="tabs.length > 0">
|
<div id="tabs-header" v-if="tabs.length > 0">
|
||||||
<div
|
<div
|
||||||
v-for="(tab, index) in tabs"
|
v-for="(tab, index) in tabs"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="selectTab(tab.id)"
|
@click="selectTab(tab.id)"
|
||||||
:class="[{'tab__selected': (tab.id === selectedIndex)}, 'tab']"
|
:class="[{'tab-selected': (tab.id === selectedIndex)}, 'tab']"
|
||||||
>
|
>
|
||||||
<div class="tab-name">
|
<div class="tab-name">
|
||||||
<span v-show="tab.isUnsaved">*</span>
|
<span v-show="tab.isUnsaved" class="star">*</span>
|
||||||
<span v-if="tab.name">{{ tab.name }}</span>
|
<span v-if="tab.name">{{ tab.name }}</span>
|
||||||
<span v-else class="tab-untitled">{{ tab.tempName }}</span>
|
<span v-else class="tab-untitled">{{ tab.tempName }}</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -27,7 +27,7 @@
|
|||||||
:is-predefined="tab.isPredefined"
|
:is-predefined="tab.isPredefined"
|
||||||
:tab-index="index"
|
:tab-index="index"
|
||||||
/>
|
/>
|
||||||
<div v-if="tabs.length === 0" id="start-guide">
|
<div v-show="tabs.length === 0" id="start-guide">
|
||||||
<span class="link" @click="$root.$emit('createNewQuery')">Create</span>
|
<span class="link" @click="$root.$emit('createNewQuery')">Create</span>
|
||||||
a new query from scratch or open the one from
|
a new query from scratch or open the one from
|
||||||
<router-link class="link" to="/my-queries">My queries</router-link>
|
<router-link class="link" to="/my-queries">My queries</router-link>
|
||||||
@@ -128,18 +128,18 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#tabs-container {
|
#tabs {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: var(--color-bg-light);
|
background-color: var(--color-bg-light);
|
||||||
}
|
}
|
||||||
#tabs__header {
|
#tabs-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
#tabs__header .tab {
|
#tabs-header .tab {
|
||||||
height: 36px;
|
height: 36px;
|
||||||
background-color: var(--color-bg-light);
|
background-color: var(--color-bg-light);
|
||||||
border-right: 1px solid var(--color-border-light);
|
border-right: 1px solid var(--color-border-light);
|
||||||
@@ -155,24 +155,24 @@ export default {
|
|||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
#tabs__header .tab-name {
|
#tabs-header .tab-name {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tabs__header div:hover {
|
#tabs-header div:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tabs__header .tab__selected {
|
#tabs-header .tab-selected {
|
||||||
color: var(--color-text-active);
|
color: var(--color-text-active);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
background-color: var(--color-white);
|
background-color: var(--color-white);
|
||||||
}
|
}
|
||||||
#tabs__header .tab__selected:hover {
|
#tabs-header .tab-selected:hover {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
import { expect } from 'chai'
|
import { expect } from 'chai'
|
||||||
import { shallowMount } from '@vue/test-utils'
|
import { shallowMount } from '@vue/test-utils'
|
||||||
import tableDescription from '@/components/TableDescription.vue'
|
import TableDescription from '@/components/TableDescription.vue'
|
||||||
|
|
||||||
describe('TableDescription.vue', () => {
|
describe('TableDescription.vue', () => {
|
||||||
it('Initially the columns are hidden and table name is rendered', () => {
|
it('Initially the columns are hidden and table name is rendered', () => {
|
||||||
const wrapper = shallowMount(tableDescription, {
|
const wrapper = shallowMount(TableDescription, {
|
||||||
propsData: {
|
propsData: {
|
||||||
name: 'Test table',
|
name: 'Test table',
|
||||||
columns: [
|
columns: [
|
||||||
@@ -18,7 +18,7 @@ describe('TableDescription.vue', () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
it('Columns are visible and correct when click on table name', async () => {
|
it('Columns are visible and correct when click on table name', async () => {
|
||||||
const wrapper = shallowMount(tableDescription, {
|
const wrapper = shallowMount(TableDescription, {
|
||||||
propsData: {
|
propsData: {
|
||||||
name: 'Test table',
|
name: 'Test table',
|
||||||
columns: [
|
columns: [
|
||||||
Reference in New Issue
Block a user