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

feat: svg icons

Browse Source
This commit is contained in:
liyasthomas
2021-08-28 05:47:33 +05:30
parent e397e3fb6f
commit 476bfbaef0
149 changed files with 476 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/app/Footer.vue
View File

@@ -5,7 +5,7 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="LEFT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
icon="menu_open"
svg="sidebar"
:class="{ 'transform -rotate-180': !LEFT_SIDEBAR }"
@click.native="LEFT_SIDEBAR = !LEFT_SIDEBAR"
/>
@@ -14,7 +14,7 @@
:title="`${
ZEN_MODE ? $t('action.turn_off') : $t('action.turn_on')
} ${$t('layout.zen_mode')}`"
:icon="ZEN_MODE ? 'fullscreen_exit' : 'fullscreen'"
:svg="ZEN_MODE ? 'minimize' : 'maximize'"
:class="{
'!text-accent !focus-visible:text-accentDark !hover:text-accentDark':
ZEN_MODE,
@@ -33,19 +33,21 @@
>
<template #trigger>
<ButtonSecondary
icon="help_center"
class="rounded-none"
svg="life-buoy"
class="!rounded-none"
:label="$t('app.help')"
/>
</template>
<div class="flex flex-col">
<SmartItem
svg="book"
:label="$t('app.documentation')"
to="https://docs.hoppscotch.io"
blank
@click.native="$refs.options.tippy().hide()"
/>
<SmartItem
svg="zap"
:label="$t('app.keyboard_shortcuts')"
@click.native="
showShortcuts = true
@@ -53,12 +55,14 @@
"
/>
<SmartItem
svg="gift"
:label="$t('app.whats_new')"
to="https://docs.hoppscotch.io/changelog"
blank
@click.native="$refs.options.tippy().hide()"
/>
<SmartItem
svg="message-circle"
:label="$t('app.chat_with_us')"
@click.native="
chatWithUs()
@@ -67,12 +71,14 @@
/>
<hr />
<SmartItem
svg="twitter"
:label="$t('app.twitter')"
to="https://twitter.com/hoppscotch_io"
blank
@click.native="$refs.options.tippy().hide()"
/>
<SmartItem
svg="lock"
:label="$t('app.terms_and_privacy')"
to="https://docs.hoppscotch.io/privacy"
blank
@@ -87,21 +93,21 @@
</span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="keyboard"
svg="zap"
:title="$t('app.shortcuts')"
@click.native="showShortcuts = true"
/>
<ButtonSecondary
v-if="navigatorShare"
v-tippy="{ theme: 'tooltip' }"
icon="share"
svg="share-2"
:title="$t('request.share')"
@click.native="nativeShare()"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="RIGHT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
icon="menu_open"
svg="sidebar"
class="transform rotate-180"
:class="{ 'rotate-360': !RIGHT_SIDEBAR }"
@click.native="RIGHT_SIDEBAR = !RIGHT_SIDEBAR"

8
components/app/Header.vue
View File

@@ -16,13 +16,13 @@
id="installPWA"
v-tippy="{ theme: 'tooltip' }"
:title="$t('header.install_pwa')"
icon="download_for_offline"
svg="download"
class="rounded"
@click.native="showInstallPrompt()"
/>
<ButtonSecondary
v-if="currentUser === null"
icon="filter_drama"
svg="upload-cloud"
:label="$t('header.save_workspace')"
filled
class="hidden !font-semibold md:flex"
@@ -52,12 +52,12 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('header.account')"
class="rounded"
icon="account_circle"
svg="user"
/>
</template>
<SmartItem
to="/settings"
icon="settings"
svg="settings"
:label="$t('navigation.settings')"
@click.native="$refs.user.tippy().hide()"
/>

10
components/app/Share.vue
View File

@@ -23,7 +23,7 @@
</span>
</a>
<button class="share-link" @click="copyAppLink">
<span class="font-icon h-6 text-xl w-6">{{ copyIcon }}</span>
<SmartIcon class="h-6 text-xl w-6" :name="copyIcon" />
<span class="mt-3">
{{ $t("app.copy") }}
</span>
@@ -54,11 +54,11 @@ export default defineComponent({
return {
url: "https://hoppscotch.io",
copyIcon: "content_copy",
copyIcon: "copy",
platforms: [
{
name: "Email",
icon: "email",
icon: "mail",
link: `mailto:?subject=${subject}&body=${summary}`,
},
{
@@ -87,11 +87,11 @@ export default defineComponent({
methods: {
copyAppLink() {
copyToClipboard(this.url)
this.copyIcon = "done"
this.copyIcon = "check"
this.$toast.success(this.$t("state.copied_to_clipboard").toString(), {
icon: "content_paste",
})
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
setTimeout(() => (this.copyIcon = "copy"), 1000)
},
hideModal() {
this.$emit("hide-modal")

6
components/app/Shortcuts.vue
View File

@@ -16,11 +16,7 @@
>
<h3 class="ml-4 heading">{{ $t("app.shortcuts") }}</h3>
<div class="flex">
<ButtonSecondary
icon="close"
class="rounded"
@click.native="close()"
/>
<ButtonSecondary svg="x" class="rounded" @click.native="close()" />
</div>
</div>
<div class="bg-primary border-b border-dividerLight">

20
components/app/Sidenav.vue
View File

@@ -11,7 +11,7 @@
<i v-if="navigation.icon" class="material-icons">
{{ navigation.icon }}
</i>
<div v-if="navigation.svg" class="h-4 w-4">
<div v-if="navigation.svg">
<SmartIcon :name="navigation.svg" class="svg-icons" />
</div>
<span v-if="LEFT_SIDEBAR">{{ navigation.title }}</span>
@@ -20,7 +20,7 @@
<!-- <nav
class="
flex flex-nowrap
p-4
p-2
items-center
justify-center
md:(flex-col
@@ -30,21 +30,21 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip', placement: 'top' }"
:title="`${$t('app.search')} <kbd>/</kbd>`"
icon="search"
svg="search"
class="rounded"
@click.native="showSearch = true"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip', placement: 'top' }"
:title="$t('app.invite')"
icon="person_add_alt"
svg="user-plus"
class="rounded"
@click.native="showShare = true"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip', placement: 'top' }"
:title="`${$t('support.title')} <kbd>?</kbd>`"
icon="support"
svg="life-buoy"
class="rounded"
@click.native="showSupport = true"
/>
@@ -90,7 +90,7 @@ export default defineComponent({
primaryNavigation: [
{
target: "index",
icon: "settings_ethernet",
svg: "link-2",
title: this.$t("navigation.rest"),
},
{
@@ -100,17 +100,17 @@ export default defineComponent({
},
{
target: "realtime",
icon: "language",
svg: "globe",
title: this.$t("navigation.realtime"),
},
{
target: "documentation",
icon: "book",
svg: "book-open",
title: this.$t("navigation.doc"),
},
{
target: "settings",
icon: "settings",
svg: "settings",
title: this.$t("navigation.settings"),
},
],
@@ -158,6 +158,8 @@ export default defineComponent({
span {
@apply mt-2;
@apply font-font-medium;
font-size: 90%;
}
&.exact-active-link {

8
components/app/Support.vue
View File

@@ -7,7 +7,7 @@
<template #body>
<div class="flex flex-col space-y-2">
<SmartItem
icon="menu_book"
svg="book"
:label="$t('app.documentation')"
to="https://docs.hoppscotch.io"
:description="$t('support.documentation')"
@@ -17,7 +17,7 @@
@click.native="hideModal()"
/>
<SmartItem
icon="keyboard"
svg="zap"
:label="$t('app.keyboard_shortcuts')"
:description="$t('support.shortcuts')"
info-icon="chevron_right"
@@ -28,7 +28,7 @@
"
/>
<SmartItem
icon="auto_awesome"
svg="gift"
:label="$t('app.whats_new')"
to="https://docs.hoppscotch.io/changelog"
:description="$t('support.changelog')"
@@ -38,7 +38,7 @@
@click.native="hideModal()"
/>
<SmartItem
icon="contact_support"
svg="message-circle"
:label="$t('app.chat_with_us')"
:description="$t('support.chat')"
info-icon="chevron_right"

14
components/collections/ImportExport.vue
View File

@@ -10,7 +10,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.go_back')"
class="rounded"
icon="arrow_back"
svg="arrow-left"
@click.native="
mode = 'import_export'
mySelectedCollectionID = undefined
@@ -32,7 +32,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
class="rounded"
icon="more_vert"
svg="more-vertical"
/>
</template>
<SmartItem
@@ -77,7 +77,7 @@
<SmartItem
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.replace_current')"
icon="folder_special"
svg="file"
:label="$t('action.replace_json')"
@click.native="openDialogChooseFileToReplaceWith"
/>
@@ -92,7 +92,7 @@
<SmartItem
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.preserve_current')"
icon="create_new_folder"
svg="folder-plus"
:label="$t('import.json')"
@click.native="openDialogChooseFileToImportFrom"
/>
@@ -108,14 +108,14 @@
v-if="collectionsType.type == 'team-collections'"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.preserve_current')"
icon="folder_shared"
svg="user"
:label="$t('import.from_my_collections')"
@click.native="mode = 'import_from_my_collections'"
/>
<SmartItem
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.download_file')"
icon="drive_file_move"
svg="download"
:label="$t('export.as_json')"
@click.native="exportJSON"
/>
@@ -160,7 +160,7 @@
<span>
<ButtonPrimary
:disabled="mySelectedCollectionID == undefined"
icon="create_new_folder"
svg="folder-plus"
:label="$t('import.title')"
@click.native="importFromMyCollections"
/>

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

@@ -13,9 +13,11 @@
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
{{ getCollectionIcon }}
</i>
<SmartIcon
class="svg-icons"
:class="{ 'text-green-500': isSelected }"
:name="getCollectionIcon"
/>
</span>
<span
class="
@@ -34,7 +36,7 @@
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="create_new_folder"
svg="folder-plus"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
@click.native="
@@ -55,11 +57,11 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
icon="more_vert"
svg="more-vertical"
/>
</template>
<SmartItem
icon="create_new_folder"
svg="folder-plus"
:label="$t('folder.new')"
@click.native="
$emit('add-folder', {
@@ -69,7 +71,7 @@
"
/>
<SmartItem
icon="create"
svg="edit"
:label="$t('action.edit')"
@click.native="
$emit('edit-collection')
@@ -77,7 +79,7 @@
"
/>
<SmartItem
icon="delete"
svg="trash-2"
color="red"
:label="$t('action.delete')"
@click.native="
@@ -186,9 +188,9 @@ export default defineComponent({
)
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
if (this.isSelected) return "check-circle"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else if (this.showChildren || this.isFiltered) return "folder-minus"
else return "folder"
},
},

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

@@ -13,9 +13,11 @@
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
{{ getCollectionIcon }}
</i>
<SmartIcon
class="svg-icons"
:class="{ 'text-green-500': isSelected }"
:name="getCollectionIcon"
/>
</span>
<span
class="
@@ -36,7 +38,7 @@
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="create_new_folder"
svg="folder-plus"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
@click.native="$emit('add-folder', { folder, path: folderPath })"
@@ -53,11 +55,11 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
icon="more_vert"
svg="more-vertical"
/>
</template>
<SmartItem
icon="create_new_folder"
svg="folder-plus"
:label="$t('folder.new')"
@click.native="
$emit('add-folder', { folder, path: folderPath })
@@ -65,7 +67,7 @@
"
/>
<SmartItem
icon="edit"
svg="edit"
:label="$t('action.edit')"
@click.native="
$emit('edit-folder', { folder, folderPath })
@@ -73,7 +75,7 @@
"
/>
<SmartItem
icon="delete"
svg="trash-2"
color="red"
:label="$t('action.delete')"
@click.native="
@@ -184,9 +186,9 @@ export default defineComponent({
)
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
if (this.isSelected) return "check-circle"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else if (this.showChildren || this.isFiltered) return "folder-minus"
else return "folder"
},
},

8
components/collections/graphql/ImportExport.vue
View File

@@ -12,7 +12,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
class="rounded"
icon="more_vert"
svg="more-vertical"
/>
</template>
<SmartItem
@@ -57,7 +57,7 @@
<SmartItem
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.replace_current')"
icon="folder_special"
svg="file"
:label="$t('action.replace_json')"
@click.native="openDialogChooseFileToReplaceWith"
/>
@@ -71,7 +71,7 @@
<SmartItem
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.preserve_current')"
icon="create_new_folder"
svg="folder-plus"
:label="$t('import.json')"
@click.native="openDialogChooseFileToImportFrom"
/>
@@ -85,7 +85,7 @@
<SmartItem
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.download_file')"
icon="drive_file_move"
svg="download"
:label="$t('export.as_json')"
@click.native="exportJSON"
/>

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

@@ -20,9 +20,11 @@
"
@click="!doc ? selectRequest() : {}"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
{{ isSelected ? "check_circle_outline" : "description" }}
</i>
<SmartIcon
class="svg-icons"
:class="{ 'text-green-500': isSelected }"
:name="isSelected ? 'check-circle' : 'file'"
/>
</span>
<span
class="
@@ -42,7 +44,7 @@
<ButtonSecondary
v-if="!savingMode"
v-tippy="{ theme: 'tooltip' }"
icon="replay"
svg="rotate-ccw"
:title="$t('action.restore')"
class="hidden group-hover:inline-flex"
@click.native="!doc ? selectRequest() : {}"
@@ -59,11 +61,11 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
icon="more_vert"
svg="more-vertical"
/>
</template>
<SmartItem
icon="edit"
svg="edit"
:label="$t('action.edit')"
@click.native="
$emit('edit-request', {
@@ -75,7 +77,7 @@
"
/>
<SmartItem
icon="delete"
svg="trash-2"
color="red"
:label="$t('action.delete')"
@click.native="

8
components/collections/graphql/index.vue
View File

@@ -24,9 +24,9 @@
</div>
<div class="flex flex-1 justify-between">
<ButtonSecondary
icon="add"
svg="plus"
:label="$t('action.new')"
class="rounded-none"
class="!rounded-none"
@click.native="displayModalAdd(true)"
/>
<div class="flex">
@@ -35,13 +35,13 @@
to="https://docs.hoppscotch.io/features/collections"
blank
:title="$t('app.wiki')"
icon="help_outline"
svg="help-circle"
/>
<ButtonSecondary
v-if="showCollActions"
v-tippy="{ theme: 'tooltip' }"
:title="$t('modal.import_export')"
icon="import_export"
svg="archive"
@click.native="displayModalImportExport(true)"
/>
</div>

12
components/collections/index.vue
View File

@@ -40,16 +40,16 @@
"
v-tippy="{ theme: 'tooltip' }"
disabled
class="rounded-none"
icon="add"
class="!rounded-none"
svg="plus"
:title="$t('team.no_access')"
:label="$t('action.new')"
/>
<ButtonSecondary
v-else
icon="add"
svg="plus"
:label="$t('action.new')"
class="rounded-none"
class="!rounded-none"
@click.native="displayModalAdd(true)"
/>
<span class="flex">
@@ -58,7 +58,7 @@
to="https://docs.hoppscotch.io/features/collections"
blank
:title="$t('app.wiki')"
icon="help_outline"
svg="help-circle"
/>
<ButtonSecondary
v-if="!saveRequest"
@@ -67,7 +67,7 @@
collectionsType.type == 'team-collections' &&
collectionsType.selectedTeam == undefined
"
icon="import_export"
svg="archive"
:title="$t('modal.import_export')"
@click.native="displayModalImportExport(true)"
/>

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

@@ -13,9 +13,11 @@
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
{{ getCollectionIcon }}
</i>
<SmartIcon
class="svg-icons"
:class="{ 'text-green-500': isSelected }"
:name="getCollectionIcon"
/>
</span>
<span
class="
@@ -36,7 +38,7 @@
v-if="doc && !selected"
v-tippy="{ theme: 'tooltip' }"
:title="$t('import.title')"
icon="radio_button_unchecked"
svg="circle"
color="green"
@click.native="$emit('select-collection')"
/>
@@ -44,14 +46,14 @@
v-if="doc && selected"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
icon="check_circle_outline"
svg="check-circle"
color="green"
@click.native="$emit('unselect-collection')"
/>
<ButtonSecondary
v-if="!doc"
v-tippy="{ theme: 'tooltip' }"
icon="create_new_folder"
svg="folder-plus"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
@click.native="
@@ -73,11 +75,11 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
icon="more_vert"
svg="more-vertical"
/>
</template>
<SmartItem
icon="create_new_folder"
svg="folder-plus"
:label="$t('folder.new')"
@click.native="
$emit('add-folder', {
@@ -88,7 +90,7 @@
"
/>
<SmartItem
icon="create"
svg="edit"
:label="$t('action.edit')"
@click.native="
$emit('edit-collection')
@@ -96,7 +98,7 @@
"
/>
<SmartItem
icon="delete"
svg="trash-2"
color="red"
:label="$t('action.delete')"
@click.native="
@@ -212,9 +214,9 @@ export default defineComponent({
)
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
if (this.isSelected) return "check-circle"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else if (this.showChildren || this.isFiltered) return "folder-minus"
else return "folder"
},
},

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

@@ -13,9 +13,11 @@
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
{{ getCollectionIcon }}
</i>
<SmartIcon
class="svg-icons"
:class="{ 'text-green-500': isSelected }"
:name="getCollectionIcon"
/>
</span>
<span
class="
@@ -36,7 +38,7 @@
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="create_new_folder"
svg="folder-plus"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
@click.native="$emit('add-folder', { folder, path: folderPath })"
@@ -53,11 +55,11 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
icon="more_vert"
svg="more-vertical"
/>
</template>
<SmartItem
icon="create_new_folder"
svg="folder-plus"
:label="$t('folder.new')"
@click.native="
$emit('add-folder', { folder, path: folderPath })
@@ -65,7 +67,7 @@
"
/>
<SmartItem
icon="edit"
svg="edit"
:label="$t('action.edit')"
@click.native="
$emit('edit-folder', {
@@ -78,7 +80,7 @@
"
/>
<SmartItem
icon="delete"
svg="trash-2"
color="red"
:label="$t('action.delete')"
@click.native="
@@ -199,9 +201,9 @@ export default defineComponent({
)
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
if (this.isSelected) return "check-circle"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else if (this.showChildren || this.isFiltered) return "folder-minus"
else return "folder"
},
},

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

@@ -21,13 +21,12 @@
:class="getRequestLabelColor(request.method)"
@click="!doc ? selectRequest() : {}"
>
<i
<SmartIcon
v-if="isSelected"
class="material-icons"
class="svg-icons"
:class="{ 'text-green-500': isSelected }"
>
check_circle_outline
</i>
name="check-circle"
/>
<span v-else class="truncate">
{{ request.method }}
</span>
@@ -60,7 +59,7 @@
<ButtonSecondary
v-if="!saveRequest && !doc"
v-tippy="{ theme: 'tooltip' }"
icon="replay"
svg="rotate-ccw"
:title="$t('action.restore')"
class="hidden group-hover:inline-flex"
@click.native="!doc ? selectRequest() : {}"
@@ -77,11 +76,11 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
icon="more_vert"
svg="more-vertical"
/>
</template>
<SmartItem
icon="edit"
svg="edit"
:label="$t('action.edit')"
@click.native="
$emit('edit-request', {
@@ -96,7 +95,7 @@
"
/>
<SmartItem
icon="delete"
svg="trash-2"
color="red"
:label="$t('action.delete')"
@click.native="

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

@@ -5,9 +5,11 @@
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
{{ getCollectionIcon }}
</i>
<SmartIcon
class="svg-icons"
:class="{ 'text-green-500': isSelected }"
:name="getCollectionIcon"
/>
</span>
<span
class="
@@ -28,7 +30,7 @@
v-if="doc && !selected"
v-tippy="{ theme: 'tooltip' }"
:title="$t('import.title')"
icon="radio_button_unchecked"
svg="circle"
color="green"
@click.native="$emit('select-collection')"
/>
@@ -36,14 +38,14 @@
v-if="doc && selected"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
icon="check_circle_outline"
svg="check-circle"
color="green"
@click.native="$emit('unselect-collection')"
/>
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
icon="create_new_folder"
svg="folder-plus"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
@click.native="
@@ -66,12 +68,12 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
icon="more_vert"
svg="more-vertical"
/>
</template>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="create_new_folder"
svg="folder-plus"
:label="$t('folder.new')"
@click.native="
$emit('add-folder', {
@@ -83,7 +85,7 @@
/>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="create"
svg="edit"
:label="$t('action.edit')"
@click.native="
$emit('edit-collection')
@@ -92,7 +94,7 @@
/>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="delete"
svg="trash-2"
color="red"
:label="$t('action.delete')"
@click.native="
@@ -206,9 +208,9 @@ export default defineComponent({
)
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
if (this.isSelected) return "check-circle"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else if (this.showChildren || this.isFiltered) return "folder-minus"
else return "folder"
},
},

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

@@ -5,9 +5,11 @@
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<i class="material-icons" :class="{ 'text-green-500': isSelected }">
{{ getCollectionIcon }}
</i>
<SmartIcon
class="svg-icons"
:class="{ 'text-green-500': isSelected }"
:name="getCollectionIcon"
/>
</span>
<span
class="
@@ -29,7 +31,7 @@
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
icon="create_new_folder"
svg="folder-plus"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
@click.native="$emit('add-folder', { folder, path: folderPath })"
@@ -47,12 +49,12 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
icon="more_vert"
svg="more-vertical"
/>
</template>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="create_new_folder"
svg="folder-plus"
:label="$t('folder.new')"
@click.native="
$emit('add-folder', { folder, path: folderPath })
@@ -61,7 +63,7 @@
/>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="edit"
svg="edit"
:label="$t('action.edit')"
@click.native="
$emit('edit-folder', {
@@ -75,7 +77,7 @@
/>
<SmartItem
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
icon="delete"
svg="trash-2"
color="red"
:label="$t('action.delete')"
@click.native="
@@ -189,9 +191,9 @@ export default defineComponent({
)
},
getCollectionIcon() {
if (this.isSelected) return "check_circle_outline"
if (this.isSelected) return "check-circle"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder_open"
else if (this.showChildren || this.isFiltered) return "folder-minus"
else return "folder"
},
},

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

@@ -14,13 +14,12 @@
:class="getRequestLabelColor(request.method)"
@click="!doc ? selectRequest() : {}"
>
<i
<SmartIcon
v-if="isSelected"
class="material-icons"
class="svg-icons"
:class="{ 'text-green-500': isSelected }"
>
check_circle_outline
</i>
name="check-circle"
/>
<span v-else>
{{ request.method }}
</span>
@@ -52,7 +51,7 @@
<ButtonSecondary
v-if="!saveRequest && !doc"
v-tippy="{ theme: 'tooltip' }"
icon="replay"
svg="rotate-ccw"
:title="$t('action.restore')"
class="hidden group-hover:inline-flex"
@click.native="!doc ? selectRequest() : {}"
@@ -70,11 +69,11 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
icon="more_vert"
svg="more-vertical"
/>
</template>
<SmartItem
icon="edit"
svg="edit"
:label="$t('action.edit')"
@click.native="
$emit('edit-request', {
@@ -88,7 +87,7 @@
"
/>
<SmartItem
icon="delete"
svg="trash-2"
color="red"
:label="$t('action.delete')"
@click.native="

2
components/docs/Collection.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="collection">
<h2 class="heading">
<i class="material-icons">folder</i>
<SmartIcon name="folder" class="svg-icons" />
{{ collection.name || $t("state.none") }}
</h2>
<span

2
components/docs/Folder.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="folder">
<h3 class="heading">
<i class="material-icons">folder_open</i>
<SmartIcon name="folder-minus" class="svg-icons" />
{{ folder.name || $t("state.none") }}
</h3>
<div

2
components/docs/Request.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="request">
<h4 class="heading">
<i class="material-icons">insert_drive_file</i>
<SmartIcon name="file" class="svg-icons" />
{{ request.name || $t("state.none") }}
</h4>
<p v-if="request.url" class="doc-desc">

14
components/environments/Edit.vue
View File

@@ -25,13 +25,13 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear_all')"
:icon="clearIcon"
:svg="clearIcon"
class="rounded"
@click.native="clearContent()"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="add"
svg="plus"
:title="$t('add.new')"
class="rounded"
@click.native="addEnvironmentVariable"
@@ -61,7 +61,7 @@
id="variable"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
icon="remove_circle_outline"
svg="trash"
color="red"
@click.native="removeEnvironmentVariable(index)"
/>
@@ -77,7 +77,7 @@
justify-center
"
>
<i class="opacity-75 pb-2 material-icons">layers</i>
<SmartIcon class="opacity-75 pb-2" name="layers" />
<span class="text-center pb-4">
{{ $t("empty.environments") }}
</span>
@@ -146,7 +146,7 @@ export default defineComponent({
return {
name: null as string | null,
vars: [] as { key: string; value: string }[],
clearIcon: "clear_all",
clearIcon: "trash-2",
}
},
watch: {
@@ -158,11 +158,11 @@ export default defineComponent({
methods: {
clearContent() {
this.vars = []
this.clearIcon = "done"
this.clearIcon = "check"
this.$toast.success(this.$t("state.cleared").toString(), {
icon: "clear_all",
})
setTimeout(() => (this.clearIcon = "clear_all"), 1000)
setTimeout(() => (this.clearIcon = "trash-2"), 1000)
},
addEnvironmentVariable() {
this.vars.push({

8
components/environments/Environment.vue
View File

@@ -4,7 +4,7 @@
class="cursor-pointer flex px-4 justify-center items-center"
@click="$emit('edit-environment')"
>
<i class="material-icons">layers</i>
<SmartIcon class="svg-icons" name="layers" />
</span>
<span
class="
@@ -28,11 +28,11 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
icon="more_vert"
svg="more-vertical"
/>
</template>
<SmartItem
icon="create"
svg="edit"
:label="$t('action.edit')"
@click.native="
$emit('edit-environment')
@@ -41,7 +41,7 @@
/>
<SmartItem
v-if="!(environmentIndex === 'Global')"
icon="delete"
svg="trash-2"
color="red"
:label="$t('action.delete')"
@click.native="

8
components/environments/ImportExport.vue
View File

@@ -12,7 +12,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
class="rounded"
icon="more_vert"
svg="more-vertical"
/>
</template>
<SmartItem
@@ -57,7 +57,7 @@
<SmartItem
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.replace_current')"
icon="folder_special"
svg="file"
:label="$t('action.replace_json')"
@click.native="openDialogChooseFileToReplaceWith"
/>
@@ -71,7 +71,7 @@
<SmartItem
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.preserve_current')"
icon="create_new_folder"
svg="folder-plus"
:label="$t('import.json')"
@click.native="openDialogChooseFileToImportFrom"
/>
@@ -85,7 +85,7 @@
<SmartItem
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.download_file')"
icon="drive_file_move"
svg="download"
:label="$t('export.as_json')"
@click.native="exportJSON"
/>

8
components/environments/index.vue
View File

@@ -57,9 +57,9 @@
</tippy>
<div class="border-b border-dividerLight flex flex-1 justify-between">
<ButtonSecondary
icon="add"
svg="plus"
:label="$t('action.new')"
class="rounded-none"
class="!rounded-none"
@click.native="displayModalAdd(true)"
/>
<div class="flex">
@@ -68,11 +68,11 @@
to="https://docs.hoppscotch.io/features/environments"
blank
:title="$t('app.wiki')"
icon="help_outline"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="import_export"
svg="archive"
:title="$t('modal.import_export')"
@click.native="displayModalImportExport(true)"
/>

8
components/firebase/Login.vue
View File

@@ -9,13 +9,13 @@
<div v-if="mode === 'sign-in'" class="flex flex-col space-y-2 px-2">
<SmartItem
:loading="signingInWithGitHub"
svg="github"
svg="auth/github"
:label="$t('auth.continue_with_github')"
@click.native="signInWithGithub"
/>
<SmartItem
:loading="signingInWithGoogle"
svg="google"
svg="auth/google"
:label="$t('auth.continue_with_google')"
@click.native="signInWithGoogle"
/>
@@ -61,9 +61,7 @@
</div>
<div v-if="mode === 'email-sent'" class="flex flex-col px-4">
<div class="flex flex-col max-w-md justify-center items-center">
<i class="text-accent material-icons !text-4xl">
mark_email_unread
</i>
<SmartIcon class="h-6 text-accent w-6" name="inbox" />
<h3 class="my-2 text-center text-lg">
{{ $t("auth.we_sent_magic_link") }}
</h3>

2
components/firebase/Logout.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex">
<SmartItem
icon="exit_to_app"
svg="log-out"
:label="$t('auth.logout')"
@click.native="
$emit('confirm-logout')

44
components/graphql/RequestOptions.vue
View File

@@ -23,14 +23,14 @@
<div class="flex">
<ButtonSecondary
:label="$t('request.run')"
icon="play_arrow"
svg="play"
class="rounded-none !text-accent"
@click.native="runQuery()"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:icon="copyQueryIcon"
:svg="copyQueryIcon"
@click.native="copyQuery"
/>
<ButtonSecondary
@@ -38,14 +38,14 @@
:title="`${$t(
'action.prettify'
)} <kbd>${getSpecialKey()}</kbd><kbd>P</kbd>`"
:icon="prettifyQueryIcon"
:svg="prettifyQueryIcon"
@click.native="prettifyQuery"
/>
<ButtonSecondary
ref="saveRequest"
v-tippy="{ theme: 'tooltip' }"
:title="$t('request.save')"
icon="create_new_folder"
svg="folder-plus"
@click.native="saveRequest"
/>
</div>
@@ -89,7 +89,7 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:icon="copyVariablesIcon"
:svg="copyVariablesIcon"
@click.native="copyVariables"
/>
</div>
@@ -132,13 +132,13 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear_all')"
icon="clear_all"
svg="trash-2"
@click.native="headers = []"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('add.new')"
icon="add"
svg="plus"
@click.native="addRequestHeader"
/>
</div>
@@ -199,12 +199,12 @@
: $t('action.turn_on')
: $t('action.turn_off')
"
:icon="
:svg="
header.hasOwnProperty('active')
? header.active
? 'check_circle_outline'
: 'radio_button_unchecked'
: 'check_circle_outline'
? 'check-circle'
: 'circle'
: 'check-circle'
"
color="green"
@click.native="
@@ -220,7 +220,7 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
icon="remove_circle_outline"
svg="trash"
color="red"
@click.native="removeRequestHeader(index)"
/>
@@ -242,7 +242,7 @@
<ButtonSecondary
:label="$t('add.new')"
filled
icon="add"
svg="plus"
@click.native="addRequestHeader"
/>
</div>
@@ -318,9 +318,9 @@ export default defineComponent({
const queryEditor = ref<any | null>(null)
const copyQueryIcon = ref("content_copy")
const prettifyQueryIcon = ref("photo_filter")
const copyVariablesIcon = ref("content_copy")
const copyQueryIcon = ref("copy")
const prettifyQueryIcon = ref("sparkles")
const copyVariablesIcon = ref("copy")
const showSaveRequestModal = ref(false)
@@ -347,8 +347,8 @@ export default defineComponent({
const copyQuery = () => {
copyToClipboard(gqlQueryString.value)
copyQueryIcon.value = "done"
setTimeout(() => (copyQueryIcon.value = "content_copy"), 1000)
copyQueryIcon.value = "check"
setTimeout(() => (copyQueryIcon.value = "copy"), 1000)
}
const response = useStream(gqlResponse$, "", setGQLResponse)
@@ -416,8 +416,8 @@ export default defineComponent({
const prettifyQuery = () => {
queryEditor.value.prettifyQuery()
prettifyQueryIcon.value = "done"
setTimeout(() => (prettifyQueryIcon.value = "photo_filter"), 1000)
prettifyQueryIcon.value = "check"
setTimeout(() => (prettifyQueryIcon.value = "sparkles"), 1000)
}
const saveRequest = () => {
@@ -431,8 +431,8 @@ export default defineComponent({
const copyVariables = () => {
copyToClipboard(variableString.value)
copyVariablesIcon.value = "done"
setTimeout(() => (copyVariablesIcon.value = "content_copy"), 1000)
copyVariablesIcon.value = "check"
setTimeout(() => (copyVariablesIcon.value = "copy"), 1000)
}
const addRequestHeader = () => {

18
components/graphql/Response.vue
View File

@@ -22,14 +22,14 @@
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.download_file')"
:icon="downloadResponseIcon"
:svg="downloadResponseIcon"
@click.native="downloadResponse"
/>
<ButtonSecondary
ref="copyResponseButton"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:icon="copyResponseIcon"
:svg="copyResponseIcon"
@click.native="copyResponse"
/>
</div>
@@ -94,7 +94,7 @@
<ButtonSecondary
:label="$t('app.documentation')"
to="https://docs.hoppscotch.io"
icon="open_in_new"
svg="external-link"
blank
outline
reverse
@@ -132,13 +132,13 @@ export default defineComponent({
const responseString = useReadonlyStream(gqlResponse$, "")
const downloadResponseIcon = ref("save_alt")
const copyResponseIcon = ref("content_copy")
const downloadResponseIcon = ref("download")
const copyResponseIcon = ref("copy")
const copyResponse = () => {
copyToClipboard(responseString.value!)
copyResponseIcon.value = "done"
setTimeout(() => (copyResponseIcon.value = "content_copy"), 1000)
copyResponseIcon.value = "check"
setTimeout(() => (copyResponseIcon.value = "copy"), 1000)
}
const downloadResponse = () => {
@@ -150,14 +150,14 @@ export default defineComponent({
a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}`
document.body.appendChild(a)
a.click()
downloadResponseIcon.value = "done"
downloadResponseIcon.value = "check"
$toast.success(t("state.download_started").toString(), {
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
downloadResponseIcon.value = "save_alt"
downloadResponseIcon.value = "download"
}, 1000)
}

