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

refactor: improve ui consistency

Browse Source
This commit is contained in:
liyasthomas
2022-03-21 18:57:23 +05:30
parent 8f96a5f5db
commit bd22541d94
9 changed files with 25 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/hoppscotch-app/assets/scss/themes.scss
View File

@@ -251,13 +251,11 @@
--upper-tertiary-sticky-fold: 8.188rem; --upper-tertiary-sticky-fold: 8.188rem;
--upper-mobile-primary-sticky-fold: 6.625rem; --upper-mobile-primary-sticky-fold: 6.625rem;
--upper-mobile-secondary-sticky-fold: 8.625rem; --upper-mobile-secondary-sticky-fold: 8.625rem;
--upper-mobile-tertiary-sticky-fold: 10.625rem; --upper-mobile-raw-sticky-fold: 10.688rem;
--upper-mobile-raw-sticky-fold: 10.675rem;
--upper-mobile-raw-tertiary-sticky-fold: 8.188rem; --upper-mobile-raw-tertiary-sticky-fold: 8.188rem;
--lower-primary-sticky-fold: 3rem; --lower-primary-sticky-fold: 3rem;
--lower-secondary-sticky-fold: 5rem; --lower-secondary-sticky-fold: 5rem;
--sidebar-primary-sticky-fold: 2rem; --sidebar-primary-sticky-fold: 2rem;
--sidebar-secondary-sticky-fold: 4rem;
} }
@mixin font-medium { @mixin font-medium {
@@ -268,13 +266,11 @@
--upper-tertiary-sticky-fold: 8.813rem; --upper-tertiary-sticky-fold: 8.813rem;
--upper-mobile-primary-sticky-fold: 7.125rem; --upper-mobile-primary-sticky-fold: 7.125rem;
--upper-mobile-secondary-sticky-fold: 9.375rem; --upper-mobile-secondary-sticky-fold: 9.375rem;
--upper-mobile-tertiary-sticky-fold: 10.875rem; --upper-mobile-raw-sticky-fold: 11.688rem;
--upper-mobile-raw-sticky-fold: 11.695rem; --upper-mobile-raw-tertiary-sticky-fold: 8.938rem;
--upper-mobile-raw-tertiary-sticky-fold: 8.925rem;
--lower-primary-sticky-fold: 3.25rem; --lower-primary-sticky-fold: 3.25rem;
--lower-secondary-sticky-fold: 5.5rem; --lower-secondary-sticky-fold: 5.5rem;
--sidebar-primary-sticky-fold: 2.25rem; --sidebar-primary-sticky-fold: 2.25rem;
--sidebar-secondary-sticky-fold: 4.5rem;
} }
@mixin font-large { @mixin font-large {
@@ -285,13 +281,11 @@
--upper-tertiary-sticky-fold: 9.5rem; --upper-tertiary-sticky-fold: 9.5rem;
--upper-mobile-primary-sticky-fold: 7.625rem; --upper-mobile-primary-sticky-fold: 7.625rem;
--upper-mobile-secondary-sticky-fold: 10.125rem; --upper-mobile-secondary-sticky-fold: 10.125rem;
--upper-mobile-tertiary-sticky-fold: 11.375rem; --upper-mobile-raw-sticky-fold: 12.688rem;
--upper-mobile-raw-sticky-fold: 12.695rem; --upper-mobile-raw-tertiary-sticky-fold: 9.688rem;
--upper-mobile-raw-tertiary-sticky-fold: 9.7rem;
--lower-primary-sticky-fold: 3.5rem; --lower-primary-sticky-fold: 3.5rem;
--lower-secondary-sticky-fold: 6rem; --lower-secondary-sticky-fold: 6rem;
--sidebar-primary-sticky-fold: 2.5rem; --sidebar-primary-sticky-fold: 2.5rem;
--sidebar-secondary-sticky-fold: 5rem;
} }
:root[data-font-size="small"] { :root[data-font-size="small"] {

6
packages/hoppscotch-app/components/app/Footer.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="bg-primary"> <div>
<div class="flex justify-between"> <div class="flex justify-between bg-primary">
<div class="flex"> <div class="flex">
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
@@ -166,7 +166,7 @@
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')" :title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')"
svg="columns" svg="columns"
class="transform hidden sm:inline" class="hidden transform sm:inline"
:class="{ 'rotate-90': !COLUMN_LAYOUT }" :class="{ 'rotate-90': !COLUMN_LAYOUT }"
@click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT" @click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
/> />

3
packages/hoppscotch-app/components/app/Sidenav.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<aside class="flex justify-between h-full md:flex-col"> <aside class="flex justify-between h-full md:flex-col">
<nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none"> <nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none bg-primary">
<NuxtLink <NuxtLink
v-for="(navigation, index) in primaryNavigation" v-for="(navigation, index) in primaryNavigation"
:key="`navigation-${index}`" :key="`navigation-${index}`"
@@ -71,7 +71,6 @@ const primaryNavigation = [
@apply flex flex-col flex-1; @apply flex flex-col flex-1;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply bg-primary;
@apply hover:(bg-primaryDark text-secondaryDark); @apply hover:(bg-primaryDark text-secondaryDark);
@apply focus-visible:text-secondaryDark; @apply focus-visible:text-secondaryDark;

12
packages/hoppscotch-app/components/http/Authorization.vue
View File

@@ -4,9 +4,9 @@
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
> >
<span class="flex items-center"> <span class="flex items-center">
<label class="font-semibold text-secondaryLight">{{ <label class="font-semibold text-secondaryLight">
$t("authorization.type") {{ $t("authorization.type") }}
}}</label> </label>
<tippy <tippy
ref="authTypeOptions" ref="authTypeOptions"
interactive interactive
@@ -185,9 +185,9 @@
<SmartEnvInput v-model="apiValue" placeholder="Value" /> <SmartEnvInput v-model="apiValue" placeholder="Value" />
</div> </div>
<div class="flex items-center border-b border-dividerLight"> <div class="flex items-center border-b border-dividerLight">
<label class="ml-4 text-secondaryLight">{{ <label class="ml-4 text-secondaryLight">
$t("authorization.pass_key_by") {{ $t("authorization.pass_key_by") }}
}}</label> </label>
<tippy <tippy
ref="addToOptions" ref="addToOptions"
interactive interactive

6
packages/hoppscotch-app/components/http/Headers.vue
View File

@@ -3,9 +3,9 @@
<div <div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight">{{ <label class="font-semibold text-secondaryLight">
t("request.header_list") {{ t("request.header_list") }}
}}</label> </label>
<div class="flex"> <div class="flex">
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"

