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

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="