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

chore: hoppscotch-ui improvements (#3497)

Browse Source 
Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
This commit is contained in:
Anwarul Islam
2023-12-06 00:38:44 +06:00
committed by GitHub
parent 18864bfecf
commit 6fa722df7b
69 changed files with 726 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
packages/hoppscotch-ui/src/assets/scss/histoire.scss
View File

@@ -5,18 +5,17 @@
@mixin base-theme {
--font-sans: "Inter Variable", sans-serif;
--font-icon: "Material Symbols Rounded Variable";
--font-mono: "Roboto Mono Variable", monospace;
--font-size-body: 0.75rem;
--font-size-tiny: 0.688rem;
--font-size-tiny: 0.625rem;
--line-height-body: 1rem;
--upper-primary-sticky-fold: 4.125rem;
--upper-primary-sticky-fold: 4rem;
--upper-secondary-sticky-fold: 6.188rem;
--upper-tertiary-sticky-fold: 8.25rem;
--upper-fourth-sticky-fold: 10.2rem;
--upper-mobile-primary-sticky-fold: 6.625rem;
--upper-mobile-secondary-sticky-fold: 8.688rem;
--upper-mobile-sticky-fold: 10.75rem;
--upper-mobile-primary-sticky-fold: 6.75rem;
--upper-mobile-secondary-sticky-fold: 8.813rem;
--upper-mobile-sticky-fold: 10.875rem;
--upper-mobile-tertiary-sticky-fold: 8.25rem;
--lower-primary-sticky-fold: 3rem;
--lower-secondary-sticky-fold: 5.063rem;
@@ -78,23 +77,13 @@
}
:root {
@include base-theme;
@include dark-theme;
@include green-theme;
@include base-theme;
@include dark-theme;
@include green-theme;
@apply antialiased;
accent-color: var(--accent-color);
font-variant-ligatures: common-ligatures;
// Colors
--info-color: #ec4899;
--success-color: #10b981;
--blue-color: #3b82f6;
--warning-color: #f59e0b;
--cl-error-color: #ef4444;
--sv-error-color: #dc2626;
}
::-webkit-scrollbar-track {
@@ -123,7 +112,7 @@ input::placeholder,
textarea::placeholder,
.cm-placeholder {
@apply text-secondary;
@apply opacity-50;
@apply opacity-50 #{!important};
}
input,
@@ -142,7 +131,7 @@ body {
@apply font-medium;
@apply select-none;
@apply overflow-x-hidden;
@apply leading-body;
@apply leading-body #{!important};
animation: fade 300ms forwards;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
@@ -240,7 +229,7 @@ a {
@apply font-semibold;
@apply px-2 py-1;
@apply truncate;
@apply leading-normal;
@apply leading-body;
@apply items-center;
kbd {
@@ -287,7 +276,7 @@ a {
@apply overflow-y-auto;
@apply text-body text-secondary;
@apply p-2;
@apply leading-normal;
@apply leading-body;
@apply focus:outline-none;
scroll-behavior: smooth;
@@ -319,7 +308,7 @@ a {
hr {
@apply border-b border-dividerLight;
@apply my-2;
@apply my-2 #{!important};
}
.heading {
@@ -408,44 +397,28 @@ 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-current;
@apply after:right-3;
@apply after:content-["\e5cf"];
@apply after:text-lg;
}
.info-response {
color: var(--info-color);
color: var(--status-info-color);
}
.success-response {
color: var(--success-color);
color: var(--status-success-color);
}
.redir-response {
color: var(--warning-color);
.redirect-response {
color: var(--status-redirect-color);
}
.cl-error-response {
color: var(--cl-error-color);
.critical-error-response {
color: var(--status-critical-error-color);
}
.sv-error-response {
color: var(--sv-error-color);
.server-error-response {
color: var(--status-server-error-color);
}
.missing-data-response {
@apply text-secondaryLight;
color: var(--status-missing-data-color);
}
.toasted-container {
@@ -595,12 +568,12 @@ pre.ace_editor {
@apply inline-flex;
@apply font-sans;
@apply text-tiny;
@apply bg-divider;
@apply bg-dividerLight;
@apply rounded;
@apply ml-2;
@apply px-1;
@apply min-w-5;
@apply min-h-5;
@apply min-w-[1.25rem];
@apply min-h-[1.25rem];
@apply items-center;
@apply justify-center;
@apply border border-dividerDark;

2
packages/hoppscotch-ui/src/components/button/Primary.vue
View File

@@ -40,7 +40,7 @@
label ? (reverse ? 'ml-2' : 'mr-2') : '',
]"
/>
<div class="max-w-54 truncate">
<div class="max-w-[16rem] truncate">
{{ label }}
</div>
<div v-if="shortcut.length" class="<sm:hidden">

2
packages/hoppscotch-ui/src/components/button/Secondary.vue
View File

@@ -41,7 +41,7 @@
label ? (reverse ? 'ml-2' : 'mr-2') : '',
]"
/>
<div class="truncate max-w-54">
<div class="truncate max-w-[16rem]">
{{ label }}
</div>
<div v-if="shortcut.length" class="<sm:hidden">

55
packages/hoppscotch-ui/src/components/smart/Checkbox.vue
View File

@@ -6,51 +6,62 @@
@click="emit('change')"
>
<input
id="checkbox"
:id="checkboxID"
type="checkbox"
name="checkbox"
:name="name"
class="checkbox"
:checked="on"
@change="emit('change')"
/>
<label
for="checkbox"
:for="checkboxID"
class="pl-0 font-semibold truncate align-middle cursor-pointer"
:class="{
'before:mr-2': labelSlot.default
}"
>
<slot></slot>
</label>
</div>
</template>
<script setup lang="ts">
import { useSlots } from 'vue';
<script lang="ts">
/*
This checkboxIDCounter is tracked in the global scope in order to ensure that each checkbox has a unique ID.
When we use this component multiple times on the same page, we need to ensure that each checkbox has a unique ID.
This is because the label's for attribute needs to match the checkbox's id attribute.
That's why we use a global counter that increments each time we use this component.
*/
let checkboxIDCounter = 564275
</script>
<script setup lang="ts">
// Unique ID for checkbox
const checkboxID = `checkbox-${checkboxIDCounter++}`
defineProps({
on: {
type: Boolean,
default: false,
},
name: {
type: String,
default: "checkbox",
},
})
const emit = defineEmits<{
(e: "change"): void
}>()
// used to check if the default slot is used and add a margin to the label if exists
const labelSlot = useSlots()
</script>
<style lang="scss" scoped>
.checkbox[type="checkbox"] {
@apply relative;
@apply appearance-none;
@apply hidden;
& + label {
@apply inline-flex items-center justify-center;
@apply cursor-pointer;
@apply relative;
&::before {
@apply border-2 border-divider;
@@ -62,9 +73,22 @@ const labelSlot = useSlots()
@apply text-transparent;
@apply h-4;
@apply w-4;
@apply font-icon;
@apply mr-2;
@apply transition;
@apply content-["\e5ca"];
content: "";
}
&::after {
content: "";
border: solid;
border-width: 0 1.9px 1.9px 0;
height: 0.6rem;
width: 0.3rem;
left: 0.35rem;
position: absolute;
top: 2px;
transform: rotate(45deg);
opacity: 0;
}
}
@@ -73,5 +97,10 @@ const labelSlot = useSlots()
@apply border-accent;
@apply text-accentContrast;
}
&:checked + label::after {
@apply text-accentContrast;
opacity: 1;
}
}
</style>

25
packages/hoppscotch-ui/src/components/smart/Expand.vue
View File

@@ -1,12 +1,23 @@
<template>
<div class="relative flex flex-col space-y-2 overflow-hidden" :class="expand ? 'h-full' : 'max-h-32'">
<div
class="relative flex flex-col space-y-2 overflow-hidden"
:class="expand ? 'h-full' : 'max-h-32'"
>
<slot name="body"></slot>
<div class="sticky inset-x-0 bottom-0 flex items-center justify-center flex-shrink-0 overflow-x-auto">
<HoppButtonSecondary :icon="expand ? IconChevronUp : IconChevronDown" :label="
expand
? less ?? t?.('action.less') ?? 'Less'
: more ?? t?.('action.more') ?? 'More'
" filled rounded @click="expand = !expand" />
<div
class="sticky inset-x-0 bottom-0 flex items-center justify-center flex-shrink-0 overflow-x-auto"
>
<HoppButtonSecondary
:icon="expand ? IconChevronUp : IconChevronDown"
:label="
expand
? less ?? t?.('action.less') ?? 'Less'
: more ?? t?.('action.more') ?? 'More'
"
filled
rounded
@click="expand = !expand"
/>
</div>
</div>
</template>

2
packages/hoppscotch-ui/src/components/smart/FileChip.vue
View File

@@ -3,7 +3,7 @@
class="inline-flex items-center space-x-1 justify-center rounded px-2 bg-primaryDark"
>
<IconLucideFile class="opacity-75 svg-icons" />
<span class="truncate max-w-54"><slot></slot></span>
<span class="truncate max-w-[16rem]"><slot></slot></span>
</span>
</template>

45
packages/hoppscotch-ui/src/components/smart/Item.vue
View File

@@ -1,5 +1,8 @@
<template>
<HoppSmartLink :to="to" :exact="exact" :blank="blank"
<HoppSmartLink
:to="to"
:exact="exact"
:blank="blank"
class="inline-flex items-center flex-shrink-0 px-4 py-2 rounded transition hover:bg-primaryDark hover:text-secondaryDark focus:outline-none focus-visible:bg-primaryDark focus-visible:text-secondaryDark"
:class="[
{ 'opacity-75 cursor-not-allowed': disabled },
@@ -10,16 +13,32 @@
'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
outline,
},
]" :disabled="disabled" :tabindex="loading ? '-1' : '0'" role="menuitem">
<span v-if="!loading" class="inline-flex items-center" :class="{ 'self-start': !!infoIcon }">
<component :is="icon" v-if="icon" class="opacity-75 svg-icons" :class="[
label ? (reverse ? 'ml-4' : 'mr-4') : '',
{ 'text-accent': active },
]" />
]"
:disabled="disabled"
:tabindex="loading ? '-1' : '0'"
role="menuitem"
>
<span
v-if="!loading"
class="inline-flex items-center"
:class="{ 'self-start': !!infoIcon }"
>
<component
:is="icon"
v-if="icon"
class="opacity-75 svg-icons"
:class="[
label ? (reverse ? 'ml-4' : 'mr-4') : '',
{ 'text-accent': active },
]"
/>
</span>
<HoppSmartSpinner v-else class="mr-4 text-secondaryDark" />
<div class="inline-flex items-start flex-1 truncate" :class="{ 'flex-col': description }">
<div class="font-semibold truncate max-w-54">
<div
class="inline-flex items-start flex-1 truncate"
:class="{ 'flex-col': description }"
>
<div class="font-semibold truncate max-w-[16rem]">
{{ label }}
</div>
<p v-if="description" class="my-2 text-left text-secondaryLight">
@@ -33,7 +52,11 @@
:class="{ 'text-accent': activeInfoIcon }"
/>
<div v-if="shortcut.length" class="ml-4 <sm:hidden font-medium">
<kbd v-for="(key, index) in shortcut" :key="`key-${index}`" class="-mr-2 shortcut-key">
<kbd
v-for="(key, index) in shortcut"
:key="`key-${index}`"
class="-mr-2 shortcut-key"
>
{{ key }}
</kbd>
</div>
@@ -48,7 +71,7 @@ import { defineComponent } from "vue"
export default defineComponent({
components: {
HoppSmartLink,
HoppSmartSpinner
HoppSmartSpinner,
},
props: {
to: {

1
packages/hoppscotch-ui/src/components/smart/Modal.vue
View File

@@ -44,7 +44,6 @@
</h3>
<span class="flex items-center">
<slot name="actions"></slot>
<kbd class="shortcut-key mr-2">ESC</kbd>
<HoppButtonSecondary
v-if="dimissible"
v-tippy="{ theme: 'tooltip', delay: [500, 20] }"

4
packages/hoppscotch-ui/src/components/smart/Picture.vue
View File

@@ -19,7 +19,7 @@
</template>
<script setup lang="ts">
import { Avatar } from "@boringer-avatars/vue3";
import { Avatar } from "@boringer-avatars/vue3"
withDefaults(
defineProps<{
@@ -32,7 +32,7 @@ withDefaults(
name: "",
indicator: false,
indicatorStyles: "bg-green-500",
size: 24,
size: 22,
}
)
</script>

30
packages/hoppscotch-ui/src/components/smart/SelectWrapper.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<div class="select-wrapper">
<span class="down-icon text-xs">
<IconChevronDown />
</span>
<slot />
</div>
</template>
<script setup lang="ts">
import IconChevronDown from '~icons/lucide/chevron-down'
</script>
<style scoped lang="scss">
.select-wrapper {
@apply flex flex-1;
@apply relative;
}
.down-icon {
@apply absolute;
@apply flex;
@apply inset-y-0;
@apply items-center;
@apply justify-center;
@apply pointer-events-none;
@apply text-current;
@apply right-3;
}
</style>

2
packages/hoppscotch-ui/src/components/smart/Table.vue
View File

@@ -26,7 +26,7 @@
v-for="cellHeading in headings"
:key="cellHeading.key"
@click="!cellHeading.preventClick && onRowClicked(rowData)"
class="max-w-40 pl-6 py-1"
class="max-w-[10rem] pl-6 py-1"
>
<!-- Dynamic column slot -->
<slot :name="cellHeading.key" :item="rowData">

6
packages/hoppscotch-ui/src/components/smart/Tabs.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
class="flex h-full flex-1 flex-nowrap"
:class="{ 'h-auto flex-col': !vertical }"
:class="{ '!h-auto !flex-col': !vertical }"
>
<div
class="tabs relative border-dividerLight"
@@ -221,8 +221,8 @@ const selectTab = (id: string) => {
@apply items-center;
@apply justify-center;
@apply px-1;
@apply leading-[15px];
@apply min-w-4;
@apply min-w-[1rem];
@apply h-4;
@apply ml-2;
@apply text-[8px];
@apply border border-divider;

9
packages/hoppscotch-ui/src/components/smart/Windows.vue
View File

@@ -24,7 +24,7 @@
<button
:key="`removable-tab-${tabID}`"
:id="`removable-tab-${tabID}`"
class="px-2 tab group"
class="tab group"
:class="[{ active: modelValue === tabID }]"
:aria-label="tabMeta.label || ''"
role="button"
@@ -81,11 +81,11 @@
</draggable>
</div>
<div
class="sticky right-0 flex items-center justify-center flex-shrink-0 overflow-x-auto z-14"
class="sticky right-0 flex items-center justify-center flex-shrink-0 overflow-x-auto z-20"
>
<span
v-if="canAddNewTab"
class="flex items-center justify-center h-full px-3 bg-primaryLight z-8"
class="flex items-center justify-center h-full px-3 bg-primaryLight z-[8]"
>
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
@@ -382,9 +382,10 @@ watch(
.tab {
@apply relative;
@apply flex;
@apply py-2;
@apply p-2;
@apply font-semibold;
@apply w-46;
@apply h-12;
@apply transition;
@apply flex-1;
@apply items-center;

1
packages/hoppscotch-ui/src/components/smart/index.ts
View File

@@ -24,3 +24,4 @@ export { default as HoppSmartPicture } from "./Picture.vue"
export { default as HoppSmartPlaceholder } from "./Placeholder.vue"
export { default as HoppSmartTree } from "./Tree.vue"
export { default as HoppSmartTreeBranch } from "./TreeBranch.vue"
export { default as HoppSmartSelectWrapper } from "./SelectWrapper.vue"

2
packages/hoppscotch-ui/src/stories/Table.story.vue
View File

@@ -29,7 +29,7 @@
<td
v-for="cellHeading in headings"
:key="cellHeading.key"
class="max-w-40 pl-6 py-1"
class="max-w-[10rem] pl-6 py-1"
>
{{ item[cellHeading.key] ?? "-" }}
</td>