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

feat: refactor buttons

Browse Source
This commit is contained in:
Liyas Thomas
2021-07-03 13:14:58 +00:00
committed by GitHub
parent b55439ce44
commit 3e3da2f27b
103 changed files with 2150 additions and 2496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/collections/Add.vue
View File

@@ -3,9 +3,7 @@
<template #header>
<h3 class="heading">{{ $t("new_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template>
<template #body>
@@ -22,12 +20,8 @@
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewCollection">
{{ $t("save") }}
</button>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="addNewCollection" />
</span>
</template>
</SmartModal>

12
components/collections/AddFolder.vue
View File

@@ -3,9 +3,7 @@
<template #header>
<h3 class="heading">{{ $t("new_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template>
<template #body>
@@ -22,12 +20,8 @@
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addFolder">
{{ $t("save") }}
</button>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="addFolder" />
</span>
</template>
</SmartModal>

12
components/collections/Edit.vue
View File

@@ -3,9 +3,7 @@
<template #header>
<h3 class="heading">{{ $t("edit_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template>
<template #body>
@@ -22,12 +20,8 @@
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveCollection">
{{ $t("save") }}
</button>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveCollection" />
</span>
</template>
</SmartModal>

12
components/collections/EditFolder.vue
View File

@@ -3,9 +3,7 @@
<template #header>
<h3 class="heading">{{ $t("edit_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template>
<template #body>
@@ -21,12 +19,8 @@
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="editFolder">
{{ $t("save") }}
</button>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="editFolder" />
</span>
</template>
</SmartModal>

12
components/collections/EditRequest.vue
View File

@@ -3,9 +3,7 @@
<template #header>
<h3 class="heading">{{ $t("edit_request") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template>
<template #body>
@@ -22,12 +20,8 @@
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveRequest">
{{ $t("save") }}
</button>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveRequest" />
</span>
</template>
</SmartModal>

140
components/collections/ImportExport.vue
View File

@@ -3,41 +3,38 @@
<template #header>
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
<div>
<button
<ButtonSecondary
v-if="mode == 'import_from_my_collections'"
v-tippy="{ theme: 'tooltip' }"
title="Back"
class="tooltip-target icon button"
@click="
icon="arrow_back"
@click.native="
mode = 'import_export'
mySelectedCollectionID = undefined
"
>
<i class="material-icons">arrow_back</i>
</button>
/>
<tippy
v-if="
mode == 'import_export' && collectionsType.type == 'my-collections'
"
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
icon="more_vert"
/>
</template>
<div>
<button class="icon button" @click="readCollectionGist">
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
<ButtonSecondary
icon="assignment_returned"
:label="$t('import_from_gist')"
@click.native="readCollectionGist"
/>
</div>
<div
v-tippy="{ theme: 'tooltip' }"
@@ -49,7 +46,7 @@
: null,
}"
>
<button
<ButtonSecondary
:disabled="
!currentUser
? true
@@ -57,76 +54,62 @@
? true
: false
"
class="icon button"
@click="createCollectionGist"
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
icon="assignment_turned_in"
:label="$t('create_secret_gist')"
@click.native="createCollectionGist"
/>
</div>
</tippy>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template>
<template #body>
<div v-if="mode == 'import_export'" class="flex flex-col p-2 items-start">
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('replace_current')"
class="icon button"
@click="openDialogChooseFileToReplaceWith"
>
<i class="material-icons">folder_special</i>
<span>{{ $t("replace_json") }}</span>
<input
ref="inputChooseFileToReplaceWith"
class="input"
type="file"
style="display: none"
accept="application/json"
@change="replaceWithJSON"
/>
</button>
<button
icon="folder_special"
:label="$t('replace_json')"
@click.native="openDialogChooseFileToReplaceWith"
/>
<input
ref="inputChooseFileToReplaceWith"
class="input"
type="file"
style="display: none"
accept="application/json"
@change="replaceWithJSON"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('preserve_current')"
class="icon button"
@click="openDialogChooseFileToImportFrom"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("import_json") }}</span>
<input
ref="inputChooseFileToImportFrom"
class="input"
type="file"
style="display: none"
accept="application/json"
@change="importFromJSON"
/>
</button>
<button
icon="create_new_folder"
:label="$t('import_json')"
@click.native="openDialogChooseFileToImportFrom"
/>
<input
ref="inputChooseFileToImportFrom"
class="input"
type="file"
style="display: none"
accept="application/json"
@change="importFromJSON"
/>
<ButtonSecondary
v-if="collectionsType.type == 'team-collections'"
v-tippy="{ theme: 'tooltip' }"
:title="$t('preserve_current')"
class="icon button"
@click="mode = 'import_from_my_collections'"
>
<i class="material-icons">folder_shared</i>
<span>{{ $t("import_from_my_collections") }}</span>
</button>
<button
icon="folder_shared"
:label="$t('import_from_my_collections')"
@click.native="mode = 'import_from_my_collections'"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
class="icon button"
@click="exportJSON"
>
<i class="material-icons">drive_file_move</i>
<span>
{{ $t("export_as_json") }}
</span>
</button>
icon="drive_file_move"
:label="$t('export_as_json')"
@click.native="exportJSON"
/>
</div>
<div v-if="mode == 'import_from_my_collections'">
<span class="select-wrapper">
@@ -164,14 +147,13 @@
<div v-if="mode == 'import_from_my_collections'">
<span></span>
<span>
<button
class="m-2 icon button"
<ButtonSecondary
class="m-2"
:disabled="mySelectedCollectionID == undefined"
@click="importFromMyCollections"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("import") }}</span>
</button>
icon="create_new_folder"
:label="$t('import')"
@click.native="importFromMyCollections"
/>
</span>
</div>
</template>

12
components/collections/SaveRequest.vue
View File

@@ -3,9 +3,7 @@
<template #header>
<h3 class="heading">{{ $t("save_request_as") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template>
<template #body>
@@ -41,12 +39,8 @@
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveRequestAs">
{{ $t("save") }}
</button>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveRequestAs" />
</span>
</template>
</SmartModal>

12
components/collections/graphql/Add.vue
View File

@@ -3,9 +3,7 @@
<template #header>
<h3 class="heading">{{ $t("new_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template>
<template #body>
@@ -22,12 +20,8 @@
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewCollection">
{{ $t("save") }}
</button>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="addNewCollection" />
</span>
</template>
</SmartModal>

12
components/collections/graphql/AddFolder.vue
View File

@@ -3,9 +3,7 @@
<template #header>
<h3 class="heading">{{ $t("new_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template>
<template #body>
@@ -22,12 +20,8 @@
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addFolder">
{{ $t("save") }}
</button>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="addFolder" />
</span>
</template>
</SmartModal>

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

@@ -1,10 +1,7 @@
<template>
<div>
<div
:class="[
'row-wrapper transition duration-150 ease-in-out',
{ 'bg-primaryDark': dragging },
]"
:class="['row-wrapper ease-in-out', { 'bg-primaryDark': dragging }]"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@@ -12,65 +9,58 @@
@dragleave="dragging = false"
@dragend="dragging = false"
>
<button class="icon button" @click="toggleShowChildren">
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<ButtonSecondary @click.native="toggleShowChildren" />
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
>check_circle</i
>
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder</i>
<span>{{ collection.name }}</span>
<i v-else class="material-icons">folder</i>
<span>{{ collection.name }}</span>
</button>
<div>
<button
<ButtonSecondary
v-if="doc"
v-tippy="{ theme: 'tooltip' }"
:title="$t('import')"
class="icon button"
@click="$emit('select-collection')"
>
<i class="material-icons">topic</i>
</button>
<tippy trigger="click" theme="popover" arrow>
@click.native="$emit('select-collection')"
/>
<i class="material-icons">topic</i>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
/>
<i class="material-icons">more_vert</i>
</template>
<div>
<button
class="icon button"
@click="
<ButtonSecondary
@click.native="
$emit('add-folder', {
path: `${collectionIndex}`,
})
"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
/>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</div>
<div>
<button class="icon button" @click="$emit('edit-collection')">
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
<ButtonSecondary @click.native="$emit('edit-collection')" />
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</div>
<div>
<button class="icon button" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
<ButtonSecondary @click.native="confirmRemove = true" />
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</div>
</tippy>
</div>

12
components/collections/graphql/Edit.vue
View File

@@ -3,9 +3,7 @@
<template #header>
<h3 class="heading">{{ $t("edit_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template>
<template #body>
@@ -22,12 +20,8 @@
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveCollection">
{{ $t("save") }}
</button>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveCollection" />
</span>
</template>
</SmartModal>

12
components/collections/graphql/EditFolder.vue
View File

@@ -3,9 +3,7 @@
<template #header>
<h3 class="heading">{{ $t("edit_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template>
<template #body>
@@ -22,12 +20,8 @@
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="editFolder">
{{ $t("save") }}
</button>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="editFolder" />
</span>
</template>
</SmartModal>

12
components/collections/graphql/EditRequest.vue
View File

@@ -3,9 +3,7 @@
<template #header>
<h3 class="heading">{{ $t("edit_request") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template>
<template #body>
@@ -22,12 +20,8 @@
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveRequest">
{{ $t("save") }}
</button>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveRequest" />
</span>
</template>
</SmartModal>

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

@@ -1,10 +1,7 @@
<template>
<div>
<div
:class="[
'row-wrapper transition duration-150 ease-in-out',
{ 'bg-primaryDark': dragging },
]"
:class="['row-wrapper ease-in-out', { 'bg-primaryDark': dragging }]"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@@ -13,54 +10,43 @@
@dragend="dragging = false"
>
<div>
<button class="icon button" @click="toggleShowChildren">
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
>check_circle</i
>
<ButtonSecondary @click.native="toggleShowChildren" />
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder_open</i>
<span>{{ folder.name }}</span>
</button>
<i v-else class="material-icons">folder_open</i>
<span>{{ folder.name }}</span>
</div>
<tippy trigger="click" theme="popover" arrow>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
<ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
<i class="material-icons">more_vert</i>
</template>
<div>
<button
class="icon button"
@click="$emit('add-folder', { folder, path: folderPath })"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
<ButtonSecondary
@click.native="$emit('add-folder', { folder, path: folderPath })"
/>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</div>
<div>
<button
class="icon button"
@click="$emit('edit-folder', { folder, folderPath })"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
<ButtonSecondary
@click.native="$emit('edit-folder', { folder, folderPath })"
/>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</div>
<div>
<button class="icon button" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
<ButtonSecondary @click.native="confirmRemove = true" />
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</div>
</tippy>
</div>

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

@@ -3,21 +3,20 @@
<template #header>
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
<div>
<tippy trigger="click" theme="popover" arrow>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
/>
<i class="material-icons">more_vert</i>
</template>
<div>
<button class="icon button" @click="readCollectionGist">
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
<ButtonSecondary
icon="assignment_returned"
:label="$t('import_from_gist')"
@click.native="readCollectionGist"
/>
</div>
<div
v-tippy="{ theme: 'tooltip' }"
@@ -29,7 +28,7 @@
: null,
}"
>
<button
<ButtonSecondary
:disabled="
!currentUser
? true
@@ -37,66 +36,56 @@
? true
: false
"
class="icon button"
@click="createCollectionGist"
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
@click.native="createCollectionGist"
/>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</div>
</tippy>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template>
<template #body>
<div class="flex flex-col items-start p-2">
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('replace_current')"
class="icon button"
@click="openDialogChooseFileToReplaceWith"
>
<i class="material-icons">folder_special</i>
<span>{{ $t("replace_json") }}</span>
<input
ref="inputChooseFileToReplaceWith"
class="input"
type="file"
style="display: none"
accept="application/json"
@change="replaceWithJSON"
/>
</button>
<button
@click.native="openDialogChooseFileToReplaceWith"
/>
<i class="material-icons">folder_special</i>
<span>{{ $t("replace_json") }}</span>
<input
ref="inputChooseFileToReplaceWith"
class="input"
type="file"
style="display: none"
accept="application/json"
@change="replaceWithJSON"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('preserve_current')"
class="icon button"
@click="openDialogChooseFileToImportFrom"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("import_json") }}</span>
<input
ref="inputChooseFileToImportFrom"
class="input"
type="file"
style="display: none"
accept="application/json"
@change="importFromJSON"
/>
</button>
<button
@click.native="openDialogChooseFileToImportFrom"
/>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("import_json") }}</span>
<input
ref="inputChooseFileToImportFrom"
class="input"
type="file"
style="display: none"
accept="application/json"
@change="importFromJSON"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
class="icon button"
@click="exportJSON"
>
<i class="material-icons">drive_file_move</i>
<span>
{{ $t("export_as_json") }}
</span>
</button>
@click.native="exportJSON"
/>
<i class="material-icons">drive_file_move</i>
<span>
{{ $t("export_as_json") }}
</span>
</div>
</template>
</SmartModal>

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

@@ -1,10 +1,7 @@
<template>
<div>
<div
:class="[
'row-wrapper transition duration-150 ease-in-out',
{ 'bg-primaryDark': dragging },
]"
:class="['row-wrapper ease-in-out', { 'bg-primaryDark': dragging }]"
draggable="true"
@dragstart="dragStart"
@dragover.stop
@@ -12,50 +9,40 @@
@dragend="dragging = false"
>
<div>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="!doc ? $t('use_request') : ''"
class="icon button"
@click="!doc ? selectRequest() : {}"
>
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">description</i>
<span>{{ request.name }}</span>
</button>
:class="{ 'mx-3 text-green-400': isSelected }"
:icon="isSelected ? 'check_circle' : 'description'"
:label="request.name"
@click.native="!doc ? selectRequest() : {}"
/>
</div>
<tippy trigger="click" theme="popover" arrow>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
icon="more_vert"
/>
</template>
<div>
<button
class="icon button"
@click="
<ButtonSecondary
@click.native="
$emit('edit-request', {
request,
requestIndex,
folderPath,
})
"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
/>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</div>
<div>
<button class="icon button" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
<ButtonSecondary @click.native="confirmRemove = true" />
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</div>
</tippy>
</div>

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

@@ -1,6 +1,6 @@
<template>
<AppSection label="collections">
<div class="show-on-large-screen">
<div class="flex">
<input
v-if="showCollActions"
v-model="filterText"
@@ -46,23 +46,21 @@
@hide-modal="displayModalImportExport(false)"
/>
<div class="border-b row-wrapper border-divider">
<button class="icon button" @click="displayModalAdd(true)">
<i class="material-icons">add</i>
<span>{{ $t("new") }}</span>
</button>
<button
<ButtonSecondary @click.native="displayModalAdd(true)" />
<i class="material-icons">add</i>
<span>{{ $t("new") }}</span>
<ButtonSecondary
v-if="showCollActions"
class="icon button"
@click="displayModalImportExport(true)"
>
{{ $t("import_export") }}
</button>
@click.native="displayModalImportExport(true)"
/>
{{ $t("import_export") }}
</div>
<p v-if="collections.length === 0" class="info">
<i class="material-icons">help_outline</i>
{{ $t("create_new_collection") }}
</p>
<div class="virtual-list">
<div class="overflow-auto">
<ul class="flex-col">
<li
v-for="(collection, index) in filteredCollections"
@@ -245,9 +243,3 @@ export default {
},
}
</script>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 270px);
}
</style>

49
components/collections/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<AppSection label="collections">
<div class="show-on-large-screen">
<div class="flex">
<input
v-if="!saveRequest"
v-model="filterText"
@@ -54,45 +54,40 @@
@update-team-collections="updateTeamCollections"
/>
<div class="border-b row-wrapper border-divider">
<button
<ButtonSecondary
v-if="
collectionsType.type == 'team-collections' &&
(collectionsType.selectedTeam == undefined ||
collectionsType.selectedTeam.myRole == 'VIEWER')
"
class="icon button"
v-tippy="{ theme: 'tooltip' }"
disabled
@click="displayModalAdd(true)"
>
<i class="material-icons">add</i>
<div
v-tippy="{ theme: 'tooltip' }"
:title="$t('disable_new_collection')"
>
<span>{{ $t("new") }}</span>
</div>
</button>
<button v-else class="icon button" @click="displayModalAdd(true)">
<i class="material-icons">add</i>
<span>{{ $t("new") }}</span>
</button>
<button
icon="add"
:title="$t('disable_new_collection')"
:label="$t('new')"
@click.native="displayModalAdd(true)"
/>
<ButtonSecondary
v-else
icon="add"
:label="$t('new')"
@click.native="displayModalAdd(true)"
/>
<ButtonSecondary
v-if="!saveRequest"
:disabled="
collectionsType.type == 'team-collections' &&
collectionsType.selectedTeam == undefined
"
class="icon button"
@click="displayModalImportExport(true)"
>
{{ $t("import_export") }}
</button>
:label="$t('import_export')"
@click.native="displayModalImportExport(true)"
/>
</div>
<p v-if="collections.length === 0" class="info">
<i class="material-icons">help_outline</i>
{{ $t("create_new_collection") }}
</p>
<div class="virtual-list">
<div class="overflow-auto">
<ul class="flex-col">
<li
v-for="(collection, index) in filteredCollections"
@@ -636,9 +631,3 @@ export default {
},
}
</script>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 270px);
}
</style>

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

@@ -1,10 +1,7 @@
<template>
<div>
<div
:class="[
'row-wrapper transition duration-150 ease-in-out',
{ 'bg-primaryDark': dragging },
]"
:class="['row-wrapper ease-in-out', { 'bg-primaryDark': dragging }]"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@@ -12,75 +9,66 @@
@dragleave="dragging = false"
@dragend="dragging = false"
>
<button class="icon button" @click="toggleShowChildren">
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<ButtonSecondary @click.native="toggleShowChildren" />
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<i v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder</i>
<span>{{ collection.name }}</span>
<i v-else class="material-icons">folder</i>
<span>{{ collection.name }}</span>
</button>
<div>
<button
<ButtonSecondary
v-if="doc && !selected"
v-tippy="{ theme: 'tooltip' }"
:title="$t('import')"
class="icon button"
@click="$emit('select-collection')"
>
<i class="material-icons">check_box_outline_blank</i>
</button>
<button
@click.native="$emit('select-collection')"
/>
<i class="material-icons">check_box_outline_blank</i>
<ButtonSecondary
v-if="doc && selected"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
class="icon button"
@click="$emit('unselect-collection')"
>
<i class="material-icons">check_box</i>
</button>
<tippy trigger="click" theme="popover" arrow>
@click.native="$emit('unselect-collection')"
/>
<i class="material-icons">check_box</i>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
/>
<i class="material-icons">more_vert</i>
</template>
<div>
<button
class="icon button"
@click="
<ButtonSecondary
@click.native="
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
/>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</div>
<div>
<button class="icon button" @click="$emit('edit-collection')">
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
<ButtonSecondary @click.native="$emit('edit-collection')" />
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</div>
<div>
<button class="icon button" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
<ButtonSecondary @click.native="confirmRemove = true" />
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</div>
</tippy>
</div>

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

@@ -1,10 +1,7 @@
<template>
<div>
<div
:class="[
'row-wrapper transition duration-150 ease-in-out',
{ 'bg-primaryDark': dragging },
]"
:class="['row-wrapper ease-in-out', { 'bg-primaryDark': dragging }]"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@@ -13,43 +10,34 @@
@dragend="dragging = false"
>
<div>
<button class="icon button" @click="toggleShowChildren">
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<i v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder_open</i>
<span>{{ folder.name ? folder.name : folder.title }}</span>
</button>
<ButtonSecondary @click.native="toggleShowChildren" />
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<i v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder_open</i>
<span>{{ folder.name ? folder.name : folder.title }}</span>
</div>
<tippy trigger="click" theme="popover" arrow>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
<ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
<i class="material-icons">more_vert</i>
</template>
<div>
<button
class="icon button"
@click="$emit('add-folder', { folder, path: folderPath })"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
<ButtonSecondary
@click.native="$emit('add-folder', { folder, path: folderPath })"
/>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</div>
<div>
<button
class="icon button"
@click="
<ButtonSecondary
@click.native="
$emit('edit-folder', {
folder,
folderIndex,
@@ -57,16 +45,14 @@
folderPath,
})
"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
/>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</div>
<div>
<button class="icon button" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
<ButtonSecondary @click.native="confirmRemove = true" />
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</div>
</tippy>
</div>

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

@@ -1,10 +1,7 @@
<template>
<div>
<div
:class="[
'row-wrapper transition duration-150 ease-in-out',
{ 'bg-primaryDark': dragging },
]"
:class="['row-wrapper ease-in-out', { 'bg-primaryDark': dragging }]"
draggable="true"
@dragstart="dragStart"
@dragover.stop
@@ -12,36 +9,26 @@
@dragend="dragging = false"
>
<div>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="!doc ? $t('use_request') : ''"
class="icon button"
@click="!doc ? selectRequest() : {}"
>
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
>check_circle</i
>
<span v-else :class="getRequestLabelColor(request.method)">{{
request.method
}}</span>
<span>{{ request.name }}</span>
</button>
:class="[
getRequestLabelColor(request.method),
{ 'mx-3 text-green-400': isSelected },
]"
:icon="isSelected ? 'check_circle' : ''"
:label="request.method + request.name"
@click.native="!doc ? selectRequest() : {}"
/>
</div>
<tippy trigger="click" theme="popover" arrow>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<button
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
<ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
<i class="material-icons">more_vert</i>
</template>
<div>
<button
class="icon button"
@click="
<ButtonSecondary
@click.native="
$emit('edit-request', {
collectionIndex,
folderIndex,
@@ -51,16 +38,14 @@
folderPath,
})
"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
/>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</div>
<div>
<button class="icon button" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
<ButtonSecondary @click.native="confirmRemove = true" />
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</div>
</tippy>
</div>

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

@@ -1,85 +1,74 @@
<template>
<div>
<div class="transition duration-150 ease-in-out row-wrapper">
<button class="icon button" @click="toggleShowChildren">
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<div class="ease-in-out row-wrapper">
<ButtonSecondary @click.native="toggleShowChildren" />
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<i v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder</i>
<span>{{ collection.title }}</span>
<i v-else class="material-icons">folder</i>
<span>{{ collection.title }}</span>
</button>
<div>
<button
<ButtonSecondary
v-if="doc && !selected"
v-tippy="{ theme: 'tooltip' }"
:title="$t('import')"
class="icon button"
@click="$emit('select-collection')"
>
<i class="material-icons">check_box_outline_blank</i>
</button>
<button
@click.native="$emit('select-collection')"
/>
<i class="material-icons">check_box_outline_blank</i>
<ButtonSecondary
v-if="doc && selected"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
class="icon button"
@click="$emit('unselect-collection')"
>
<i class="material-icons">check_box</i>
</button>
<tippy trigger="click" theme="popover" arrow>
@click.native="$emit('unselect-collection')"
/>
<i class="material-icons">check_box</i>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<button
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
/>
<i class="material-icons">more_vert</i>
</template>
<div>
<button
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon button"
@click="
@click.native="
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
/>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</div>
<div>
<button
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon button"
@click="$emit('edit-collection')"
>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
@click.native="$emit('edit-collection')"
/>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</div>
<div>
<button
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon button"
@click="confirmRemove = true"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
@click.native="confirmRemove = true"
/>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</div>
</tippy>
</div>

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

@@ -1,49 +1,43 @@
<template>
<div>
<div class="transition duration-150 ease-in-out row-wrapper">
<div class="ease-in-out row-wrapper">
<div>
<button class="icon button" @click="toggleShowChildren">
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<ButtonSecondary @click.native="toggleShowChildren" />
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<i v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder_open</i>
<span>{{ folder.name ? folder.name : folder.title }}</span>
</button>
<i v-else class="material-icons">folder_open</i>
<span>{{ folder.name ? folder.name : folder.title }}</span>
</div>
<tippy trigger="click" theme="popover" arrow>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<button
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
/>
<i class="material-icons">more_vert</i>
</template>
<div>
<button
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon button"
@click="$emit('add-folder', { folder, path: folderPath })"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
@click.native="$emit('add-folder', { folder, path: folderPath })"
/>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</div>
<div>
<button
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon button"
@click="
@click.native="
$emit('edit-folder', {
folder,
folderIndex,
@@ -51,20 +45,17 @@
folderPath: '',
})
"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
/>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</div>
<div>
<button
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon button"
@click="confirmRemove = true"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
@click.native="confirmRemove = true"
/>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</div>
</tippy>
</div>

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

@@ -1,38 +1,33 @@
<template>
<div>
<div class="transition duration-150 ease-in-out row-wrapper">
<div class="ease-in-out row-wrapper">
<div>
<button
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="!doc ? $t('use_request') : ''"
class="icon button"
@click="!doc ? selectRequest() : {}"
@click.native="!doc ? selectRequest() : {}"
/>
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
>check_circle</i
>
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
>check_circle</i
>
<span v-else :class="getRequestLabelColor(request.method)">{{
request.method
}}</span>
<span>{{ request.name }}</span>
</button>
<span v-else :class="getRequestLabelColor(request.method)">{{
request.method
}}</span>
<span>{{ request.name }}</span>
</div>
<tippy trigger="click" theme="popover" arrow>
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
<template #trigger>
<button
<ButtonSecondary
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
/>
<i class="material-icons">more_vert</i>
</template>
<div>
<button
class="icon button"
@click="
<ButtonSecondary
@click.native="
$emit('edit-request', {
collectionIndex,
folderIndex,
@@ -41,16 +36,14 @@
requestIndex,
})
"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
/>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</div>
<div>
<button class="icon button" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
<ButtonSecondary @click.native="confirmRemove = true" />
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</div>
</tippy>
</div>