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

🎨 UI tweaks, added empty state prompts in Collections

Browse Source
This commit is contained in:
Liyas Thomas
2019-10-23 12:34:28 +05:30
parent 635c82c316
commit 94364f0dad
5 changed files with 43 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
components/collections/collection.vue
View File

@@ -41,6 +41,9 @@
v-on:edit-folder="editFolder" v-on:edit-folder="editFolder"
/> />
</li> </li>
<li v-if="collection.folders.length === 0">
<label>Collection is empty</label>
</li>
</ul> </ul>
<ul> <ul>

3
components/collections/folder.vue
View File

@@ -29,6 +29,9 @@
:request-index="index" :request-index="index"
></request> ></request>
</li> </li>
<li v-if="folder.requests.length === 0">
<label>Folder is empty</label>
</li>
</ul> </ul>
</div> </div>
</div> </div>

6
components/collections/index.vue
View File

@@ -12,12 +12,13 @@
<exportCollection :show="showExportModal" v-on:hide-model='toggleExport'></exportCollection> <exportCollection :show="showExportModal" v-on:hide-model='toggleExport'></exportCollection>
<div class='flex-wrap'> <div class='flex-wrap'>
<h3 class="title">Collections</h3>
<div> <div>
<button class="icon" @click="toggleModal"> <button class="icon" @click="toggleModal">
<i class="material-icons">add</i> <i class="material-icons">add</i>
<span>New</span> <span>New</span>
</button> </button>
</div>
<div>
<button class="icon" @click="toggleExport"> <button class="icon" @click="toggleExport">
<i class="material-icons">import_export</i> <i class="material-icons">import_export</i>
<span>Export</span> <span>Export</span>
@@ -33,6 +34,9 @@
v-on:edit-collection="editCollection" v-on:edit-collection="editCollection"
></collection> ></collection>
</li> </li>
<li v-if="collections.length === 0">
<label>Collections are empty</label>
</li>
</ul> </ul>
</div> </div>
</template> </template>

2
components/history.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<pw-section class="gray" icon="history" label="History"> <pw-section class="green" icon="history" label="History">
<ul> <ul>
<li id="filter-history"> <li id="filter-history">
<input aria-label="Search" type="text" placeholder="search history" :readonly="history.length === 0" v-model="filterText"> <input aria-label="Search" type="text" placeholder="search history" :readonly="history.length === 0" v-model="filterText">

74
pages/index.vue
View File

