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

Merge branch 'refactor/ui' of https://github.com/hoppscotch/hoppscotch into refactor/ui

Browse Source
This commit is contained in:
Andrew Bastin
2021-08-22 13:06:58 +05:30
parent 1a4fc1f539 1bea0a42d7
commit db25346505
18 changed files with 56 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/app/Header.vue
View File

@@ -26,14 +26,13 @@
v-if="currentUser === null"
icon="filter_drama"
:label="$t('header.save_workspace')"
outline
class="hidden !text-secondaryDark md:flex"
filled
class="hidden !font-semibold md:flex"
@click.native="showLogin = true"
/>
<ButtonPrimary
v-if="currentUser === null"
:label="$t('header.login')"
outline
@click.native="showLogin = true"
/>
<span v-else class="pr-2">

5
components/button/Secondary.vue
View File

@@ -27,6 +27,7 @@
'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
outline,
},
{ 'bg-primaryDark': filled },
]"
:disabled="disabled"
tabindex="0"
@@ -127,6 +128,10 @@ export default defineComponent({
type: Array,
default: () => [],
},
filled: {
type: Boolean,
default: false,
},
},
})
</script>

3
components/collections/ChooseType.vue
View File

@@ -19,12 +19,15 @@
autofocus
class="
bg-primary
border-b border-transparent
cursor-pointer
flex
font-medium
w-full
py-2
px-4
appearance-none
hover:bg-primaryDark
"
@change="updateSelectedTeam(myTeams[$event.target.value])"
>

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

@@ -75,7 +75,7 @@
</span>
<ButtonSecondary
:label="$t('add.new')"
outline
filled
@click.native="displayModalAdd(true)"
/>
</div>

5
components/collections/index.vue
View File

@@ -118,15 +118,14 @@
collectionsType.selectedTeam.myRole == 'VIEWER')
"
v-tippy="{ theme: 'tooltip' }"
disabled
:title="$t('team.no_access')"
:label="$t('add.new')"
outline
filled
/>
<ButtonSecondary
v-else
outline
:label="$t('add.new')"
filled
@click.native="displayModalAdd(true)"
/>
</div>

6
components/environments/Edit.vue
View File

@@ -46,13 +46,13 @@
>
<input
v-model="variable.key"
class="bg-primaryLight flex flex-1 py-2 px-4"
class="bg-primary flex flex-1 py-2 px-4"
:placeholder="$t('count.variable', { count: index + 1 })"
:name="'param' + index"
/>
<input
v-model="variable.value"
class="bg-primaryLight flex flex-1 py-2 px-4"
class="bg-primary flex flex-1 py-2 px-4"
:placeholder="$t('count.value', { count: index + 1 })"
:name="'value' + index"
/>
@@ -83,7 +83,7 @@
</span>
<ButtonSecondary
:label="$t('add.new')"
outline
filled
@click.native="addEnvironmentVariable"
/>
</div>

2
components/environments/index.vue
View File

@@ -116,7 +116,7 @@
</span>
<ButtonSecondary
:label="$t('add.new')"
outline
filled
@click.native="displayModalAdd(true)"
/>
</div>

2
components/graphql/RequestOptions.vue
View File

@@ -241,7 +241,7 @@
</span>
<ButtonSecondary
:label="$t('add.new')"
outline
filled
icon="add"
@click.native="addRequestHeader"
/>

2
components/http/BodyParameters.vue
View File

@@ -191,7 +191,7 @@
</span>
<ButtonSecondary
:label="$t('add.new')"
outline
filled
icon="add"
@click.native="addBodyParam"
/>

2
components/http/Headers.vue
View File

@@ -144,7 +144,7 @@
{{ $t("empty.headers") }}
</span>
<ButtonSecondary
outline
filled
:label="$t('add.new')"
icon="add"
@click.native="addHeader"

2
components/http/Parameters.vue
View File

@@ -157,7 +157,7 @@
<ButtonSecondary
:label="$t('add.new')"
icon="add"
outline
filled
@click.native="addParam"
/>
</div>

6
components/http/Request.vue
View File

@@ -108,7 +108,7 @@
<template #trigger>
<ButtonPrimary
class="rounded-l-none"
outline
filled
icon="keyboard_arrow_down"
/>
</template>
@@ -142,7 +142,7 @@
<ButtonSecondary
class="rounded-r-none ml-2"
:label="$t('request.save')"
outline
filled
icon="save"
@click.native="saveRequest()"
/>
@@ -157,7 +157,7 @@
<template #trigger>
<ButtonSecondary
icon="keyboard_arrow_down"
outline
filled
class="rounded-r"
/>
</template>

22
components/realtime/Mqtt.vue
View File

