1
0
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:
lana-k
2021-02-02 23:39:24 +01:00
parent 82592ed69d
commit a787d9afb2
4 changed files with 15 additions and 15 deletions

View File

@@ -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;
} }

View File

@@ -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: [