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

refactor: cleanup

Browse Source
This commit is contained in:
liyasthomas
2021-07-30 13:52:43 +05:30
parent 2891da3c74
commit 203b45f4d5
18 changed files with 139 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/icons/graphql.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="64" width="64" viewBox="0 0 29.999 30" fill="currentColor"><path d="M4.08 22.864l-1.1-.636L15.248.98l1.1.636z"/><path d="M2.727 20.53h24.538v1.272H2.727z"/><path d="M15.486 28.332L3.213 21.246l.636-1.1 12.273 7.086zm10.662-18.47L13.874 2.777l.636-1.1 12.273 7.086z"/><path d="M3.852 9.858l-.636-1.1L15.5 1.67l.636 1.1z"/><path d="M25.922 22.864l-12.27-21.25 1.1-.636 12.27 21.25zM3.7 7.914h1.272v14.172H3.7zm21.328 0H26.3v14.172h-1.272z"/><path d="M15.27 27.793l-.555-.962 10.675-6.163.555.962z"/><path d="M27.985 22.5a2.68 2.68 0 01-3.654.981 2.68 2.68 0 01-.981-3.654 2.68 2.68 0 013.654-.981 2.665 2.665 0 01.98 3.654M6.642 10.174a2.68 2.68 0 01-3.654.981A2.68 2.68 0 012.007 7.5a2.68 2.68 0 013.654-.981 2.68 2.68 0 01.981 3.654M2.015 22.5a2.68 2.68 0 01.981-3.654 2.68 2.68 0 013.654.981 2.68 2.68 0 01-.981 3.654c-1.287.735-2.92.3-3.654-.98m21.343-12.326a2.68 2.68 0 01.981-3.654 2.68 2.68 0 013.654.981 2.68 2.68 0 01-.981 3.654 2.68 2.68 0 01-3.654-.981M15 30a2.674 2.674 0 112.674-2.673A2.68 2.68 0 0115 30m0-24.652a2.67 2.67 0 01-2.674-2.674 2.67 2.67 0 115.347 0A2.67 2.67 0 0115 5.347"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

12
assets/scss/styles.scss
View File

