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

refactor: polish environment selector (#3260)

Browse Source
This commit is contained in:
Liyas Thomas
2023-08-17 16:46:45 +05:30
committed by GitHub
parent e255c46455
commit 2d6282cf8b
4 changed files with 37 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/hoppscotch-common/assets/scss/styles.scss
View File

@@ -190,10 +190,11 @@ a {
@apply border-solid border-dividerDark;
@apply rounded;
@apply shadow-lg;
@apply max-w-[45vw] #{!important};
.tippy-content {
@apply flex flex-col;
@apply max-h-56;
@apply max-h-[45vh];
@apply items-stretch;
@apply overflow-y-auto;
@apply text-secondary text-body;
@@ -201,6 +202,10 @@ a {
@apply leading-normal;
@apply focus:outline-none;
scroll-behavior: smooth;
& > span {
@apply block #{!important};
}
}
.tippy-svg-arrow {

34
packages/hoppscotch-common/src/components/environments/Selector.vue
View File

@@ -9,7 +9,7 @@
<span
v-tippy="{ theme: 'tooltip' }"
:title="`${t('environment.select')}`"
class="bg-transparent border-b border-dividerLight select-wrapper"
class="select-wrapper"
>
<HoppButtonSecondary
:icon="IconLayers"
@@ -50,7 +50,11 @@
/>
<HoppSmartTabs
v-model="selectedEnvTab"
styles="sticky overflow-x-auto my-2 border border-divider rounded flex-shrink-0 z-0 top-0 bg-primary"
:styles="`sticky overflow-x-auto my-2 border border-divider rounded flex-shrink-0 z-0 top-0 bg-primary ${
!isTeamSelected || workspace.type === 'personal'
? 'bg-primaryLight'
: ''
}`"
render-inactive-tabs
>
<HoppSmartTab
@@ -189,12 +193,12 @@
"
/>
</div>
<div class="my-2 flex flex-col flex-1 space-y-2 pl-4">
<div class="my-2 flex flex-col flex-1 space-y-2 pl-4 pr-2">
<div class="flex flex-1 space-x-4">
<span class="w-20 truncate text-tiny font-semibold">
<span class="w-1/4 min-w-32 truncate text-tiny font-semibold">
{{ t("environment.name") }}
</span>
<span class="w-36 truncate text-tiny font-semibold">
<span class="w-full min-w-32 truncate text-tiny font-semibold">
{{ t("environment.value") }}
</span>
</div>
@@ -203,10 +207,10 @@
:key="index"
class="flex flex-1 space-x-4"
>
<span class="text-secondaryLight w-20 truncate">
<span class="text-secondaryLight w-1/4 min-w-32 truncate">
{{ variable.key }}
</span>
<span class="text-secondaryLight w-36 truncate">
<span class="text-secondaryLight w-full min-w-32 truncate">
{{ variable.value }}
</span>
</div>
@@ -215,15 +219,15 @@
</div>
</div>
<div
class="sticky top-0 font-semibold truncate flex items-center justify-between text-secondaryDark bg-primary border border-divider rounded pl-4"
class="sticky top-0 mt-2 font-semibold truncate flex items-center justify-between text-secondaryDark bg-primary border border-divider rounded pl-4"
:class="{
'py-2 pr-4': !selectedEnv.variables,
'bg-primaryLight': !selectedEnv.variables,
}"
>
{{ t("environment.list") }}
<HoppButtonSecondary
v-if="selectedEnv.variables"
v-tippy="{ theme: 'tooltip' }"
:disabled="!selectedEnv.variables"
:title="t('action.edit')"
:icon="IconEdit"
@click="
@@ -240,12 +244,12 @@
>
{{ t("environment.no_active_environment") }}
</div>
<div v-else class="my-2 flex flex-col flex-1 space-y-2 pl-4">
<div v-else class="my-2 flex flex-col flex-1 space-y-2 pl-4 pr-2">
<div class="flex flex-1 space-x-4">
<span class="w-20 truncate text-tiny font-semibold">
<span class="w-1/4 min-w-32 truncate text-tiny font-semibold">
{{ t("environment.name") }}
</span>
<span class="w-36 truncate text-tiny font-semibold">
<span class="w-full min-w-32 truncate text-tiny font-semibold">
{{ t("environment.value") }}
</span>
</div>
@@ -254,10 +258,10 @@
:key="index"
class="flex flex-1 space-x-4"
>
<span class="text-secondaryLight w-20 truncate">
<span class="text-secondaryLight w-1/4 min-w-32 truncate">
{{ variable.key }}
</span>
<span class="text-secondaryLight w-36 truncate">
<span class="text-secondaryLight w-full min-w-32 truncate">
{{ variable.value }}
</span>
</div>

7
packages/hoppscotch-sh-admin/assets/scss/styles.scss
View File

@@ -190,10 +190,11 @@ a {
@apply border-solid border-dividerDark;
@apply rounded;
@apply shadow-lg;
@apply max-w-[45vw] #{!important};
.tippy-content {
@apply flex flex-col;
@apply max-h-56;
@apply max-h-[45vh];
@apply items-stretch;
@apply overflow-y-auto;
@apply text-secondary text-body;
@@ -201,6 +202,10 @@ a {
@apply leading-normal;
@apply focus:outline-none;
scroll-behavior: smooth;
& > span {
@apply block #{!important};
}
}
.tippy-svg-arrow {

7
packages/hoppscotch-ui/src/assets/scss/styles.scss
View File

@@ -190,10 +190,11 @@ a {
@apply border-solid border-dividerDark;
@apply rounded;
@apply shadow-lg;
@apply max-w-[45vw] #{!important};
.tippy-content {
@apply flex flex-col;
@apply max-h-56;
@apply max-h-[45vh];
@apply items-stretch;
@apply overflow-y-auto;
@apply text-secondary text-body;
@@ -201,6 +202,10 @@ a {
@apply leading-normal;
@apply focus:outline-none;
scroll-behavior: smooth;
& > span {
@apply block #{!important};
}
}
.tippy-svg-arrow {