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

refactor: minor ui improvements

Browse Source
This commit is contained in:
liyasthomas
2021-12-31 18:39:31 +05:30
parent 4791590869
commit 80956fbd27
22 changed files with 103 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/hoppscotch-app/components/app/Announcement.vue
View File

@@ -1,16 +1,14 @@
<template>
<div class="bg-error flex justify-between">
<span
class="flex py-2 px-4 transition justify-center text-tiny group relative items-center"
>
<i class="mr-2 material-icons">info_outline</i>
<span class="text-secondaryDark">
<span class="md:hidden">
{{ t("helpers.offline_short") }}
</span>
<span class="hidden md:inline">
{{ t("helpers.offline") }}
</span>
<div
class="relative flex items-center px-4 py-2 transition bg-error text-tiny group"
>
<i class="mr-2 material-icons">info_outline</i>
<span class="text-secondaryDark">
<span class="md:hidden">
{{ t("helpers.offline_short") }}
</span>
<span class="hidden md:inline">
{{ t("helpers.offline") }}
</span>
</span>
</div>

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

@@ -143,7 +143,7 @@
blank
@click.native="options.tippy().hide()"
/>
<div class="flex opacity-50 py-2 px-4">
<div class="flex px-4 py-2 opacity-50">
{{ `${t("app.name")} ${t("app.version")}` }}
</div>
</div>
@@ -170,7 +170,7 @@
@click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
/>
<span
class="transform transition"
class="transition transform"
:class="{
'rotate-180': SIDEBAR_ON_LEFT,
}"

4
packages/hoppscotch-app/components/app/Fuse.vue
View File

@@ -11,9 +11,9 @@
/>
<div
v-if="searchResults.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
>
<i class="opacity-75 pb-2 material-icons">manage_search</i>
<i class="pb-2 opacity-75 material-icons">manage_search</i>
<span class="my-2 text-center">
{{ t("state.nothing_found") }} "{{ search }}"
</span>

12
packages/hoppscotch-app/components/app/Header.vue
View File

@@ -1,9 +1,9 @@
<template>
<div>
<header
class="flex space-x-2 flex-1 py-2 px-2 items-center justify-between"
class="flex items-center justify-between flex-1 px-2 py-2 space-x-2"
>
<div class="space-x-2 inline-flex items-center">
<div class="inline-flex items-center space-x-2">
<ButtonSecondary
class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
label="HOPPSCOTCH"
@@ -11,7 +11,7 @@
/>
<AppGitHubStarButton class="mt-1.5 transition hidden sm:flex" />
</div>
<div class="space-x-2 inline-flex items-center">
<div class="inline-flex items-center space-x-2">
<ButtonSecondary
id="installPWA"
v-tippy="{ theme: 'tooltip' }"
@@ -47,7 +47,7 @@
:label="t('header.login')"
@click.native="showLogin = true"
/>
<div v-else class="space-x-2 inline-flex items-center">
<div v-else class="inline-flex items-center space-x-2">
<ButtonPrimary
v-tippy="{ theme: 'tooltip' }"
:title="t('team.invite_tooltip')"
@@ -85,8 +85,8 @@
svg="user"
/>
</template>
<div class="flex text-tiny px-2 flex-col">
<span class="inline-flex truncate font-semibold">
<div class="flex flex-col px-2 text-tiny">
<span class="inline-flex font-semibold truncate">
{{ currentUser.displayName }}
</span>
<span class="inline-flex truncate text-secondaryLight">

4
packages/hoppscotch-app/components/app/Interceptor.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col space-y-4 p-4">
<div class="flex flex-col p-4 space-y-4">
<div class="flex flex-col">
<h2 class="inline-flex font-semibold text-secondaryDark pb-1">
<h2 class="inline-flex pb-1 font-semibold text-secondaryDark">
{{ t("settings.interceptor") }}
</h2>
<p class="inline-flex text-tiny">

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

@@ -15,7 +15,7 @@
autocomplete="off"
name="command"
:placeholder="`${t('app.type_a_command_search')}`"
class="bg-transparent flex flex-shrink-0 text-base text-secondaryDark p-6"
class="flex flex-shrink-0 p-6 text-base bg-transparent text-secondaryDark"
/>
<div
class="flex flex-shrink-0 text-tiny text-secondaryLight px-4 pb-4 justify-between whitespace-nowrap overflow-auto hide-scrollbar <sm:hidden"
@@ -47,14 +47,14 @@
/>
<div
v-else
class="divide-dividerLight divide-y flex flex-col space-y-4 flex-1 overflow-auto hide-scrollbar"
class="flex flex-col flex-1 space-y-4 overflow-auto divide-y divide-dividerLight hide-scrollbar"
>
<div
v-for="(map, mapIndex) in mappings"
:key="`map-${mapIndex}`"
class="flex flex-col"
>
<h5 class="my-2 text-secondaryLight py-2 px-6">
<h5 class="px-6 py-2 my-2 text-secondaryLight">
{{ t(map.section) }}
</h5>
<AppPowerSearchEntry

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

