is a light-weight, web based API development suite.
| Folder.vue (hoppscotch-2.0.0) | : | Folder.vue (hoppscotch-2.1.0) |
|---|
| | |
| skipping to change at line 16 | | skipping to change at line 16 |
|---|
| @drop.prevent="dropEvent" | | @drop.prevent="dropEvent" |
| @dragover="dragging = true" | | @dragover="dragging = true" |
| @drop="dragging = false" | | @drop="dragging = false" |
| @dragleave="dragging = false" | | @dragleave="dragging = false" |
| @dragend="dragging = false" | | @dragend="dragging = false" |
| > | | > |
| <span | | <span |
| class="cursor-pointer flex px-4 justify-center items-center" | | class="cursor-pointer flex px-4 justify-center items-center" |
| @click="toggleShowChildren()" | | @click="toggleShowChildren()" |
| > | | > |
|
| <i class="material-icons" :class="{ 'text-green-500': isSelected }"> | | <SmartIcon |
| {{ getCollectionIcon }} | | class="svg-icons" |
| </i> | | :class="{ 'text-green-500': isSelected }" |
| | :name="getCollectionIcon" |
| | /> |
| </span> | | </span> |
| <span | | <span |
| class=" | | class=" |
| cursor-pointer | | cursor-pointer |
| flex flex-1 | | flex flex-1 |
| min-w-0 | | min-w-0 |
| py-2 | | py-2 |
| pr-2 | | pr-2 |
| transition | | transition |
| group-hover:text-secondaryDark | | group-hover:text-secondaryDark |
| " | | " |
| @click="toggleShowChildren()" | | @click="toggleShowChildren()" |
| > | | > |
| <span class="truncate"> | | <span class="truncate"> |
| {{ folder.name ? folder.name : folder.title }} | | {{ folder.name ? folder.name : folder.title }} |
| </span> | | </span> |
| </span> | | </span> |
| <div class="flex"> | | <div class="flex"> |
| <ButtonSecondary | | <ButtonSecondary |
| v-tippy="{ theme: 'tooltip' }" | | v-tippy="{ theme: 'tooltip' }" |
|
| icon="create_new_folder" | | svg="folder-plus" |
| :title="$t('folder.new')" | | :title="$t('folder.new')" |
| class="hidden group-hover:inline-flex" | | class="hidden group-hover:inline-flex" |
| @click.native="$emit('add-folder', { folder, path: folderPath })" | | @click.native="$emit('add-folder', { folder, path: folderPath })" |
| /> | | /> |
| <span> | | <span> |
| <tippy | | <tippy |
| ref="options" | | ref="options" |
| interactive | | interactive |
| trigger="click" | | trigger="click" |
| theme="popover" | | theme="popover" |
| arrow | | arrow |
| > | | > |
| <template #trigger> | | <template #trigger> |
| <ButtonSecondary | | <ButtonSecondary |
| v-tippy="{ theme: 'tooltip' }" | | v-tippy="{ theme: 'tooltip' }" |
| :title="$t('action.more')" | | :title="$t('action.more')" |
|
| icon="more_vert" | | svg="more-vertical" |
| /> | | /> |
| </template> | | </template> |
| <SmartItem | | <SmartItem |
|
| icon="create_new_folder" | | svg="folder-plus" |
| :label="$t('folder.new')" | | :label="$t('folder.new')" |
| @click.native=" | | @click.native=" |
|
| $emit('add-folder', { folder, path: folderPath }) | | () => { |
| $refs.options.tippy().hide() | | $emit('add-folder', { folder, path: folderPath }) |
| | $refs.options.tippy().hide() |
| | } |
| " | | " |
| /> | | /> |
| <SmartItem | | <SmartItem |
|
| icon="edit" | | svg="edit" |
| :label="$t('action.edit')" | | :label="$t('action.edit')" |
| @click.native=" | | @click.native=" |
|
| $emit('edit-folder', { | | () => { |
| folder, | | $emit('edit-folder', { |
| folderIndex, | | folder, |
| collectionIndex, | | folderIndex, |
| folderPath, | | collectionIndex, |
| }) | | folderPath, |
| $refs.options.tippy().hide() | | }) |
| | $refs.options.tippy().hide() |
| | } |
| " | | " |
| /> | | /> |
| <SmartItem | | <SmartItem |
|
| icon="delete" | | svg="trash-2" |
| color="red" | | color="red" |
| :label="$t('action.delete')" | | :label="$t('action.delete')" |
| @click.native=" | | @click.native=" |
|
| confirmRemove = true | | () => { |
| $refs.options.tippy().hide() | | confirmRemove = true |
| | $refs.options.tippy().hide() |
| | } |
| " | | " |
| /> | | /> |
| </tippy> | | </tippy> |
| </span> | | </span> |
| </div> | | </div> |
| </div> | | </div> |
|
| <div v-if="showChildren || isFiltered"> | | <div v-if="showChildren || isFiltered" class="flex"> |
| <CollectionsMyFolder | | |
| v-for="(subFolder, subFolderIndex) in folder.folders" | | |
| :key="`subFolder-${subFolderIndex}`" | | |
| class="border-l border-dividerLight ml-6" | | |
| :folder="subFolder" | | |
| :folder-index="subFolderIndex" | | |
| :collection-index="collectionIndex" | | |
| :doc="doc" | | |
| :save-request="saveRequest" | | |
| :collections-type="collectionsType" | | |
| :folder-path="`${folderPath}/${subFolderIndex}`" | | |
| :picked="picked" | | |
| @add-folder="$emit('add-folder', $event)" | | |
| @edit-folder="$emit('edit-folder', $event)" | | |
| @edit-request="$emit('edit-request', $event)" | | |
| @update-team-collections="$emit('update-team-collections')" | | |
| @select="$emit('select', $event)" | | |
| @remove-request="removeRequest" | | |
| /> | | |
| <CollectionsMyRequest | | |
| v-for="(request, index) in folder.requests" | | |
| :key="`request-${index}`" | | |
| class="border-l border-dividerLight ml-6" | | |
| :request="request" | | |
| :collection-index="collectionIndex" | | |
| :folder-index="folderIndex" | | |
| :folder-name="folder.name" | | |
| :folder-path="folderPath" | | |
| :request-index="index" | | |
| :doc="doc" | | |
| :picked="picked" | | |
| :save-request="saveRequest" | | |
| :collections-type="collectionsType" | | |
| @edit-request="$emit('edit-request', $event)" | | |
| @select="$emit('select', $event)" | | |
| @remove-request="removeRequest" | | |
| /> | | |
| <div | | <div |
|
| v-if=" | | |
| folder.folders && | | |
| folder.folders.length === 0 && | | |
| folder.requests && | | |
| folder.requests.length === 0 | | |
| " | | |
| class=" | | class=" |
|
| border-l border-dividerLight | | flex |
| flex flex-col | | w-1 |
| text-secondaryLight | | transform |
| ml-6 | | transition |
| p-4 | | cursor-nsResize |
| items-center | | ml-5.5 |
| justify-center | | bg-dividerLight |
| | hover:scale-x-125 hover:bg-dividerDark |
| " | | " |
|
| > | | @click="toggleShowChildren()" |
| <i class="opacity-75 pb-2 material-icons">folder_open</i> | | ></div> |
| <span class="text-center"> | | <div class="flex flex-col flex-1 truncate"> |
| {{ $t("empty.folder") }} | | <CollectionsMyFolder |
| </span> | | v-for="(subFolder, subFolderIndex) in folder.folders" |
| | :key="`subFolder-${subFolderIndex}`" |
| | :folder="subFolder" |
| | :folder-index="subFolderIndex" |
| | :collection-index="collectionIndex" |
| | :doc="doc" |
| | :save-request="saveRequest" |
| | :collections-type="collectionsType" |
| | :folder-path="`${folderPath}/${subFolderIndex}`" |
| | :picked="picked" |
| | @add-folder="$emit('add-folder', $event)" |
| | @edit-folder="$emit('edit-folder', $event)" |
| | @edit-request="$emit('edit-request', $event)" |
| | @update-team-collections="$emit('update-team-collections')" |
| | @select="$emit('select', $event)" |
| | @remove-request="removeRequest" |
| | /> |
| | <CollectionsMyRequest |
| | v-for="(request, index) in folder.requests" |
| | :key="`request-${index}`" |
| | :request="request" |
| | :collection-index="collectionIndex" |
| | :folder-index="folderIndex" |
| | :folder-name="folder.name" |
| | :folder-path="folderPath" |
| | :request-index="index" |
| | :doc="doc" |
| | :picked="picked" |
| | :save-request="saveRequest" |
| | :collections-type="collectionsType" |
| | @edit-request="$emit('edit-request', $event)" |
| | @select="$emit('select', $event)" |
| | @remove-request="removeRequest" |
| | /> |
| | <div |
| | v-if=" |
| | folder.folders && |
| | folder.folders.length === 0 && |
| | folder.requests && |
| | folder.requests.length === 0 |
| | " |
| | class=" |
| | flex flex-col |
| | text-secondaryLight |
| | p-4 |
| | items-center |
| | justify-center |
| | " |
| | > |
| | <img |
| | :src="`/images/states/${$colorMode.value}/pack.svg`" |
| | loading="lazy" |
| | class=" |
| | flex-col |
| | mb-4 |
| | object-contain object-center |
| | h-16 |
| | w-16 |
| | inline-flex |
| | " |
| | /> |
| | <span class="text-center"> |
| | {{ $t("empty.folder") }} |
| | </span> |
| | </div> |
| </div> | | </div> |
| </div> | | </div> |
| <SmartConfirmModal | | <SmartConfirmModal |
| :show="confirmRemove" | | :show="confirmRemove" |
| :title="$t('confirm.remove_folder')" | | :title="$t('confirm.remove_folder')" |
| @hide-modal="confirmRemove = false" | | @hide-modal="confirmRemove = false" |
| @resolve="removeFolder" | | @resolve="removeFolder" |
| /> | | /> |
| </div> | | </div> |
| </template> | | </template> |
| | |
| skipping to change at line 202 | | skipping to change at line 232 |
|---|
| }, | | }, |
| computed: { | | computed: { |
| isSelected() { | | isSelected() { |
| return ( | | return ( |
| this.picked && | | this.picked && |
| this.picked.pickedType === "my-folder" && | | this.picked.pickedType === "my-folder" && |
| this.picked.folderPath === this.folderPath | | this.picked.folderPath === this.folderPath |
| ) | | ) |
| }, | | }, |
| getCollectionIcon() { | | 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" |
|
| else if (this.showChildren || this.isFiltered) return "folder_open" | | else if (this.showChildren || this.isFiltered) return "folder-minus" |
| else return "folder" | | else return "folder" |
| }, | | }, |
| }, | | }, |
| methods: { | | methods: { |
| toggleShowChildren() { | | toggleShowChildren() { |
| if (this.$props.saveRequest) | | if (this.$props.saveRequest) |
| this.$emit("select", { | | this.$emit("select", { |
| picked: { | | picked: { |
| pickedType: "my-folder", | | pickedType: "my-folder", |
| collectionIndex: this.collectionIndex, | | collectionIndex: this.collectionIndex, |
| | | |
| End of changes. 15 change blocks. |
|---|
| 77 lines changed or deleted | | 107 lines changed or added |
|---|
"Fossies" - the Fresh Open Source Software Archive 