@@ -46,6 +46,7 @@ body {
@apply select-none;
@apply overflow-x-hidden;
overflow: overlay;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
@@ -146,6 +147,10 @@ a {
@apply max-h-48;
@apply items-stretch;
@apply overflow-y-auto;
&::-webkit-scrollbar {
@apply hidden;
}
}
hr {
@@ -305,8 +310,9 @@ input[type="checkbox"] {
&.toasted-primary {
@apply bg-tooltip;
@apply text-primary text-xs;
@apply !font-semibold;
@apply justify-start;
@apply shadow;
@apply font-semibold;
.action {
@apply ml-auto;
@@ -321,12 +327,12 @@ input[type="checkbox"] {
}
&.error {
@apply !bg-red-400;
@apply !bg-red-200;
@apply !text-red-800;
}
&.success {
@apply !bg-green-400;
@apply !bg-green-200;
@apply !text-green-800;
}
}

9
components/app/Announcement.vue
View File

@@ -1,12 +1,5 @@
<template>
<div
class="
bg-primary bg-dividerLight
border-b border-divider
flex
justify-between
"
>
<div class="bg-dividerLight border-b border-divider flex justify-between">
<span class="flex">
<SmartLink
to="https://forms.gle/8yFiEynXB7h477Ns6"

4
components/app/Footer.vue
View File

@@ -26,7 +26,7 @@
v-tippy="{ theme: 'tooltip' }"
icon="keyboard"
:title="$t('shortcuts')"
:shortcut="[getSpecialKey(), '/']"
:shortcut="['?']"
@click.native="showShortcuts = true"
/>
<ButtonSecondary
@@ -58,7 +58,6 @@ import {
toggleSetting,
} from "~/newstore/settings"
import type { KeysMatching } from "~/types/ts-utils"
import { getPlatformSpecialKey } from "~/helpers/platformutils"
type SettingsType = typeof defaultSettings
@@ -106,7 +105,6 @@ export default defineComponent({
// fallback
}
},
getSpecialKey: getPlatformSpecialKey,
},
})
</script>

7
components/app/Header.vue
View File

@@ -47,7 +47,6 @@
'<br>' +
`<sub>${currentUser.email || 'Email not found'}</sub>`
"
indicator
/>
<TabPrimary
v-else
@@ -56,12 +55,6 @@
icon="account_circle"
/>
</template>
<SmartItem
to="/profile"
icon="person"
:label="$t('profile')"
@click.native="$refs.user.tippy().hide()"
/>
<SmartItem
to="/settings"
icon="settings"

19
components/app/Sidenav.vue
View File

@@ -7,7 +7,12 @@
:to="localePath(navigation.target)"
class="nav-link"
>
<i class="material-icons">{{ navigation.icon }}</i>
<i v-if="navigation.icon" class="material-icons">
{{ navigation.icon }}
</i>
<div v-if="navigation.svg" class="h-4 w-4">
<SmartIcon :name="navigation.svg" class="svg-icons" />
</div>
<span>{{ navigation.title }}</span>
</nuxt-link>
</nav>
@@ -19,13 +24,11 @@ export default {
data() {
return {
primaryNavigation: [
{ target: "index", icon: "apps", title: "App" },
{ target: "index", icon: "settings_ethernet", title: "REST" },
{ target: "graphql", svg: "graphql", title: "GraphQL" },
{ target: "realtime", icon: "language", title: "Realtime" },
{ target: "graphql", icon: "code", title: "GraphQL" },
{ target: "documentation", icon: "book", title: "Doc" },
{ target: "profile", icon: "person", title: "Profile" },
{ target: "settings", icon: "settings", title: "Settings" },
{ target: "home", icon: "home", title: "Home" },
],
}
},
@@ -42,7 +45,8 @@ export default {
@apply hover:bg-primaryDark;
@apply hover:text-secondaryDark;
.material-icons {
.material-icons,
.svg-icons {
@apply opacity-75;
}
@@ -55,7 +59,8 @@ export default {
@apply text-accent;
@apply hover:text-accent;
.material-icons {
.material-icons,
.svg-icons {
@apply opacity-100;
}
}

14
components/button/Primary.vue
View File

@@ -41,16 +41,22 @@
>
<i
v-if="icon"
:class="label ? (reverse ? 'ml-2' : 'mr-2') : ''"
class="material-icons"
:class="[
'material-icons',
{ '!text-2xl': large },
label ? (reverse ? 'ml-2' : 'mr-2') : '',
]"
>
{{ icon }}
</i>
<SmartIcon
v-if="svg"
:name="svg"
:class="label ? (reverse ? 'ml-4' : 'mr-4') : ''"
class="svg-icons"
:class="[
'svg-icons',
{ '!h-6 !w-6': large },
label ? (reverse ? 'ml-2' : 'mr-2') : '',
]"
/>
{{ label }}
<div v-if="shortcut.length && SHORTCUT_INDICATOR" class="ml-2">

14
components/button/Secondary.vue
View File

@@ -31,16 +31,22 @@
>
<i
v-if="icon"
:class="label ? (reverse ? 'ml-2' : 'mr-2') : ''"
class="material-icons"
:class="[
'material-icons',
{ '!text-2xl': large },
label ? (reverse ? 'ml-2' : 'mr-2') : '',
]"
>
{{ icon }}
</i>
<SmartIcon
v-if="svg"
:name="svg"
:class="label ? (reverse ? 'ml-2' : 'mr-2') : ''"
class="svg-icons"
:class="[
'svg-icons',
{ '!h-6 !w-6': large },
label ? (reverse ? 'ml-2' : 'mr-2') : '',
]"
/>
{{ label }}
<div v-if="shortcut.length && SHORTCUT_INDICATOR" class="ml-2">

2
components/http/CodegenModal.vue
View File

@@ -79,7 +79,7 @@
:icon="copyIcon"
@click.native="copyRequestCode"
/>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonSecondary :label="$t('dismiss')" @click.native="hideModal" />
</template>
</SmartModal>
</template>

4
components/http/Request.vue
View File

@@ -22,10 +22,10 @@
font-semibold font-mono
h-8
text-secondaryDark
min-w-28
py-1
px-4
transition
w-28
truncate
focus:outline-none focus:border-accent
"
@@ -72,7 +72,7 @@
<div class="flex">
<ButtonPrimary
id="send"
class="rounded-none w-18"
class="rounded-none min-w-18"
:label="!loading ? $t('send') : $t('cancel')"
:shortcut="[getSpecialKey(), 'G']"
@click.native="!loading ? newSendRequest() : cancelRequest()"

6
components/smart/Modal.vue
View File

@@ -9,7 +9,7 @@
>
<transition name="fade" appear>
<div
class="bg-primaryDark inset-0 transition-opacity fixed"
class="bg-primaryDark opacity-100 inset-0 transition fixed"
@touchstart="!dialog ? close() : null"
@touchend="!dialog ? close() : null"
@mouseup="!dialog ? close() : null"
@@ -33,9 +33,9 @@
<div
class="
bg-primary
rounded
shadow-xl
rounded-lg
m-4
shadow-lg
text-left
w-full
p-4

103
components/teams/Edit.vue
View File

@@ -2,7 +2,9 @@
<SmartModal v-if="show" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("edit_team") }}</h3>
<div>
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template>
<template #body>
<div class="flex flex-col px-2">
@@ -17,29 +19,43 @@
:placeholder="editingTeam.name"
@keyup.enter="saveTeam"
/>
<div class="flex flex-1 justify-between items-center">
<label for="memberList" class="font-semibold px-4 pt-4 pb-4">
{{ $t("team_member_list") }}
</label>
<ul
<div>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addTeamMember"
/>
</div>
</div>
<div class="border-divider border rounded">
<div
v-for="(member, index) in members"
:key="`member-${index}`"
class="
divide-y divide-dashed divide-divider
border-b border-divider
md:divide-x md:divide-y-0
divide-x divide-dividerLight
border-b border-dividerLight
flex
"
:class="{ 'border-t': index == 0 }"
>
<li>
<input
class="input"
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
py-2
px-4
focus:outline-none
"
:placeholder="$t('email')"
:name="'param' + index"
:value="member.user.email"
readonly
/>
</li>
<li>
<span class="select-wrapper">
<tippy
ref="options"
@@ -51,7 +67,15 @@
>
<template #trigger>
<input
class="input"
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
py-2
px-4
focus:outline-none
"
:placeholder="$t('permissions')"
:name="'value' + index"
:value="
@@ -85,9 +109,7 @@
/>
</tippy>
</span>
</li>
<div>
<li>
<ButtonSecondary
id="member"
v-tippy="{ theme: 'tooltip' }"
@@ -96,28 +118,32 @@
color="red"
@click.native="removeExistingTeamMember(member.user.uid)"
/>
</li>
</div>
</ul>
<ul
</div>
<div
v-for="(member, index) in newMembers"
:key="`member-${index}`"
class="
divide-y divide-dashed divide-divider
border-b border-divider
md:divide-x md:divide-y-0
divide-x divide-dividerLight
border-b border-dividerLight
flex
"
>
<li>
<input
v-model="member.key"
class="input"
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
py-2
px-4
focus:outline-none
"
:placeholder="$t('email')"
:name="'param' + index"
:name="'member' + index"
autofocus
/>
</li>
<li>
<span class="select-wrapper">
<tippy
ref="memberOptions"
@@ -129,7 +155,15 @@
>
<template #trigger>
<input
class="input"
class="
bg-primaryLight
flex
font-semibold font-mono
flex-1
py-2
px-4
focus:outline-none
"
:placeholder="$t('permissions')"
:name="'value' + index"
:value="
@@ -144,28 +178,26 @@
label="OWNER"
@click.native="
member.value = 'OWNER'
$refs.options.tippy().hide()
$refs.memberOptions.tippy().hide()
"
/>
<SmartItem
label="EDITOR"
@click.native="
member.value = 'EDITOR'
$refs.options.tippy().hide()
$refs.memberOptions.tippy().hide()
"
/>
<SmartItem
label="VIEWER"
@click.native="
member.value = 'VIEWER'
$refs.options.tippy().hide()
$refs.memberOptions.tippy().hide()
"
/>
</tippy>
</span>
</li>
<div>
<li>
<ButtonSecondary
id="member"
v-tippy="{ theme: 'tooltip' }"
@@ -174,18 +206,9 @@
color="red"
@click.native="removeTeamMember(index)"
/>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addTeamMember"
/>
</li>
</ul>
</div>
</div>
</div>
</template>
<template #footer>