@@ -61,26 +61,8 @@
<input @keyup.enter="isValidURL ? sendRequest() : null" id="path" name="path" v-model="path" @input="pathInputHandler"> <input @keyup.enter="isValidURL ? sendRequest() : null" id="path" name="path" v-model="path" @input="pathInputHandler">
</li> </li>
<li> <li>
<label class="hide-on-small-screen" for="copyRequest">&nbsp;</label> <label for="label">Label</label>
<button class="icon" @click="copyRequest" id="copyRequest" ref="copyRequest" :disabled="!isValidURL"> <input id="label" name="label" type="text" v-model="label" placeholder="(optional)">
<i class="material-icons">share</i>
<span>Permalink</span>
</button>
</li>
<li>
<label class="hide-on-small-screen" for="code">&nbsp;</label>
<button class="icon" id="code" v-on:click="isHidden = !isHidden" :disabled="!isValidURL">
<i class="material-icons" v-if="isHidden">visibility</i>
<i class="material-icons" v-if="!isHidden">visibility_off</i>
<span>{{ isHidden ? 'Show Code' : 'Hide Code' }}</span>
</button>
</li>
<li>
<label class="hide-on-small-screen" for="saveRequest">&nbsp;</label>
<button class="icon" @click="saveRequest" id="saveRequest" ref="saveRequest" :disabled="!isValidURL">
<i class="material-icons">save</i>
<span>Save</span>
</button>
</li> </li>
<li> <li>
<label class="hide-on-small-screen" for="send">&nbsp;</label> <label class="hide-on-small-screen" for="send">&nbsp;</label>
@@ -146,24 +128,30 @@
</ul> </ul>
</div> </div>
</div> </div>
<ul>
<li>
<input id="label" name="label" type="text" v-model="label" placeholder="Label request">
</li>
</ul>
<div class="flex-wrap"> <div class="flex-wrap">
<button class="icon" id="show-modal" @click="showModal = true"> <div style="text-align: center;">
<i class="material-icons">import_export</i> <button class="icon" id="show-modal" @click="showModal = true" v-tooltip.bottom='"Import cURL"'>
<span>Import cURL</span> <i class="material-icons">import_export</i>
</button> </button>
<button class="icon" id="goto-history" @click="gotoHistory()"> <button class="icon" id="code" v-on:click="isHidden = !isHidden" :disabled="!isValidURL" v-tooltip.bottom='{ content: isHidden ? "Show Code" : "Hide Code"}'>
<i class="material-icons">history</i> <i class="material-icons" v-if="isHidden">visibility</i>
<span>History</span> <i class="material-icons" v-if="!isHidden">visibility_off</i>
</button> </button>
<button class="icon" @click="clearContent"> </div>
<i class="material-icons">clear_all</i> <div style="text-align: center;">
<span>Clear all</span> <button class="icon" @click="copyRequest" id="copyRequest" ref="copyRequest" :disabled="!isValidURL" v-tooltip.bottom='"Sharable request URL"'>
</button> <i class="material-icons">share</i>
</button>
<button class="icon" @click="saveRequest" id="saveRequest" ref="saveRequest" :disabled="!isValidURL" v-tooltip.bottom='"Save to Collections"'>
<i class="material-icons">save</i>
</button>
<button class="icon" id="goto-history" @click="gotoHistory()" v-tooltip.bottom='"History / Collections"'>
<i class="material-icons">watch_later</i>
</button>
<button class="icon" @click="clearContent" v-tooltip.bottom='"Clear all"'>
<i class="material-icons">clear_all</i>
</button>
</div>
</div> </div>
</pw-section> </pw-section>
<pw-section class="yellow" icon="code" label="Code" ref="requestCode" v-if="!isHidden"> <pw-section class="yellow" icon="code" label="Code" ref="requestCode" v-if="!isHidden">
@@ -364,7 +352,7 @@
</div> </div>
</section> </section>
<history @useHistory="handleUseHistory" ref="historyComponent"></history> <history @useHistory="handleUseHistory" ref="historyComponent"></history>
<pw-section class="blue" icon="folder_special" label="Collections" ref="Collections"> <pw-section class="yellow" icon="folder_special" label="Collections" ref="Collections">
<collections></collections> <collections></collections>
</pw-section> </pw-section>
</div> </div>
@@ -1006,17 +994,17 @@
}).then(() => {}) }).then(() => {})
.catch(console.error); .catch(console.error);
} else { } else {
this.$refs.copyRequest.innerHTML = this.copiedButton + '<span>Copied</span>';
this.$toast.success('Copied to clipboard', {
icon: 'done'
});
var dummy = document.createElement('input'); var dummy = document.createElement('input');
document.body.appendChild(dummy); document.body.appendChild(dummy);
dummy.value = window.location.href; dummy.value = window.location.href;
dummy.select(); dummy.select();
document.execCommand('copy'); document.execCommand('copy');
document.body.removeChild(dummy); document.body.removeChild(dummy);
setTimeout(() => this.$refs.copyRequest.innerHTML = this.copyButton + '<span>Permalink</span>', 1000) this.$refs.copyRequest.innerHTML = this.copiedButton;
this.$toast.success('Copied to clipboard', {
icon: 'done'
});
setTimeout(() => this.$refs.copyRequest.innerHTML = '<i class="material-icons">share</i>', 1000)
} }
}, },
copyRequestCode() { copyRequestCode() {