6
packages/hoppscotch-app/components/http/PreRequestScript.vue
View File

@@ -3,9 +3,9 @@
<div <div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight">{{ <label class="font-semibold text-secondaryLight">
t("preRequest.javascript_code") {{ t("preRequest.javascript_code") }}
}}</label> </label>
<div class="flex"> <div class="flex">
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"

2
packages/hoppscotch-app/components/http/Request.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div <div
class="sticky top-0 z-10 flex-none sm:flex sm:flex-shrink-0 p-4 overflow-x-auto sm:space-x-2 bg-primary hide-scrollbar" class="sticky top-0 z-10 flex-none p-4 overflow-x-auto sm:flex sm:flex-shrink-0 sm:space-x-2 bg-primary hide-scrollbar"
> >
<div <div
class="flex flex-1 overflow-auto border rounded min-w-52 border-divider whitespace-nowrap hide-scrollbar" class="flex flex-1 overflow-auto border rounded min-w-52 border-divider whitespace-nowrap hide-scrollbar"

6
packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -3,9 +3,9 @@
<div <div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
> >
<label class="font-semibold text-secondaryLight">{{ <label class="font-semibold text-secondaryLight">
t("response.body") {{ t("response.body") }}
}}</label> </label>
<div class="flex"> <div class="flex">
<ButtonSecondary <ButtonSecondary
v-if="response.body" v-if="response.body"

3
packages/hoppscotch-app/windi.config.js
View File

@@ -13,15 +13,12 @@ export default defineConfig({
upperMobilePrimaryStickyFold: "var(--upper-mobile-primary-sticky-fold)", upperMobilePrimaryStickyFold: "var(--upper-mobile-primary-sticky-fold)",
upperMobileSecondaryStickyFold: upperMobileSecondaryStickyFold:
"var(--upper-mobile-secondary-sticky-fold)", "var(--upper-mobile-secondary-sticky-fold)",
upperMobileTertiaryStickyFold:
"var(--upper-mobile-tertiary-sticky-fold)",
upperMobileRawStickyFold: "var(--upper-mobile-raw-sticky-fold)", upperMobileRawStickyFold: "var(--upper-mobile-raw-sticky-fold)",
upperMobileRawTertiaryStickyFold: upperMobileRawTertiaryStickyFold:
"var(--upper-mobile-raw-tertiary-sticky-fold)", "var(--upper-mobile-raw-tertiary-sticky-fold)",
lowerPrimaryStickyFold: "var(--lower-primary-sticky-fold)", lowerPrimaryStickyFold: "var(--lower-primary-sticky-fold)",
lowerSecondaryStickyFold: "var(--lower-secondary-sticky-fold)", lowerSecondaryStickyFold: "var(--lower-secondary-sticky-fold)",
sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)", sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)",
sidebarSecondaryStickyFold: "var(--sidebar-secondary-sticky-fold)",
}, },
colors: { colors: {
primary: "var(--primary-color)", primary: "var(--primary-color)",