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

chore(refactor): modern UI

Browse Source
This commit is contained in:
Liyas Thomas
2020-12-11 22:24:34 +05:30
parent 773423069b
commit 5a7bcf32ea
55 changed files with 936 additions and 860 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/collections/add-collection.vue
View File

@@ -10,7 +10,7 @@
</div>
</div>
</div>
<div slot="body">
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label>
<input
type="text"

2
components/collections/add-folder.vue
View File

@@ -10,7 +10,7 @@
</div>
</div>
</div>
<div slot="body">
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label>
<input
type="text"

14
components/collections/collection.vue
View File

@@ -55,7 +55,6 @@
</v-popover>
</div>
</div>
<div v-show="showChildren || isFiltered">
<ul class="flex-col">
<li
@@ -75,9 +74,6 @@
@edit-request="$emit('edit-request', $event)"
/>
</li>
<li v-if="collection.folders.length === 0 && collection.requests.length === 0">
<p class="info">{{ $t("collection_empty") }}</p>
</li>
</ul>
<ul class="flex-col">
<li
@@ -96,6 +92,16 @@
/>
</li>
</ul>
<ul>
<li
v-if="collection.folders.length === 0 && collection.requests.length === 0"
class="flex ml-8 border-l border-brdColor"
>
<p class="info">
<i class="material-icons">not_interested</i> {{ $t("collection_empty") }}
</p>
</li>
</ul>
</div>
</div>
</template>

2
components/collections/edit-collection.vue
View File

@@ -10,7 +10,7 @@
</div>
</div>
</div>
<div slot="body">
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label>
<input
type="text"

2
components/collections/edit-folder.vue
View File

@@ -10,7 +10,7 @@
</div>
</div>
</div>
<div slot="body">
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label>
<input
type="text"

2
components/collections/edit-request.vue
View File

@@ -10,7 +10,7 @@
</div>
</div>
</div>
<div slot="body">
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label>
<input
type="text"

12
components/collections/folder.vue
View File

@@ -51,7 +51,6 @@
</template>
</v-popover>
</div>
<div v-show="showChildren || isFiltered">
<ul class="flex-col">
<li
@@ -71,7 +70,11 @@
</li>
</ul>
<ul v-if="folder.folders && folder.folders.length" class="flex-col">
<li v-for="(subFolder, subFolderIndex) in folder.folders" :key="subFolder.name">
<li
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="subFolder.name"
class="ml-8 border-l border-brdColor"
>
<folder
:folder="subFolder"
:folder-index="subFolderIndex"
@@ -84,6 +87,11 @@
/>
</li>
</ul>
<ul v-if="folder.folders.length === 0 && folder.requests.length === 0">
<li class="flex ml-8 border-l border-brdColor">
<p class="info"><i class="material-icons">not_interested</i> {{ $t("folder_empty") }}</p>
</li>
</ul>
</div>
</div>
</template>

4
components/collections/import-export-collections.vue
View File

@@ -44,8 +44,8 @@
</div>
</div>
</div>
<div slot="body">
<div class="flex flex-col items-start">
<div slot="body" class="flex flex-col">
<div class="flex flex-col items-start p-2">
<span
v-tooltip="{
content: !fb.currentUser ? $t('login_first') : $t('replace_current'),

50
components/collections/index.vue
View File

@@ -1,15 +1,13 @@
<!--
TODO:
- probably refactor and pass event arguments to modals directly without unpacking
-->
<template>
<pw-section class="yellow" :label="$t('collections')" ref="collections">
<pw-section class="yellow" :label="$t('collections')" ref="collections" no-legend>
<div class="show-on-large-screen">
<input aria-label="Search" type="search" :placeholder="$t('search')" v-model="filterText" />
<!-- <button class="icon">
<i class="material-icons">search</i>
</button> -->
<input
aria-label="Search"
type="search"
:placeholder="$t('search')"
v-model="filterText"
class="rounded-t-lg"
/>
</div>
<add-collection :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
<edit-collection
@@ -45,28 +43,14 @@ TODO:
:show="showModalImportExport"
@hide-modal="displayModalImportExport(false)"
/>
<div class="row-wrapper">
<div>
<button class="icon" @click="displayModalAdd(true)">
<i class="material-icons">add</i>
<span>{{ $t("new") }}</span>
</button>
</div>
<div>
<button class="icon" @click="displayModalImportExport(true)">
{{ $t("import_export") }}
</button>
<!-- <a
href="https://github.com/hoppscotch/hoppscotch/wiki/Collections"
target="_blank"
rel="noopener"
>
<button class="icon" v-tooltip="'Wiki'">
<i class="material-icons">help_outline</i>
</button>
</a> -->
</div>
<div class="border-b row-wrapper border-brdColor">
<button class="icon" @click="displayModalAdd(true)">
<i class="material-icons">add</i>
<span>{{ $t("new") }}</span>
</button>
<button class="icon" @click="displayModalImportExport(true)">
{{ $t("import_export") }}
</button>
</div>
<p v-if="collections.length === 0" class="info">
<i class="material-icons">help_outline</i> {{ $t("create_new_collection") }}
@@ -90,7 +74,7 @@ TODO:
</ul>
</div>
<p v-if="filterText && filteredCollections.length === 0" class="info">
{{ $t("nothing_found") }} "{{ filterText }}"
<i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{ filterText }}"
</p>
</pw-section>
</template>

2
components/collections/save-request-as.vue
View File

@@ -10,7 +10,7 @@
</div>
</div>
</div>
<div slot="body">
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("token_req_name") }}</label>
<input type="text" id="selectLabel" v-model="requestData.name" @keyup.enter="saveRequestAs" />
<ul>