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

chore: minor ui improvements

Browse Source
This commit is contained in:
Liyas Thomas
2022-12-03 13:01:47 +05:30
parent dcbc2f1145
commit a1d69b3210
11 changed files with 151 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,9 @@
* {
@apply backface-hidden;
@apply before: backface-hidden;
@apply after: backface-hidden;
@apply selection: bg-accentDark;
@apply selection: text-accentContrast;
@apply before:backface-hidden;
@apply after:backface-hidden;
@apply selection:bg-accentDark;
@apply selection:text-accentContrast;
}
:root {
@@ -21,8 +21,8 @@
@apply bg-divider bg-clip-content;
@apply rounded-full;
@apply border-solid border-transparent border-4;
@apply hover: bg-dividerDark;
@apply hover: bg-clip-content;
@apply hover:bg-dividerDark;
@apply hover:bg-clip-content;
}
::-webkit-scrollbar {
@@ -115,7 +115,7 @@ a {
@apply no-underline;
@apply transition;
@apply leading-body;
@apply focus: outline-none;
@apply focus:outline-none;
&.link {
@apply items-center;
@@ -123,10 +123,10 @@ a {
@apply -my-0.5 -mx-1;
@apply text-accent;
@apply rounded;
@apply hover: text-accentDark;
@apply focus-visible: ring;
@apply focus-visible: ring-accent;
@apply focus-visible: text-accentDark;
@apply hover:text-accentDark;
@apply focus-visible:ring;
@apply focus-visible:ring-accent;
@apply focus-visible:text-accentDark;
}
}
@@ -163,7 +163,7 @@ a {
@apply px-1;
@apply my-0 ml-1;
@apply truncate;
@apply sm: inline-flex;
@apply sm:inline-flex;
}
.env-icon {
@@ -198,7 +198,7 @@ a {
@apply text-secondary text-body;
@apply p-2;
@apply leading-normal;
@apply focus: outline-none;
@apply focus:outline-none;
scroll-behavior: smooth;
}
@@ -243,7 +243,7 @@ hr {
@apply rounded;
@apply text-secondaryDark;
@apply border border-divider;
@apply focus-visible: border-dividerDark;
@apply focus-visible:border-dividerDark;
}
input,
@@ -254,8 +254,8 @@ button {
@apply transition;
@apply text-body;
@apply leading-body;
@apply focus: outline-none;
@apply disabled: cursor-not-allowed;
@apply focus:outline-none;
@apply disabled:cursor-not-allowed;
}
.input[type="file"],
@@ -316,16 +316,16 @@ pre.ace_editor {
.select-wrapper {
@apply flex flex-1;
@apply relative;
@apply after: absolute;
@apply after: flex;
@apply after: inset-y-0;
@apply after: items-center;
@apply after: justify-center;
@apply after: pointer-events-none;
@apply after: font-icon;
@apply after: text-secondaryLight;
@apply after: right-3;
@apply after: content-["\e313"];
@apply after:absolute;
@apply after:flex;
@apply after:inset-y-0;
@apply after:items-center;
@apply after:justify-center;
@apply after:pointer-events-none;
@apply after:font-icon;
@apply after:text-secondaryLight;
@apply after:right-3;
@apply after:content-["\e313"];
}
.info-response {
@@ -366,8 +366,8 @@ pre.ace_editor {
@apply font-semibold;
@apply transition;
@apply leading-body;
@apply sm: rounded;
@apply sm: border;
@apply sm:rounded;
@apply sm:border;
.action {
@apply relative;
@@ -381,16 +381,16 @@ pre.ace_editor {
@apply leading-body;
@apply tracking-normal;
@apply rounded;
@apply last: ml-4;
@apply sm: ml-8;
@apply before: absolute;
@apply before: bg-current;
@apply before: opacity-10;
@apply before: inset-0;
@apply before: transition;
@apply before: content-DEFAULT;
@apply hover: no-underline;
@apply hover: before:opacity-20;
@apply last:ml-4;
@apply sm:ml-8;
@apply before:absolute;
@apply before:bg-current;
@apply before:opacity-10;
@apply before:inset-0;
@apply before:transition;
@apply before:content-DEFAULT;
@apply hover:no-underline;
@apply hover:before:opacity-20;
}
}
@@ -417,24 +417,24 @@ pre.ace_editor {
.smart-splitter .splitpanes__splitter {
@apply relative;
@apply bg-primaryLight;
@apply before: absolute;
@apply before: inset-0;
@apply before: bg-accentLight;
@apply before: opacity-0;
@apply before: z-20;
@apply before: transition;
@apply before: content-DEFAULT;
@apply after: absolute;
@apply after: inset-0;
@apply after: z-20;
@apply after: transition;
@apply after: flex;
@apply after: items-center;
@apply after: justify-center;
@apply after: text-dividerDark;
@apply after: font-icon;
@apply hover: before:opacity-100;
@apply hover: after:text-accentDark;
@apply before:absolute;
@apply before:inset-0;
@apply before:bg-accentLight;
@apply before:opacity-0;
@apply before:z-20;
@apply before:transition;
@apply before:content-DEFAULT;
@apply after:absolute;
@apply after:inset-0;
@apply after:z-20;
@apply after:transition;
@apply after:flex;
@apply after:items-center;
@apply after:justify-center;
@apply after:text-dividerDark;
@apply after:font-icon;
@apply hover:before:opacity-100;
@apply hover:after:text-accentDark;
}
.no-splitter .splitpanes__splitter {
@@ -444,18 +444,18 @@ pre.ace_editor {
.smart-splitter.splitpanes--vertical > .splitpanes__splitter {
@apply w-1;
@apply before: -left-0.5;
@apply before: -right-0.5;
@apply before: h-full;
@apply after: content-["\e5d4"];
@apply before:-left-0.5;
@apply before:-right-0.5;
@apply before:h-full;
@apply after:content-["\e5d4"];
}
.smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
@apply h-1;
@apply before: -top-0.5;
@apply before: -bottom-0.5;
@apply before: w-full;
@apply after: content-["\e5d3"];
@apply before:-top-0.5;
@apply before:-bottom-0.5;
@apply before:w-full;
@apply after:content-["\e5d3"];
}
.no-splitter.splitpanes--vertical > .splitpanes__splitter {
@@ -507,7 +507,7 @@ pre.ace_editor {
}
.capitalize-first {
@apply first-letter: capitalize;
@apply first-letter:capitalize;
}
details {
@@ -543,12 +543,16 @@ details[open] summary .indicator {
@apply bg-accent #{!important};
}
input[type="color"]::-webkit-color-swatch-wrapper {
@apply rounded;
padding: 0;
.color-picker[type="color"] {
@apply appearance-none;
}
input[type="color"]::-webkit-color-swatch {
.color-picker[type="color"]::-webkit-color-swatch-wrapper {
@apply rounded;
border: none;
@apply p-0;
}
.color-picker[type="color"]::-webkit-color-swatch {
@apply rounded;
@apply border-0;
}

3
packages/hoppscotch-common/src/components.d.ts vendored
View File

@@ -99,6 +99,7 @@ declare module '@vue/runtime-core' {
HttpTests: typeof import('./components/http/Tests.vue')['default']
HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
IconLucideBrush: typeof import('~icons/lucide/brush')['default']
IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
@@ -107,9 +108,11 @@ declare module '@vue/runtime-core' {
IconLucideLayers: typeof import('~icons/lucide/layers')['default']
IconLucideLoader: typeof import('~icons/lucide/loader')['default']
IconLucideMinus: typeof import('~icons/lucide/minus')['default']
IconLucideRss: typeof import('~icons/lucide/rss')['default']
IconLucideSearch: typeof import('~icons/lucide/search')['default']
IconLucideUser: typeof import('~icons/lucide/user')['default']
IconLucideUsers: typeof import('~icons/lucide/users')['default']
IconLucideVerified: typeof import('~icons/lucide/verified')['default']
LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']
LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default']

7
packages/hoppscotch-common/src/components/app/Footer.vue
View File

@@ -149,9 +149,11 @@
</template>
</tippy>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
v-tippy="{ theme: 'tooltip', allowHTML: true }"
:title="`${t(
'app.shortcuts'
)} <kbd>${getSpecialKey()}</kbd><kbd>K</kbd>`"
:icon="IconZap"
:title="t('app.shortcuts')"
@click="showShortcuts = true"
/>
<ButtonSecondary
@@ -223,6 +225,7 @@ import { useReadonlyStream } from "@composables/stream"
import { currentUser$ } from "~/helpers/fb/auth"
import { TippyComponent } from "vue-tippy"
import SmartItem from "@components/smart/Item.vue"
import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
const t = useI18n()
const showShortcuts = ref(false)

28
packages/hoppscotch-common/src/components/app/PowerSearchEntry.vue
View File

@@ -1,6 +1,6 @@
<template>
<button
class="flex items-center flex-1 px-6 py-3 font-medium cursor-pointer transition search-entry focus:outline-none"
class="flex items-center flex-1 px-6 py-3 font-medium transition cursor-pointer search-entry focus:outline-none"
:class="{ active: active }"
tabindex="-1"
@click="emit('action', shortcut.action)"
@@ -8,7 +8,7 @@
>
<component
:is="shortcut.icon"
class="mr-4 opacity-50 transition svg-icons"
class="mr-4 transition opacity-50 svg-icons"
:class="{ 'opacity-100 text-secondaryDark': active }"
/>
<span
@@ -51,24 +51,18 @@ const emit = defineEmits<{
<style lang="scss" scoped>
.search-entry {
@apply relative;
&::after {
@apply absolute;
@apply top-0;
@apply left-0;
@apply bottom-0;
@apply bg-transparent;
@apply z-2;
@apply w-0.5;
content: "";
}
@apply after:absolute;
@apply after:top-0;
@apply after:left-0;
@apply after:bottom-0;
@apply after:bg-transparent;
@apply after:z-2;
@apply after:w-0.5;
@apply after:content-DEFAULT;
&.active {
@apply bg-primaryLight;
&::after {
@apply bg-accentLight;
}
@apply after:bg-accentLight;
}
}
</style>

44
packages/hoppscotch-common/src/components/app/Sidenav.vue
View File

@@ -78,26 +78,20 @@ const primaryNavigation = [
@apply justify-center;
@apply hover: (bg-primaryDark text-secondaryDark);
@apply focus-visible: text-secondaryDark;
&::after {
@apply absolute;
@apply inset-x-0;
@apply md: inset-x-auto;
@apply md: inset-y-0;
@apply bottom-0;
@apply md: bottom-auto;
@apply md: left-0;
@apply z-2;
@apply h-0.5;
@apply md: h-full;
@apply w-full;
@apply md: w-0.5;
content: "";
}
&:focus::after {
@apply bg-divider;
}
@apply after:absolute;
@apply after:inset-x-0;
@apply after:md: inset-x-auto;
@apply after:md: inset-y-0;
@apply after:bottom-0;
@apply after:md: bottom-auto;
@apply after:md: left-0;
@apply after:z-2;
@apply after:h-0.5;
@apply after:md: h-full;
@apply after:w-full;
@apply after:md: w-0.5;
@apply after:content-DEFAULT;
@apply focus: after: bg-divider;
.svg-icons {
@apply opacity-75;
@@ -112,28 +106,22 @@ const primaryNavigation = [
@apply text-secondaryDark;
@apply bg-primaryLight;
@apply hover: text-secondaryDark;
@apply after:bg-accent;
.svg-icons {
@apply opacity-100;
}
&::after {
@apply bg-accent;
}
}
&.exact-active-link {
@apply text-secondaryDark;
@apply bg-primaryLight;
@apply hover: text-secondaryDark;
@apply after:bg-accent;
.svg-icons {
@apply opacity-100;
}
&::after {
@apply bg-accent;
}
}
}
</style>

4
packages/hoppscotch-common/src/components/realtime/Subscription.vue
View File

@@ -3,7 +3,7 @@
<template #body>
<div class="flex justify-between mb-4">
<div
class="flex items-center border rounded divide-x border-divider divide-divider"
class="flex items-center border divide-x rounded border-divider divide-divider"
>
<label class="mx-4">
{{ t("mqtt.qos") }}
@@ -61,7 +61,7 @@
id="select-color"
v-model="color"
type="color"
class="w-8 h-8 p-1 rounded bg-primary"
class="w-8 h-8 p-1 rounded bg-primary color-picker"
/>
</span>
</div>

9
packages/hoppscotch-common/src/components/smart/Checkbox.vue
View File

@@ -9,6 +9,7 @@
id="checkbox"
type="checkbox"
name="checkbox"
class="checkbox"
:checked="on"
@change="emit('change')"
/>
@@ -35,7 +36,7 @@ const emit = defineEmits<{
</script>
<style lang="scss" scoped>
input[type="checkbox"] {
.checkbox[type="checkbox"] {
@apply appearance-none;
@apply hidden;
@@ -44,7 +45,7 @@ input[type="checkbox"] {
@apply cursor-pointer;
&::before {
@apply border-divider border-2;
@apply border-2 border-divider;
@apply rounded;
@apply group-hover: border-accentDark;
@apply inline-flex;
@@ -54,9 +55,9 @@ input[type="checkbox"] {
@apply h-4;
@apply w-4;
@apply font-icon;
@apply mr-3;
@apply mr-2;
@apply transition;
content: "\e876";
@apply content-["\e876"];
}
}

2
packages/hoppscotch-common/src/components/smart/Modal.vue
View File

@@ -31,7 +31,7 @@
>
<Transition name="bounce" appear>
<div
class="inline-block w-full overflow-hidden text-left align-bottom border shadow-lg transition-all transform border-dividerDark bg-primary sm:rounded-xl sm:align-middle"
class="inline-block w-full overflow-hidden text-left align-bottom transition-all transform shadow-lg sm:border border-dividerDark bg-primary sm:rounded-xl sm:align-middle"
:class="[{ 'mt-24 md:mb-8': placement === 'top' }, styles]"
>
<div

49
packages/hoppscotch-common/src/components/smart/Tabs.vue
View File

@@ -182,16 +182,6 @@ const selectTab = (id: string) => {
@apply overflow-auto;
@apply flex-shrink-0;
// &::after {
// @apply absolute;
// @apply inset-x-0;
// @apply bottom-0;
// @apply bg-dividerLight;
// @apply z-1;
// @apply h-0.5;
// content: "";
// }
.tab {
@apply relative;
@apply flex;
@@ -205,6 +195,15 @@ const selectTab = (id: string) => {
@apply hover: text-secondaryDark;
@apply focus: outline-none;
@apply focus-visible: text-secondaryDark;
@apply after:absolute;
@apply after:left-4;
@apply after:right-4;
@apply after:bottom-0;
@apply after:bg-transparent;
@apply after:z-2;
@apply after:h-0.5;
@apply after:content-DEFAULT;
@apply focus: after: bg-divider;
.tab-info {
@apply inline-flex;
@@ -219,53 +218,29 @@ const selectTab = (id: string) => {
@apply text-secondaryLight;
}
&::after {
@apply absolute;
@apply left-4;
@apply right-4;
@apply bottom-0;
@apply bg-transparent;
@apply z-2;
@apply h-0.5;
content: "";
}
&:focus::after {
@apply bg-divider;
}
&.active {
@apply text-secondaryDark;
@apply after:bg-accent;
.tab-info {
@apply text-secondary;
@apply border-dividerDark;
}
&::after {
@apply bg-accent;
}
}
&.vertical {
@apply p-2;
@apply rounded;
&:focus::after {
@apply hidden;
}
@apply focus: after: hidden;
&.active {
@apply text-accent;
@apply after:hidden;
.tab-info {
@apply text-secondary;
@apply border-dividerDark;
}
&::after {
@apply hidden;
}
}
}
}

69
packages/hoppscotch-common/src/components/smart/Windows.vue
View File

@@ -9,7 +9,7 @@
<draggable
v-bind="dragOptions"
:list="tabEntries"
:style="tabsWidth"
:style="tabStyles"
:item-key="'window-'"
class="flex flex-shrink-0 overflow-x-auto transition divide-x divide-dividerLight"
@sort="sortTabs"
@@ -43,7 +43,7 @@
}"
:title="t('action.close')"
:class="[{ active: modelValue === tabID }, 'close']"
class="rounded mx-2 !py-0.5 !px-1"
class="mx-2 !p-0.5"
@click.stop="emit('removeTab', tabID)"
/>
</button>
@@ -127,11 +127,11 @@ const emit = defineEmits<{
(e: "addTab"): void
}>()
const tabEntries = ref<Array<[string, TabMeta]>>([])
const tabsWidth = computed(() => ({
const tabStyles = computed(() => ({
maxWidth: `${tabEntries.value.length * 184}px`,
width: "100%",
minWidth: "0px",
transition: "max-width 0.2s",
// transition: "max-width 0.2s",
}))
const dragOptions = {
group: "tabs",
@@ -201,16 +201,13 @@ const addTab = () => {
@apply whitespace-nowrap;
@apply overflow-auto;
@apply flex-shrink-0;
&::after {
@apply absolute;
@apply inset-x-0;
@apply bottom-0;
@apply bg-dividerLight;
@apply z-10;
@apply h-0.25;
content: "";
}
@apply after:absolute;
@apply after:inset-x-0;
@apply after:bottom-0;
@apply after:bg-dividerLight;
@apply after:z-10;
@apply after:h-0.25;
@apply after:content-DEFAULT;
.tab {
@apply relative;
@@ -226,44 +223,20 @@ const addTab = () => {
@apply hover:bg-primaryDark;
@apply hover:text-secondary;
@apply focus-visible:text-secondaryDark;
&::before {
@apply absolute;
@apply left-0;
@apply right-0;
@apply top-0;
@apply bg-transparent;
@apply z-2;
@apply h-0.5;
content: "";
}
// &::after {
// @apply absolute;
// @apply left-0;
// @apply right-0;
// @apply bottom-0;
// @apply bg-divider;
// @apply z-2;
// @apply h-0.25;
// content: "";
// }
&:focus::before {
@apply bg-divider;
}
@apply before:absolute;
@apply before:left-0;
@apply before:right-0;
@apply before:top-0;
@apply before:bg-transparent;
@apply before:z-2;
@apply before:h-0.5;
@apply before:content-DEFAULT;
@apply focus: before: bg-divider;
&.active {
@apply text-secondaryDark;
@apply bg-primary;
&::before {
@apply bg-accent;
}
// &::after {
// @apply bg-transparent;
// }
@apply before:bg-accent;
}
.close {

2
packages/hoppscotch-common/src/pages/profile.vue
View File

@@ -284,8 +284,8 @@
</SmartTabs>
</div>
</div>
<FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
</div>
<FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
</div>
</template>