refactor: update hopp-ui to be independent (#2927)

Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>
This commit is contained in:
Andrew Bastin
2023-02-24 13:20:12 +05:30
committed by GitHub
parent 82c6f6f6bc
commit cae1840506
165 changed files with 2134 additions and 2069 deletions

View File

@@ -1,5 +1,5 @@
<template>
<SmartModal
<HoppSmartModal
v-if="show"
dialog
:title="`${t('collection.new')}`"
@@ -24,12 +24,12 @@
</template>
<template #footer>
<span class="flex space-x-2">
<ButtonPrimary
<HoppButtonPrimary
:label="`${t('action.save')}`"
outline
@click="addNewCollection"
/>
<ButtonSecondary
<HoppButtonSecondary
:label="`${t('action.cancel')}`"
outline
filled
@@ -37,7 +37,7 @@
/>
</span>
</template>
</SmartModal>
</HoppSmartModal>
</template>
<script lang="ts">

View File

@@ -1,5 +1,5 @@
<template>
<SmartModal
<HoppSmartModal
v-if="show"
dialog
:title="t('folder.new')"
@@ -24,8 +24,12 @@
</template>
<template #footer>
<span class="flex space-x-2">
<ButtonPrimary :label="t('action.save')" outline @click="addFolder" />
<ButtonSecondary
<HoppButtonPrimary
:label="t('action.save')"
outline
@click="addFolder"
/>
<HoppButtonSecondary
:label="t('action.cancel')"
outline
filled
@@ -33,7 +37,7 @@
/>
</span>
</template>
</SmartModal>
</HoppSmartModal>
</template>
<script lang="ts">

View File

@@ -1,5 +1,5 @@
<template>
<SmartModal
<HoppSmartModal
v-if="show"
dialog
:title="t('request.new')"
@@ -24,8 +24,12 @@
</template>
<template #footer>
<span class="flex space-x-2">
<ButtonPrimary :label="t('action.save')" outline @click="addRequest" />
<ButtonSecondary
<HoppButtonPrimary
:label="t('action.save')"
outline
@click="addRequest"
/>
<HoppButtonSecondary
:label="t('action.cancel')"
outline
filled
@@ -33,7 +37,7 @@
/>
</span>
</template>
</SmartModal>
</HoppSmartModal>
</template>
<script setup lang="ts">

View File

@@ -29,7 +29,7 @@
</span>
</span>
<div class="flex">
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:icon="IconFilePlus"
:title="t('request.new')"
@@ -40,7 +40,7 @@
})
"
/>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:icon="IconFolderPlus"
:title="t('folder.new')"
@@ -59,7 +59,7 @@
theme="popover"
:on-shown="() => tippyActions.focus()"
>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.more')"
:icon="IconMoreVertical"
@@ -75,7 +75,7 @@
@keyup.delete="deleteAction.$el.click()"
@keyup.escape="hide()"
>
<SmartItem
<HoppSmartItem
ref="requestAction"
:icon="IconFilePlus"
:label="`${t('request.new')}`"
@@ -89,7 +89,7 @@
}
"
/>
<SmartItem
<HoppSmartItem
ref="folderAction"
:icon="IconFolderPlus"
:label="`${t('folder.new')}`"
@@ -103,7 +103,7 @@
}
"
/>
<SmartItem
<HoppSmartItem
ref="edit"
:icon="IconEdit"
:label="`${t('action.edit')}`"
@@ -115,7 +115,7 @@
}
"
/>
<SmartItem
<HoppSmartItem
ref="deleteAction"
:icon="IconTrash2"
:label="`${t('action.delete')}`"
@@ -186,7 +186,7 @@
<span class="pb-4 text-center">
{{ t("empty.collection") }}
</span>
<ButtonSecondary
<HoppButtonSecondary
:label="t('add.new')"
filled
outline
@@ -199,7 +199,7 @@
</div>
</div>
</div>
<SmartConfirmModal
<HoppSmartConfirmModal
:show="confirmRemove"
:title="`${t('confirm.remove_collection')}`"
@hide-modal="confirmRemove = false"

View File

@@ -1,5 +1,5 @@
<template>
<SmartModal
<HoppSmartModal
v-if="show"
dialog
:title="`${t('collection.edit')}`"
@@ -24,12 +24,12 @@
</template>
<template #footer>
<span class="flex space-x-2">
<ButtonPrimary
<HoppButtonPrimary
:label="`${t('action.save')}`"
outline
@click="saveCollection"
/>
<ButtonSecondary
<HoppButtonSecondary
:label="`${t('action.cancel')}`"
outline
filled
@@ -37,7 +37,7 @@
/>
</span>
</template>
</SmartModal>
</HoppSmartModal>
</template>
<script setup lang="ts">

View File

@@ -1,5 +1,5 @@
<template>
<SmartModal
<HoppSmartModal
v-if="show"
dialog
:title="`${t('folder.edit')}`"
@@ -24,12 +24,12 @@
</template>
<template #footer>
<span class="flex space-x-2">
<ButtonPrimary
<HoppButtonPrimary
:label="`${t('action.save')}`"
outline
@click="editFolder"
/>
<ButtonSecondary
<HoppButtonSecondary
:label="`${t('action.cancel')}`"
outline
filled
@@ -37,7 +37,7 @@
/>
</span>
</template>
</SmartModal>
</HoppSmartModal>
</template>
<script lang="ts">

View File