@@ -1,18 +1,18 @@
<template>
<button
class="cursor-pointer flex flex-1 py-3 px-6 transition items-center 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)"
@keydown.enter="$emit('action', shortcut.action)"
>
<SmartIcon
class="mr-4 opacity-50 transition svg-icons"
class="mr-4 transition opacity-50 svg-icons"
:class="{ 'opacity-100 text-secondaryDark': active }"
:name="shortcut.icon"
/>
<span
class="flex font-medium flex-1 mr-4 transition"
class="flex flex-1 mr-4 transition"
:class="{ 'text-secondaryDark': active }"
>
{{ t(shortcut.label) }}

10
packages/hoppscotch-app/components/app/Share.vue
View File

@@ -5,11 +5,11 @@
@close="hideModal"
>
<template #body>
<p class="text-secondaryLight mb-8 px-2">
<p class="px-2 mb-8 text-secondaryLight">
{{ t("app.invite_description") }}
</p>
<div class="flex flex-col space-y-2 px-2">
<div class="grid gap-4 grid-cols-3">
<div class="flex flex-col px-2 space-y-2">
<div class="grid grid-cols-3 gap-4">
<a
v-for="(platform, index) in platforms"
:key="`platform-${index}`"
@@ -17,13 +17,13 @@
target="_blank"
class="share-link"
>
<SmartIcon :name="platform.icon" class="h-6 w-6" />
<SmartIcon :name="platform.icon" class="w-6 h-6" />
<span class="mt-3">
{{ platform.name }}
</span>
</a>
<button class="share-link" @click="copyAppLink">
<SmartIcon class="h-6 text-xl w-6" :name="copyIcon" />
<SmartIcon class="w-6 h-6 text-xl" :name="copyIcon" />
<span class="mt-3">
{{ t("app.copy") }}
</span>

20
packages/hoppscotch-app/components/app/Shortcuts.vue
View File

@@ -1,28 +1,28 @@
<template>
<AppSlideOver :show="show" @close="close()">
<template #content>
<div class="bg-primary flex flex-col top-0 z-10 sticky">
<div class="sticky top-0 z-10 flex flex-col bg-primary">
<div
class="border-b border-dividerLight flex p-2 items-center justify-between"
class="flex items-center justify-between p-2 border-b border-dividerLight"
>
<h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
<ButtonSecondary svg="x" @click.native="close()" />
</div>
<div class="border-b border-dividerLight flex flex-col py-4 px-6">
<div class="flex flex-col px-6 py-4 border-b border-dividerLight">
<input
v-model="filterText"
type="search"
autocomplete="off"
class="bg-primaryLight border border-dividerLight rounded flex py-2 px-4 focus-visible:border-divider"
class="flex px-4 py-2 border rounded bg-primaryLight border-dividerLight focus-visible:border-divider"
:placeholder="`${t('action.search')}`"
/>
</div>
</div>
<div v-if="filterText" class="divide-dividerLight divide-y flex flex-col">
<div v-if="filterText" class="flex flex-col divide-y divide-dividerLight">
<div
v-for="(map, mapIndex) in searchResults"
:key="`map-${mapIndex}`"
class="space-y-4 py-4 px-6"
class="px-6 py-4 space-y-4"
>
<h1 class="font-semibold text-secondaryDark">
{{ t(map.item.section) }}
@@ -35,19 +35,19 @@
</div>
<div
v-if="searchResults.length === 0"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
>
<i class="opacity-75 pb-2 material-icons">manage_search</i>
<i class="pb-2 opacity-75 material-icons">manage_search</i>
<span class="my-2 text-center">
{{ t("state.nothing_found") }} "{{ filterText }}"
</span>
</div>
</div>
<div v-else class="divide-dividerLight divide-y flex flex-col">
<div v-else class="flex flex-col divide-y divide-dividerLight">
<div
v-for="(map, mapIndex) in mappings"
:key="`map-${mapIndex}`"
class="space-y-4 py-4 px-6"
class="px-6 py-4 space-y-4"
>
<h1 class="font-semibold text-secondaryDark">
{{ t(map.section) }}

2
packages/hoppscotch-app/components/app/ShortcutsEntry.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex py-1 items-center">
<div class="flex items-center py-1">
<span class="flex flex-1 mr-4">
{{ t(shortcut.label) }}
</span>

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

@@ -1,6 +1,6 @@
<template>
<aside class="flex h-full justify-between md:flex-col">
<nav class="flex flex-nowrap flex-1 md:flex-col md:flex-none">
<aside class="flex justify-between h-full md:flex-col">
<nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none">
<NuxtLink
v-for="(navigation, index) in primaryNavigation"
:key="`navigation-${index}`"
@@ -100,7 +100,6 @@ const primaryNavigation = [
span {
@apply mt-2;
@apply font-medium;
@apply text-tiny;
}

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

@@ -1,16 +1,16 @@
<template>
<div>
<transition v-if="show" name="fade" appear>
<div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()">
<div class="fixed inset-0 z-20 transition-opacity" @keydown.esc="close()">
<div
class="bg-primaryLight opacity-90 inset-0 absolute"
class="absolute inset-0 bg-primaryLight opacity-90"
tabindex="0"
@click="close()"
></div>
</div>
</transition>
<aside
class="bg-primary flex flex-col h-full max-w-full transform transition top-0 ease-in-out right-0 w-96 z-30 duration-300 fixed overflow-auto hide-scrollbar"
class="fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto transition duration-300 ease-in-out transform bg-primary w-96 hide-scrollbar"
:class="show ? 'shadow-xl translate-x-0' : 'translate-x-full'"
>
<slot name="content"></slot>