20
components/graphql/Sidebar.vue
View File

@@ -18,7 +18,7 @@
to="https://docs.hoppscotch.io/quickstart/graphql"
blank
:title="$t('app.wiki')"
icon="help_outline"
svg="help-circle"
/>
</div>
</div>
@@ -148,20 +148,20 @@
to="https://docs.hoppscotch.io/quickstart/graphql"
blank
:title="$t('app.wiki')"
icon="help_outline"
svg="help-circle"
/>
<ButtonSecondary
ref="downloadSchema"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.download_file')"
:icon="downloadSchemaIcon"
:svg="downloadSchemaIcon"
@click.native="downloadSchema"
/>
<ButtonSecondary
ref="copySchemaCode"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:icon="copySchemaIcon"
:svg="copySchemaIcon"
@click.native="copySchema"
/>
</div>
@@ -317,8 +317,8 @@ export default defineComponent({
[]
)
const downloadSchemaIcon = ref("save_alt")
const copySchemaIcon = ref("content_copy")
const downloadSchemaIcon = ref("download")
const copySchemaIcon = ref("copy")
const graphqlFieldsFilterText = ref("")
@@ -405,14 +405,14 @@ export default defineComponent({
}.graphql`
document.body.appendChild(a)
a.click()
downloadSchemaIcon.value = "done"
downloadSchemaIcon.value = "check"
$toast.success(t("state.download_started").toString(), {
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
downloadSchemaIcon.value = "save_alt"
downloadSchemaIcon.value = "download"
}, 1000)
}
@@ -420,8 +420,8 @@ export default defineComponent({
if (!schemaString.value) return
copyToClipboard(schemaString.value)
copySchemaIcon.value = "done"
setTimeout(() => (copySchemaIcon.value = "content_copy"), 1000)
copySchemaIcon.value = "check"
setTimeout(() => (copySchemaIcon.value = "copy"), 1000)
}
const handleUseHistory = (entry: GQLHistoryEntry) => {

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

@@ -16,12 +16,12 @@
@click="useEntry"
>
<span class="truncate">
{{ entry.url }}
{{ entry.request.url }}
</span>
</span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="remove_circle_outline"
svg="trash"
color="red"
:title="$t('action.remove')"
class="hidden group-hover:inline-flex"
@@ -31,14 +31,14 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="expand ? $t('hide.more') : $t('show.more')"
:icon="expand ? 'unfold_less' : 'unfold_more'"
:svg="expand ? 'minimize-2' : 'maximize-2'"
class="hidden group-hover:inline-flex"
@click.native="expand = !expand"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="!entry.star ? $t('add.star') : $t('remove.star')"
:icon="entry.star ? 'star' : 'star_border'"
:svg="entry.star ? 'star-solid' : 'star'"
color="yellow"
:class="{ 'group-hover:inline-flex hidden': !entry.star }"
data-testid="star_button"

4
components/history/index.vue
View File

@@ -24,13 +24,13 @@
to="https://docs.hoppscotch.io/features/history"
blank
:title="$t('app.wiki')"
icon="help_outline"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
data-testid="clear_history"
:disabled="history.length === 0"
icon="clear_all"
svg="trash-2"
:title="$t('action.clear_all')"
@click.native="confirmRemove = true"
/>

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

@@ -29,7 +29,7 @@
</span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="remove_circle_outline"
svg="trash"
color="red"
:title="$t('action.remove')"
class="hidden group-hover:inline-flex"
@@ -40,7 +40,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="!entry.star ? $t('add.star') : $t('remove.star')"
:class="{ 'group-hover:inline-flex hidden': !entry.star }"
:icon="entry.star ? 'star' : 'star_border'"
:svg="entry.star ? 'star-solid' : 'star'"
color="yellow"
data-testid="star_button"
@click.native="$emit('toggle-star')"

10
components/http/Authorization.vue
View File

@@ -81,12 +81,12 @@
to="https://docs.hoppscotch.io/features/authorization"
blank
:title="$t('app.wiki')"
icon="help_outline"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear')"
icon="clear_all"
svg="trash-2"
@click.native="clearContent"
/>
</div>
@@ -103,7 +103,7 @@
:label="$t('action.learn_more')"
to="https://docs.hoppscotch.io"
blank
icon="open_in_new"
svg="external-link"
reverse
/>
</div>
@@ -147,9 +147,7 @@
/>
<span>
<ButtonSecondary
:icon="
passwordFieldType === 'text' ? 'visibility' : 'visibility_off'
"
:svg="passwordFieldType === 'text' ? 'eye' : 'eye-off'"
@click.native="switchVisibility"
/>
</span>

20
components/http/BodyParameters.vue
View File

@@ -22,18 +22,18 @@
to="https://docs.hoppscotch.io/features/body"
blank
:title="$t('app.wiki')"
icon="help_outline"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear_all')"
icon="clear_all"
svg="trash-2"
@click.native="clearContent"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('add.new')"
icon="add"
svg="plus"
@click.native="addBodyParam"
/>
</div>
@@ -131,7 +131,7 @@
<label for="attachment" class="p-0">
<ButtonSecondary
class="w-full"
icon="attach_file"
svg="paperclip"
@click.native="$refs.attachment[index].click()"
/>
</label>
@@ -154,12 +154,12 @@
: $t('action.turn_on')
: $t('action.turn_off')
"
:icon="
:svg="
param.hasOwnProperty('active')
? param.active
? 'check_circle_outline'
: 'radio_button_unchecked'
: 'check_circle_outline'
? 'check-circle'
: 'circle'
: 'check-circle'
"
color="green"
@click.native="
@@ -176,7 +176,7 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
icon="remove_circle_outline"
svg="trash"
color="red"
@click.native="deleteBodyParam(index)"
/>
@@ -192,7 +192,7 @@
<ButtonSecondary
:label="$t('add.new')"
filled
icon="add"
svg="plus"
@click.native="addBodyParam"
/>
</div>

8
components/http/CodegenModal.vue
View File

@@ -59,7 +59,7 @@
<ButtonPrimary
ref="copyRequestCode"
:label="t('action.copy')"
:icon="copyIcon"
:svg="copyIcon"
@click.native="copyRequestCode"
/>
<ButtonSecondary :label="t('action.dismiss')" @click.native="hideModal" />
@@ -93,7 +93,7 @@ const options = ref<any | null>(null)
const request = ref(getRESTRequest())
const codegenType = ref("curl")
const copyIcon = ref("content_copy")
const copyIcon = ref("copy")
const requestCode = computed(() => {
const effectiveRequest = getEffectiveRESTRequest(
@@ -119,10 +119,10 @@ const hideModal = () => emit("hide-modal")
const copyRequestCode = () => {
copyToClipboard(requestCode.value)
copyIcon.value = "done"
copyIcon.value = "check"
$toast.success(t("state.copied_to_clipboard").toString(), {
icon: "content_paste",
})
setTimeout(() => (copyIcon.value = "content_copy"), 1000)
setTimeout(() => (copyIcon.value = "copy"), 1000)
}
</script>

18
components/http/Headers.vue
View File

@@ -22,18 +22,18 @@
to="https://docs.hoppscotch.io/features/headers"
blank
:title="$t('app.wiki')"
icon="help_outline"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear_all')"
icon="clear_all"
svg="trash-2"
@click.native="clearContent"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('add.new')"
icon="add"
svg="plus"
@click.native="addHeader"
/>
</div>
@@ -109,12 +109,12 @@
: $t('action.turn_on')
: $t('action.turn_off')
"
:icon="
:svg="
header.hasOwnProperty('active')
? header.active
? 'check_circle_outline'
: 'radio_button_unchecked'
: 'check_circle_outline'
? 'check-circle'
: 'circle'
: 'check-circle'
"
color="green"
@click.native="
@@ -130,7 +130,7 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
icon="remove_circle_outline"
svg="trash"
color="red"
@click.native="deleteHeader(index)"
/>
@@ -146,7 +146,7 @@
<ButtonSecondary
filled
:label="$t('add.new')"
icon="add"
svg="plus"
@click.native="addHeader"
/>
</div>

18
components/http/Parameters.vue
View File

@@ -22,18 +22,18 @@
to="https://docs.hoppscotch.io/features/parameters"
blank
:title="$t('app.wiki')"
icon="help_outline"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear_all')"
icon="clear_all"
svg="trash-2"
@click.native="clearContent"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('add.new')"
icon="add"
svg="plus"
@click.native="addParam"
/>
</div>
@@ -120,12 +120,12 @@
: $t('action.turn_on')
: $t('action.turn_off')
"
:icon="
:svg="
param.hasOwnProperty('active')
? param.active
? 'check_circle_outline'
: 'radio_button_unchecked'
: 'check_circle_outline'
? 'check-circle'
: 'circle'
: 'check-circle'
"
color="green"
@click.native="
@@ -141,7 +141,7 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
icon="remove_circle_outline"
svg="trash"
color="red"
@click.native="deleteParam(index)"
/>
@@ -156,7 +156,7 @@
</span>
<ButtonSecondary
:label="$t('add.new')"
icon="add"
svg="plus"
filled
@click.native="addParam"
/>

4
components/http/PreRequestScript.vue
View File

@@ -22,12 +22,12 @@
to="https://docs.hoppscotch.io/features/pre-request-script"
blank
:title="$t('app.wiki')"
icon="help_outline"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear')"
icon="clear_all"
svg="trash-2"
@click.native="clearContent"
/>
</div>

14
components/http/RawBody.vue
View File

@@ -22,12 +22,12 @@
to="https://docs.hoppscotch.io/features/body"
blank
:title="$t('app.wiki')"
icon="help_outline"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear')"
icon="clear_all"
svg="trash-2"
@click.native="clearContent('rawParams', $event)"
/>
<ButtonSecondary
@@ -35,14 +35,14 @@
ref="prettifyRequest"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.prettify')"
:icon="prettifyIcon"
:svg="prettifyIcon"
@click.native="prettifyRequestBody"
/>
<label for="payload">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('import.json')"
icon="post_add"
svg="file-plus"
@click.native="$refs.payload.click()"
/>
</label>
@@ -88,7 +88,7 @@ export default defineComponent({
setup() {
return {
rawParamsBody: pluckRef(useRESTRequestBody(), "body"),
prettifyIcon: "photo_filter",
prettifyIcon: "sparkles",
}
},
computed: {
@@ -122,8 +122,8 @@ export default defineComponent({
try {
const jsonObj = JSON.parse(this.rawParamsBody)
this.rawParamsBody = JSON.stringify(jsonObj, null, 2)
this.prettifyIcon = "done"
setTimeout(() => (this.prettifyIcon = "photo_filter"), 1000)
this.prettifyIcon = "check"
setTimeout(() => (this.prettifyIcon = "sparkles"), 1000)
} catch (e) {
console.error(e)
this.$toast.error(`${this.$t("error.json_prettify_invalid_body")}`, {

24
components/http/Request.vue
View File

@@ -107,15 +107,11 @@
arrow
>
<template #trigger>
<ButtonPrimary
class="rounded-l-none"
filled
icon="keyboard_arrow_down"
/>
<ButtonPrimary class="rounded-l-none" filled svg="chevron-down" />
</template>
<SmartItem
:label="$t('import.curl')"
icon="import_export"
svg="terminal"
@click.native="
() => {
showCurlImportModal = !showCurlImportModal
@@ -125,7 +121,7 @@
/>
<SmartItem
:label="$t('show.code')"
icon="code"
svg="code"
@click.native="
() => {
showCodegenModal = !showCodegenModal
@@ -136,7 +132,7 @@
<SmartItem
ref="clearAll"
:label="$t('action.clear_all')"
icon="clear_all"
svg="rotate-ccw"
@click.native="
() => {
clearContent()
@@ -150,7 +146,7 @@
class="rounded-r-none ml-2"
:label="$t('request.save')"
filled
icon="save"
svg="save"
@click.native="saveRequest()"
/>
<span class="flex">
@@ -162,11 +158,7 @@
arrow
>
<template #trigger>
<ButtonSecondary
icon="keyboard_arrow_down"
filled
class="rounded-r"
/>
<ButtonSecondary svg="chevron-down" filled class="rounded-r" />
</template>
<input
id="request-name"
@@ -180,7 +172,7 @@
<SmartItem
ref="copyRequest"
:label="$t('request.copy_link')"
:icon="hasNavigatorShare ? 'share' : 'content_copy'"
:svg="hasNavigatorShare ? 'share-2' : 'copy'"
@click.native="
() => {
copyRequest()
@@ -191,7 +183,7 @@
<SmartItem
ref="saveRequest"
:label="$t('request.save_as')"
icon="create_new_folder"
svg="folder-plus"
@click.native="
() => {
showSaveRequestModal = true

4
components/http/ResponseMeta.vue
View File

@@ -44,7 +44,7 @@
<ButtonSecondary
:label="$t('app.documentation')"
to="https://docs.hoppscotch.io"
icon="open_in_new"
svg="external-link"
blank
outline
reverse
@@ -76,7 +76,7 @@
:label="$t('action.learn_more')"
to="https://docs.hoppscotch.io"
blank
icon="open_in_new"
svg="external-link"
reverse
/>
</div>

4
components/http/TestResult.vue
View File

@@ -25,7 +25,7 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear')"
icon="clear_all"
svg="trash-2"
@click.native="clearContent()"
/>
</div>
@@ -87,7 +87,7 @@
:label="$t('action.learn_more')"
to="https://docs.hoppscotch.io"
blank
icon="open_in_new"
svg="external-link"
reverse
/>
</div>

4
components/http/Tests.vue
View File

@@ -22,12 +22,12 @@
to="https://docs.hoppscotch.io/features/tests"
blank
:title="$t('app.wiki')"
icon="help_outline"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear')"
icon="clear_all"
svg="trash-2"
@click.native="clearContent"
/>
</div>

2
components/landing/CTA.vue
View File

@@ -28,7 +28,7 @@
<p class="mt-2">
<SmartLink :to="cta.link.target" class="link" blank>
{{ cta.link.title }}
<i class="material-icons">chevron_right</i>
<SmartIcon name="chevron-right" class="svg-icons" />
</SmartLink>
</p>
</div>

2
components/landing/Features.vue
View File

@@ -20,7 +20,7 @@
<p class="mt-2">
<NuxtLink :to="feature.link.target" class="link">
{{ feature.link.title }}
<i class="material-icons">chevron_right</i>
<SmartIcon name="chevron-right" class="svg-icons" />
</NuxtLink>
</p>
</div>

2
components/landing/Hero.vue
View File

@@ -36,7 +36,7 @@
<div class="flex space-x-4 my-8 justify-center items-center">
<ButtonPrimary
label="Get Started"
icon="arrow_forward"
svg="arrow-right"
reverse
large
@click.native="showLogin = true"

8
components/lenses/HeadersRenderer.vue
View File

@@ -22,7 +22,7 @@
ref="copyHeaders"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:icon="copyIcon"
:svg="copyIcon"
@click.native="copyHeaders"
/>
</div>
@@ -79,17 +79,17 @@ export default defineComponent({
},
data() {
return {
copyIcon: "content_copy",
copyIcon: "copy",
}
},
methods: {
copyHeaders() {
copyToClipboard(JSON.stringify(this.headers))
this.copyIcon = "done"
this.copyIcon = "check"
this.$toast.success(this.$t("state.copied_to_clipboard"), {
icon: "content_paste",
})
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
setTimeout(() => (this.copyIcon = "copy"), 1000)
},
},
})

18
components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -23,7 +23,7 @@
:title="
previewEnabled ? $t('hide.preview') : $t('response.preview_html')
"
:icon="!previewEnabled ? 'visibility' : 'visibility_off'"
:svg="!previewEnabled ? 'eye' : 'eye-off'"
@click.native.prevent="togglePreview"
/>
<ButtonSecondary
@@ -31,7 +31,7 @@
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.download_file')"
:icon="downloadIcon"
:svg="downloadIcon"
@click.native="downloadResponse"
/>
<ButtonSecondary
@@ -39,7 +39,7 @@
ref="copyResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:icon="copyIcon"
:svg="copyIcon"
@click.native="copyResponse"
/>
</div>
@@ -80,8 +80,8 @@ export default defineComponent({
},
data() {
return {
downloadIcon: "save_alt",
copyIcon: "content_copy",
downloadIcon: "download",
copyIcon: "copy",
previewEnabled: false,
}
},
@@ -96,23 +96,23 @@ export default defineComponent({
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
document.body.appendChild(a)
a.click()
this.downloadIcon = "done"
this.downloadIcon = "check"
this.$toast.success(this.$t("state.download_started"), {
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
this.downloadIcon = "save_alt"
this.downloadIcon = "download"
}, 1000)
},
copyResponse() {
copyToClipboard(this.responseBodyText)
this.copyIcon = "done"
this.copyIcon = "check"
this.$toast.success(this.$t("state.copied_to_clipboard"), {
icon: "content_paste",
})
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
setTimeout(() => (this.copyIcon = "copy"), 1000)
},
togglePreview() {
this.previewEnabled = !this.previewEnabled

8
components/lenses/renderers/ImageLensRenderer.vue
View File

@@ -22,7 +22,7 @@
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.download_file')"
:icon="downloadIcon"
:svg="downloadIcon"
@click.native="downloadResponse"
/>
</div>
@@ -46,7 +46,7 @@ export default defineComponent({
data() {
return {
imageSource: "",
downloadIcon: "save_alt",
downloadIcon: "download",
}
},
computed: {
@@ -102,14 +102,14 @@ export default defineComponent({
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
document.body.appendChild(a)
a.click()
this.downloadIcon = "done"
this.downloadIcon = "check"
this.$toast.success(this.$t("state.download_started"), {
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
this.downloadIcon = "save_alt"
this.downloadIcon = "download"
}, 1000)
},
},

16
components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -22,7 +22,7 @@
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.download_file')"
:icon="downloadIcon"
:svg="downloadIcon"
@click.native="downloadResponse"
/>
<ButtonSecondary
@@ -30,7 +30,7 @@
ref="copyResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:icon="copyIcon"
:svg="copyIcon"
@click.native="copyResponse"
/>
</div>
@@ -66,8 +66,8 @@ export default defineComponent({
},
data() {
return {
downloadIcon: "save_alt",
copyIcon: "content_copy",
downloadIcon: "download",
copyIcon: "copy",
}
},
computed: {
@@ -100,23 +100,23 @@ export default defineComponent({
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
document.body.appendChild(a)
a.click()
this.downloadIcon = "done"
this.downloadIcon = "check"
this.$toast.success(this.$t("state.download_started"), {
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
this.downloadIcon = "save_alt"
this.downloadIcon = "download"
}, 1000)
},
copyResponse() {
copyToClipboard(this.responseBodyText)
this.copyIcon = "done"
this.copyIcon = "check"
this.$toast.success(this.$t("state.copied_to_clipboard"), {
icon: "content_paste",
})
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
setTimeout(() => (this.copyIcon = "copy"), 1000)
},
},
})

16
components/lenses/renderers/RawLensRenderer.vue
View File

@@ -22,7 +22,7 @@
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.download_file')"
:icon="downloadIcon"
:svg="downloadIcon"
@click.native="downloadResponse"
/>
<ButtonSecondary
@@ -30,7 +30,7 @@
ref="copyResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:icon="copyIcon"
:svg="copyIcon"
@click.native="copyResponse"
/>
</div>
@@ -65,8 +65,8 @@ export default defineComponent({
},
data() {
return {
downloadIcon: "save_alt",
copyIcon: "content_copy",
downloadIcon: "download",
copyIcon: "copy",
}
},
computed: {
@@ -91,23 +91,23 @@ export default defineComponent({
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
document.body.appendChild(a)
a.click()
this.downloadIcon = "done"
this.downloadIcon = "check"
this.$toast.success(this.$t("state.download_started"), {
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
this.downloadIcon = "save_alt"
this.downloadIcon = "download"
}, 1000)
},
copyResponse() {
copyToClipboard(this.responseBodyText)
this.copyIcon = "done"
this.copyIcon = "check"
this.$toast.success(this.$t("state.copied_to_clipboard"), {
icon: "content_paste",
})
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
setTimeout(() => (this.copyIcon = "copy"), 1000)
},
},
})

16
components/lenses/renderers/XMLLensRenderer.vue
View File

@@ -22,7 +22,7 @@
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.download_file')"
:icon="downloadIcon"
:svg="downloadIcon"
@click.native="downloadResponse"
/>
<ButtonSecondary
@@ -30,7 +30,7 @@
ref="copyResponse"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:icon="copyIcon"
:svg="copyIcon"
@click.native="copyResponse"
/>
</div>
@@ -65,8 +65,8 @@ export default defineComponent({
},
data() {
return {
copyIcon: "content_copy",
downloadIcon: "save_alt",
copyIcon: "copy",
downloadIcon: "download",
}
},
computed: {
@@ -91,23 +91,23 @@ export default defineComponent({
a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
document.body.appendChild(a)
a.click()
this.downloadIcon = "done"
this.downloadIcon = "check"
this.$toast.success(this.$t("state.download_started"), {
icon: "downloading",
})
setTimeout(() => {
document.body.removeChild(a)
URL.revokeObjectURL(url)
this.downloadIcon = "save_alt"
this.downloadIcon = "download"
}, 1000)
},
copyResponse() {
copyToClipboard(this.responseBodyText)
this.copyIcon = "done"
this.copyIcon = "check"
this.$toast.success(this.$t("state.copied_to_clipboard"), {
icon: "content_paste",
})
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
setTimeout(() => (this.copyIcon = "copy"), 1000)
},
},
})

4
components/realtime/Socketio.vue
View File

@@ -105,7 +105,7 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('add.new')"
icon="add"
svg="plus"
class="rounded"
@click.native="addCommunicationInput"
/>
@@ -130,7 +130,7 @@
v-if="index + 1 !== communication.inputs.length"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
icon="remove_circle_outline"
svg="trash"
class="rounded"
color="red"
outline

14
components/realtime/Websocket.vue
View File

@@ -63,13 +63,13 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear_all')"
icon="clear_all"
svg="trash-2"
@click.native="clearContent"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('add.new')"
icon="add"
svg="plus"
@click.native="addProtocol"
/>
</div>
@@ -100,12 +100,12 @@
: $t('action.turn_on')
: $t('action.turn_off')
"
:icon="
:svg="
protocol.hasOwnProperty('active')
? protocol.active
? 'check_circle_outline'
: 'radio_button_unchecked'
: 'check_circle_outline'
? 'check-circle'
: 'circle'
: 'check-circle'
"
color="green"
@click.native="
@@ -119,7 +119,7 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
icon="remove_circle_outline"
svg="trash"
color="red"
@click.native="deleteProtocol({ index })"
/>

2
components/smart/ChangeLanguage.vue
View File

@@ -8,7 +8,7 @@
:title="$t('settings.choose_language')"
class="pr-8"
outline
icon="language"
svg="globe"
:label="`${
$i18n.locales.find(({ code }) => code == $i18n.locale).name
}`"

12
components/smart/ColorModePicker.vue
View File

@@ -9,7 +9,7 @@
'bg-primaryLight !text-accent hover:text-accent': color === active,
}"
class="rounded"
:icon="getIcon(color)"
:svg="getIcon(color)"
@click.native="setBGMode(color)"
/>
</div>
@@ -38,15 +38,15 @@ export default defineComponent({
getIcon(color: HoppBgColor) {
switch (color) {
case "system":
return "devices"
return "monitor"
case "light":
return "light_mode"
return "sun"
case "dark":
return "nights_stay"
return "cloud"
case "black":
return "dark_mode"
return "moon"
default:
return "devices"
return "monitor"
}
},
getColorModeName(colorMode: string) {

2
components/smart/DeletableChip.vue
View File

@@ -4,7 +4,7 @@
<span class="max-w-64 px-2 truncate"><slot></slot></span>
<ButtonSecondary
class="rounded close-button"
icon="close"
svg="x"
@click.native="$emit('chip-delete')"
/>
</span>

2
components/smart/FontSizePicker.vue
View File

@@ -7,7 +7,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('settings.change_font_size')"
class="pr-8"
icon="format_size"
svg="type"
outline
:label="getFontSizeName(fontSizes.find((size) => size == active))"
/>

2
components/smart/Modal.vue
View File

@@ -58,7 +58,7 @@
<ButtonSecondary
v-if="dimissible"
class="rounded"
icon="close"
svg="x"
@click.native="close"
/>
</span>

25
components/smart/Toggle.vue
View File

@@ -26,20 +26,22 @@ export default defineComponent({
</script>
<style scoped lang="scss">
$useBorder: false;
$useBorder: true;
$borderColor: var(--divider-color);
$activeColor: var(--accent-color);
$activeColor: var(--divider-color);
$inactiveColor: var(--divider-color);
$inactiveHandleColor: var(--primary-color);
$activeHandleColor: var(--primary-color);
$inactiveHandleColor: var(--secondary-light-color);
$activeHandleColor: var(--accent-color);
$width: 1.6rem;
$height: 0.78rem;
$handleSpacing: 0.2rem;
$height: 0.6rem;
$indicatorHeight: 0.4rem;
$indicatorWidth: 0.4rem;
$handleSpacing: 0.1rem;
$transition: all 0.2s ease-in-out;
.toggle {
@apply relative;
@apply inline-flex;
@apply flex;
@apply items-center;
@apply justify-center;
@apply rounded-full;
@@ -57,7 +59,8 @@ $transition: all 0.2s ease-in-out;
.handle {
@apply absolute;
@apply inline-block;
@apply flex;
@apply flex-shrink-0;
@apply inset-0;
@apply rounded-full;
@apply pointer-events-none;
@@ -65,12 +68,12 @@ $transition: all 0.2s ease-in-out;
transition: $transition;
margin: $handleSpacing;
background-color: $inactiveHandleColor;
width: #{$height - ($handleSpacing * 2)};
height: #{$height - ($handleSpacing * 2)};
width: $indicatorWidth;
height: $indicatorHeight;
}
&.on {
background-color: $activeColor;
// background-color: $activeColor;
border-color: $activeColor;
.handle {

8
components/teams/Edit.vue
View File

@@ -22,7 +22,7 @@
</label>
<div class="flex">
<ButtonSecondary
icon="add"
svg="plus"
:label="$t('add.new')"
@click.native="addTeamMember"
/>
@@ -89,7 +89,7 @@
id="member"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
icon="remove_circle_outline"
svg="trash"
color="red"
@click.native="removeExistingTeamMember(member.user.uid)"
/>
@@ -155,7 +155,7 @@
id="member"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
icon="remove_circle_outline"
svg="trash"
color="red"
@click.native="removeTeamMember(index)"
/>
@@ -171,7 +171,7 @@
justify-center
"
>
<i class="opacity-75 pb-2 material-icons">layers</i>
<SmartIcon class="opacity-75 pb-2" name="users" />
<span class="text-center pb-4">
{{ $t("empty.members") }}
</span>

8
components/teams/Team.vue
View File

@@ -27,12 +27,12 @@
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
icon="more_vert"
svg="more-vertical"
/>
</template>
<SmartItem
v-if="team.myRole === 'OWNER'"
icon="create"
svg="edit"
:label="$t('action.edit')"
@click.native="
$emit('edit-team')
@@ -41,7 +41,7 @@
/>
<SmartItem
v-if="team.myRole === 'OWNER'"
icon="delete"
svg="trash-2"
color="red"
:label="$t('action.delete')"
@click.native="
@@ -51,7 +51,7 @@
/>
<SmartItem
v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
icon="remove"
svg="trash"
:label="$t('team.exit')"
@click.native="
exitTeam()