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

chore: added micro interactions (#3783)

Browse Source 
Co-authored-by: Dmitry <mukovkin@yandex.ru>
This commit is contained in:
Liyas Thomas
2024-01-30 18:42:42 +05:30
committed by GitHub
parent 1df9de44b7
commit 0d0ad7a2f8
51 changed files with 1289 additions and 1131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
packages/hoppscotch-common/src/components/app/Footer.vue
View File

@@ -35,7 +35,7 @@
:on-shown="() => tippyActions!.focus()"
>
<HoppButtonSecondary
:icon="IconLifeBuoy"
:icon="IconHelpCircle"
class="!rounded-none"
:label="`${t('app.help')}`"
/>
@@ -70,33 +70,18 @@
}
"
/>
<!--
<HoppSmartItem
ref="chat"
:icon="IconMessageCircle"
:label="`${t('app.chat_with_us')}`"
:shortcut="['C']"
@click="
() => {
chatWithUs()
hide()
}
"
/>
-->
<template
v-for="footerItem in platform.ui?.additionalFooterMenuItems"
:key="footerItem.id"
>
<template v-if="footerItem.action.type === 'link'">
<HoppSmartItem
:icon="footerItem.icon"
:label="footerItem.text(t)"
:to="footerItem.action.href"
blank
@click="hide()"
/>
</template>
<HoppSmartItem
v-if="footerItem.action.type === 'link'"
:icon="footerItem.icon"
:label="footerItem.text(t)"
:to="footerItem.action.href"
blank
@click="hide()"
/>
<HoppSmartItem
v-else
:icon="footerItem.icon"
@@ -223,7 +208,7 @@ import IconGithub from "~icons/lucide/github"
import IconTwitter from "~icons/lucide/twitter"
import IconUserPlus from "~icons/lucide/user-plus"
import IconLock from "~icons/lucide/lock"
import IconLifeBuoy from "~icons/lucide/life-buoy"
import IconHelpCircle from "~icons/lucide/help-circle"
import { useSetting } from "@composables/settings"
import { useI18n } from "@composables/i18n"
import { useReadonlyStream } from "@composables/stream"

162
packages/hoppscotch-common/src/components/app/Logo.vue
View File