@@ -72,15 +72,15 @@
/>
</div>
<div class="flex flex-1 p-4 items-center justify-between">
<label for="mqtt-message" class="font-semibold text-secondaryLight">{{
$t("mqtt.communication")
}}</label>
<label for="mqtt-message" class="font-semibold text-secondaryLight">
{{ $t("mqtt.communication") }}
</label>
</div>
<div class="flex px-4">
<div class="flex space-x-2 px-4">
<input
id="mqtt-message"
v-model="msg"
class="input !rounded-r-none"
class="input"
type="text"
:placeholder="$t('mqtt.message')"
spellcheck="false"
@@ -88,7 +88,6 @@
<ButtonPrimary
id="publish"
name="get"
class="rounded-l-none"
:disabled="!canpublish"
:label="$t('mqtt.publish')"
@click.native="publish"
@@ -103,24 +102,23 @@
inline-flex
"
>
<label for="sub_topic" class="font-semibold text-secondaryLight">{{
$t("mqtt.topic")
}}</label>
<label for="sub_topic" class="font-semibold text-secondaryLight">
{{ $t("mqtt.topic") }}
</label>
</div>
<div class="flex px-4">
<div class="flex space-x-2 px-4">
<input
id="sub_topic"
v-model="sub_topic"
type="text"
:placeholder="$t('mqtt.topic_name')"
spellcheck="false"
class="input !rounded-r-none"
class="input"
/>
<ButtonPrimary
id="subscribe"
name="get"
:disabled="!cansubscribe"
class="rounded-l-none"
:label="
subscriptionState ? $t('mqtt.unsubscribe') : $t('mqtt.subscribe')
"

13
components/realtime/Socketio.vue
View File

@@ -96,9 +96,9 @@
/>
</div>
<div class="flex flex-1 p-4 items-center justify-between">
<label class="font-semibold text-secondaryLight">{{
$t("socketio.communication")
}}</label>
<label class="font-semibold text-secondaryLight">
{{ $t("socketio.communication") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
@@ -114,10 +114,10 @@
v-for="(input, index) of communication.inputs"
:key="`input-${index}`"
>
<div class="flex">
<div class="flex space-x-2">
<input
v-model="communication.inputs[index]"
class="input !rounded-r-none"
class="input"
name="message"
:placeholder="$t('count.message', { count: index + 1 })"
type="text"
@@ -129,7 +129,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
icon="remove_circle_outline"
class="rounded-r"
class="rounded"
color="red"
outline
@click.native="removeCommunicationInput({ index })"
@@ -139,7 +139,6 @@
id="send"
name="send"
:disabled="!connectionState"
class="rounded-l-none"
:label="$t('action.send')"
@click.native="sendMessage"
/>

5
components/realtime/Websocket.vue
View File

@@ -167,7 +167,7 @@
{{ $t("websocket.communication") }}
</label>
</div>
<div class="flex px-4">
<div class="flex space-x-2 px-4">
<input
id="websocket-message"
v-model="communication.input"
@@ -175,7 +175,7 @@
type="text"
:disabled="!connectionState"
:placeholder="$t('websocket.message')"
class="input !rounded-r-none"
class="input"
@keyup.enter="connectionState ? sendMessage() : null"
@keyup.up="connectionState ? walkHistory('up') : null"
@keyup.down="connectionState ? walkHistory('down') : null"
@@ -184,7 +184,6 @@
id="send"
name="send"
:disabled="!connectionState"
class="rounded-l-none"
:label="$t('action.send')"
@click.native="sendMessage"
/>

22
components/teams/Edit.vue
View File

@@ -35,7 +35,7 @@
class="divide-x divide-dividerLight flex"
>
<input
class="bg-primaryLight flex flex-1 py-2 px-4"
class="bg-primary flex flex-1 py-2 px-4"
:placeholder="$t('team.email')"
:name="'param' + index"
:value="member.user.email"
@@ -52,13 +52,7 @@
<template #trigger>
<span class="select-wrapper">
<input
class="
bg-primaryLight
cursor-pointer
flex flex-1
py-2
px-4
"
class="bg-primary cursor-pointer flex flex-1 py-2 px-4"
:placeholder="$t('team.permissions')"
:name="'value' + index"
:value="
@@ -102,7 +96,7 @@
>
<input
v-model="member.key"
class="bg-primaryLight flex flex-1 py-2 px-4"
class="bg-primary flex flex-1 py-2 px-4"
:placeholder="$t('team.email')"
:name="'member' + index"
autofocus
@@ -118,13 +112,7 @@
<template #trigger>
<span class="select-wrapper">
<input
class="
bg-primaryLight
cursor-pointer
flex flex-1
py-2
px-4
"
class="bg-primary cursor-pointer flex flex-1 py-2 px-4"
:placeholder="$t('team.permissions')"
:name="'value' + index"
:value="
@@ -177,7 +165,7 @@
</span>
<ButtonSecondary
:label="$t('add.new')"
outline
filled
@click.native="addTeamMember"
/>
</div>

25
components/teams/Team.vue
View File

@@ -49,24 +49,15 @@
$refs.options.tippy().hide()
"
/>
<span
v-tippy="{ theme: 'tooltip' }"
:title="
team.myRole === 'OWNER' && team.ownersCount == 1
? $t('team.exit_disabled')
: ''
<SmartItem
v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
icon="remove"
:label="$t('team.exit')"
@click.native="
exitTeam()
$refs.options.tippy().hide()
"
>
<SmartItem
:disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
icon="remove"
:label="$t('team.exit')"
@click.native="
exitTeam()
$refs.options.tippy().hide()
"
/>
</span>
/>
</tippy>
</span>
</div>