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

refactor(ui): better remove, delete icons, and select components

Browse Source
This commit is contained in:
liyasthomas
2021-08-18 13:30:01 +05:30
parent 4f5de51104
commit b9c233cdf9
37 changed files with 130 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/scss/themes.scss
View File

@@ -41,7 +41,7 @@
// Dark Background color
--primary-dark-color: theme("colors.blue-gray.100");
// Text color
--secondary-color: theme("colors.blue-gray.600");
--secondary-color: theme("colors.blue-gray.500");
// Light Text color
--secondary-light-color: theme("colors.blue-gray.400");
// Dark Text color

2
components/app/Header.vue
View File

@@ -5,7 +5,7 @@
>
<div class="space-x-2 group inline-flex items-center">
<ButtonSecondary
class="tracking-wide !font-bold"
class="tracking-wide !font-bold !text-secondaryDark"
label="HOPPSCOTCH"
to="/"
/>

1
components/app/Sidenav.vue
View File

@@ -6,6 +6,7 @@
:key="`navigation-${index}`"
:to="localePath(navigation.target)"
class="nav-link"
tabindex="0"
>
<i v-if="navigation.icon" class="material-icons">
{{ navigation.icon }}

4
components/collections/graphql/Collection.vue
View File

@@ -77,9 +77,9 @@
"
/>
<SmartItem
icon="remove_circle_outline"
icon="delete"
color="red"
:label="$t('delete')"
:label="$t('action.delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()

4
components/collections/graphql/Folder.vue
View File

@@ -73,9 +73,9 @@
"
/>
<SmartItem
icon="remove_circle_outline"
icon="delete"
color="red"
:label="$t('delete')"
:label="$t('action.delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()

4
components/collections/graphql/Request.vue
View File

@@ -75,9 +75,9 @@
"
/>
<SmartItem
icon="remove_circle_outline"
icon="delete"
color="red"
:label="$t('delete')"
:label="$t('action.delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()

6
components/collections/my/Collection.vue
View File

@@ -43,7 +43,7 @@
<ButtonSecondary
v-if="doc && selected"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
:title="$t('action.remove')"
icon="check_circle_outline"
color="green"
@click.native="$emit('unselect-collection')"
@@ -96,9 +96,9 @@
"
/>
<SmartItem
icon="remove_circle_outline"
icon="delete"
color="red"
:label="$t('delete')"
:label="$t('action.delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()

4
components/collections/my/Folder.vue
View File

@@ -78,9 +78,9 @@
"
/>
<SmartItem
icon="remove_circle_outline"
icon="delete"
color="red"
:label="$t('delete')"
:label="$t('action.delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()

4
components/collections/my/Request.vue
View File

@@ -86,9 +86,9 @@
"
/>
<SmartItem
icon="remove_circle_outline"
icon="delete"
color="red"
:label="$t('delete')"
:label="$t('action.delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()

6
components/collections/teams/Collection.vue
View File

@@ -35,7 +35,7 @@
<ButtonSecondary
v-if="doc && selected"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
:title="$t('action.remove')"
icon="check_circle_outline"
color="green"
@click.native="$emit('unselect-collection')"
@@ -92,9 +92,9 @@
/>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="remove_circle_outline"
icon="delete"
color="red"
:label="$t('delete')"
:label="$t('action.delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()

4
components/collections/teams/Folder.vue
View File

@@ -75,9 +75,9 @@
/>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="remove_circle_outline"
icon="delete"
color="red"
:label="$t('delete')"
:label="$t('action.delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()

4
components/collections/teams/Request.vue
View File

@@ -79,9 +79,9 @@
"
/>
<SmartItem
icon="remove_circle_outline"
icon="delete"
color="red"
:label="$t('delete')"
:label="$t('action.delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()

4
components/environments/Edit.vue
View File

@@ -24,7 +24,7 @@
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
:title="$t('action.clear_all')"
:icon="clearIcon"
class="rounded"
@click.native="clearContent()"
@@ -60,7 +60,7 @@
<ButtonSecondary
id="variable"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
:title="$t('action.remove')"
icon="remove_circle_outline"
color="red"
@click.native="removeEnvironmentVariable(index)"

4
components/environments/Environment.vue
View File

@@ -41,9 +41,9 @@
/>
<SmartItem
v-if="!(environmentIndex === 'Global')"
icon="remove_circle_outline"
icon="delete"
color="red"
:label="$t('delete')"
:label="$t('action.delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()

65
components/environments/index.vue
View File