@@ -1,66 +1,158 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 512 512"
width="824"
height="824"
viewBox="0 0 824 824"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="512" height="512" fill="#10B981" />
<circle cx="197.76" cy="157.84" r="10" fill="white" fill-opacity="0.75" />
<circle cx="259.76" cy="161.84" r="12" fill="white" fill-opacity="0.75" />
<circle cx="319.76" cy="177.84" r="10" fill="white" fill-opacity="0.75" />
<path
d="M344.963 235.676C347.038 222.978 306.091 205.872 253.996 197.582C201.906 189.286 157.592 192.917 155.516 205.615C155.259 206.65 155.516 207.427 155.779 208.468C154.481 207.947 79.0651 419.68 79.0651 419.68H364.139C364.139 419.68 346.518 238.266 343.928 238.266C344.443 237.494 344.963 236.717 344.963 235.676Z"
fill="url(#paint0_linear_106_2)"
/>
<path
d="M314.902 227.386C313.604 235.419 284.063 237.231 248.559 231.788C213.312 226.088 185.577 214.945 186.875 207.17C187.396 204.58 190.763 202.505 196.206 201.47C178.065 202.247 166.144 205.615 165.11 211.315C163.555 221.943 199.836 236.454 246.483 243.972C293.13 251.484 332.265 248.637 334.077 238.272C335.118 232.046 324.747 225.311 307.646 218.833C312.569 221.68 315.159 224.79 314.902 227.386Z"
fill="#A7F3D0"
<rect width="824" height="824" rx="184" fill="#08110F" />
<rect
width="824"
height="824"
rx="184"
fill="url(#paint0_radial_0_21)"
fill-opacity="0.5"
/>
<path
d="M333.557 157.413C330.453 125.276 305.828 98.0618 272.657 92.8821C239.485 87.6965 208.126 105.837 194.908 135.121C216.159 136.419 238.965 138.752 262.812 142.639C288.208 146.527 312.049 151.713 333.557 157.413Z"
fill="url(#paint1_radial_106_2)"
d="M435.425 463.217C429.441 476.657 411.033 481.515 394.309 474.07C377.585 466.624 368.879 449.693 374.863 436.253C380.846 422.813 399.254 417.954 415.978 425.4C432.702 432.846 441.409 449.777 435.425 463.217Z"
fill="url(#paint1_linear_0_21)"
/>
<path
d="M74.1425 158.002C71.5527 173.81 104.461 193.249 156.036 209.057C155.779 208.017 155.779 207.239 155.779 206.204C157.849 193.506 201.906 189.876 254.259 198.172C306.606 206.462 347.296 223.568 345.22 236.266C344.963 237.306 344.706 238.084 344.185 238.855C397.83 239.633 435.153 231.343 437.742 215.535C441.367 191.431 363.104 159.037 262.812 143.229C162.257 127.421 77.7672 133.898 74.1425 158.002ZM189.728 156.704C190.506 152.559 194.393 149.449 198.538 150.227C202.683 151.004 205.794 154.892 205.016 159.037C204.496 163.182 200.351 166.035 196.206 165.515C192.061 164.737 188.951 160.849 189.728 156.704ZM249.594 160.849C250.371 155.149 255.814 151.262 261.514 152.302C267.214 153.08 271.102 158.517 270.067 164.223C269.026 169.665 263.589 173.553 258.147 172.776C252.441 171.998 248.553 166.555 249.594 160.849ZM312.569 176.143C313.347 171.998 317.234 168.888 321.379 169.665C325.524 170.443 328.634 174.331 327.857 178.476C327.342 182.621 323.192 185.731 319.047 184.953C314.902 184.176 311.791 180.288 312.569 176.143Z"
fill="url(#paint2_radial_106_2)"
d="M435.425 463.217C429.441 476.657 411.033 481.515 394.309 474.07C377.585 466.624 368.879 449.693 374.863 436.253C380.846 422.813 399.254 417.954 415.978 425.4C432.702 432.846 441.409 449.777 435.425 463.217Z"
fill="url(#paint2_radial_0_21)"
style="mix-blend-mode: soft-light"
/>
<path
d="M535.563 521.172C553.071 526.191 570.536 518.856 574.571 504.789C578.606 490.722 567.684 475.251 550.175 470.232C532.666 465.213 515.201 472.548 511.166 486.615C507.131 500.682 518.054 516.153 535.563 521.172Z"
fill="url(#paint3_linear_0_21)"
/>
<path
d="M535.563 521.172C553.071 526.191 570.536 518.856 574.571 504.789C578.606 490.722 567.684 475.251 550.175 470.232C532.666 465.213 515.201 472.548 511.166 486.615C507.131 500.682 518.054 516.153 535.563 521.172Z"
fill="url(#paint4_radial_0_21)"
style="mix-blend-mode: soft-light"
/>
<path
d="M292.782 355.633C308.227 365.286 314.462 383.173 306.709 395.584C298.955 407.995 280.149 410.231 264.704 400.578C249.258 390.924 243.023 373.037 250.777 360.626C258.53 348.215 277.337 345.98 292.782 355.633Z"
fill="url(#paint5_linear_0_21)"
/>
<path
d="M292.782 355.633C308.227 365.286 314.462 383.173 306.709 395.584C298.955 407.995 280.149 410.231 264.704 400.578C249.258 390.924 243.023 373.037 250.777 360.626C258.53 348.215 277.337 345.98 292.782 355.633Z"
fill="url(#paint6_radial_0_21)"
style="mix-blend-mode: soft-light"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M502.355 231.325C581.373 266.506 632.095 343.263 634.119 429.03C680.633 465.639 726.858 516.883 705.36 565.168C681.25 619.319 595.382 617.091 497.781 589.689C450.767 615.718 392.444 620.168 339.689 596.68C286.934 573.192 251.229 526.908 239.1 474.517C153.428 420.321 94.3151 357.999 118.425 303.847C139.923 255.562 208.935 255.626 267.265 265.697C332.356 209.81 423.338 196.144 502.355 231.325ZM159.38 322.082C147.667 348.389 210.578 423.052 382.845 499.751C555.111 576.449 652.693 573.241 664.405 546.934C674.099 525.16 634.213 483.308 588.537 450.878C553.009 425.484 504.344 397.494 440.864 369.231C423.586 361.538 416.839 341.008 424.104 324.691C431.369 308.374 447.329 297.463 480.93 295.91C496.747 295.862 498.823 291.476 499.546 287.716C500.442 281.915 492.401 276.002 484.108 272.31C418.17 242.953 337.453 255.265 281.503 314.178C226.84 301.933 169.074 300.309 159.38 322.082Z"
fill="url(#paint7_linear_0_21)"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M502.355 231.325C581.373 266.506 632.095 343.263 634.119 429.03C680.633 465.639 726.858 516.883 705.36 565.168C681.25 619.319 595.382 617.091 497.781 589.689C450.767 615.718 392.444 620.168 339.689 596.68C286.934 573.192 251.229 526.908 239.1 474.517C153.428 420.321 94.3151 357.999 118.425 303.847C139.923 255.562 208.935 255.626 267.265 265.697C332.356 209.81 423.338 196.144 502.355 231.325ZM159.38 322.082C147.667 348.389 210.578 423.052 382.845 499.751C555.111 576.449 652.693 573.241 664.405 546.934C674.099 525.16 634.213 483.308 588.537 450.878C553.009 425.484 504.344 397.494 440.864 369.231C423.586 361.538 416.839 341.008 424.104 324.691C431.369 308.374 447.329 297.463 480.93 295.91C496.747 295.862 498.823 291.476 499.546 287.716C500.442 281.915 492.401 276.002 484.108 272.31C418.17 242.953 337.453 255.265 281.503 314.178C226.84 301.933 169.074 300.309 159.38 322.082Z"
fill="url(#paint8_radial_0_21)"
style="mix-blend-mode: soft-light"
/>
<defs>
<radialGradient
id="paint0_radial_0_21"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(814.524 12.36) rotate(125.613) scale(1089.59 1210.34)"
>
<stop stop-color="#00D196" stop-opacity="0.5" />
<stop offset="0.996771" stop-color="#00D196" stop-opacity="0" />
</radialGradient>
<linearGradient
id="paint0_linear_106_2"
x1="224.998"
y1="157.606"
x2="224.998"
y2="403.696"
id="paint1_linear_0_21"
x1="411.893"
y1="212"
x2="411.893"
y2="612"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#86EFAC" stop-opacity="0.75" />
<stop offset="0.635417" stop-color="white" stop-opacity="0.2" />
<stop offset="1" stop-color="white" stop-opacity="0" />
<stop stop-color="#00D196" />
<stop offset="1" stop-color="#00B381" />
</linearGradient>
<radialGradient
id="paint1_radial_106_2"
id="paint2_radial_0_21"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(264.232 124.706) rotate(90) scale(32.7063 69.3245)"
gradientTransform="translate(644.721 344.481) rotate(159.984) scale(631.37 385.135)"
>
<stop stop-color="#047857" />
<stop offset="1" stop-color="#064E3B" />
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</radialGradient>
<linearGradient
id="paint3_linear_0_21"
x1="411.893"
y1="212"
x2="411.893"
y2="612"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#00D196" />
<stop offset="1" stop-color="#00B381" />
</linearGradient>
<radialGradient
id="paint2_radial_106_2"
id="paint4_radial_0_21"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(255.837 186.754) scale(1389.61 1389.61)"
gradientTransform="translate(644.721 344.481) rotate(159.984) scale(631.37 385.135)"
>
<stop stop-color="#047857" />
<stop offset="0.114583" stop-color="#064E3B" />
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</radialGradient>
<linearGradient
id="paint5_linear_0_21"
x1="411.893"
y1="212"
x2="411.893"
y2="612"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#00D196" />
<stop offset="1" stop-color="#00B381" />
</linearGradient>
<radialGradient
id="paint6_radial_0_21"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(644.721 344.481) rotate(159.984) scale(631.37 385.135)"
>
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</radialGradient>
<linearGradient
id="paint7_linear_0_21"
x1="411.893"
y1="212"
x2="411.893"
y2="612"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#00D196" />
<stop offset="1" stop-color="#00B381" />
</linearGradient>
<radialGradient
id="paint8_radial_0_21"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(644.721 344.481) rotate(159.984) scale(631.37 385.135)"
>
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</radialGradient>
</defs>
</svg>

