1
0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 18:18:53 +08:00

fix svg button state

This commit is contained in:
lana-k
2024-01-06 12:03:06 +01:00
parent 42f040975d
commit 878689b3f7
4 changed files with 14 additions and 8 deletions

View File

@@ -1,6 +1,7 @@
<template> <template>
<div <button
:class="['icon-btn', { active }, { disabled }]" :class="['icon-btn', { active }]"
:disabled="disabled"
@click="onClick" @click="onClick"
@mouseenter="showTooltip($event, tooltipPosition)" @mouseenter="showTooltip($event, tooltipPosition)"
@mouseleave="hideTooltip" @mouseleave="hideTooltip"
@@ -12,7 +13,7 @@
<span v-if="tooltip" class="icon-tooltip" :style="tooltipStyle" ref="tooltip"> <span v-if="tooltip" class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
{{ tooltip }} {{ tooltip }}
</span> </span>
</div> </button>
</template> </template>
<script> <script>
@@ -38,11 +39,12 @@ export default {
box-sizing: border-box; box-sizing: border-box;
width: 26px; width: 26px;
height: 26px; height: 26px;
cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
background-color: transparent;
border: none;
} }
.icon-btn:hover { .icon-btn:hover {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
@@ -56,12 +58,12 @@ export default {
fill: var(--color-accent); fill: var(--color-accent);
} }
.disabled.icon-btn .icon >>> path, .icon-btn:disabled .icon >>> path,
.disabled.icon-btn .icon >>> circle { .icon-btn:disabled .icon >>> circle {
fill: var(--color-border); fill: var(--color-border);
} }
.disabled.icon-btn { .icon-btn:disabled {
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
} }

View File

@@ -77,6 +77,7 @@ export default {
}, },
{ deep: true } { deep: true }
) )
this.$emit('update:importToSvgEnabled', true)
}, },
mounted () { mounted () {
this.resizeObserver = new ResizeObserver(this.handleResize) this.resizeObserver = new ResizeObserver(this.handleResize)

View File

@@ -41,7 +41,6 @@
> >
<png-icon /> <png-icon />
</icon-button> </icon-button>
<icon-button <icon-button
:disabled="!importToSvgEnabled" :disabled="!importToSvgEnabled"
tooltip="Save as SVG" tooltip="Save as SVG"

View File

@@ -54,6 +54,10 @@ describe('DataView.vue', () => {
const pivot = wrapper.findComponent({ name: 'pivot' }).vm const pivot = wrapper.findComponent({ name: 'pivot' }).vm
sinon.spy(pivot, 'saveAsSvg') sinon.spy(pivot, 'saveAsSvg')
// Switch to Custom Chart renderer
pivot.pivotOptions.rendererName = 'Custom chart'
await pivot.$nextTick()
// Export to svg // Export to svg
await svgBtn.trigger('click') await svgBtn.trigger('click')
expect(pivot.saveAsSvg.calledOnce).to.equal(true) expect(pivot.saveAsSvg.calledOnce).to.equal(true)