fabio286
/
antares
mirror of https://github.com/Fabio286/antares.git
1
1
Fork 0
Code Issues Releases Wiki Activity

perf(UI): max height for query text area increased

This commit is contained in:
Fabio Di Stasio 2022-05-19 09:30:43 +02:00
parent c95c593c74
commit 5d5f1da97b
1 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/renderer/components/WorkspaceTabQuery.vue
View File

@ -21,7 +21,7 @@
:height="editorHeight" :height="editorHeight"
/> />
<div ref="resizer" class="query-area-resizer" /> <div ref="resizer" class="query-area-resizer" />
<div class="workspace-query-runner-footer"> <div ref="queryAreaFooter" class="workspace-query-runner-footer">
<div class="workspace-query-buttons"> <div class="workspace-query-buttons">
<div @mouseenter="setCancelButtonVisibility(true)" @mouseleave="setCancelButtonVisibility(false)"> <div @mouseenter="setCancelButtonVisibility(true)" @mouseleave="setCancelButtonVisibility(false)">
<button <button
@ -320,6 +320,7 @@ export default {
this.selectedSchema = null; this.selectedSchema = null;
window.addEventListener('keydown', this.onKey); window.addEventListener('keydown', this.onKey);
window.addEventListener('resize', this.onWindowResize);
}, },
mounted () { mounted () {
const resizer = this.$refs.resizer; const resizer = this.$refs.resizer;
@ -335,6 +336,7 @@ export default {
this.runQuery(this.query); this.runQuery(this.query);
}, },
beforeUnmount () { beforeUnmount () {
window.removeEventListener('resize', this.onWindowResize);
window.removeEventListener('keydown', this.onKey); window.removeEventListener('keydown', this.onKey);
const params = { const params = {
uid: this.connection.uid, uid: this.connection.uid,
@ -419,11 +421,24 @@ export default {
}, },
resize (e) { resize (e) {
const el = this.$refs.queryEditor.$el; const el = this.$refs.queryEditor.$el;
let editorHeight = e.pageY - el.getBoundingClientRect().top; const queryFooterHeight = this.$refs.queryAreaFooter.clientHeight;
if (editorHeight > 400) editorHeight = 400; const bottom = e.pageY || this.$refs.resizer.getBoundingClientRect().bottom;
const maxHeight = window.innerHeight - 100 - queryFooterHeight;
let editorHeight = bottom - el.getBoundingClientRect().top;
if (editorHeight > maxHeight) editorHeight = maxHeight;
if (editorHeight < 50) editorHeight = 50; if (editorHeight < 50) editorHeight = 50;
this.editorHeight = editorHeight; this.editorHeight = editorHeight;
}, },
onWindowResize (e) {
const el = this.$refs.queryEditor.$el;
const queryFooterHeight = this.$refs.queryAreaFooter.clientHeight;
const bottom = e.pageY || this.$refs.resizer.getBoundingClientRect().bottom;
const maxHeight = window.innerHeight - 100 - queryFooterHeight;
const editorHeight = bottom - el.getBoundingClientRect().top;
if (editorHeight > maxHeight)
this.editorHeight = maxHeight;
},
stopResize () { stopResize () {
window.removeEventListener('mousemove', this.resize); window.removeEventListener('mousemove', this.resize);
if (this.$refs.queryTable && this.results.length) if (this.$refs.queryTable && this.results.length)
@ -520,9 +535,8 @@ export default {
position: relative; position: relative;
.query-area-resizer { .query-area-resizer {
position: absolute;
height: 4px; height: 4px;
bottom: 40px; margin-top: -2px;
width: 100%; width: 100%;
cursor: ns-resize; cursor: ns-resize;
z-index: 99; z-index: 99;