2
components/teams/Team.vue
View File

@@ -3,7 +3,7 @@
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
title="team.myRole === 'OWNER' ? $t('edit') : ''"
:title="team.myRole === 'OWNER' ? $t('edit') : ''"
icon="group"
:label="team.name"
@click.native="team.myRole === 'OWNER' ? $emit('edit-team') : ''"

2
components/teams/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<AppSection label="teams">
<div class="flex flex-col">
<label>{{ $t("teams") }}</label>
<legend class="font-bold text-secondaryDark">{{ $t("teams") }}</legend>
<div v-if="currentUser"></div>
<div v-else>
<label>{{ $t("login_with") }}</label>

38
pages/profile.vue
View File

@@ -1,38 +0,0 @@
<template>
<div>
<ButtonPrimary
v-if="currentUser === null"
label="Get Started"
@click.native="showLogin = true"
/>
<div v-if="currentBackendUser && currentBackendUser.eaInvited">
<Teams />
</div>
{{ hideRightPane }}
<div v-if="!hideRightPane">hide this thingy</div>
<FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
</div>
</template>
<script>
import { currentUser$ } from "~/helpers/fb/auth"
import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
export default {
props: { hideRightPane: { type: Boolean, default: false } },
data() {
return {
showLogin: false,
currentBackendUser: null,
}
},
subscriptions() {
return {
currentUser: currentUser$,
// Teams feature flag
currentBackendUser: currentUserInfo$,
}
},
}
</script>

