Expand editor view
<template>
- <div class="container" ref="container">
- <div class="file-desc-container"> <!-- card card-header -->
+ <div class="container d-flex flex-column overflow-y-auto">
+ <div class="file-desc-container flex-grow-0"> <!-- card card-header -->
<div class="form-horizontal">
<div class="mb-2 flex-box control-group">
<div>
</div>
</div>
</div>
+ <div class="flex-grow-1 overflow-y-auto">
<code-mirror ref="editor"
+ class="h-100"
:value="this.file.content"
:options="cmOptions"></code-mirror>
- <div class="float-right tip" data-toggle="popover" title="Tip" data-html="true"
+ <div class="float-right tip" style="margin-left: auto; order:2" data-toggle="popover" title="Tip" data-html="true"
data-placement="left" data-trigger="hover" :data-content="
'Ctrl-F / Cmd-F :' + i18n('script.editor.tip.startSearching') + '<br/>' +
'Ctrl-G / Cmd-G : ' + i18n('script.editor.tip.findNext') + '<br/>' +
'ESC : ' + i18n('script.editor.tip.back') ">
<code class="tip">Tip</code>
</div>
+ </div>
+
<div v-show="!showValidationResult" class="script-samples-link" ref="sampleLink">
<a target="_blank" href="https://github.com/naver/ngrinder/tree/master/script-sample">Script Samples</a>
</div>
v-text="validationResult">
</pre>
<div class="float-right expand-btn-container">
- <a class="pointer-cursor" @click="expand">
+ <a class="pointer-cursor" @click="validationResultExpanded = !validationResultExpanded">
<code v-text="validationResultExpanded ? '-' : '+'"></code>
</a>
</div>
</template>
<script>
- import { Component, Prop, Watch } from 'vue-property-decorator';
+ import { Component, Prop } from 'vue-property-decorator';
import { Mixins } from 'vue-mixin-decorator';
import Base from '../Base.vue';
targetHosts = [];
targetHostIp = '';
- editorSize = 0;
-
validated = false;
validating = false;
validationResultExpanded = false;
this.validated = this.file.validated;
this.cmOptions = { mode: this.codemirrorKey };
- this.editorSize = 500;
this.$nextTick(() => this.$refs.editor.codemirror.clearHistory());
}
this.$refs.targetHostInfoModal.show();
}
- @Watch('editorSize')
- editorSizeChanged(newValue) {
- if (!newValue) {
- return;
- }
- this.$refs.editor.setSize(null, newValue);
- }
-
- expand() {
- this.validationResultExpanded = !this.validationResultExpanded;
- if (this.validationResultExpanded) {
- this.editorSize -= 200;
- } else {
- this.editorSize += 200;
- }
- }
-
get basePath() {
return this.remainedPath.substring(0, this.remainedPath.lastIndexOf('/'));
}