@@ -1,5 +1,5 @@
<template>
<SmartModal
<HoppSmartModal
v-if="show"
dialog
:title="`${t('modal.edit_request')}`"
@@ -24,12 +24,12 @@
</template>
<template #footer>
<span class="flex space-x-2">
<ButtonPrimary
<HoppButtonPrimary
:label="`${t('action.save')}`"
outline
@click="saveRequest"
/>
<ButtonSecondary
<HoppButtonSecondary
:label="`${t('action.cancel')}`"
outline
filled
@@ -37,7 +37,7 @@
/>
</span>
</template>
</SmartModal>
</HoppSmartModal>
</template>
<script lang="ts">

View File

@@ -29,14 +29,14 @@
</span>
</span>
<div class="flex">
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:icon="IconFilePlus"
:title="t('request.new')"
class="hidden group-hover:inline-flex"
@click="emit('add-request', { path: folderPath })"
/>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:icon="IconFolderPlus"
:title="t('folder.new')"
@@ -51,7 +51,7 @@
theme="popover"
:on-shown="() => tippyActions.focus()"
>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.more')"
:icon="IconMoreVertical"
@@ -67,7 +67,7 @@
@keyup.delete="deleteAction.$el.click()"
@keyup.escape="hide()"
>
<SmartItem
<HoppSmartItem
ref="requestAction"
:icon="IconFilePlus"
:label="`${t('request.new')}`"
@@ -79,7 +79,7 @@
}
"
/>
<SmartItem
<HoppSmartItem
ref="folderAction"
:icon="IconFolderPlus"
:label="`${t('folder.new')}`"
@@ -91,7 +91,7 @@
}
"
/>
<SmartItem
<HoppSmartItem
ref="edit"
:icon="IconEdit"
:label="`${t('action.edit')}`"
@@ -103,7 +103,7 @@
}
"
/>
<SmartItem
<HoppSmartItem
ref="deleteAction"
:icon="IconTrash2"
:label="`${t('action.delete')}`"
@@ -181,7 +181,7 @@
</div>
</div>
</div>
<SmartConfirmModal
<HoppSmartConfirmModal
:show="confirmRemove"
:title="`${t('confirm.remove_folder')}`"
@hide-modal="confirmRemove = false"

View File

@@ -1,5 +1,5 @@
<template>
<SmartModal
<HoppSmartModal
v-if="show"
dialog
:title="`${t('modal.collections')}`"
@@ -9,7 +9,7 @@
<template #actions>
<span>
<tippy interactive trigger="click" theme="popover">
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.more')"
:icon="IconMoreVertical"
@@ -22,7 +22,7 @@
tabindex="0"
@keyup.escape="hide()"
>
<SmartItem
<HoppSmartItem
:icon="IconGithub"
:label="t('import.from_gist')"
@click="
@@ -42,7 +42,7 @@
: undefined
"
>
<SmartItem
<HoppSmartItem
:disabled="
!currentUser
? true
@@ -67,7 +67,7 @@
</template>
<template #body>
<div class="flex flex-col space-y-2">
<SmartItem
<HoppSmartItem
:icon="IconFolderPlus"
:label="t('import.from_json')"
@click="openDialogChooseFileToImportFrom"
@@ -80,7 +80,7 @@
@change="importFromJSON"
/>
<hr />
<SmartItem
<HoppSmartItem
v-tippy="{ theme: 'tooltip' }"
:title="t('action.download_file')"
:icon="IconDownload"
@@ -89,7 +89,7 @@
/>
</div>
</template>
</SmartModal>
</HoppSmartModal>
</template>
<script setup lang="ts">

View File

@@ -28,7 +28,7 @@
</span>
</span>
<div class="flex">
<ButtonSecondary
<HoppButtonSecondary
v-if="!saveRequest"
v-tippy="{ theme: 'tooltip' }"
:icon="IconRotateCCW"
@@ -44,7 +44,7 @@
theme="popover"
:on-shown="() => tippyActions.focus()"
>
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.more')"
:icon="IconMoreVertical"
@@ -59,7 +59,7 @@
@keyup.delete="deleteAction.$el.click()"
@keyup.escape="hide()"
>
<SmartItem
<HoppSmartItem
ref="edit"
:icon="IconEdit"
:label="`${t('action.edit')}`"
@@ -75,7 +75,7 @@
}
"
/>
<SmartItem
<HoppSmartItem
ref="duplicate"
:icon="IconCopy"
:label="`${t('action.duplicate')}`"
@@ -91,7 +91,7 @@
}
"
/>
<SmartItem
<HoppSmartItem
ref="deleteAction"
:icon="IconTrash2"
:label="`${t('action.delete')}`"
@@ -109,7 +109,7 @@
</span>
</div>
</div>
<SmartConfirmModal
<HoppSmartConfirmModal
:show="confirmRemove"
:title="`${t('confirm.remove_request')}`"
@hide-modal="confirmRemove = false"

View File

@@ -16,21 +16,21 @@
<div
class="flex justify-between flex-1 flex-shrink-0 border-y bg-primary border-dividerLight"
>
<ButtonSecondary
<HoppButtonSecondary
:icon="IconPlus"
:label="t('action.new')"
class="!rounded-none"
@click="displayModalAdd(true)"
/>
<div class="flex">
<ButtonSecondary
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/collections"
blank
:title="t('app.wiki')"
:icon="IconHelpCircle"
/>
<ButtonSecondary
<HoppButtonSecondary
v-if="!saveRequest"
v-tippy="{ theme: 'tooltip' }"
:title="t('modal.import_export')"
@@ -73,7 +73,7 @@
<span class="pb-4 text-center">
{{ t("empty.collections") }}
</span>
<ButtonSecondary
<HoppButtonSecondary
:label="t('add.new')"
filled
outline