btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Merge pull request #296 from liyasthomas/app-ui

Browse Source 
Moved "Generate code" section to modal
This commit is contained in:
Liyas Thomas
2019-11-13 04:50:10 +05:30
committed by GitHub
parent 51b370efa6 1dbb89df34
commit 7ae7bdd670
1 changed files with 103 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
pages/index.vue
View File

@@ -1,50 +1,5 @@
<template>
<div class="page">
<save-request-as
v-bind:show="showRequestModal"
v-on:hide-model="hideRequestModal"
v-bind:editing-request="editRequest"
></save-request-as>
<pw-modal v-if="showModal" @close="showModal = false">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">Import cURL</h3>
<div>
<button class="icon" @click="toggleModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<textarea
id="import-text"
autofocus
rows="8"
placeholder="Enter cURL"
></textarea>
</li>
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="handleImport">
<i class="material-icons">get_app</i>
<span>Import</span>
</button>
</li>
</ul>
</div>
</pw-modal>
<pw-section
v-if="showPreRequestScript"
class="orange"
@@ -80,6 +35,8 @@
</ul>
</pw-section>
<br />
<pw-section class="blue" label="Request" ref="request">
<ul>
<li>
@@ -268,8 +225,7 @@
:disabled="!isValidURL"
v-tooltip.bottom="{ content: isHidden ? 'Show Code' : 'Hide Code' }"
>
<i class="material-icons" v-if="isHidden">flash_on</i>
<i class="material-icons" v-else>flash_off</i>
<i class="material-icons">flash_on</i>
</button>
<button
:class="'icon' + (showPreRequestScript ? ' info-response' : '')"
@@ -325,44 +281,6 @@
</div>
</pw-section>
<pw-section class="yellow" label="Code" ref="requestCode" v-if="!isHidden">
<ul>
<li>
<label for="requestType">Request Type</label>
<select id="requestType" v-model="requestType">
<option>JavaScript XHR</option>
<option>Fetch</option>
<option>cURL</option>
</select>
</li>
</ul>
<ul>
<li>
<div class="flex-wrap">
<label for="generatedCode">Generated Code</label>
<div>
<button
class="icon"
@click="copyRequestCode"
id="copyRequestCode"
ref="copyRequestCode"
v-tooltip="'Copy code'"
>
<i class="material-icons">file_copy</i>
</button>
</div>
</div>
<textarea
id="generatedCode"
ref="generatedCode"
name="generatedCode"
rows="8"
v-model="requestCode"
></textarea>
</li>
</ul>
</pw-section>
<br />
<section id="options">
@@ -703,6 +621,106 @@
<br />
<history @useHistory="handleUseHistory" ref="historyComponent"></history>
<save-request-as
v-bind:show="showRequestModal"
v-on:hide-model="hideRequestModal"
v-bind:editing-request="editRequest"
></save-request-as>
<pw-modal v-if="showModal" @close="showModal = false">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">Import cURL</h3>
<div>
<button class="icon" @click="showModal = false">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<textarea
id="import-text"
autofocus
rows="8"
placeholder="Enter cURL"
></textarea>
</li>
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="handleImport">
<i class="material-icons">get_app</i>
<span>Import</span>
</button>
</li>
</ul>
</div>
</pw-modal>
<pw-modal v-if="!isHidden" @close="isHidden = true">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">Generate code</h3>
<div>
<button class="icon" @click="isHidden = true">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<label for="requestType">Request Type</label>
<select id="requestType" v-model="requestType">
<option>JavaScript XHR</option>
<option>Fetch</option>
<option>cURL</option>
</select>
</li>
</ul>
<ul>
<li>
<div class="flex-wrap">
<label for="generatedCode">Generated Code</label>
<div>
<button
class="icon"
@click="copyRequestCode"
id="copyRequestCode"
ref="copyRequestCode"
v-tooltip="'Copy code'"
>
<i class="material-icons">file_copy</i>
</button>
</div>
</div>
<textarea
id="generatedCode"
ref="generatedCode"
name="generatedCode"
rows="8"
v-model="requestCode"
></textarea>
</li>
</ul>
</div>
<div slot="footer"></div>
</pw-modal>
</div>
</template>
<script>
@@ -1794,9 +1812,6 @@ export default {
});
}
},
toggleModal() {
this.showModal = !this.showModal;
},
switchVisibility() {
this.passwordFieldType =
this.passwordFieldType === "password" ? "text" : "password";