2
packages/hoppscotch-common/src/components/history/index.vue
View File

@@ -111,7 +111,7 @@
</div>
<HoppSmartPlaceholder
v-if="history.length === 0"
:src="`/images/states/${colorMode.value}/history.svg`"
:src="`/images/states/${colorMode.value}/time.svg`"
:alt="`${t('empty.history')}`"
:text="t('empty.history')"
/>

6
packages/hoppscotch-common/src/components/http/ResponseMeta.vue
View File

@@ -31,11 +31,10 @@
/>
<HoppSmartPlaceholder
v-if="response.type === 'network_fail'"
:src="`/images/states/${colorMode.value}/youre_lost.svg`"
:src="`/images/states/${colorMode.value}/upload_error.svg`"
:alt="`${t('error.network_fail')}`"
:heading="t('error.network_fail')"
:text="t('helpers.network_fail')"
large
>
<template #body>
<AppInterceptor class="rounded border border-dividerLight p-2" />
@@ -43,11 +42,10 @@
</HoppSmartPlaceholder>
<HoppSmartPlaceholder
v-if="response.type === 'script_fail'"
:src="`/images/states/${colorMode.value}/youre_lost.svg`"
:src="`/images/states/${colorMode.value}/upload_error.svg`"
:alt="`${t('error.script_fail')}`"
:label="t('error.script_fail')"
:text="t('helpers.script_fail')"
large
>
<template #body>
<div