@@ -10,33 +10,46 @@
sticky
"
>
<div class="select-wrapper">
<select
v-model="selectedEnvironmentIndex"
:disabled="environments.length == 0"
class="
bg-primaryLight
border-b border-dividerLight
flex
w-full
py-2
px-4
appearance-none
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<span
v-tippy="{ theme: 'tooltip' }"
:title="$t('environment.select')"
class="border-b border-dividerLight flex-1 select-wrapper"
>
<ButtonSecondary
v-if="selectedEnvironmentIndex !== -1"
:label="environments[selectedEnvironmentIndex].name"
class="rounded-none flex-1 pr-8"
/>
<ButtonSecondary
v-else
:label="$t('environment.no_environment')"
class="rounded-none flex-1 pr-8"
/>
</span>
</template>
<SmartItem
:label="$t('environment.no_environment')"
:info-icon="selectedEnvironmentIndex === -1 ? 'done' : ''"
:active-info-icon="selectedEnvironmentIndex === -1"
@click.native="
selectedEnvironmentIndex = -1
$refs.options.tippy().hide()
"
>
<option :value="-1">{{ $t("environment.no_environment") }}</option>
<option v-if="environments.length === 0" value="0">
{{ $t("environment.create_new") }}
</option>
<option
v-for="(environment, index) in environments"
:key="`environment-${index}`"
:value="index"
>
{{ environment.name }}
</option>
</select>
</div>
/>
<SmartItem
v-for="(gen, index) in environments"
:key="`gen-${index}`"
:label="gen.name"
:info-icon="index === selectedEnvironmentIndex ? 'done' : ''"
:active-info-icon="index === selectedEnvironmentIndex"
@click.native="
selectedEnvironmentIndex = index
$refs.options.tippy().hide()
"
/>
</tippy>
<div class="border-b border-dividerLight flex flex-1 justify-between">
<ButtonSecondary
icon="add"

12
components/firebase/Login.vue
View File

@@ -7,18 +7,18 @@
>
<template #body>
<div v-if="mode === 'sign-in'" class="flex flex-col space-y-2 px-2">
<SmartItem
:loading="signingInWithGoogle"
svg="google"
:label="$t('auth.continue_with_google')"
@click.native="signInWithGoogle"
/>
<SmartItem
:loading="signingInWithGitHub"
svg="github"
:label="$t('auth.continue_with_github')"
@click.native="signInWithGithub"
/>
<SmartItem
:loading="signingInWithGoogle"
svg="google"
:label="$t('auth.continue_with_google')"
@click.native="signInWithGoogle"
/>
<SmartItem
icon="mail"
:label="$t('auth.continue_with_email')"

4
components/graphql/RequestOptions.vue
View File

@@ -132,7 +132,7 @@
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
:title="$t('action.clear_all')"
icon="clear_all"
@click.native="headers = []"
/>
@@ -220,7 +220,7 @@
<span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
:title="$t('action.remove')"
icon="remove_circle_outline"
color="red"
@click.native="removeRequestHeader(index)"

2
components/history/graphql/Card.vue
View File

@@ -23,7 +23,7 @@
v-tippy="{ theme: 'tooltip' }"
icon="remove_circle_outline"
color="red"
:title="$t('delete')"
:title="$t('action.remove')"
class="hidden group-hover:inline-flex"
data-testid="delete_history_entry"
@click.native="$emit('delete-entry')"

2
components/history/index.vue
View File

@@ -31,7 +31,7 @@
data-testid="clear_history"
:disabled="history.length === 0"
icon="clear_all"
:title="$t('clear_all')"
:title="$t('action.clear_all')"
@click.native="confirmRemove = true"
/>
</div>

2
components/history/rest/Card.vue
View File

@@ -31,7 +31,7 @@
v-tippy="{ theme: 'tooltip' }"
icon="remove_circle_outline"
color="red"
:title="$t('delete')"
:title="$t('action.remove')"
class="group-hover:inline-flex hidden"
data-testid="delete_history_entry"
@click.native="$emit('delete-entry')"

2
components/http/Authorization.vue
View File

@@ -75,7 +75,7 @@
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
:title="$t('action.clear')"
icon="clear_all"
@click.native="clearContent"
/>

4
components/http/BodyParameters.vue
View File

@@ -26,7 +26,7 @@
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
:title="$t('action.clear_all')"
icon="clear_all"
@click.native="clearContent"
/>
@@ -175,7 +175,7 @@
<span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
:title="$t('action.remove')"
icon="remove_circle_outline"
color="red"
@click.native="deleteBodyParam(index)"

12
components/http/CodegenModal.vue
View File

@@ -9,20 +9,13 @@
<label for="requestType" class="px-4 pb-4">
{{ $t("request.choose_language") }}
</label>
<div class="flex">
<tippy
ref="options"
interactive
trigger="click"
theme="popover"
arrow
>
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<template #trigger>
<span class="select-wrapper">
<ButtonSecondary
:label="codegens.find((x) => x.id === codegenType).name"
outline
class="pr-8"
class="flex-1 pr-8"
/>
</span>
</template>
@@ -38,7 +31,6 @@
"
/>
</tippy>
</div>
<div class="flex flex-1 justify-between">
<label for="generatedCode" class="px-4 pt-4 pb-4">
{{ $t("request.generated_code") }}

4
components/http/Headers.vue
View File

@@ -26,7 +26,7 @@
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
:title="$t('action.clear_all')"
icon="clear_all"
@click.native="clearContent"
/>
@@ -129,7 +129,7 @@
<span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
:title="$t('action.remove')"
icon="remove_circle_outline"
color="red"
@click.native="deleteHeader(index)"

