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

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 {