2
packages/hoppscotch-common/src/components/http/TestResult.vue
View File

@@ -162,7 +162,7 @@
</div>
<HoppSmartPlaceholder
v-else-if="testResults && testResults.scriptError"
:src="`/images/states/${colorMode.value}/youre_lost.svg`"
:src="`/images/states/${colorMode.value}/upload_error.svg`"
:alt="`${t('error.test_script_fail')}`"
:heading="t('error.test_script_fail')"
:text="t('helpers.test_script_fail')"

3
packages/hoppscotch-common/src/components/interceptors/ErrorPlaceholder.vue
View File

@@ -1,9 +1,8 @@
<template>
<HoppSmartPlaceholder
:src="`/images/states/${colorMode.value}/youre_lost.svg`"
:src="`/images/states/${colorMode.value}/upload_error.svg`"
:alt="`${t('error.network_fail')}`"
:heading="t('error.network_fail')"
large
>
<template #body>
<div class="my-1 flex flex-col items-center text-secondaryLight">

6
packages/hoppscotch-common/src/components/teams/MemberStack.vue
View File

@@ -3,13 +3,13 @@
<div
v-for="(member, index) in slicedTeamMembers"
:key="`member-${index}`"
class="inline-flex"
class="inline-flex group cursor-pointer"
>
<HoppSmartPicture
v-tippy="{ theme: 'tooltip' }"
:name="member.user.uid"
:title="getUserName(member as TeamMember)"
class="ring-2 ring-primary"
class="ring-2 ring-primary group-hover:-translate-y-1 transition-transform"
@click="handleClick()"
/>
</div>
@@ -51,7 +51,7 @@ const getUserName = (member: TeamMember): string =>
member.user.email ||
t("profile.default_hopp_displayname")
const maxMembersSoftLimit = 4
const maxMembersSoftLimit = 3
const maxMembersHardLimit = 6
const slicedTeamMembers = computed(() => {