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

2
assets/scss/themes.scss
View File

@@ -10,7 +10,7 @@
// Light Background color // Light Background color
--primary-light-color: theme("colors.dark.600"); --primary-light-color: theme("colors.dark.600");
// Dark Background color // Dark Background color
--primary-dark-color: theme("colors.dark.900"); --primary-dark-color: theme("colors.true-gray.800");
// Text color // Text color
--secondary-color: theme("colors.true-gray.400"); --secondary-color: theme("colors.true-gray.400");
// Light Text color // Light Text color

5
components/app/Header.vue
View File

@@ -26,14 +26,13 @@
v-if="currentUser === null" v-if="currentUser === null"
icon="filter_drama" icon="filter_drama"
:label="$t('header.save_workspace')" :label="$t('header.save_workspace')"
outline filled
class="hidden !text-secondaryDark md:flex" class="hidden !font-semibold md:flex"
@click.native="showLogin = true" @click.native="showLogin = true"
/> />
<ButtonPrimary <ButtonPrimary
v-if="currentUser === null" v-if="currentUser === null"
:label="$t('header.login')" :label="$t('header.login')"
outline
@click.native="showLogin = true" @click.native="showLogin = true"
/> />
<span v-else class="pr-2"> <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': 'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
outline, outline,
}, },
{ 'bg-primaryDark': filled },
]" ]"
:disabled="disabled" :disabled="disabled"
tabindex="0" tabindex="0"
@@ -127,6 +128,10 @@ export default defineComponent({
type: Array, type: Array,
default: () => [], default: () => [],
}, },
filled: {
type: Boolean,
default: false,
},
}, },
}) })
</script> </script>

3
components/collections/ChooseType.vue
View File

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

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

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

5
components/collections/index.vue
View File

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

6
components/environments/Edit.vue
View File

@@ -46,13 +46,13 @@
> >
<input <input
v-model="variable.key" 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 })" :placeholder="$t('count.variable', { count: index + 1 })"
:name="'param' + index" :name="'param' + index"
/> />
<input <input
v-model="variable.value" 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 })" :placeholder="$t('count.value', { count: index + 1 })"
:name="'value' + index" :name="'value' + index"
/> />
@@ -83,7 +83,7 @@
</span> </span>
<ButtonSecondary <ButtonSecondary
:label="$t('add.new')" :label="$t('add.new')"
outline filled
@click.native="addEnvironmentVariable" @click.native="addEnvironmentVariable"
/> />
</div> </div>

2
components/environments/index.vue
View File

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

2
components/graphql/RequestOptions.vue
View File

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

2
components/http/BodyParameters.vue
View File

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

2
components/http/Headers.vue
View File

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

2
components/http/Parameters.vue
View File

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

6
components/http/Request.vue
View File

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

22
components/realtime/Mqtt.vue
View File

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

13
components/realtime/Socketio.vue
View File

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

5
components/realtime/Websocket.vue
View File

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

22
components/teams/Edit.vue
View File

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

25
components/teams/Team.vue
View File

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