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

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 {