4
components/http/Parameters.vue
View File

@@ -26,7 +26,7 @@
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear_all')"
:title="$t('action.clear_all')"
icon="clear_all"
@click.native="clearContent"
/>
@@ -140,7 +140,7 @@
<span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
:title="$t('action.remove')"
icon="remove_circle_outline"
color="red"
@click.native="deleteParam(index)"

2
components/http/PreRequestScript.vue
View File

@@ -26,7 +26,7 @@
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
:title="$t('action.clear')"
icon="clear_all"
@click.native="clearContent"
/>

2
components/http/RawBody.vue
View File

@@ -26,7 +26,7 @@
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
:title="$t('action.clear')"
icon="clear_all"
@click.native="clearContent('rawParams', $event)"
/>

2
components/http/Request.vue
View File

@@ -121,7 +121,7 @@
/>
<SmartItem
ref="clearAll"
:label="$t('clear_all')"
:label="$t('action.clear_all')"
icon="clear_all"
@click.native="
clearContent()

2
components/http/TestResult.vue
View File

@@ -24,7 +24,7 @@
</label>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
:title="$t('action.clear')"
icon="clear_all"
@click.native="clearContent()"
/>

2
components/http/Tests.vue
View File

@@ -26,7 +26,7 @@
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
:title="$t('action.clear')"
icon="clear_all"
@click.native="clearContent"
/>

4
components/http/TokenList.vue
View File

@@ -6,7 +6,7 @@
<div v-if="tokens.length != 0">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
:title="$t('action.clear_all')"
icon="clear_all"
@click.native="clearContent('tokens', $event)"
/>
@@ -41,7 +41,7 @@
<li>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
:title="$t('action.remove')"
icon="remove_circle_outline"
color="red"
@click.native="removeOAuthToken(index)"

2
components/realtime/Socketio.vue
View File

@@ -117,7 +117,7 @@
<ButtonSecondary
v-if="index + 1 !== communication.inputs.length"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
:title="$t('action.remove')"
icon="remove_circle_outline"
class="rounded-l-none"
color="red"

4
components/realtime/Websocket.vue
View File

@@ -56,7 +56,7 @@
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear_all')"
:title="$t('action.clear_all')"
icon="clear_all"
@click.native="clearContent"
/>
@@ -112,7 +112,7 @@
<span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
:title="$t('action.remove')"
icon="remove_circle_outline"
color="red"
@click.native="deleteProtocol({ index })"

4
components/teams/Edit.vue
View File

@@ -82,7 +82,7 @@
<ButtonSecondary
id="member"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
:title="$t('action.remove')"
icon="remove_circle_outline"
color="red"
@click.native="removeExistingTeamMember(member.user.uid)"
@@ -142,7 +142,7 @@
<ButtonSecondary
id="member"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
:title="$t('action.remove')"
icon="remove_circle_outline"
color="red"
@click.native="removeTeamMember(index)"

4
components/teams/Team.vue
View File

@@ -39,9 +39,9 @@
/>
<SmartItem
v-if="team.myRole === 'OWNER'"
icon="remove_circle_outline"
icon="delete"
color="red"
:label="$t('delete')"
:label="$t('action.delete')"
@click.native="
deleteTeam()
$refs.options.tippy().hide()

15
locales/en.json
View File

@@ -17,7 +17,11 @@
"dismiss": "Dismiss",
"copy": "Copy",
"learn_more": "Learn more",
"go_back": "Go back"
"go_back": "Go back",
"delete": "Delete",
"remove": "Remove",
"clear": "Clear",
"clear_all": "Clear all"
},
"confirm": {
"logout": "Are you sure you want to logout?",
@@ -27,7 +31,8 @@
"remove_request": "Are you sure you want to permanently delete this request?",
"remove_environment": "Are you sure you want to permanently delete this environment?",
"remove_telemetry": "Are you sure you want to opt-out of Telemetry?",
"remove_team": "Are you sure you want to delete this team?"
"remove_team": "Are you sure you want to delete this team?",
"sync": "Are you sure you want to sync this workspace?"
},
"empty": {
"protocols": "Protocols are empty",
@@ -307,7 +312,8 @@
"create_new": "Create new environment",
"edit": "Edit Environment",
"variable_list": "Variable List",
"invalid_name": "Please provide a valid name for the environment"
"invalid_name": "Please provide a valid name for the environment",
"select": "Select environment"
},
"response": {
"title": "Response",
@@ -401,8 +407,6 @@
"no_label": "No label",
"search": "Search",
"history_deleted": "History deleted",
"clear": "Clear",
"clear_all": "Clear all",
"cleared": "Cleared",
"time": "Time",
"duration": "Duration",
@@ -410,7 +414,6 @@
"new": "New",
"more": "More",
"edit": "Edit",
"delete": "Delete",
"deleted": "Deleted",
"undo": "Undo",
"edit_request": "Edit Request",

2
pages/documentation.vue
View File

@@ -52,7 +52,7 @@
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
:title="$t('action.clear')"
icon="clear_all"
@click.native="collectionJSON = '[]'"
/>