mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-06 10:08:52 +08:00
fix svg button state
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
Reference in New Issue
Block a user