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

refactor: request section

Browse Source
This commit is contained in:
liyasthomas
2021-07-10 18:45:39 +05:30
parent c7062ad613
commit d94c8aec51
17 changed files with 2461 additions and 2307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
assets/scss/styles.scss
View File

@@ -54,7 +54,7 @@ html {
body {
@apply bg-primary;
@apply text-secondary;
@apply text-sm;
@apply !text-sm;
@apply font-medium;
@apply select-none;
@apply overflow-x-hidden;
@@ -168,14 +168,15 @@ hr {
@apply w-full;
@apply px-4;
@apply py-2;
@apply bg-primaryLight;
@apply bg-primary;
@apply truncate;
@apply rounded-lg;
@apply font-semibold;
@apply border-2;
@apply border-divider;
@apply transition;
@apply focus:outline-none;
@apply focus-visible:ring;
@apply focus-visible:ring-inset;
@apply focus-visible:ring-accent;
@apply focus:border-accent;
}
.input[type="file"],

1
components/app/Sidenav.vue
View File

@@ -20,7 +20,6 @@ export default {
return {
primaryNavigation: [
{ target: "index", icon: "home", title: "Home" },
{ target: "api", icon: "apps", title: "APIs" },
{ target: "realtime", icon: "language", title: "Realtime" },
{ target: "graphql", icon: "code", title: "GraphQL" },
{ target: "doc", icon: "book", title: "Docs" },

1
components/collections/ChooseType.vue
View File

@@ -25,6 +25,7 @@
py-3
focus:outline-none
border-b border-dividerLight
font-medium
bg-primaryLight
"
@change="updateSelectedTeam(myTeams[$event.target.value])"

1
components/collections/graphql/Request.vue
View File

@@ -43,6 +43,7 @@
<span class="truncate"> {{ request.name }} </span>
</span>
<ButtonSecondary
v-if="!savingMode"
v-tippy="{ theme: 'tooltip' }"
icon="replay"
:title="$t('restore')"

12
components/collections/graphql/index.vue
View File

@@ -1,6 +1,13 @@
<template>
<AppSection label="collections">
<div class="flex flex-col sticky top-10 z-10 bg-primary">
<AppSection
label="collections"
class=""
:class="{ 'rounded-lg border-2 border-divider': savingMode }"
>
<div
class="flex flex-col sticky top-10 z-10"
:class="{ 'bg-primary': !savingMode }"
>
<input
v-if="showCollActions"
v-model="filterText"
@@ -12,6 +19,7 @@
text-xs
border-b border-dividerLight
flex flex-1
font-medium
bg-primaryLight
focus:outline-none
"

11
components/collections/index.vue
View File

@@ -1,6 +1,12 @@
<template>
<AppSection label="collections">
<div class="flex flex-col sticky top-10 z-10 bg-primary">
<AppSection
label="collections"
:class="{ 'rounded-lg border-2 border-divider': saveRequest }"
>
<div
class="flex flex-col sticky top-10 z-10"
:class="{ 'bg-primary': !saveRequest }"
>
<input
v-if="!saveRequest"
v-model="filterText"
@@ -12,6 +18,7 @@
text-xs
border-b border-dividerLight
flex flex-1
font-medium
bg-primaryLight
focus:outline-none
"

1
components/collections/my/Request.vue
View File

@@ -51,6 +51,7 @@
<span class="truncate"> {{ request.name }} </span>
</span>
<ButtonSecondary
v-if="!saveRequest"
v-tippy="{ theme: 'tooltip' }"
icon="replay"
:title="$t('restore')"

1
components/collections/teams/Request.vue
View File

@@ -44,6 +44,7 @@
<span class="truncate"> {{ request.name }} </span>
</span>
<ButtonSecondary
v-if="!saveRequest"
v-tippy="{ theme: 'tooltip' }"
icon="replay"
:title="$t('restore')"

1
components/environments/index.vue
View File

@@ -13,6 +13,7 @@
py-3
focus:outline-none
border-b border-dividerLight
font-medium
bg-primaryLight
"
>

10
components/history/index.vue
View File

@@ -13,7 +13,15 @@
<input
v-model="filterText"
type="search"
class="px-4 py-3 text-xs flex flex-1 bg-primaryLight focus:outline-none"
class="
px-4
py-3
text-xs
flex flex-1
font-medium
bg-primaryLight
focus:outline-none
"
:placeholder="$t('search')"
/>
<ButtonSecondary

200
components/http/Parameters.vue
View File

@@ -1,24 +1,24 @@
<template>
<AppSection label="parameters">
<ul v-if="params.length !== 0">
<li>
<div class="flex flex-1">
<label for="paramList">{{ $t("parameter_list") }}</label>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="clearContent('parameters', $event)"
/>
</div>
</div>
</li>
</ul>
<ul
<div
v-if="params.length !== 0"
class="flex flex-1 items-center justify-between pl-4"
>
<label for="paramList" class="font-semibold text-xs">
{{ $t("parameter_list") }}
</label>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="clearContent('parameters', $event)"
/>
</div>
<div
v-for="(param, index) in params"
:key="index"
class="
flex
border-b border-dashed
divide-y
md:divide-x
@@ -28,39 +28,62 @@
"
:class="{ 'border-t': index == 0 }"
>
<li>
<input
class="input"
:placeholder="$t('parameter_count', { count: index + 1 })"
:name="'param' + index"
:value="param.key"
autofocus
@change="
$store.commit('setKeyParams', {
index,
value: $event.target.value,
})
"
/>
</li>
<li>
<input
class="input"
:placeholder="$t('value_count', { count: index + 1 })"
:name="'value' + index"
:value="param.value"
@change="
$store.commit('setValueParams', {
index,
value: $event.target.value,
})
"
/>
</li>
<li>
<input
class="
px-4
py-3
text-xs
flex flex-1
font-semibold
bg-primaryLight
focus:outline-none
"
:placeholder="$t('parameter_count', { count: index + 1 })"
:name="'param' + index"
:value="param.key"
autofocus
@change="
$store.commit('setKeyParams', {
index,
value: $event.target.value,
})
"
/>
<input
class="
px-4
py-3
text-xs
flex flex-1
font-semibold
bg-primaryLight
focus:outline-none
"
:placeholder="$t('value_count', { count: index + 1 })"
:name="'value' + index"
:value="param.value"
@change="
$store.commit('setValueParams', {
index,
value: $event.target.value,
})
"
/>
<div class="flex relative">
<span class="select-wrapper">
<select
class="select"
class="
flex
w-full
px-4
text-xs
py-3
mr-8
focus:outline-none
border-b border-dividerLight
font-medium
bg-primaryLight
"
:name="'type' + index"
@change="
$store.commit('setTypeParams', {
@@ -77,54 +100,49 @@
</option>
</select>
</span>
</li>
<div>
<li>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="
param.hasOwnProperty('active')
? param.active
? $t('turn_off')
: $t('turn_on')
: $t('turn_off')
"
:icon="
param.hasOwnProperty('active')
? param.active
? 'check_box'
: 'check_box_outline_blank'
: 'check_box'
"
@click.native="
$store.commit('setActiveParams', {
index,
value: param.hasOwnProperty('active') ? !param.active : false,
})
"
/>
</li>
</div>
<div>
<li>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeRequestParam(index)"
/>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addRequestParam"
v-tippy="{ theme: 'tooltip' }"
:title="
param.hasOwnProperty('active')
? param.active
? $t('turn_off')
: $t('turn_on')
: $t('turn_off')
"
:icon="
param.hasOwnProperty('active')
? param.active
? 'check_box'
: 'check_box_outline_blank'
: 'check_box'
"
@click.native="
$store.commit('setActiveParams', {
index,
value: param.hasOwnProperty('active') ? !param.active : false,
})
"
/>
</li>
</ul>
</div>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeRequestParam(index)"
/>
</div>
</div>
<div class="flex sticky bottom-0 bg-primary z-10 flex-1">
<ButtonSecondary
icon="add"
class="flex-1"
:label="$t('add_new')"
@click.native="addRequestParam"
/>
</div>
</AppSection>
</template>

13
lang/en-US.json
View File

@@ -26,7 +26,8 @@
"label": "Label",
"content_type": "Content Type",
"raw_input": "Raw input",
"parameter_list": "Parameter List",
"parameter_list": "Query Parameters",
"body": "Body",
"request_body": "Request Body",
"raw_request_body": "Raw Request Body",
"response_body": "Response Body",
@@ -201,10 +202,10 @@
"deprecated": "DEPRECATED",
"add_one_header": "(add at least one header)",
"add_one_parameter": "(add at least one parameter)",
"header_count": "header {count}",
"parameter_count": "parameter {count}",
"variable_count": "variable {count}",
"value_count": "value {count}",
"header_count": "Header {count}",
"parameter_count": "Parameter {count}",
"variable_count": "Variable {count}",
"value_count": "Value {count}",
"send_request_first": "Send a request first",
"generate_docs": "Generate Documentation",
"generate_docs_message": "Import any Hoppscotch Collection to Generate Documentation on-the-go.",
@@ -340,7 +341,7 @@
"hide_sidebar": "Hide sidebar",
"show_sidebar": "Show sidebar",
"protocols": "Protocols",
"protocol_count": "protocol {count}",
"protocol_count": "Protocol {count}",
"share": "Share",
"interceptor": "Interceptor",
"profile": "Profile",

4
nuxt.config.js
View File

@@ -204,10 +204,10 @@ export default {
// Google Fonts module configuration (https://github.com/nuxt-community/google-fonts-module)
googleFonts: {
display: "swap",
display: "block",
families: {
"Material+Icons": true,
Montserrat: [400, 500, 600, 700, 800],
"Material+Icons": true,
"Roboto+Mono": true,
},
},

2187
pages/api.vue
View File

File diff suppressed because it is too large Load Diff

18
pages/graphql.vue
View File

@@ -343,6 +343,7 @@
py-3
text-xs
flex flex-1
font-medium
bg-primaryLight
focus:outline-none
"
@@ -420,16 +421,27 @@
</SmartTab>
</div>
</SmartTabs>
<p
<div
v-if="
queryFields.length === 0 &&
mutationFields.length === 0 &&
subscriptionFields.length === 0 &&
graphqlTypes.length === 0
"
class="
flex
items-center
text-secondaryLight
flex-col
p-4
justify-center
"
>
{{ $t("send_request_first") }}
</p>
<i class="material-icons opacity-50 pb-2">description</i>
<span class="text-xs">
{{ $t("send_request_first") }}
</span>
</div>
</AppSection>
</SmartTab>

10
pages/home.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<div class="flex flex-col space-y-16">
<LandingHero />
<LandingStats />
<LandingUsers />
<LandingFeatures />
<LandingCTA />
<LandingFooter />
</div>
</template>

2286
pages/index.vue
View File

File diff suppressed because it is too large Load Diff