8
pages/settings.vue
View File

@@ -88,6 +88,9 @@
</div>
</div>
</fieldset>
<fieldset v-if="currentBackendUser && currentBackendUser.eaInvited">
<Teams />
</fieldset>
</div>
</div>
</div>
@@ -338,6 +341,7 @@
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api"
import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
import {
hasExtensionInstalled,
hasChromeExtensionInstalled,
@@ -373,6 +377,10 @@ export default defineComponent({
LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
ZEN_MODE: useSetting("ZEN_MODE"),
currentUser: useReadonlyStream(currentUser$, currentUser$.value),
currentBackendUser: useReadonlyStream(
currentUserInfo$,
currentUserInfo$.value
),
}
},
data() {

62
static/icons/github.svg
View File

@@ -1,62 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 24 24"
xml:space="preserve"
width="24"
height="24"
sodipodi:docname="github.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata13"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs11" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1600"
inkscape:window-height="847"
id="namedview9"
showgrid="false"
inkscape:zoom="16.342125"
inkscape:cx="-6.175781"
inkscape:cy="11.228523"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" />
<style
type="text/css"
id="style2">
.st0{opacity:0.3;enable-background:new ;}
</style>
<circle
class="st0"
cx="10"
cy="10"
r="10"
id="circle4"
style="opacity:0.3;enable-background:new" />
<path
d="M 8.9,0.1 C 4.3,0.6 0.6,4.3 0.1,8.8 -0.4,13.5 2.3,17.7 6.4,19.3 6.7,19.4 7,19.2 7,18.8 v -1.6 c 0,0 -0.4,0.1 -0.9,0.1 C 4.7,17.3 4.1,16.1 4,15.4 3.9,15 3.7,14.7 3.4,14.4 3.1,14.3 3,14.3 3,14.2 3,14 3.3,14 3.4,14 4,14 4.5,14.7 4.7,15 5.2,15.8 5.8,16 6.1,16 6.5,16 6.8,15.9 7,15.8 7.1,15.1 7.4,14.4 8,14 5.7,13.5 4,12.2 4,10 4,8.9 4.5,7.8 5.2,7 5.1,6.8 5,6.3 5,5.6 5,5.2 5,4.6 5.3,4 5.3,4 6.7,4 8.1,5.3 8.6,5.1 9.3,5 10,5 10.7,5 11.4,5.1 12,5.3 13.3,4 14.8,4 14.8,4 15,4.6 15,5.2 15,5.6 15,6.4 14.9,6.8 14.8,7 c 0.7,0.8 1.2,1.8 1.2,3 0,2.2 -1.7,3.5 -4,4 0.6,0.5 1,1.4 1,2.3 v 2.6 c 0,0.3 0.3,0.6 0.7,0.5 3.7,-1.5 6.3,-5.1 6.3,-9.3 0,-6 -5.1,-10.7 -11.1,-10 z"
id="path6"
inkscape:connector-curvature="0"
style="fill:#fff" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

74
static/icons/graphql.svg
View File

@@ -1,74 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 400 400">
<g>
<g>
<g>
<rect x="122" y="-0.4" transform="matrix(-0.866 -0.5 0.5 -0.866 163.3196 363.3136)" fill="#FFFFFF" width="16.6"
height="320.3"/>
</g>
</g>
<g>
<g>
<rect x="39.8" y="272.2" fill="#FFFFFF" width="320.3" height="16.6"/>
</g>
</g>
<g>
<g>
<rect x="37.9" y="312.2" transform="matrix(-0.866 -0.5 0.5 -0.866 83.0693 663.3409)" fill="#FFFFFF" width="185"
height="16.6"/>
</g>
</g>
<g>
<g>
<rect x="177.1" y="71.1" transform="matrix(-0.866 -0.5 0.5 -0.866 463.3409 283.0693)" fill="#FFFFFF" width="185"
height="16.6"/>
</g>
</g>
<g>
<g>
<rect x="122.1" y="-13" transform="matrix(-0.5 -0.866 0.866 -0.5 126.7903 232.1221)" fill="#FFFFFF" width="16.6"
height="185"/>
</g>
</g>
<g>
<g>
<rect x="109.6" y="151.6" transform="matrix(-0.5 -0.866 0.866 -0.5 266.0828 473.3766)" fill="#FFFFFF"
width="320.3" height="16.6"/>
</g>
</g>
<g>
<g>
<rect x="52.5" y="107.5" fill="#FFFFFF" width="16.6" height="185"/>
</g>
</g>
<g>s
<g>
<rect x="330.9" y="107.5" fill="#FFFFFF" width="16.6" height="185"/>
</g>
</g>
<g>
<g>
<rect x="262.4" y="240.1" transform="matrix(-0.5 -0.866 0.866 -0.5 126.7953 714.2875)" fill="#FFFFFF"
width="14.5" height="160.9"/>
</g>
</g>
<path fill="#FFFFFF" d="M369.5,297.9c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8
C373.5,259.9,379.2,281.2,369.5,297.9"/>
<path fill="#FFFFFF" d="M90.9,137c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8
C94.8,99,100.5,120.3,90.9,137"/>
<path fill="#FFFFFF" d="M30.5,297.9c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7
C61.4,320.3,40.1,314.6,30.5,297.9"/>
<path fill="#FFFFFF" d="M309.1,137c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7
C340.1,159.4,318.7,153.7,309.1,137"/>
<path fill="#FFFFFF" d="M200,395.8c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9
C234.9,380.1,219.3,395.8,200,395.8"/>
<path fill="#FFFFFF" d="M200,74c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9
C234.9,58.4,219.3,74,200,74"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB