feat: replacing windicss by tailwindcss in hoppscotch-ui (#3076)
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com> Co-authored-by: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Co-authored-by: nivedin <nivedinp@gmail.com>
This commit is contained in:
Anwarul Islam
GitHub
parent
59b5a50a97
commit
a215860782
174 changed files with 6921 additions and 5185 deletions
|
|
@ -4,5 +4,6 @@ module.exports = {
|
||||||
singleQuote: false,
|
singleQuote: false,
|
||||||
printWidth: 80,
|
printWidth: 80,
|
||||||
useTabs: false,
|
useTabs: false,
|
||||||
tabWidth: 2
|
tabWidth: 2,
|
||||||
|
plugins: ["prettier-plugin-tailwindcss"],
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,25 @@
|
||||||
|
/*
|
||||||
|
* Write hoppscotch-common related custom styles in this file.
|
||||||
|
* If styles are sharable across all package then write into hoppscotch-ui/assets/scss/styles.scss file.
|
||||||
|
*/
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@apply backface-hidden;
|
backface-visibility: hidden;
|
||||||
@apply before:backface-hidden;
|
-moz-backface-visibility: hidden;
|
||||||
@apply after:backface-hidden;
|
-webkit-backface-visibility: hidden;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
backface-visibility: hidden;
|
||||||
|
-moz-backface-visibility: hidden;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
backface-visibility: hidden;
|
||||||
|
-moz-backface-visibility: hidden;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
@apply selection:bg-accentDark;
|
@apply selection:bg-accentDark;
|
||||||
@apply selection:text-accentContrast;
|
@apply selection:text-accentContrast;
|
||||||
@apply overscroll-none;
|
@apply overscroll-none;
|
||||||
|
|
@ -11,17 +29,25 @@
|
||||||
@apply antialiased;
|
@apply antialiased;
|
||||||
accent-color: var(--accent-color);
|
accent-color: var(--accent-color);
|
||||||
font-variant-ligatures: common-ligatures;
|
font-variant-ligatures: common-ligatures;
|
||||||
|
|
||||||
|
// Colors
|
||||||
|
--info-color: #ec4899;
|
||||||
|
--success-color: #10b981;
|
||||||
|
--blue-color: #3b82f6;
|
||||||
|
--warning-color: #f59e0b;
|
||||||
|
--cl-error-color: #ef4444;
|
||||||
|
--sv-error-color: #dc2626;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
@apply bg-transparent;
|
@apply bg-transparent;
|
||||||
@apply border-solid border-l border-dividerLight border-t-0 border-b-0 border-r-0;
|
@apply border-b-0 border-l border-r-0 border-t-0 border-solid border-dividerLight;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
@apply bg-divider bg-clip-content;
|
@apply bg-divider bg-clip-content;
|
||||||
@apply rounded-full;
|
@apply rounded-full;
|
||||||
@apply border-solid border-transparent border-4;
|
@apply border-4 border-solid border-transparent;
|
||||||
@apply hover:bg-dividerDark;
|
@apply hover:bg-dividerDark;
|
||||||
@apply hover:bg-clip-content;
|
@apply hover:bg-clip-content;
|
||||||
}
|
}
|
||||||
|
|
@ -54,7 +80,7 @@ html {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@apply bg-primary;
|
@apply bg-primary;
|
||||||
@apply text-secondary text-body;
|
@apply text-body text-secondary;
|
||||||
@apply font-medium;
|
@apply font-medium;
|
||||||
@apply select-none;
|
@apply select-none;
|
||||||
@apply overflow-x-hidden;
|
@apply overflow-x-hidden;
|
||||||
|
|
@ -124,8 +150,8 @@ a {
|
||||||
|
|
||||||
&.link {
|
&.link {
|
||||||
@apply items-center;
|
@apply items-center;
|
||||||
@apply py-0.5 px-1;
|
@apply px-1 py-0.5;
|
||||||
@apply -my-0.5 -mx-1;
|
@apply -mx-1 -my-0.5;
|
||||||
@apply text-accent;
|
@apply text-accent;
|
||||||
@apply rounded;
|
@apply rounded;
|
||||||
@apply hover:text-accentDark;
|
@apply hover:text-accentDark;
|
||||||
|
|
@ -140,7 +166,7 @@ a {
|
||||||
@apply shadow-none #{!important};
|
@apply shadow-none #{!important};
|
||||||
@apply fixed;
|
@apply fixed;
|
||||||
@apply inline-flex;
|
@apply inline-flex;
|
||||||
@apply -mt-7.5;
|
@apply -mt-8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -154,7 +180,7 @@ a {
|
||||||
@apply flex;
|
@apply flex;
|
||||||
@apply text-tiny text-primary;
|
@apply text-tiny text-primary;
|
||||||
@apply font-semibold;
|
@apply font-semibold;
|
||||||
@apply py-1 px-2;
|
@apply px-2 py-1;
|
||||||
@apply truncate;
|
@apply truncate;
|
||||||
@apply leading-normal;
|
@apply leading-normal;
|
||||||
@apply items-center;
|
@apply items-center;
|
||||||
|
|
@ -162,7 +188,7 @@ a {
|
||||||
kbd {
|
kbd {
|
||||||
@apply hidden;
|
@apply hidden;
|
||||||
@apply font-sans;
|
@apply font-sans;
|
||||||
@apply bg-gray-500/45;
|
background-color: rgba(107, 114, 128, 0.45);
|
||||||
@apply text-primaryLight;
|
@apply text-primaryLight;
|
||||||
@apply rounded-sm;
|
@apply rounded-sm;
|
||||||
@apply px-1;
|
@apply px-1;
|
||||||
|
|
@ -170,6 +196,12 @@ a {
|
||||||
@apply truncate;
|
@apply truncate;
|
||||||
@apply sm:inline-flex;
|
@apply sm:inline-flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.env-icon {
|
||||||
|
@apply transition;
|
||||||
|
@apply inline-flex;
|
||||||
|
@apply items-center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tippy-svg-arrow {
|
.tippy-svg-arrow {
|
||||||
|
|
@ -195,7 +227,7 @@ a {
|
||||||
@apply max-h-[45vh];
|
@apply max-h-[45vh];
|
||||||
@apply items-stretch;
|
@apply items-stretch;
|
||||||
@apply overflow-y-auto;
|
@apply overflow-y-auto;
|
||||||
@apply text-secondary text-body;
|
@apply text-body text-secondary;
|
||||||
@apply p-2;
|
@apply p-2;
|
||||||
@apply leading-normal;
|
@apply leading-normal;
|
||||||
@apply focus:outline-none;
|
@apply focus:outline-none;
|
||||||
|
|
@ -234,7 +266,7 @@ hr {
|
||||||
|
|
||||||
.heading {
|
.heading {
|
||||||
@apply font-bold;
|
@apply font-bold;
|
||||||
@apply text-secondaryDark text-lg;
|
@apply text-lg text-secondaryDark;
|
||||||
@apply tracking-tight;
|
@apply tracking-tight;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -243,7 +275,7 @@ hr {
|
||||||
.textarea {
|
.textarea {
|
||||||
@apply flex;
|
@apply flex;
|
||||||
@apply w-full;
|
@apply w-full;
|
||||||
@apply py-2 px-4;
|
@apply px-4 py-2;
|
||||||
@apply bg-transparent;
|
@apply bg-transparent;
|
||||||
@apply rounded;
|
@apply rounded;
|
||||||
@apply text-secondaryDark;
|
@apply text-secondaryDark;
|
||||||
|
|
@ -284,7 +316,7 @@ button {
|
||||||
@apply transform;
|
@apply transform;
|
||||||
@apply origin-top-left;
|
@apply origin-top-left;
|
||||||
@apply scale-75;
|
@apply scale-75;
|
||||||
@apply translate-x-1 -translate-y-4;
|
@apply -translate-y-4 translate-x-1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.floating-input:focus-within ~ label {
|
.floating-input:focus-within ~ label {
|
||||||
|
|
@ -293,7 +325,7 @@ button {
|
||||||
|
|
||||||
.floating-input ~ .end-actions {
|
.floating-input ~ .end-actions {
|
||||||
@apply absolute;
|
@apply absolute;
|
||||||
@apply right-0.2;
|
@apply right-[.05rem];
|
||||||
@apply inset-y-0;
|
@apply inset-y-0;
|
||||||
@apply flex;
|
@apply flex;
|
||||||
@apply items-center;
|
@apply items-center;
|
||||||
|
|
@ -335,23 +367,23 @@ pre.ace_editor {
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-response {
|
.info-response {
|
||||||
@apply text-pink-500;
|
color: var(--info-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.success-response {
|
.success-response {
|
||||||
@apply text-green-500;
|
color: var(--success-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.redir-response {
|
.redir-response {
|
||||||
@apply text-yellow-500;
|
color: var(--warning-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cl-error-response {
|
.cl-error-response {
|
||||||
@apply text-red-500;
|
color: var(--cl-error-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sv-error-response {
|
.sv-error-response {
|
||||||
@apply text-red-600;
|
color: var(--sv-error-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.missing-data-response {
|
.missing-data-response {
|
||||||
|
|
@ -366,7 +398,7 @@ pre.ace_editor {
|
||||||
@apply px-4 py-2;
|
@apply px-4 py-2;
|
||||||
@apply bg-tooltip;
|
@apply bg-tooltip;
|
||||||
@apply border-secondaryDark;
|
@apply border-secondaryDark;
|
||||||
@apply text-primary text-body;
|
@apply text-body text-primary;
|
||||||
@apply justify-between;
|
@apply justify-between;
|
||||||
@apply shadow-lg;
|
@apply shadow-lg;
|
||||||
@apply font-semibold;
|
@apply font-semibold;
|
||||||
|
|
@ -394,7 +426,7 @@ pre.ace_editor {
|
||||||
@apply before:opacity-10;
|
@apply before:opacity-10;
|
||||||
@apply before:inset-0;
|
@apply before:inset-0;
|
||||||
@apply before:transition;
|
@apply before:transition;
|
||||||
@apply before:content-DEFAULT;
|
@apply before:content-[''];
|
||||||
@apply hover:no-underline;
|
@apply hover:no-underline;
|
||||||
@apply hover:before:opacity-20;
|
@apply hover:before:opacity-20;
|
||||||
}
|
}
|
||||||
|
|
@ -428,7 +460,7 @@ pre.ace_editor {
|
||||||
@apply before:opacity-0;
|
@apply before:opacity-0;
|
||||||
@apply before:z-20;
|
@apply before:z-20;
|
||||||
@apply before:transition;
|
@apply before:transition;
|
||||||
@apply before:content-DEFAULT;
|
@apply before:content-[''];
|
||||||
@apply hover:before:opacity-100;
|
@apply hover:before:opacity-100;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -501,22 +533,6 @@ pre.ace_editor {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-panel.cm-search [name="close"] {
|
|
||||||
@apply flex;
|
|
||||||
@apply items-center;
|
|
||||||
@apply justify-center;
|
|
||||||
@apply min-h-5;
|
|
||||||
@apply min-w-5;
|
|
||||||
@apply bg-primaryDark #{!important};
|
|
||||||
@apply sticky #{!important};
|
|
||||||
@apply right-0 #{!important};
|
|
||||||
@apply ml-auto #{!important};
|
|
||||||
@apply my-auto #{!important};
|
|
||||||
@apply rounded #{!important};
|
|
||||||
@apply outline #{!important};
|
|
||||||
@apply outline-divider #{!important};
|
|
||||||
}
|
|
||||||
|
|
||||||
.shortcut-key {
|
.shortcut-key {
|
||||||
@apply inline-flex;
|
@apply inline-flex;
|
||||||
@apply font-sans;
|
@apply font-sans;
|
||||||
|
|
|
||||||
3
packages/hoppscotch-common/assets/scss/tailwind.scss
Normal file
3
packages/hoppscotch-common/assets/scss/tailwind.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
@ -1,274 +0,0 @@
|
||||||
@mixin base-theme {
|
|
||||||
--font-sans: "Inter Variable", sans-serif;
|
|
||||||
--font-icon: "Material Symbols Rounded Variable";
|
|
||||||
--font-mono: "Roboto Mono Variable", monospace;
|
|
||||||
--font-size-body: 0.75rem;
|
|
||||||
--font-size-tiny: 0.688rem;
|
|
||||||
--line-height-body: 1rem;
|
|
||||||
--upper-primary-sticky-fold: 4.125rem;
|
|
||||||
--upper-secondary-sticky-fold: 6.188rem;
|
|
||||||
--upper-tertiary-sticky-fold: 8.25rem;
|
|
||||||
--upper-fourth-sticky-fold: 10.2rem;
|
|
||||||
--upper-mobile-primary-sticky-fold: 6.625rem;
|
|
||||||
--upper-mobile-secondary-sticky-fold: 8.688rem;
|
|
||||||
--upper-mobile-sticky-fold: 10.75rem;
|
|
||||||
--upper-mobile-tertiary-sticky-fold: 8.25rem;
|
|
||||||
--lower-primary-sticky-fold: 3rem;
|
|
||||||
--lower-secondary-sticky-fold: 5.063rem;
|
|
||||||
--lower-tertiary-sticky-fold: 7.125rem;
|
|
||||||
--lower-fourth-sticky-fold: 9.188rem;
|
|
||||||
--sidebar-primary-sticky-fold: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin dark-theme {
|
|
||||||
--primary-color: theme("colors.dark.800");
|
|
||||||
--primary-light-color: theme("colors.dark.600");
|
|
||||||
--primary-dark-color: theme("colors.neutral.800");
|
|
||||||
--primary-contrast-color: theme("colors.neutral.900");
|
|
||||||
|
|
||||||
--secondary-color: theme("colors.neutral.400");
|
|
||||||
--secondary-light-color: theme("colors.neutral.500");
|
|
||||||
--secondary-dark-color: theme("colors.neutral.50");
|
|
||||||
|
|
||||||
--divider-color: theme("colors.neutral.800");
|
|
||||||
--divider-light-color: theme("colors.dark.500");
|
|
||||||
--divider-dark-color: theme("colors.dark.300");
|
|
||||||
|
|
||||||
--error-color: theme("colors.stone.800");
|
|
||||||
--tooltip-color: theme("colors.neutral.100");
|
|
||||||
--popover-color: theme("colors.dark.700");
|
|
||||||
--editor-theme: "merbivore_soft";
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin light-theme {
|
|
||||||
--primary-color: theme("colors.white");
|
|
||||||
--primary-light-color: theme("colors.gray.50");
|
|
||||||
--primary-dark-color: theme("colors.gray.100");
|
|
||||||
--primary-contrast-color: theme("colors.light.50");
|
|
||||||
|
|
||||||
--secondary-color: theme("colors.gray.500");
|
|
||||||
--secondary-light-color: theme("colors.gray.400");
|
|
||||||
--secondary-dark-color: theme("colors.gray.900");
|
|
||||||
|
|
||||||
--divider-color: theme("colors.gray.100");
|
|
||||||
--divider-light-color: theme("colors.gray.100");
|
|
||||||
--divider-dark-color: theme("colors.gray.300");
|
|
||||||
|
|
||||||
--error-color: theme("colors.yellow.100");
|
|
||||||
--tooltip-color: theme("colors.neutral.800");
|
|
||||||
--popover-color: theme("colors.white");
|
|
||||||
--editor-theme: "textmate";
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin black-theme {
|
|
||||||
--primary-color: theme("colors.dark.900");
|
|
||||||
--primary-light-color: theme("colors.neutral.900");
|
|
||||||
--primary-dark-color: theme("colors.dark.800");
|
|
||||||
--primary-contrast-color: theme("colors.dark.900");
|
|
||||||
|
|
||||||
--secondary-color: theme("colors.neutral.400");
|
|
||||||
--secondary-light-color: theme("colors.neutral.500");
|
|
||||||
--secondary-dark-color: theme("colors.neutral.100");
|
|
||||||
|
|
||||||
--divider-color: theme("colors.dark.600");
|
|
||||||
--divider-light-color: theme("colors.dark.800");
|
|
||||||
--divider-dark-color: theme("colors.dark.200");
|
|
||||||
|
|
||||||
--error-color: theme("colors.stone.900");
|
|
||||||
--tooltip-color: theme("colors.neutral.100");
|
|
||||||
--popover-color: theme("colors.dark.900");
|
|
||||||
--editor-theme: "twilight";
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin dark-editor-theme {
|
|
||||||
--editor-type-color: theme("colors.purple.400");
|
|
||||||
--editor-name-color: theme("colors.blue.400");
|
|
||||||
--editor-operator-color: theme("colors.indigo.400");
|
|
||||||
--editor-invalid-color: theme("colors.red.400");
|
|
||||||
--editor-separator-color: theme("colors.gray.400");
|
|
||||||
--editor-meta-color: theme("colors.gray.400");
|
|
||||||
--editor-variable-color: theme("colors.green.400");
|
|
||||||
--editor-link-color: theme("colors.cyan.400");
|
|
||||||
--editor-process-color: theme("colors.fuchsia.400");
|
|
||||||
--editor-constant-color: theme("colors.violet.400");
|
|
||||||
--editor-keyword-color: theme("colors.pink.400");
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin light-editor-theme {
|
|
||||||
--editor-type-color: theme("colors.purple.600");
|
|
||||||
--editor-name-color: theme("colors.red.600");
|
|
||||||
--editor-operator-color: theme("colors.indigo.600");
|
|
||||||
--editor-invalid-color: theme("colors.red.600");
|
|
||||||
--editor-separator-color: theme("colors.gray.600");
|
|
||||||
--editor-meta-color: theme("colors.gray.600");
|
|
||||||
--editor-variable-color: theme("colors.green.600");
|
|
||||||
--editor-link-color: theme("colors.cyan.600");
|
|
||||||
--editor-process-color: theme("colors.blue.600");
|
|
||||||
--editor-constant-color: theme("colors.fuchsia.600");
|
|
||||||
--editor-keyword-color: theme("colors.pink.600");
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin black-editor-theme {
|
|
||||||
--editor-type-color: theme("colors.purple.400");
|
|
||||||
--editor-name-color: theme("colors.fuchsia.400");
|
|
||||||
--editor-operator-color: theme("colors.indigo.400");
|
|
||||||
--editor-invalid-color: theme("colors.red.400");
|
|
||||||
--editor-separator-color: theme("colors.gray.400");
|
|
||||||
--editor-meta-color: theme("colors.gray.400");
|
|
||||||
--editor-variable-color: theme("colors.green.400");
|
|
||||||
--editor-link-color: theme("colors.cyan.400");
|
|
||||||
--editor-process-color: theme("colors.violet.400");
|
|
||||||
--editor-constant-color: theme("colors.blue.400");
|
|
||||||
--editor-keyword-color: theme("colors.pink.400");
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin green-theme {
|
|
||||||
--accent-color: theme("colors.green.500");
|
|
||||||
--accent-light-color: theme("colors.green.400");
|
|
||||||
--accent-dark-color: theme("colors.green.600");
|
|
||||||
--accent-contrast-color: theme("colors.white");
|
|
||||||
--gradient-from-color: theme("colors.green.200");
|
|
||||||
--gradient-via-color: theme("colors.green.400");
|
|
||||||
--gradient-to-color: theme("colors.green.600");
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin teal-theme {
|
|
||||||
--accent-color: theme("colors.teal.500");
|
|
||||||
--accent-light-color: theme("colors.teal.400");
|
|
||||||
--accent-dark-color: theme("colors.teal.600");
|
|
||||||
--accent-contrast-color: theme("colors.white");
|
|
||||||
--gradient-from-color: theme("colors.teal.200");
|
|
||||||
--gradient-via-color: theme("colors.teal.400");
|
|
||||||
--gradient-to-color: theme("colors.teal.600");
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin blue-theme {
|
|
||||||
--accent-color: theme("colors.blue.500");
|
|
||||||
--accent-light-color: theme("colors.blue.400");
|
|
||||||
--accent-dark-color: theme("colors.blue.600");
|
|
||||||
--accent-contrast-color: theme("colors.white");
|
|
||||||
--gradient-from-color: theme("colors.blue.200");
|
|
||||||
--gradient-via-color: theme("colors.blue.400");
|
|
||||||
--gradient-to-color: theme("colors.blue.600");
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin indigo-theme {
|
|
||||||
--accent-color: theme("colors.indigo.500");
|
|
||||||
--accent-light-color: theme("colors.indigo.400");
|
|
||||||
--accent-dark-color: theme("colors.indigo.600");
|
|
||||||
--accent-contrast-color: theme("colors.white");
|
|
||||||
--gradient-from-color: theme("colors.indigo.200");
|
|
||||||
--gradient-via-color: theme("colors.indigo.400");
|
|
||||||
--gradient-to-color: theme("colors.indigo.600");
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin purple-theme {
|
|
||||||
--accent-color: theme("colors.purple.500");
|
|
||||||
--accent-light-color: theme("colors.purple.400");
|
|
||||||
--accent-dark-color: theme("colors.purple.600");
|
|
||||||
--accent-contrast-color: theme("colors.white");
|
|
||||||
--gradient-from-color: theme("colors.purple.200");
|
|
||||||
--gradient-via-color: theme("colors.purple.400");
|
|
||||||
--gradient-to-color: theme("colors.purple.600");
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin yellow-theme {
|
|
||||||
--accent-color: theme("colors.yellow.500");
|
|
||||||
--accent-light-color: theme("colors.yellow.400");
|
|
||||||
--accent-dark-color: theme("colors.yellow.600");
|
|
||||||
--accent-contrast-color: theme("colors.white");
|
|
||||||
--gradient-from-color: theme("colors.yellow.200");
|
|
||||||
--gradient-via-color: theme("colors.yellow.400");
|
|
||||||
--gradient-to-color: theme("colors.yellow.600");
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin orange-theme {
|
|
||||||
--accent-color: theme("colors.orange.500");
|
|
||||||
--accent-light-color: theme("colors.orange.400");
|
|
||||||
--accent-dark-color: theme("colors.orange.600");
|
|
||||||
--accent-contrast-color: theme("colors.white");
|
|
||||||
--gradient-from-color: theme("colors.orange.200");
|
|
||||||
--gradient-via-color: theme("colors.orange.400");
|
|
||||||
--gradient-to-color: theme("colors.orange.600");
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin red-theme {
|
|
||||||
--accent-color: theme("colors.red.500");
|
|
||||||
--accent-light-color: theme("colors.red.400");
|
|
||||||
--accent-dark-color: theme("colors.red.600");
|
|
||||||
--accent-contrast-color: theme("colors.white");
|
|
||||||
--gradient-from-color: theme("colors.red.200");
|
|
||||||
--gradient-via-color: theme("colors.red.400");
|
|
||||||
--gradient-to-color: theme("colors.red.600");
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin pink-theme {
|
|
||||||
--accent-color: theme("colors.pink.500");
|
|
||||||
--accent-light-color: theme("colors.pink.400");
|
|
||||||
--accent-dark-color: theme("colors.pink.600");
|
|
||||||
--accent-contrast-color: theme("colors.white");
|
|
||||||
--gradient-from-color: theme("colors.pink.200");
|
|
||||||
--gradient-via-color: theme("colors.pink.400");
|
|
||||||
--gradient-to-color: theme("colors.pink.600");
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
@include base-theme;
|
|
||||||
@include dark-theme;
|
|
||||||
@include dark-editor-theme;
|
|
||||||
@include green-theme;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.light {
|
|
||||||
@include light-theme;
|
|
||||||
@include light-editor-theme;
|
|
||||||
color-scheme: light;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark {
|
|
||||||
@include dark-theme;
|
|
||||||
@include dark-editor-theme;
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.black {
|
|
||||||
@include black-theme;
|
|
||||||
@include black-editor-theme;
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[data-accent="blue"] {
|
|
||||||
@include blue-theme;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[data-accent="green"] {
|
|
||||||
@include green-theme;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[data-accent="teal"] {
|
|
||||||
@include teal-theme;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[data-accent="indigo"] {
|
|
||||||
@include indigo-theme;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[data-accent="purple"] {
|
|
||||||
@include purple-theme;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[data-accent="orange"] {
|
|
||||||
@include orange-theme;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[data-accent="pink"] {
|
|
||||||
@include pink-theme;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[data-accent="red"] {
|
|
||||||
@include red-theme;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[data-accent="yellow"] {
|
|
||||||
@include yellow-theme;
|
|
||||||
}
|
|
||||||
89
packages/hoppscotch-common/assets/themes/accent-themes.scss
Normal file
89
packages/hoppscotch-common/assets/themes/accent-themes.scss
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
@mixin green-theme {
|
||||||
|
--accent-color: #10b981;
|
||||||
|
--accent-light-color: #34d399;
|
||||||
|
--accent-dark-color: #059669;
|
||||||
|
--accent-contrast-color: #fff;
|
||||||
|
--gradient-from-color: #a7f3d0;
|
||||||
|
--gradient-via-color: #34d399;
|
||||||
|
--gradient-to-color: #059669;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin teal-theme {
|
||||||
|
--accent-color: #14b8a6;
|
||||||
|
--accent-light-color: #2dd4bf;
|
||||||
|
--accent-dark-color: #0d9488;
|
||||||
|
--accent-contrast-color: #fff;
|
||||||
|
--gradient-from-color: #99f6e4;
|
||||||
|
--gradient-via-color: #2dd4bf;
|
||||||
|
--gradient-to-color: #0d9488;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin blue-theme {
|
||||||
|
--accent-color: #3b82f6;
|
||||||
|
--accent-light-color: #60a5fa;
|
||||||
|
--accent-dark-color: #2563eb;
|
||||||
|
--accent-contrast-color: #fff;
|
||||||
|
--gradient-from-color: #bfdbfe;
|
||||||
|
--gradient-via-color: #60a5fa;
|
||||||
|
--gradient-to-color: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin indigo-theme {
|
||||||
|
--accent-color: #6366f1;
|
||||||
|
--accent-light-color: #818cf8;
|
||||||
|
--accent-dark-color: #4f46e5;
|
||||||
|
--accent-contrast-color: #fff;
|
||||||
|
--gradient-from-color: #c7d2fe;
|
||||||
|
--gradient-via-color: #818cf8;
|
||||||
|
--gradient-to-color: #4f46e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin purple-theme {
|
||||||
|
--accent-color: #8b5cf6;
|
||||||
|
--accent-light-color: #a78bfa;
|
||||||
|
--accent-dark-color: #7c3aed;
|
||||||
|
--accent-contrast-color: #fff;
|
||||||
|
--gradient-from-color: #ddd6fe;
|
||||||
|
--gradient-via-color: #a78bfa;
|
||||||
|
--gradient-to-color: #7c3aed;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin yellow-theme {
|
||||||
|
--accent-color: #f59e0b;
|
||||||
|
--accent-light-color: #fbbf24;
|
||||||
|
--accent-dark-color: #d97706;
|
||||||
|
--accent-contrast-color: #fff;
|
||||||
|
--gradient-from-color: #fde68a;
|
||||||
|
--gradient-via-color: #fbbf24;
|
||||||
|
--gradient-to-color: #d97706;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin orange-theme {
|
||||||
|
--accent-color: #f97316;
|
||||||
|
--accent-light-color: #fb923c;
|
||||||
|
--accent-dark-color: #ea580c;
|
||||||
|
--accent-contrast-color: #fff;
|
||||||
|
--gradient-from-color: #fed7aa;
|
||||||
|
--gradient-via-color: #fb923c;
|
||||||
|
--gradient-to-color: #ea580c;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin red-theme {
|
||||||
|
--accent-color: #ef4444;
|
||||||
|
--accent-light-color: #f87171;
|
||||||
|
--accent-dark-color: #dc2626;
|
||||||
|
--accent-contrast-color: #fff;
|
||||||
|
--gradient-from-color: #fecaca;
|
||||||
|
--gradient-via-color: #f87171;
|
||||||
|
--gradient-to-color: #dc2626;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin pink-theme {
|
||||||
|
--accent-color: #ec4899;
|
||||||
|
--accent-light-color: #f472b6;
|
||||||
|
--accent-dark-color: #db2777;
|
||||||
|
--accent-contrast-color: #fff;
|
||||||
|
--gradient-from-color: #fbcfe8;
|
||||||
|
--gradient-via-color: #f472b6;
|
||||||
|
--gradient-to-color: #db2777;
|
||||||
|
}
|
||||||
81
packages/hoppscotch-common/assets/themes/base-themes.scss
Normal file
81
packages/hoppscotch-common/assets/themes/base-themes.scss
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
@mixin base-theme {
|
||||||
|
--font-sans: "Inter Variable", sans-serif;
|
||||||
|
--font-icon: "Material Symbols Rounded Variable";
|
||||||
|
--font-mono: "Roboto Mono Variable", monospace;
|
||||||
|
--font-size-body: 0.75rem;
|
||||||
|
--font-size-tiny: 0.688rem;
|
||||||
|
--line-height-body: 1rem;
|
||||||
|
--upper-primary-sticky-fold: 4.125rem;
|
||||||
|
--upper-secondary-sticky-fold: 6.188rem;
|
||||||
|
--upper-tertiary-sticky-fold: 8.25rem;
|
||||||
|
--upper-fourth-sticky-fold: 10.2rem;
|
||||||
|
--upper-mobile-primary-sticky-fold: 6.625rem;
|
||||||
|
--upper-mobile-secondary-sticky-fold: 8.688rem;
|
||||||
|
--upper-mobile-sticky-fold: 10.75rem;
|
||||||
|
--upper-mobile-tertiary-sticky-fold: 8.25rem;
|
||||||
|
--lower-primary-sticky-fold: 3rem;
|
||||||
|
--lower-secondary-sticky-fold: 5.063rem;
|
||||||
|
--lower-tertiary-sticky-fold: 7.125rem;
|
||||||
|
--lower-fourth-sticky-fold: 9.188rem;
|
||||||
|
--sidebar-primary-sticky-fold: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin dark-theme {
|
||||||
|
--primary-color: #181818;
|
||||||
|
--primary-light-color: #1c1c1e;
|
||||||
|
--primary-dark-color: #262626;
|
||||||
|
--primary-contrast-color: #171717;
|
||||||
|
|
||||||
|
--secondary-color: #a3a3a3;
|
||||||
|
--secondary-light-color: #737373;
|
||||||
|
--secondary-dark-color: #fafafa;
|
||||||
|
|
||||||
|
--divider-color: #262626;
|
||||||
|
--divider-light-color: #1f1f1f;
|
||||||
|
--divider-dark-color: #2d2d2d;
|
||||||
|
|
||||||
|
--error-color: #292524;
|
||||||
|
--tooltip-color: #f5f5f5;
|
||||||
|
--popover-color: #1b1b1b;
|
||||||
|
--editor-theme: "merbivore_soft";
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin light-theme {
|
||||||
|
--primary-color: #ffffff;
|
||||||
|
--primary-light-color: #f9fafb;
|
||||||
|
--primary-dark-color: #f3f4f6;
|
||||||
|
--primary-contrast-color: #fdfdfd;
|
||||||
|
|
||||||
|
--secondary-color: #6b7280;
|
||||||
|
--secondary-light-color: #9ca3af;
|
||||||
|
--secondary-dark-color: #111827;
|
||||||
|
|
||||||
|
--divider-color: #f3f4f6;
|
||||||
|
--divider-light-color: #f3f4f6;
|
||||||
|
--divider-dark-color: #d1d5db;
|
||||||
|
|
||||||
|
--error-color: #fef3c7;
|
||||||
|
--tooltip-color: #262626;
|
||||||
|
--popover-color: #ffffff;
|
||||||
|
--editor-theme: "textmate";
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin black-theme {
|
||||||
|
--primary-color: #0f0f0f;
|
||||||
|
--primary-light-color: #171717;
|
||||||
|
--primary-dark-color: #181818;
|
||||||
|
--primary-contrast-color: #0f0f0f;
|
||||||
|
|
||||||
|
--secondary-color: #a3a3a3;
|
||||||
|
--secondary-light-color: #737373;
|
||||||
|
--secondary-dark-color: #f5f5f5;
|
||||||
|
|
||||||
|
--divider-color: #1c1c1e;
|
||||||
|
--divider-light-color: #181818;
|
||||||
|
--divider-dark-color: #323232;
|
||||||
|
|
||||||
|
--error-color: #1c1917;
|
||||||
|
--tooltip-color: #f5f5f5;
|
||||||
|
--popover-color: #0f0f0f;
|
||||||
|
--editor-theme: "twilight";
|
||||||
|
}
|
||||||
41
packages/hoppscotch-common/assets/themes/editor-themes.scss
Normal file
41
packages/hoppscotch-common/assets/themes/editor-themes.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
@mixin dark-editor-theme {
|
||||||
|
--editor-type-color: #a78bfa;
|
||||||
|
--editor-name-color: #60a5fa;
|
||||||
|
--editor-operator-color: #818cf8;
|
||||||
|
--editor-invalid-color: #f87171;
|
||||||
|
--editor-separator-color: #9ca3af;
|
||||||
|
--editor-meta-color: #9ca3af;
|
||||||
|
--editor-variable-color: #34d399;
|
||||||
|
--editor-link-color: #22d3ee;
|
||||||
|
--editor-process-color: #e879f9;
|
||||||
|
--editor-constant-color: #a78bfa;
|
||||||
|
--editor-keyword-color: #f472b6;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin light-editor-theme {
|
||||||
|
--editor-type-color: #7c3aed;
|
||||||
|
--editor-name-color: #dc2626;
|
||||||
|
--editor-operator-color: #4f46e5;
|
||||||
|
--editor-invalid-color: #dc2626;
|
||||||
|
--editor-separator-color: #4b5563;
|
||||||
|
--editor-meta-color: #4b5563;
|
||||||
|
--editor-variable-color: #059669;
|
||||||
|
--editor-link-color: #0891b2;
|
||||||
|
--editor-process-color: #2563eb;
|
||||||
|
--editor-constant-color: #c026d3;
|
||||||
|
--editor-keyword-color: #db2777;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin black-editor-theme {
|
||||||
|
--editor-type-color: #a78bfa;
|
||||||
|
--editor-name-color: #e879f9;
|
||||||
|
--editor-operator-color: #818cf8;
|
||||||
|
--editor-invalid-color: #f87171;
|
||||||
|
--editor-separator-color: #9ca3af;
|
||||||
|
--editor-meta-color: #9ca3af;
|
||||||
|
--editor-variable-color: #34d399;
|
||||||
|
--editor-link-color: #22d3ee;
|
||||||
|
--editor-process-color: #a78bfa;
|
||||||
|
--editor-constant-color: #60a5fa;
|
||||||
|
--editor-keyword-color: #f472b6;
|
||||||
|
}
|
||||||
64
packages/hoppscotch-common/assets/themes/themes.scss
Normal file
64
packages/hoppscotch-common/assets/themes/themes.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
@import "./base-themes.scss";
|
||||||
|
@import "./editor-themes.scss";
|
||||||
|
@import "./accent-themes.scss";
|
||||||
|
|
||||||
|
:root {
|
||||||
|
@include base-theme;
|
||||||
|
@include dark-theme;
|
||||||
|
@include green-theme;
|
||||||
|
@include dark-editor-theme;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.light {
|
||||||
|
@include light-theme;
|
||||||
|
@include light-editor-theme;
|
||||||
|
color-scheme: light;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark {
|
||||||
|
@include dark-theme;
|
||||||
|
@include dark-editor-theme;
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.black {
|
||||||
|
@include black-theme;
|
||||||
|
@include black-editor-theme;
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-accent="blue"] {
|
||||||
|
@include blue-theme;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-accent="green"] {
|
||||||
|
@include green-theme;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-accent="teal"] {
|
||||||
|
@include teal-theme;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-accent="indigo"] {
|
||||||
|
@include indigo-theme;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-accent="purple"] {
|
||||||
|
@include purple-theme;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-accent="orange"] {
|
||||||
|
@include orange-theme;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-accent="pink"] {
|
||||||
|
@include pink-theme;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-accent="red"] {
|
||||||
|
@include red-theme;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-accent="yellow"] {
|
||||||
|
@include yellow-theme;
|
||||||
|
}
|
||||||
|
|
@ -133,12 +133,17 @@
|
||||||
"@vue/compiler-sfc": "^3.3.4",
|
"@vue/compiler-sfc": "^3.3.4",
|
||||||
"@vue/eslint-config-typescript": "^11.0.3",
|
"@vue/eslint-config-typescript": "^11.0.3",
|
||||||
"@vue/runtime-core": "^3.3.4",
|
"@vue/runtime-core": "^3.3.4",
|
||||||
|
"autoprefixer": "^10.4.14",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
"dotenv": "^16.3.1",
|
"dotenv": "^16.3.1",
|
||||||
"eslint": "^8.47.0",
|
"eslint": "^8.47.0",
|
||||||
"eslint-plugin-prettier": "^5.0.0",
|
"eslint-plugin-prettier": "^5.0.0",
|
||||||
"eslint-plugin-vue": "^9.17.0",
|
"eslint-plugin-vue": "^9.17.0",
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
|
"postcss": "^8.4.23",
|
||||||
|
"prettier-plugin-tailwindcss": "^0.5.6",
|
||||||
|
"tailwindcss": "^3.3.2",
|
||||||
|
"vite-plugin-fonts": "^0.6.0",
|
||||||
"openapi-types": "^12.1.3",
|
"openapi-types": "^12.1.3",
|
||||||
"rollup-plugin-polyfill-node": "^0.12.0",
|
"rollup-plugin-polyfill-node": "^0.12.0",
|
||||||
"sass": "^1.66.0",
|
"sass": "^1.66.0",
|
||||||
|
|
@ -154,9 +159,7 @@
|
||||||
"vite-plugin-pages-sitemap": "^1.6.1",
|
"vite-plugin-pages-sitemap": "^1.6.1",
|
||||||
"vite-plugin-pwa": "^0.16.4",
|
"vite-plugin-pwa": "^0.16.4",
|
||||||
"vite-plugin-vue-layouts": "^0.8.0",
|
"vite-plugin-vue-layouts": "^0.8.0",
|
||||||
"vite-plugin-windicss": "^1.9.1",
|
|
||||||
"vitest": "^0.34.2",
|
"vitest": "^0.34.2",
|
||||||
"vue-tsc": "^1.8.8",
|
"vue-tsc": "^1.8.8"
|
||||||
"windicss": "^3.5.6"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
v-if="isLoadingInitialRoute"
|
v-if="isLoadingInitialRoute"
|
||||||
class="flex flex-col items-center justify-center min-h-screen"
|
class="flex min-h-screen flex-col items-center justify-center"
|
||||||
>
|
>
|
||||||
<HoppSmartSpinner />
|
<HoppSmartSpinner />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -189,7 +189,6 @@ declare module 'vue' {
|
||||||
SmartEnvInput: typeof import('./components/smart/EnvInput.vue')['default']
|
SmartEnvInput: typeof import('./components/smart/EnvInput.vue')['default']
|
||||||
SmartExpand: typeof import('./../../hoppscotch-ui/src/components/smart/Expand.vue')['default']
|
SmartExpand: typeof import('./../../hoppscotch-ui/src/components/smart/Expand.vue')['default']
|
||||||
SmartFileChip: typeof import('./../../hoppscotch-ui/src/components/smart/FileChip.vue')['default']
|
SmartFileChip: typeof import('./../../hoppscotch-ui/src/components/smart/FileChip.vue')['default']
|
||||||
SmartFontSizePicker: typeof import('./components/smart/FontSizePicker.vue')['default']
|
|
||||||
SmartInput: typeof import('./../../hoppscotch-ui/src/components/smart/Input.vue')['default']
|
SmartInput: typeof import('./../../hoppscotch-ui/src/components/smart/Input.vue')['default']
|
||||||
SmartIntersection: typeof import('./../../hoppscotch-ui/src/components/smart/Intersection.vue')['default']
|
SmartIntersection: typeof import('./../../hoppscotch-ui/src/components/smart/Intersection.vue')['default']
|
||||||
SmartItem: typeof import('./../../hoppscotch-ui/src/components/smart/Item.vue')['default']
|
SmartItem: typeof import('./../../hoppscotch-ui/src/components/smart/Item.vue')['default']
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="relative flex items-center px-4 py-2 transition bg-error text-tiny group"
|
class="group relative flex items-center bg-error px-4 py-2 text-tiny transition"
|
||||||
role="alert"
|
role="alert"
|
||||||
>
|
>
|
||||||
<icon-lucide-info class="mr-2" />
|
<icon-lucide-info class="mr-2" />
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
ref="contextMenuRef"
|
ref="contextMenuRef"
|
||||||
class="fixed bg-popover shadow-lg transform translate-y-8 border border-dividerDark p-2 rounded"
|
class="fixed translate-y-8 transform rounded border border-dividerDark bg-popover p-2 shadow-lg"
|
||||||
:style="`top: ${position.top}px; left: ${position.left}px; z-index: 1000;`"
|
:style="`top: ${position.top}px; left: ${position.left}px; z-index: 1000;`"
|
||||||
>
|
>
|
||||||
<div v-if="contextMenuOptions" class="flex flex-col">
|
<div v-if="contextMenuOptions" class="flex flex-col">
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
@close="hideModal"
|
@close="hideModal"
|
||||||
>
|
>
|
||||||
<template #body>
|
<template #body>
|
||||||
<p class="px-2 mb-4 text-secondaryLight">
|
<p class="mb-4 px-2 text-secondaryLight">
|
||||||
{{ t("app.developer_option_description") }}
|
{{ t("app.developer_option_description") }}
|
||||||
</p>
|
</p>
|
||||||
<div class="flex flex-1">
|
<div class="flex flex-1">
|
||||||
|
|
|
||||||
|
|
@ -175,7 +175,7 @@
|
||||||
@click="COLUMN_LAYOUT = !COLUMN_LAYOUT"
|
@click="COLUMN_LAYOUT = !COLUMN_LAYOUT"
|
||||||
/>
|
/>
|
||||||
<span
|
<span
|
||||||
class="transition transform"
|
class="transform transition"
|
||||||
:class="{
|
:class="{
|
||||||
'rotate-180': SIDEBAR_ON_LEFT,
|
'rotate-180': SIDEBAR_ON_LEFT,
|
||||||
}"
|
}"
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,28 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<header
|
<header
|
||||||
class="flex items-center justify-between flex-1 flex-shrink-0 px-2 py-2 space-x-2 overflow-x-auto overflow-y-hidden"
|
class="flex flex-1 flex-shrink-0 items-center justify-between space-x-2 overflow-x-auto overflow-y-hidden px-2 py-2"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="inline-flex items-center justify-start flex-1 space-x-2"
|
class="inline-flex flex-1 items-center justify-start space-x-2"
|
||||||
:style="{
|
:style="{
|
||||||
paddingTop: platform.ui?.appHeader?.paddingTop?.value,
|
paddingTop: platform.ui?.appHeader?.paddingTop?.value,
|
||||||
paddingLeft: platform.ui?.appHeader?.paddingLeft?.value,
|
paddingLeft: platform.ui?.appHeader?.paddingLeft?.value,
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark uppercase"
|
class="!font-bold uppercase tracking-wide !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
|
||||||
:label="t('app.name')"
|
:label="t('app.name')"
|
||||||
to="/"
|
to="/"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="inline-flex items-center justify-center flex-1 space-x-2">
|
<div class="inline-flex flex-1 items-center justify-center space-x-2">
|
||||||
<button
|
<button
|
||||||
class="flex flex-1 items-center justify-between px-2 py-1 self-stretch bg-primaryDark transition text-secondaryLight cursor-text rounded border border-dividerDark max-w-60 hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
|
class="flex max-w-[15rem] flex-1 cursor-text items-center justify-between self-stretch rounded border border-dividerDark bg-primaryDark px-2 py-1 text-secondaryLight transition hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
|
||||||
@click="invokeAction('modals.search.toggle')"
|
@click="invokeAction('modals.search.toggle')"
|
||||||
>
|
>
|
||||||
<span class="inline-flex flex-1 items-center">
|
<span class="inline-flex flex-1 items-center">
|
||||||
<icon-lucide-search class="mr-2 svg-icons" />
|
<icon-lucide-search class="svg-icons mr-2" />
|
||||||
{{ t("app.search") }}
|
{{ t("app.search") }}
|
||||||
</span>
|
</span>
|
||||||
<span class="flex space-x-1">
|
<span class="flex space-x-1">
|
||||||
|
|
@ -48,7 +48,7 @@
|
||||||
@click="invokeAction('modals.support.toggle')"
|
@click="invokeAction('modals.support.toggle')"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="inline-flex items-center justify-end flex-1 space-x-2">
|
<div class="inline-flex flex-1 items-center justify-end space-x-2">
|
||||||
<div
|
<div
|
||||||
v-if="currentUser === null"
|
v-if="currentUser === null"
|
||||||
class="inline-flex items-center space-x-2"
|
class="inline-flex items-center space-x-2"
|
||||||
|
|
@ -56,7 +56,7 @@
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
:icon="IconUploadCloud"
|
:icon="IconUploadCloud"
|
||||||
:label="t('header.save_workspace')"
|
:label="t('header.save_workspace')"
|
||||||
class="hidden md:flex bg-green-500/15 py-1.75 border border-green-600/25 !text-green-500 hover:bg-green-400/10 focus-visible:bg-green-400/10 focus-visible:border-green-800/50 !focus-visible:text-green-600 hover:border-green-800/50 !hover:text-green-600"
|
class="py-1.75 !focus-visible:text-green-600 !hover:text-green-600 hidden border border-green-600/25 bg-green-500/[.15] !text-green-500 hover:border-green-800/50 hover:bg-green-400/10 focus-visible:border-green-800/50 focus-visible:bg-green-400/10 md:flex"
|
||||||
@click="invokeAction('modals.login.toggle')"
|
@click="invokeAction('modals.login.toggle')"
|
||||||
/>
|
/>
|
||||||
<HoppButtonPrimary
|
<HoppButtonPrimary
|
||||||
|
|
@ -77,13 +77,13 @@
|
||||||
@handle-click="handleTeamEdit()"
|
@handle-click="handleTeamEdit()"
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="flex border divide-x rounded bg-green-500/15 divide-green-600/25 border-green-600/25 focus-within:bg-green-400/10 focus-within:border-green-800/50 focus-within:divide-green-800/50 hover:bg-green-400/10 hover:border-green-800/50 hover:divide-green-800/50"
|
class="flex divide-x divide-green-600/25 rounded border border-green-600/25 bg-green-500/[.15] focus-within:divide-green-800/50 focus-within:border-green-800/50 focus-within:bg-green-400/10 hover:divide-green-800/50 hover:border-green-800/50 hover:bg-green-400/10"
|
||||||
>
|
>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
:title="t('team.invite_tooltip')"
|
:title="t('team.invite_tooltip')"
|
||||||
:icon="IconUserPlus"
|
:icon="IconUserPlus"
|
||||||
class="py-1.75 !text-green-500 !focus-visible:text-green-600 !hover:text-green-600"
|
class="py-1.75 !focus-visible:text-green-600 !hover:text-green-600 !text-green-500"
|
||||||
@click="handleInvite()"
|
@click="handleInvite()"
|
||||||
/>
|
/>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
|
|
@ -95,7 +95,7 @@
|
||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
:title="t('team.edit')"
|
:title="t('team.edit')"
|
||||||
:icon="IconSettings"
|
:icon="IconSettings"
|
||||||
class="py-1.75 !text-green-500 !focus-visible:text-green-600 !hover:text-green-600"
|
class="py-1.75 !focus-visible:text-green-600 !hover:text-green-600 !text-green-500"
|
||||||
@click="handleTeamEdit()"
|
@click="handleTeamEdit()"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -110,7 +110,7 @@
|
||||||
:title="t('workspace.change')"
|
:title="t('workspace.change')"
|
||||||
:label="mdAndLarger ? workspaceName : ``"
|
:label="mdAndLarger ? workspaceName : ``"
|
||||||
:icon="workspace.type === 'personal' ? IconUser : IconUsers"
|
:icon="workspace.type === 'personal' ? IconUser : IconUsers"
|
||||||
class="pr-8 select-wrapper rounded bg-blue-500/15 py-1.75 border border-blue-600/25 !text-blue-500 focus-visible:bg-blue-400/10 focus-visible:border-blue-800/50 !focus-visible:text-blue-600 hover:bg-blue-400/10 hover:border-blue-800/50 !hover:text-blue-600"
|
class="select-wrapper !focus-visible:text-blue-600 !hover:text-blue-600 rounded border border-blue-600/25 bg-blue-500/[.15] py-[0.4375rem] pr-8 !text-blue-500 hover:border-blue-800/50 hover:bg-blue-400/10 focus-visible:border-blue-800/50 focus-visible:bg-blue-400/10"
|
||||||
/>
|
/>
|
||||||
<template #content="{ hide }">
|
<template #content="{ hide }">
|
||||||
<div
|
<div
|
||||||
|
|
@ -176,7 +176,7 @@
|
||||||
@keyup.escape="hide()"
|
@keyup.escape="hide()"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col px-2 text-tiny">
|
<div class="flex flex-col px-2 text-tiny">
|
||||||
<span class="inline-flex font-semibold truncate">
|
<span class="inline-flex truncate font-semibold">
|
||||||
{{
|
{{
|
||||||
currentUser.displayName ||
|
currentUser.displayName ||
|
||||||
t("profile.default_hopp_displayname")
|
t("profile.default_hopp_displayname")
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="inspectionResults && inspectionResults.length > 0">
|
<div v-if="inspectionResults && inspectionResults.length > 0">
|
||||||
<tippy interactive trigger="click" theme="popover">
|
<tippy interactive trigger="click" theme="popover">
|
||||||
<div class="flex justify-center items-center flex-1 flex-col">
|
<div class="flex flex-1 flex-col items-center justify-center">
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
:icon="IconAlertTriangle"
|
:icon="IconAlertTriangle"
|
||||||
|
|
@ -10,12 +10,12 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<template #content="{ hide }">
|
<template #content="{ hide }">
|
||||||
<div class="flex flex-col space-y-2 items-start flex-1">
|
<div class="flex flex-1 flex-col items-start space-y-2">
|
||||||
<div
|
<div
|
||||||
class="flex justify-between border rounded pl-2 border-divider bg-popover sticky top-0 self-stretch"
|
class="sticky top-0 flex justify-between self-stretch rounded border border-divider bg-popover pl-2"
|
||||||
>
|
>
|
||||||
<span class="flex items-center flex-1">
|
<span class="flex flex-1 items-center">
|
||||||
<icon-lucide-activity class="mr-2 svg-icons text-accent" />
|
<icon-lucide-activity class="svg-icons mr-2 text-accent" />
|
||||||
<span class="font-bold">
|
<span class="font-bold">
|
||||||
{{ t("inspections.title") }}
|
{{ t("inspections.title") }}
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -31,10 +31,10 @@
|
||||||
<div
|
<div
|
||||||
v-for="(inspector, index) in inspectionResults"
|
v-for="(inspector, index) in inspectionResults"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="flex self-stretch max-w-md w-full"
|
class="flex w-full max-w-md self-stretch"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col flex-1 rounded border border-dashed border-dividerDark divide-y divide-dashed divide-dividerDark"
|
class="flex flex-1 flex-col divide-y divide-dashed divide-dividerDark rounded border border-dashed border-dividerDark"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
v-if="inspector.text.type === 'text'"
|
v-if="inspector.text.type === 'text'"
|
||||||
|
|
@ -44,13 +44,13 @@
|
||||||
<HoppSmartLink
|
<HoppSmartLink
|
||||||
blank
|
blank
|
||||||
:to="inspector.doc.link"
|
:to="inspector.doc.link"
|
||||||
class="text-accent hover:text-accentDark transition"
|
class="text-accent transition hover:text-accentDark"
|
||||||
>
|
>
|
||||||
{{ inspector.doc.text }}
|
{{ inspector.doc.text }}
|
||||||
<icon-lucide-arrow-up-right class="svg-icons" />
|
<icon-lucide-arrow-up-right class="svg-icons" />
|
||||||
</HoppSmartLink>
|
</HoppSmartLink>
|
||||||
</span>
|
</span>
|
||||||
<span v-if="inspector.action" class="flex p-2 space-x-2">
|
<span v-if="inspector.action" class="flex space-x-2 p-2">
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
:label="inspector.action.text"
|
:label="inspector.action.text"
|
||||||
outline
|
outline
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
>
|
>
|
||||||
<template #body>
|
<template #body>
|
||||||
<div class="flex flex-col space-y-2">
|
<div class="flex flex-col space-y-2">
|
||||||
<h2 class="p-4 font-semibold font-bold text-secondaryDark">
|
<h2 class="p-4 font-bold font-semibold text-secondaryDark">
|
||||||
{{ t("layout.name") }}
|
{{ t("layout.name") }}
|
||||||
</h2>
|
</h2>
|
||||||
<HoppSmartItem
|
<HoppSmartItem
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
active
|
active
|
||||||
@click="expandCollection"
|
@click="expandCollection"
|
||||||
/>
|
/>
|
||||||
<h2 class="p-4 font-semibold font-bold text-secondaryDark">
|
<h2 class="p-4 font-bold font-semibold text-secondaryDark">
|
||||||
{{ t("support.title") }}
|
{{ t("support.title") }}
|
||||||
</h2>
|
</h2>
|
||||||
<template
|
<template
|
||||||
|
|
|
||||||
|
|
@ -16,13 +16,13 @@
|
||||||
class="share-link"
|
class="share-link"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
>
|
>
|
||||||
<component :is="platform.icon" class="w-6 h-6" />
|
<component :is="platform.icon" class="h-6 w-6" />
|
||||||
<span class="mt-3">
|
<span class="mt-3">
|
||||||
{{ platform.name }}
|
{{ platform.name }}
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<button class="share-link" @click="copyAppLink">
|
<button class="share-link" @click="copyAppLink">
|
||||||
<component :is="copyIcon" class="w-6 h-6 text-xl" />
|
<component :is="copyIcon" class="h-6 w-6 text-xl" />
|
||||||
<span class="mt-3">
|
<span class="mt-3">
|
||||||
{{ t("app.copy") }}
|
{{ t("app.copy") }}
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -119,14 +119,14 @@ const hideModal = () => {
|
||||||
.share-link {
|
.share-link {
|
||||||
@apply border border-dividerLight;
|
@apply border border-dividerLight;
|
||||||
@apply rounded;
|
@apply rounded;
|
||||||
@apply flex-col flex;
|
@apply flex flex-col;
|
||||||
@apply p-4;
|
@apply p-4;
|
||||||
@apply items-center;
|
@apply items-center;
|
||||||
@apply justify-center;
|
@apply justify-center;
|
||||||
@apply font-semibold;
|
@apply font-semibold;
|
||||||
@apply hover: (bg-primaryLight text-secondaryDark);
|
@apply hover:bg-primaryLight hover:text-secondaryDark;
|
||||||
@apply focus: outline-none;
|
@apply focus:outline-none;
|
||||||
@apply focus-visible: border-divider;
|
@apply focus-visible:border-divider;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
@apply opacity-80;
|
@apply opacity-80;
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<HoppSmartSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
|
<HoppSmartSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
|
||||||
<template #content>
|
<template #content>
|
||||||
<div
|
<div
|
||||||
class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
|
class="sticky top-0 z-10 flex flex-shrink-0 flex-col overflow-x-auto bg-primary"
|
||||||
>
|
>
|
||||||
<HoppSmartInput
|
<HoppSmartInput
|
||||||
v-model="filterText"
|
v-model="filterText"
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
v-if="isEmpty(shortcutsResults)"
|
v-if="isEmpty(shortcutsResults)"
|
||||||
:text="`${t('state.nothing_found')} ‟${filterText}”`"
|
:text="`${t('state.nothing_found')} ‟${filterText}”`"
|
||||||
>
|
>
|
||||||
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
|
<icon-lucide-search class="svg-icons pb-2 opacity-75" />
|
||||||
</HoppSmartPlaceholder>
|
</HoppSmartPlaceholder>
|
||||||
|
|
||||||
<details
|
<details
|
||||||
|
|
@ -28,16 +28,16 @@
|
||||||
open
|
open
|
||||||
>
|
>
|
||||||
<summary
|
<summary
|
||||||
class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
|
class="flex min-w-0 flex-1 cursor-pointer items-center px-6 py-4 font-semibold text-secondaryLight transition hover:text-secondaryDark focus:outline-none"
|
||||||
>
|
>
|
||||||
<icon-lucide-chevron-right class="mr-2 indicator" />
|
<icon-lucide-chevron-right class="indicator mr-2" />
|
||||||
<span
|
<span
|
||||||
class="font-semibold truncate capitalize-first text-secondaryDark"
|
class="capitalize-first truncate font-semibold text-secondaryDark"
|
||||||
>
|
>
|
||||||
{{ sectionTitle }}
|
{{ sectionTitle }}
|
||||||
</span>
|
</span>
|
||||||
</summary>
|
</summary>
|
||||||
<div class="flex flex-col px-6 pb-4 space-y-2">
|
<div class="flex flex-col space-y-2 px-6 pb-4">
|
||||||
<AppShortcutsEntry
|
<AppShortcutsEntry
|
||||||
v-for="(shortcut, index) in sectionResults"
|
v-for="(shortcut, index) in sectionResults"
|
||||||
:key="`shortcut-${index}`"
|
:key="`shortcut-${index}`"
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex items-center py-1">
|
<div class="flex items-center py-1">
|
||||||
<span class="flex flex-1 mr-4">
|
<span class="mr-4 flex flex-1">
|
||||||
{{ shortcut.label }}
|
{{ shortcut.label }}
|
||||||
</span>
|
</span>
|
||||||
<kbd
|
<kbd
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col items-center justify-center text-secondaryLight">
|
<div class="flex flex-col items-center justify-center text-secondaryLight">
|
||||||
<div class="flex mb-4 space-x-2">
|
<div class="mb-4 flex space-x-2">
|
||||||
<div class="flex flex-col items-end space-y-4 text-right">
|
<div class="flex flex-col items-end space-y-4 text-right">
|
||||||
<span class="flex items-center flex-1">
|
<span class="flex flex-1 items-center">
|
||||||
{{ t("shortcut.request.send_request") }}
|
{{ t("shortcut.request.send_request") }}
|
||||||
</span>
|
</span>
|
||||||
<span class="flex items-center flex-1">
|
<span class="flex flex-1 items-center">
|
||||||
{{ t("shortcut.general.show_all") }}
|
{{ t("shortcut.general.show_all") }}
|
||||||
</span>
|
</span>
|
||||||
<span class="flex items-center flex-1">
|
<span class="flex flex-1 items-center">
|
||||||
{{ t("shortcut.general.command_menu") }}
|
{{ t("shortcut.general.command_menu") }}
|
||||||
</span>
|
</span>
|
||||||
<span class="flex items-center flex-1">
|
<span class="flex flex-1 items-center">
|
||||||
{{ t("shortcut.general.help_menu") }}
|
{{ t("shortcut.general.help_menu") }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<aside class="flex justify-between h-full md:flex-col">
|
<aside class="flex h-full justify-between md:flex-col">
|
||||||
<nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none bg-primary">
|
<nav class="flex flex-1 flex-nowrap bg-primary md:flex-none md:flex-col">
|
||||||
<HoppSmartLink
|
<HoppSmartLink
|
||||||
v-for="(navigation, index) in primaryNavigation"
|
v-for="(navigation, index) in primaryNavigation"
|
||||||
:key="`navigation-${index}`"
|
:key="`navigation-${index}`"
|
||||||
|
|
@ -73,25 +73,25 @@ const primaryNavigation = [
|
||||||
.nav-link {
|
.nav-link {
|
||||||
@apply relative;
|
@apply relative;
|
||||||
@apply p-4;
|
@apply p-4;
|
||||||
@apply flex flex-col flex-1;
|
@apply flex flex-1 flex-col;
|
||||||
@apply items-center;
|
@apply items-center;
|
||||||
@apply justify-center;
|
@apply justify-center;
|
||||||
@apply hover: (bg-primaryDark text-secondaryDark);
|
@apply hover:bg-primaryDark hover:text-secondaryDark;
|
||||||
@apply focus-visible: text-secondaryDark;
|
@apply focus-visible:text-secondaryDark;
|
||||||
@apply after:absolute;
|
@apply after:absolute;
|
||||||
@apply after:inset-x-0;
|
@apply after:inset-x-0;
|
||||||
@apply after:md: inset-x-auto;
|
@apply after:md:inset-x-auto;
|
||||||
@apply after:md: inset-y-0;
|
@apply after:md:inset-y-0;
|
||||||
@apply after:bottom-0;
|
@apply after:bottom-0;
|
||||||
@apply after:md: bottom-auto;
|
@apply after:md:bottom-auto;
|
||||||
@apply after:md: left-0;
|
@apply after:md:left-0;
|
||||||
@apply after:z-2;
|
@apply after:z-10;
|
||||||
@apply after:h-0.5;
|
@apply after:h-0.5;
|
||||||
@apply after:md: h-full;
|
@apply after:md:h-full;
|
||||||
@apply after:w-full;
|
@apply after:w-full;
|
||||||
@apply after:md: w-0.5;
|
@apply after:md:w-0.5;
|
||||||
@apply after:content-DEFAULT;
|
@apply after:content-[""];
|
||||||
@apply focus: after: bg-divider;
|
@apply focus:after:bg-divider;
|
||||||
|
|
||||||
.svg-icons {
|
.svg-icons {
|
||||||
@apply opacity-75;
|
@apply opacity-75;
|
||||||
|
|
@ -105,7 +105,7 @@ const primaryNavigation = [
|
||||||
&.router-link-active {
|
&.router-link-active {
|
||||||
@apply text-secondaryDark;
|
@apply text-secondaryDark;
|
||||||
@apply bg-primaryLight;
|
@apply bg-primaryLight;
|
||||||
@apply hover: text-secondaryDark;
|
@apply hover:text-secondaryDark;
|
||||||
@apply after:bg-accent;
|
@apply after:bg-accent;
|
||||||
|
|
||||||
.svg-icons {
|
.svg-icons {
|
||||||
|
|
@ -116,7 +116,7 @@ const primaryNavigation = [
|
||||||
&.exact-active-link {
|
&.exact-active-link {
|
||||||
@apply text-secondaryDark;
|
@apply text-secondaryDark;
|
||||||
@apply bg-primaryLight;
|
@apply bg-primaryLight;
|
||||||
@apply hover: text-secondaryDark;
|
@apply hover:text-secondaryDark;
|
||||||
@apply after:bg-accent;
|
@apply after:bg-accent;
|
||||||
|
|
||||||
.svg-icons {
|
.svg-icons {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<button
|
<button
|
||||||
ref="el"
|
ref="el"
|
||||||
class="flex items-center flex-1 px-6 py-4 font-medium space-x-4 transition cursor-pointer relative search-entry focus:outline-none"
|
class="search-entry relative flex flex-1 cursor-pointer items-center space-x-4 px-6 py-4 font-medium transition focus:outline-none"
|
||||||
:class="{ 'active bg-primaryLight text-secondaryDark': active }"
|
:class="{ 'active bg-primaryLight text-secondaryDark': active }"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
@click="emit('action')"
|
@click="emit('action')"
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
>
|
>
|
||||||
<component
|
<component
|
||||||
:is="entry.icon"
|
:is="entry.icon"
|
||||||
class="opacity-50 svg-icons"
|
class="svg-icons opacity-50"
|
||||||
:class="{ 'opacity-100': active }"
|
:class="{ 'opacity-100': active }"
|
||||||
/>
|
/>
|
||||||
<template
|
<template
|
||||||
|
|
@ -112,9 +112,9 @@ watch(
|
||||||
@apply after:left-0;
|
@apply after:left-0;
|
||||||
@apply after:bottom-0;
|
@apply after:bottom-0;
|
||||||
@apply after:bg-transparent;
|
@apply after:bg-transparent;
|
||||||
@apply after:z-2;
|
@apply after:z-10;
|
||||||
@apply after:w-0.5;
|
@apply after:w-0.5;
|
||||||
@apply after:content-DEFAULT;
|
@apply after:content-[''];
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
@apply after:bg-accentLight;
|
@apply after:bg-accentLight;
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
{{ historyEntry.request.url }}
|
{{ historyEntry.request.url }}
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
|
class="flex flex-shrink-0 truncate rounded-md border border-dividerDark px-1 text-tiny font-semibold"
|
||||||
>
|
>
|
||||||
{{ historyEntry.request.query.split("\n")[0] }}
|
{{ historyEntry.request.query.split("\n")[0] }}
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<span class="flex flex-1 space-x-2 items-center">
|
<span class="flex flex-1 items-center space-x-2">
|
||||||
<template v-for="(folder, index) in pathFolders" :key="index">
|
<template v-for="(folder, index) in pathFolders" :key="index">
|
||||||
<span class="block" :class="{ truncate: index !== 0 }">
|
<span class="block" :class="{ truncate: index !== 0 }">
|
||||||
{{ folder.name }}
|
{{ folder.name }}
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
</span>
|
</span>
|
||||||
<icon-lucide-chevron-right class="flex flex-shrink-0" />
|
<icon-lucide-chevron-right class="flex flex-shrink-0" />
|
||||||
<span
|
<span
|
||||||
class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
|
class="flex flex-shrink-0 truncate rounded-md border border-dividerDark px-1 text-tiny font-semibold"
|
||||||
:class="entryStatus.className"
|
:class="entryStatus.className"
|
||||||
>
|
>
|
||||||
{{ historyEntry.request.method }}
|
{{ historyEntry.request.method }}
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,8 @@
|
||||||
</template>
|
</template>
|
||||||
<span
|
<span
|
||||||
v-if="request"
|
v-if="request"
|
||||||
class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
|
class="flex flex-shrink-0 truncate rounded-md border border-dividerDark px-1 text-tiny font-semibold"
|
||||||
:class="getMethodLabelColorClassOf(request)"
|
:style="{ color: getMethodLabelColorClassOf(request) }"
|
||||||
>
|
>
|
||||||
{{ request.method.toUpperCase() }}
|
{{ request.method.toUpperCase() }}
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
@close="emit('hide-modal')"
|
@close="emit('hide-modal')"
|
||||||
>
|
>
|
||||||
<template #body>
|
<template #body>
|
||||||
<div class="flex flex-col border-b transition border-divider">
|
<div class="flex flex-col border-b border-divider transition">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<input
|
<input
|
||||||
id="command"
|
id="command"
|
||||||
|
|
@ -16,14 +16,14 @@
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
name="command"
|
name="command"
|
||||||
:placeholder="`${t('app.type_a_command_search')}`"
|
:placeholder="`${t('app.type_a_command_search')}`"
|
||||||
class="flex flex-1 text-base bg-transparent text-secondaryDark px-6 py-5"
|
class="flex flex-1 bg-transparent px-6 py-5 text-base text-secondaryDark"
|
||||||
/>
|
/>
|
||||||
<HoppSmartSpinner v-if="searchSession?.loading" class="mr-6" />
|
<HoppSmartSpinner v-if="searchSession?.loading" class="mr-6" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="searchSession && search.length > 0"
|
v-if="searchSession && search.length > 0"
|
||||||
class="flex flex-col flex-1 overflow-y-auto border-b border-divider divide-y divide-dividerLight"
|
class="flex flex-1 flex-col divide-y divide-dividerLight overflow-y-auto border-b border-divider"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-for="([sectionID, sectionResult], sectionIndex) in scoredResults"
|
v-for="([sectionID, sectionResult], sectionIndex) in scoredResults"
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
class="flex flex-col"
|
class="flex flex-col"
|
||||||
>
|
>
|
||||||
<h5
|
<h5
|
||||||
class="px-6 py-2 bg-primaryContrast z-10 text-secondaryLight sticky top-0"
|
class="sticky top-0 z-10 bg-primaryContrast px-6 py-2 text-secondaryLight"
|
||||||
>
|
>
|
||||||
{{ sectionResult.title }}
|
{{ sectionResult.title }}
|
||||||
</h5>
|
</h5>
|
||||||
|
|
@ -49,7 +49,7 @@
|
||||||
:text="`${t('state.nothing_found')} ‟${search}”`"
|
:text="`${t('state.nothing_found')} ‟${search}”`"
|
||||||
>
|
>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
|
<icon-lucide-search class="svg-icons pb-2 opacity-75" />
|
||||||
</template>
|
</template>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
:label="t('action.clear')"
|
:label="t('action.clear')"
|
||||||
|
|
@ -59,7 +59,7 @@
|
||||||
</HoppSmartPlaceholder>
|
</HoppSmartPlaceholder>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="flex flex-shrink-0 text-tiny text-secondaryLight p-4 justify-between whitespace-nowrap overflow-auto <sm:hidden"
|
class="flex flex-shrink-0 justify-between overflow-auto whitespace-nowrap p-4 text-tiny text-secondaryLight <sm:hidden"
|
||||||
>
|
>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<kbd class="shortcut-key">↑</kbd>
|
<kbd class="shortcut-key">↑</kbd>
|
||||||
|
|
|
||||||
|
|
@ -12,16 +12,16 @@
|
||||||
@dragleave="ordering = false"
|
@dragleave="ordering = false"
|
||||||
@dragend="resetDragState"
|
@dragend="resetDragState"
|
||||||
></div>
|
></div>
|
||||||
<div class="flex flex-col relative">
|
<div class="relative flex flex-col">
|
||||||
<div
|
<div
|
||||||
class="absolute bg-accent opacity-0 pointer-events-none inset-0 z-1 transition"
|
class="z-1 pointer-events-none absolute inset-0 bg-accent opacity-0 transition"
|
||||||
:class="{
|
:class="{
|
||||||
'opacity-25':
|
'opacity-25':
|
||||||
dragging && notSameDestination && notSameParentDestination,
|
dragging && notSameDestination && notSameParentDestination,
|
||||||
}"
|
}"
|
||||||
></div>
|
></div>
|
||||||
<div
|
<div
|
||||||
class="flex items-stretch group relative z-3 cursor-pointer pointer-events-auto"
|
class="z-3 group pointer-events-auto relative flex cursor-pointer items-stretch"
|
||||||
:draggable="!hasNoTeamAccess"
|
:draggable="!hasNoTeamAccess"
|
||||||
@dragstart="dragStart"
|
@dragstart="dragStart"
|
||||||
@drop="handelDrop($event)"
|
@drop="handelDrop($event)"
|
||||||
|
|
@ -36,11 +36,11 @@
|
||||||
@contextmenu.prevent="options?.tippy.show()"
|
@contextmenu.prevent="options?.tippy.show()"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex items-center justify-center flex-1 min-w-0"
|
class="flex min-w-0 flex-1 items-center justify-center"
|
||||||
@click="emit('toggle-children')"
|
@click="emit('toggle-children')"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="flex items-center justify-center px-4 pointer-events-none"
|
class="pointer-events-none flex items-center justify-center px-4"
|
||||||
>
|
>
|
||||||
<HoppSmartSpinner v-if="isCollLoading" />
|
<HoppSmartSpinner v-if="isCollLoading" />
|
||||||
<component
|
<component
|
||||||
|
|
@ -51,7 +51,7 @@
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="flex flex-1 min-w-0 py-2 pr-2 transition pointer-events-none group-hover:text-secondaryDark"
|
class="pointer-events-none flex min-w-0 flex-1 py-2 pr-2 transition group-hover:text-secondaryDark"
|
||||||
>
|
>
|
||||||
<span class="truncate" :class="{ 'text-accent': isSelected }">
|
<span class="truncate" :class="{ 'text-accent': isSelected }">
|
||||||
{{ collectionName }}
|
{{ collectionName }}
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
<div v-if="step.name === 'FILE_IMPORT'" class="space-y-4">
|
<div v-if="step.name === 'FILE_IMPORT'" class="space-y-4">
|
||||||
<p class="flex items-center">
|
<p class="flex items-center">
|
||||||
<span
|
<span
|
||||||
class="inline-flex items-center justify-center flex-shrink-0 mr-4 border-4 rounded-full border-primary text-dividerDark"
|
class="mr-4 inline-flex flex-shrink-0 items-center justify-center rounded-full border-4 border-primary text-dividerDark"
|
||||||
:class="{
|
:class="{
|
||||||
'!text-green-500': hasFile,
|
'!text-green-500': hasFile,
|
||||||
}"
|
}"
|
||||||
|
|
@ -38,14 +38,14 @@
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p
|
<p
|
||||||
class="flex flex-col ml-10 border border-dashed rounded border-dividerDark"
|
class="ml-10 flex flex-col rounded border border-dashed border-dividerDark"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
id="inputChooseFileToImportFrom"
|
id="inputChooseFileToImportFrom"
|
||||||
ref="inputChooseFileToImportFrom"
|
ref="inputChooseFileToImportFrom"
|
||||||
name="inputChooseFileToImportFrom"
|
name="inputChooseFileToImportFrom"
|
||||||
type="file"
|
type="file"
|
||||||
class="p-4 cursor-pointer transition file:transition file:cursor-pointer text-secondary hover:text-secondaryDark file:mr-2 file:py-2 file:px-4 file:rounded file:border-0 file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
|
class="cursor-pointer p-4 text-secondary transition file:mr-2 file:cursor-pointer file:rounded file:border-0 file:bg-primaryLight file:px-4 file:py-2 file:text-secondary file:transition hover:text-secondaryDark hover:file:bg-primaryDark hover:file:text-secondaryDark"
|
||||||
:accept="step.metadata.acceptedFileTypes"
|
:accept="step.metadata.acceptedFileTypes"
|
||||||
@change="onFileChange"
|
@change="onFileChange"
|
||||||
/>
|
/>
|
||||||
|
|
@ -54,7 +54,7 @@
|
||||||
<div v-else-if="step.name === 'URL_IMPORT'" class="space-y-4">
|
<div v-else-if="step.name === 'URL_IMPORT'" class="space-y-4">
|
||||||
<p class="flex items-center">
|
<p class="flex items-center">
|
||||||
<span
|
<span
|
||||||
class="inline-flex items-center justify-center flex-shrink-0 mr-4 border-4 rounded-full border-primary text-dividerDark"
|
class="mr-4 inline-flex flex-shrink-0 items-center justify-center rounded-full border-4 border-primary text-dividerDark"
|
||||||
:class="{
|
:class="{
|
||||||
'!text-green-500': hasGist,
|
'!text-green-500': hasGist,
|
||||||
}"
|
}"
|
||||||
|
|
@ -65,7 +65,7 @@
|
||||||
{{ t(`${step.metadata.caption}`) }}
|
{{ t(`${step.metadata.caption}`) }}
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p class="flex flex-col ml-10">
|
<p class="ml-10 flex flex-col">
|
||||||
<input
|
<input
|
||||||
v-model="inputChooseGistToImportFrom"
|
v-model="inputChooseGistToImportFrom"
|
||||||
type="url"
|
type="url"
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex justify-between flex-1 border-b bg-primary border-dividerLight"
|
class="sticky z-10 flex flex-1 justify-between border-b border-dividerLight bg-primary"
|
||||||
:style="
|
:style="
|
||||||
saveRequest
|
saveRequest
|
||||||
? 'top: calc(var(--upper-primary-sticky-fold) - var(--line-height-body))'
|
? 'top: calc(var(--upper-primary-sticky-fold) - var(--line-height-body))'
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<HoppSmartTree :adapter="myAdapter">
|
<HoppSmartTree :adapter="myAdapter">
|
||||||
<template
|
<template
|
||||||
#content="{ node, toggleChildren, isOpen, highlightChildren }"
|
#content="{ node, toggleChildren, isOpen, highlightChildren }"
|
||||||
|
|
@ -248,7 +248,7 @@
|
||||||
:text="`${t('state.nothing_found')} ‟${filterText}”`"
|
:text="`${t('state.nothing_found')} ‟${filterText}”`"
|
||||||
>
|
>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
|
<icon-lucide-search class="svg-icons pb-2 opacity-75" />
|
||||||
</template>
|
</template>
|
||||||
</HoppSmartPlaceholder>
|
</HoppSmartPlaceholder>
|
||||||
<HoppSmartPlaceholder
|
<HoppSmartPlaceholder
|
||||||
|
|
@ -258,10 +258,10 @@
|
||||||
:text="t('empty.collections')"
|
:text="t('empty.collections')"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col items-center space-y-4">
|
<div class="flex flex-col items-center space-y-4">
|
||||||
<span class="text-secondaryLight text-center">
|
<span class="text-center text-secondaryLight">
|
||||||
{{ t("collection.import_or_create") }}
|
{{ t("collection.import_or_create") }}
|
||||||
</span>
|
</span>
|
||||||
<div class="flex gap-4 flex-col items-stretch">
|
<div class="flex flex-col items-stretch gap-4">
|
||||||
<HoppButtonPrimary
|
<HoppButtonPrimary
|
||||||
:icon="IconImport"
|
:icon="IconImport"
|
||||||
:label="t('import.title')"
|
:label="t('import.title')"
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
@dragend="resetDragState"
|
@dragend="resetDragState"
|
||||||
></div>
|
></div>
|
||||||
<div
|
<div
|
||||||
class="flex items-stretch group"
|
class="group flex items-stretch"
|
||||||
:draggable="!hasNoTeamAccess"
|
:draggable="!hasNoTeamAccess"
|
||||||
@drop="handelDrop"
|
@drop="handelDrop"
|
||||||
@dragstart="dragStart"
|
@dragstart="dragStart"
|
||||||
|
|
@ -23,12 +23,13 @@
|
||||||
@contextmenu.prevent="options?.tippy.show()"
|
@contextmenu.prevent="options?.tippy.show()"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex items-center justify-center flex-1 min-w-0 cursor-pointer pointer-events-auto"
|
class="pointer-events-auto flex min-w-0 flex-1 cursor-pointer items-center justify-center"
|
||||||
@click="selectRequest()"
|
@click="selectRequest()"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="flex items-center justify-center w-16 px-2 truncate pointer-events-none"
|
class="pointer-events-none flex w-16 items-center justify-center truncate px-2"
|
||||||
:class="requestLabelColor"
|
:class="requestLabelColor"
|
||||||
|
:style="{ color: requestLabelColor }"
|
||||||
>
|
>
|
||||||
<component
|
<component
|
||||||
:is="IconCheckCircle"
|
:is="IconCheckCircle"
|
||||||
|
|
@ -37,12 +38,12 @@
|
||||||
:class="{ 'text-accent': isSelected }"
|
:class="{ 'text-accent': isSelected }"
|
||||||
/>
|
/>
|
||||||
<HoppSmartSpinner v-else-if="isRequestLoading" />
|
<HoppSmartSpinner v-else-if="isRequestLoading" />
|
||||||
<span v-else class="font-semibold truncate text-tiny">
|
<span v-else class="truncate text-tiny font-semibold">
|
||||||
{{ request.method }}
|
{{ request.method }}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="flex items-center flex-1 min-w-0 py-2 pr-2 pointer-events-none transition group-hover:text-secondaryDark"
|
class="pointer-events-none flex min-w-0 flex-1 items-center py-2 pr-2 transition group-hover:text-secondaryDark"
|
||||||
>
|
>
|
||||||
<span class="truncate" :class="{ 'text-accent': isSelected }">
|
<span class="truncate" :class="{ 'text-accent': isSelected }">
|
||||||
{{ request.name }}
|
{{ request.name }}
|
||||||
|
|
@ -50,15 +51,15 @@
|
||||||
<span
|
<span
|
||||||
v-if="isActive"
|
v-if="isActive"
|
||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
class="relative h-1.5 w-1.5 flex flex-shrink-0 mx-3"
|
class="relative mx-3 flex h-1.5 w-1.5 flex-shrink-0"
|
||||||
:title="`${t('collection.request_in_use')}`"
|
:title="`${t('collection.request_in_use')}`"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="absolute inline-flex flex-shrink-0 w-full h-full bg-green-500 rounded-full opacity-75 animate-ping"
|
class="absolute inline-flex h-full w-full flex-shrink-0 animate-ping rounded-full bg-green-500 opacity-75"
|
||||||
>
|
>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="relative inline-flex flex-shrink-0 rounded-full h-1.5 w-1.5 bg-green-500"
|
class="relative inline-flex h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500"
|
||||||
></span>
|
></span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex justify-between flex-1 border-b bg-primary border-dividerLight"
|
class="sticky z-10 flex flex-1 justify-between border-b border-dividerLight bg-primary"
|
||||||
:style="
|
:style="
|
||||||
saveRequest
|
saveRequest
|
||||||
? 'top: calc(var(--upper-primary-sticky-fold) - var(--line-height-body))'
|
? 'top: calc(var(--upper-primary-sticky-fold) - var(--line-height-body))'
|
||||||
|
|
@ -269,10 +269,10 @@
|
||||||
@drop.stop
|
@drop.stop
|
||||||
>
|
>
|
||||||
<div class="flex flex-col items-center space-y-4">
|
<div class="flex flex-col items-center space-y-4">
|
||||||
<span class="text-secondaryLight text-center">
|
<span class="text-center text-secondaryLight">
|
||||||
{{ t("collection.import_or_create") }}
|
{{ t("collection.import_or_create") }}
|
||||||
</span>
|
</span>
|
||||||
<div class="flex gap-4 flex-col items-stretch">
|
<div class="flex flex-col items-stretch gap-4">
|
||||||
<HoppButtonPrimary
|
<HoppButtonPrimary
|
||||||
:icon="IconImport"
|
:icon="IconImport"
|
||||||
:label="t('import.title')"
|
:label="t('import.title')"
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
||||||
<div
|
<div
|
||||||
class="flex items-stretch group"
|
class="group flex items-stretch"
|
||||||
@dragover.prevent
|
@dragover.prevent
|
||||||
@drop.prevent="dropEvent"
|
@drop.prevent="dropEvent"
|
||||||
@dragover="dragging = true"
|
@dragover="dragging = true"
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
@contextmenu.prevent="options.tippy.show()"
|
@contextmenu.prevent="options.tippy.show()"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="flex items-center justify-center px-4 cursor-pointer"
|
class="flex cursor-pointer items-center justify-center px-4"
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
>
|
>
|
||||||
<component
|
<component
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
|
class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
>
|
>
|
||||||
<span class="truncate" :class="{ 'text-accent': isSelected }">
|
<span class="truncate" :class="{ 'text-accent': isSelected }">
|
||||||
|
|
@ -136,10 +136,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div v-if="showChildren || isFiltered" class="flex">
|
<div v-if="showChildren || isFiltered" class="flex">
|
||||||
<div
|
<div
|
||||||
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
|
class="ml-[1.375rem] flex w-0.5 transform cursor-nsResize bg-dividerLight transition hover:scale-x-125 hover:bg-dividerDark"
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
></div>
|
></div>
|
||||||
<div class="flex flex-col flex-1 truncate">
|
<div class="flex flex-1 flex-col truncate">
|
||||||
<CollectionsGraphqlFolder
|
<CollectionsGraphqlFolder
|
||||||
v-for="(folder, index) in collection.folders"
|
v-for="(folder, index) in collection.folders"
|
||||||
:key="`folder-${String(index)}`"
|
:key="`folder-${String(index)}`"
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
||||||
<div
|
<div
|
||||||
class="flex items-stretch group"
|
class="group flex items-stretch"
|
||||||
@dragover.prevent
|
@dragover.prevent
|
||||||
@drop.prevent="dropEvent"
|
@drop.prevent="dropEvent"
|
||||||
@dragover="dragging = true"
|
@dragover="dragging = true"
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
@contextmenu.prevent="options.tippy.show()"
|
@contextmenu.prevent="options.tippy.show()"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="flex items-center justify-center px-4 cursor-pointer"
|
class="flex cursor-pointer items-center justify-center px-4"
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
>
|
>
|
||||||
<component
|
<component
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
|
class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
>
|
>
|
||||||
<span class="truncate" :class="{ 'text-accent': isSelected }">
|
<span class="truncate" :class="{ 'text-accent': isSelected }">
|
||||||
|
|
@ -128,10 +128,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div v-if="showChildren || isFiltered" class="flex">
|
<div v-if="showChildren || isFiltered" class="flex">
|
||||||
<div
|
<div
|
||||||
class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
|
class="ml-[1.375rem] flex w-0.5 transform cursor-nsResize bg-dividerLight transition hover:scale-x-125 hover:bg-dividerDark"
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
></div>
|
></div>
|
||||||
<div class="flex flex-col flex-1 truncate">
|
<div class="flex flex-1 flex-col truncate">
|
||||||
<!-- Referring to this component only (this is recursive) -->
|
<!-- Referring to this component only (this is recursive) -->
|
||||||
<Folder
|
<Folder
|
||||||
v-for="(subFolder, subFolderIndex) in folder.folders"
|
v-for="(subFolder, subFolderIndex) in folder.folders"
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
||||||
<div
|
<div
|
||||||
class="flex items-stretch group"
|
class="group flex items-stretch"
|
||||||
draggable="true"
|
draggable="true"
|
||||||
@dragstart="dragStart"
|
@dragstart="dragStart"
|
||||||
@dragover.stop
|
@dragover.stop
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
@contextmenu.prevent="options.tippy.show()"
|
@contextmenu.prevent="options.tippy.show()"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
|
class="flex w-16 cursor-pointer items-center justify-center truncate px-2"
|
||||||
@click="selectRequest()"
|
@click="selectRequest()"
|
||||||
>
|
>
|
||||||
<component
|
<component
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="flex items-center flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
|
class="flex min-w-0 flex-1 cursor-pointer items-center py-2 pr-2 transition group-hover:text-secondaryDark"
|
||||||
@click="selectRequest()"
|
@click="selectRequest()"
|
||||||
>
|
>
|
||||||
<span class="truncate" :class="{ 'text-accent': isSelected }">
|
<span class="truncate" :class="{ 'text-accent': isSelected }">
|
||||||
|
|
@ -29,15 +29,15 @@
|
||||||
<span
|
<span
|
||||||
v-if="isActive"
|
v-if="isActive"
|
||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
class="relative h-1.5 w-1.5 flex flex-shrink-0 mx-3"
|
class="relative mx-3 flex h-1.5 w-1.5 flex-shrink-0"
|
||||||
:title="`${t('collection.request_in_use')}`"
|
:title="`${t('collection.request_in_use')}`"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="absolute inline-flex flex-shrink-0 w-full h-full bg-green-500 rounded-full opacity-75 animate-ping"
|
class="absolute inline-flex h-full w-full flex-shrink-0 animate-ping rounded-full bg-green-500 opacity-75"
|
||||||
>
|
>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="relative inline-flex flex-shrink-0 rounded-full h-1.5 w-1.5 bg-green-500"
|
class="relative inline-flex h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500"
|
||||||
></span>
|
></span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="{ 'rounded border border-divider': saveRequest }">
|
<div :class="{ 'rounded border border-divider': saveRequest }">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex flex-col flex-shrink-0 overflow-x-auto rounded-t bg-primary"
|
class="sticky z-10 flex flex-shrink-0 flex-col overflow-x-auto rounded-t bg-primary"
|
||||||
:style="
|
:style="
|
||||||
saveRequest ? 'top: calc(-1 * var(--line-height-body))' : 'top: 0'
|
saveRequest ? 'top: calc(-1 * var(--line-height-body))' : 'top: 0'
|
||||||
"
|
"
|
||||||
|
|
@ -11,10 +11,10 @@
|
||||||
type="search"
|
type="search"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
:placeholder="t('action.search')"
|
:placeholder="t('action.search')"
|
||||||
class="py-2 pl-4 pr-2 bg-transparent !border-0"
|
class="!border-0 bg-transparent py-2 pl-4 pr-2"
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="flex justify-between flex-1 flex-shrink-0 border-y bg-primary border-dividerLight"
|
class="flex flex-1 flex-shrink-0 justify-between border-y border-dividerLight bg-primary"
|
||||||
>
|
>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
:icon="IconPlus"
|
:icon="IconPlus"
|
||||||
|
|
@ -67,10 +67,10 @@
|
||||||
:text="t('empty.collections')"
|
:text="t('empty.collections')"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col items-center space-y-4">
|
<div class="flex flex-col items-center space-y-4">
|
||||||
<span class="text-secondaryLight text-center">
|
<span class="text-center text-secondaryLight">
|
||||||
{{ t("collection.import_or_create") }}
|
{{ t("collection.import_or_create") }}
|
||||||
</span>
|
</span>
|
||||||
<div class="flex gap-4 flex-col items-stretch">
|
<div class="flex flex-col items-stretch gap-4">
|
||||||
<HoppButtonPrimary
|
<HoppButtonPrimary
|
||||||
:icon="IconImport"
|
:icon="IconImport"
|
||||||
:label="t('import.title')"
|
:label="t('import.title')"
|
||||||
|
|
@ -93,7 +93,7 @@
|
||||||
:text="`${t('state.nothing_found')} ‟${filterText}”`"
|
:text="`${t('state.nothing_found')} ‟${filterText}”`"
|
||||||
>
|
>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
|
<icon-lucide-search class="svg-icons pb-2 opacity-75" />
|
||||||
</template>
|
</template>
|
||||||
</HoppSmartPlaceholder>
|
</HoppSmartPlaceholder>
|
||||||
<CollectionsGraphqlAdd
|
<CollectionsGraphqlAdd
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
@dragend="draggingToRoot = false"
|
@dragend="draggingToRoot = false"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex flex-col flex-shrink-0 overflow-x-auto border-b bg-primary border-dividerLight"
|
class="sticky z-10 flex flex-shrink-0 flex-col overflow-x-auto border-b border-dividerLight bg-primary"
|
||||||
:class="{ 'rounded-t': saveRequest }"
|
:class="{ 'rounded-t': saveRequest }"
|
||||||
:style="
|
:style="
|
||||||
saveRequest ? 'top: calc(-1 * var(--line-height-body))' : 'top: 0'
|
saveRequest ? 'top: calc(-1 * var(--line-height-body))' : 'top: 0'
|
||||||
|
|
@ -86,12 +86,12 @@
|
||||||
@display-modal-import-export="displayModalImportExport(true)"
|
@display-modal-import-export="displayModalImportExport(true)"
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="hidden bg-primaryDark flex-col flex-1 items-center py-15 justify-center px-4 text-secondaryLight"
|
class="py-15 hidden flex-1 flex-col items-center justify-center bg-primaryDark px-4 text-secondaryLight"
|
||||||
:class="{
|
:class="{
|
||||||
'!flex': draggingToRoot && currentReorderingStatus.type !== 'request',
|
'!flex': draggingToRoot && currentReorderingStatus.type !== 'request',
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<icon-lucide-list-end class="svg-icons !w-8 !h-8" />
|
<icon-lucide-list-end class="svg-icons !h-8 !w-8" />
|
||||||
</div>
|
</div>
|
||||||
<CollectionsAdd
|
<CollectionsAdd
|
||||||
:show="showModalAdd"
|
:show="showModalAdd"
|
||||||
|
|
|
||||||
|
|
@ -5,9 +5,9 @@
|
||||||
@close="hideModal"
|
@close="hideModal"
|
||||||
>
|
>
|
||||||
<template #body>
|
<template #body>
|
||||||
<div class="flex space-y-4 flex-1 flex-col">
|
<div class="flex flex-1 flex-col space-y-4">
|
||||||
<div class="flex items-center space-x-8 ml-2">
|
<div class="ml-2 flex items-center space-x-8">
|
||||||
<label for="name" class="font-semibold min-w-10">{{
|
<label for="name" class="min-w-10 font-semibold">{{
|
||||||
t("environment.name")
|
t("environment.name")
|
||||||
}}</label>
|
}}</label>
|
||||||
<input
|
<input
|
||||||
|
|
@ -17,8 +17,8 @@
|
||||||
class="input"
|
class="input"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center space-x-8 ml-2">
|
<div class="ml-2 flex items-center space-x-8">
|
||||||
<label for="value" class="font-semibold min-w-10">{{
|
<label for="value" class="min-w-10 font-semibold">{{
|
||||||
t("environment.value")
|
t("environment.value")
|
||||||
}}</label>
|
}}</label>
|
||||||
<input
|
<input
|
||||||
|
|
@ -28,17 +28,17 @@
|
||||||
:placeholder="t('environment.value')"
|
:placeholder="t('environment.value')"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center space-x-8 ml-2">
|
<div class="ml-2 flex items-center space-x-8">
|
||||||
<label for="scope" class="font-semibold min-w-10">
|
<label for="scope" class="min-w-10 font-semibold">
|
||||||
{{ t("environment.scope") }}
|
{{ t("environment.scope") }}
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
class="relative flex flex-1 flex-col border border-divider rounded focus-visible:border-dividerDark"
|
class="relative flex flex-1 flex-col rounded border border-divider focus-visible:border-dividerDark"
|
||||||
>
|
>
|
||||||
<EnvironmentsSelector v-model="scope" :is-scope-selector="true" />
|
<EnvironmentsSelector v-model="scope" :is-scope-selector="true" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="replaceWithVariable" class="flex space-x-2 mt-3">
|
<div v-if="replaceWithVariable" class="mt-3 flex space-x-2">
|
||||||
<div class="min-w-18" />
|
<div class="min-w-18" />
|
||||||
<HoppSmartCheckbox
|
<HoppSmartCheckbox
|
||||||
:on="replaceWithVariable"
|
:on="replaceWithVariable"
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
: `${t('environment.select')}`
|
: `${t('environment.select')}`
|
||||||
: ''
|
: ''
|
||||||
"
|
"
|
||||||
class="flex-1 !justify-start pr-8 rounded-none"
|
class="flex-1 !justify-start rounded-none pr-8"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<template #content="{ hide }">
|
<template #content="{ hide }">
|
||||||
|
|
@ -101,7 +101,7 @@
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${colorMode.value}/blockchain.svg`"
|
:src="`/images/states/${colorMode.value}/blockchain.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-2"
|
class="mb-2 inline-flex h-16 w-16 flex-col object-contain object-center"
|
||||||
:alt="`${t('empty.environments')}`"
|
:alt="`${t('empty.environments')}`"
|
||||||
/>
|
/>
|
||||||
<span class="pb-2 text-center">
|
<span class="pb-2 text-center">
|
||||||
|
|
@ -148,7 +148,7 @@
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${colorMode.value}/blockchain.svg`"
|
:src="`/images/states/${colorMode.value}/blockchain.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-2"
|
class="mb-2 inline-flex h-16 w-16 flex-col object-contain object-center"
|
||||||
:alt="`${t('empty.environments')}`"
|
:alt="`${t('empty.environments')}`"
|
||||||
/>
|
/>
|
||||||
<span class="pb-2 text-center">
|
<span class="pb-2 text-center">
|
||||||
|
|
@ -160,7 +160,7 @@
|
||||||
v-if="!teamListLoading && teamAdapterError"
|
v-if="!teamListLoading && teamAdapterError"
|
||||||
class="flex flex-col items-center py-4"
|
class="flex flex-col items-center py-4"
|
||||||
>
|
>
|
||||||
<icon-lucide-help-circle class="mb-4 svg-icons" />
|
<icon-lucide-help-circle class="svg-icons mb-4" />
|
||||||
{{ getErrorMessage(teamAdapterError) }}
|
{{ getErrorMessage(teamAdapterError) }}
|
||||||
</div>
|
</div>
|
||||||
</HoppSmartTab>
|
</HoppSmartTab>
|
||||||
|
|
@ -190,7 +190,7 @@
|
||||||
@keyup.escape="hide()"
|
@keyup.escape="hide()"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="sticky top-0 font-semibold truncate flex items-center justify-between text-secondaryDark bg-primary border border-divider rounded pl-4"
|
class="sticky top-0 flex items-center justify-between truncate rounded border border-divider bg-primary pl-4 font-semibold text-secondaryDark"
|
||||||
>
|
>
|
||||||
{{ t("environment.global_variables") }}
|
{{ t("environment.global_variables") }}
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
|
|
@ -205,12 +205,12 @@
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="my-2 flex flex-col flex-1 space-y-2 pl-4 pr-2">
|
<div class="my-2 flex flex-1 flex-col space-y-2 pl-4 pr-2">
|
||||||
<div class="flex flex-1 space-x-4">
|
<div class="flex flex-1 space-x-4">
|
||||||
<span class="w-1/4 min-w-32 truncate text-tiny font-semibold">
|
<span class="min-w-32 w-1/4 truncate text-tiny font-semibold">
|
||||||
{{ t("environment.name") }}
|
{{ t("environment.name") }}
|
||||||
</span>
|
</span>
|
||||||
<span class="w-full min-w-32 truncate text-tiny font-semibold">
|
<span class="min-w-32 w-full truncate text-tiny font-semibold">
|
||||||
{{ t("environment.value") }}
|
{{ t("environment.value") }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -219,10 +219,10 @@
|
||||||
:key="index"
|
:key="index"
|
||||||
class="flex flex-1 space-x-4"
|
class="flex flex-1 space-x-4"
|
||||||
>
|
>
|
||||||
<span class="text-secondaryLight w-1/4 min-w-32 truncate">
|
<span class="min-w-32 w-1/4 truncate text-secondaryLight">
|
||||||
{{ variable.key }}
|
{{ variable.key }}
|
||||||
</span>
|
</span>
|
||||||
<span class="text-secondaryLight w-full min-w-32 truncate">
|
<span class="min-w-32 w-full truncate text-secondaryLight">
|
||||||
{{ variable.value }}
|
{{ variable.value }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -231,7 +231,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="sticky top-0 mt-2 font-semibold truncate flex items-center justify-between text-secondaryDark bg-primary border border-divider rounded pl-4"
|
class="sticky top-0 mt-2 flex items-center justify-between truncate rounded border border-divider bg-primary pl-4 font-semibold text-secondaryDark"
|
||||||
:class="{
|
:class="{
|
||||||
'bg-primaryLight': !selectedEnv.variables,
|
'bg-primaryLight': !selectedEnv.variables,
|
||||||
}"
|
}"
|
||||||
|
|
@ -252,16 +252,16 @@
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="selectedEnv.type === 'NO_ENV_SELECTED'"
|
v-if="selectedEnv.type === 'NO_ENV_SELECTED'"
|
||||||
class="text-secondaryLight my-2 flex flex-col flex-1 pl-4"
|
class="my-2 flex flex-1 flex-col pl-4 text-secondaryLight"
|
||||||
>
|
>
|
||||||
{{ t("environment.no_active_environment") }}
|
{{ t("environment.no_active_environment") }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="my-2 flex flex-col flex-1 space-y-2 pl-4 pr-2">
|
<div v-else class="my-2 flex flex-1 flex-col space-y-2 pl-4 pr-2">
|
||||||
<div class="flex flex-1 space-x-4">
|
<div class="flex flex-1 space-x-4">
|
||||||
<span class="w-1/4 min-w-32 truncate text-tiny font-semibold">
|
<span class="min-w-32 w-1/4 truncate text-tiny font-semibold">
|
||||||
{{ t("environment.name") }}
|
{{ t("environment.name") }}
|
||||||
</span>
|
</span>
|
||||||
<span class="w-full min-w-32 truncate text-tiny font-semibold">
|
<span class="min-w-32 w-full truncate text-tiny font-semibold">
|
||||||
{{ t("environment.value") }}
|
{{ t("environment.value") }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -270,10 +270,10 @@
|
||||||
:key="index"
|
:key="index"
|
||||||
class="flex flex-1 space-x-4"
|
class="flex flex-1 space-x-4"
|
||||||
>
|
>
|
||||||
<span class="text-secondaryLight w-1/4 min-w-32 truncate">
|
<span class="min-w-32 w-1/4 truncate text-secondaryLight">
|
||||||
{{ variable.key }}
|
{{ variable.key }}
|
||||||
</span>
|
</span>
|
||||||
<span class="text-secondaryLight w-full min-w-32 truncate">
|
<span class="min-w-32 w-full truncate text-secondaryLight">
|
||||||
{{ variable.value }}
|
{{ variable.value }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
|
class="sticky top-0 z-10 flex flex-shrink-0 flex-col overflow-x-auto bg-primary"
|
||||||
>
|
>
|
||||||
<WorkspaceCurrent :section="t('tab.environments')" />
|
<WorkspaceCurrent :section="t('tab.environments')" />
|
||||||
<EnvironmentsMyEnvironment
|
<EnvironmentsMyEnvironment
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
@submit="saveEnvironment"
|
@submit="saveEnvironment"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="flex items-center justify-between flex-1">
|
<div class="flex flex-1 items-center justify-between">
|
||||||
<label for="variableList" class="p-4">
|
<label for="variableList" class="p-4">
|
||||||
{{ t("environment.variable_list") }}
|
{{ t("environment.variable_list") }}
|
||||||
</label>
|
</label>
|
||||||
|
|
@ -37,11 +37,11 @@
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="evnExpandError"
|
v-if="evnExpandError"
|
||||||
class="w-full px-4 py-2 mb-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
|
class="mb-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
|
||||||
>
|
>
|
||||||
{{ t("environment.nested_overflow") }}
|
{{ t("environment.nested_overflow") }}
|
||||||
</div>
|
</div>
|
||||||
<div class="border rounded divide-y divide-dividerLight border-divider">
|
<div class="divide-y divide-dividerLight rounded border border-divider">
|
||||||
<div
|
<div
|
||||||
v-for="({ id, env }, index) in vars"
|
v-for="({ id, env }, index) in vars"
|
||||||
:key="`variable-${id}-${index}`"
|
:key="`variable-${id}-${index}`"
|
||||||
|
|
@ -50,7 +50,7 @@
|
||||||
<input
|
<input
|
||||||
v-model="env.key"
|
v-model="env.key"
|
||||||
v-focus
|
v-focus
|
||||||
class="flex flex-1 px-4 py-2 bg-transparent"
|
class="flex flex-1 bg-transparent px-4 py-2"
|
||||||
:placeholder="`${t('count.variable', { count: index + 1 })}`"
|
:placeholder="`${t('count.variable', { count: index + 1 })}`"
|
||||||
:name="'param' + index"
|
:name="'param' + index"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,24 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="flex items-stretch group"
|
class="group flex items-stretch"
|
||||||
@contextmenu.prevent="options!.tippy.show()"
|
@contextmenu.prevent="options!.tippy.show()"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
v-if="environmentIndex === 'Global'"
|
v-if="environmentIndex === 'Global'"
|
||||||
class="flex items-center justify-center px-4 cursor-pointer"
|
class="flex cursor-pointer items-center justify-center px-4"
|
||||||
@click="emit('edit-environment')"
|
@click="emit('edit-environment')"
|
||||||
>
|
>
|
||||||
<icon-lucide-globe class="svg-icons" />
|
<icon-lucide-globe class="svg-icons" />
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
v-else
|
v-else
|
||||||
class="flex items-center justify-center px-4 cursor-pointer"
|
class="flex cursor-pointer items-center justify-center px-4"
|
||||||
@click="emit('edit-environment')"
|
@click="emit('edit-environment')"
|
||||||
>
|
>
|
||||||
<icon-lucide-layers class="svg-icons" />
|
<icon-lucide-layers class="svg-icons" />
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
|
class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
|
||||||
@click="emit('edit-environment')"
|
@click="emit('edit-environment')"
|
||||||
>
|
>
|
||||||
<span class="truncate">
|
<span class="truncate">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex justify-between flex-1 flex-shrink-0 overflow-x-auto border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
|
class="sticky top-upperPrimaryStickyFold z-10 flex flex-1 flex-shrink-0 justify-between overflow-x-auto border-b border-dividerLight bg-primary"
|
||||||
>
|
>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
:icon="IconPlus"
|
:icon="IconPlus"
|
||||||
|
|
@ -39,10 +39,10 @@
|
||||||
:text="t('empty.environments')"
|
:text="t('empty.environments')"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col items-center space-y-4">
|
<div class="flex flex-col items-center space-y-4">
|
||||||
<span class="text-secondaryLight text-center">
|
<span class="text-center text-secondaryLight">
|
||||||
{{ t("environment.import_or_create") }}
|
{{ t("environment.import_or_create") }}
|
||||||
</span>
|
</span>
|
||||||
<div class="flex gap-4 flex-col items-stretch">
|
<div class="flex flex-col items-stretch gap-4">
|
||||||
<HoppButtonPrimary
|
<HoppButtonPrimary
|
||||||
:icon="IconImport"
|
:icon="IconImport"
|
||||||
:label="t('import.title')"
|
:label="t('import.title')"
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
@submit="saveEnvironment"
|
@submit="saveEnvironment"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="flex items-center justify-between flex-1">
|
<div class="flex flex-1 items-center justify-between">
|
||||||
<label for="variableList" class="p-4">
|
<label for="variableList" class="p-4">
|
||||||
{{ t("environment.variable_list") }}
|
{{ t("environment.variable_list") }}
|
||||||
</label>
|
</label>
|
||||||
|
|
@ -37,11 +37,11 @@
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="evnExpandError"
|
v-if="evnExpandError"
|
||||||
class="w-full px-4 py-2 mb-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
|
class="mb-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
|
||||||
>
|
>
|
||||||
{{ t("environment.nested_overflow") }}
|
{{ t("environment.nested_overflow") }}
|
||||||
</div>
|
</div>
|
||||||
<div class="border rounded divide-y divide-dividerLight border-divider">
|
<div class="divide-y divide-dividerLight rounded border border-divider">
|
||||||
<div
|
<div
|
||||||
v-for="({ id, env }, index) in vars"
|
v-for="({ id, env }, index) in vars"
|
||||||
:key="`variable-${id}-${index}`"
|
:key="`variable-${id}-${index}`"
|
||||||
|
|
@ -50,7 +50,7 @@
|
||||||
<input
|
<input
|
||||||
v-model="env.key"
|
v-model="env.key"
|
||||||
v-focus
|
v-focus
|
||||||
class="flex flex-1 px-4 py-2 bg-transparent"
|
class="flex flex-1 bg-transparent px-4 py-2"
|
||||||
:class="isViewer && 'opacity-25'"
|
:class="isViewer && 'opacity-25'"
|
||||||
:placeholder="`${t('count.variable', { count: index + 1 })}`"
|
:placeholder="`${t('count.variable', { count: index + 1 })}`"
|
||||||
:name="'param' + index"
|
:name="'param' + index"
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="flex items-stretch group"
|
class="group flex items-stretch"
|
||||||
@contextmenu.prevent="options!.tippy.show()"
|
@contextmenu.prevent="options!.tippy.show()"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="flex items-center justify-center px-4 cursor-pointer"
|
class="flex cursor-pointer items-center justify-center px-4"
|
||||||
@click="emit('edit-environment')"
|
@click="emit('edit-environment')"
|
||||||
>
|
>
|
||||||
<icon-lucide-layers class="svg-icons" />
|
<icon-lucide-layers class="svg-icons" />
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
|
class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
|
||||||
@click="emit('edit-environment')"
|
@click="emit('edit-environment')"
|
||||||
>
|
>
|
||||||
<span class="truncate">
|
<span class="truncate">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex justify-between flex-1 flex-shrink-0 overflow-x-auto border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
|
class="sticky top-upperPrimaryStickyFold z-10 flex flex-1 flex-shrink-0 justify-between overflow-x-auto border-b border-dividerLight bg-primary"
|
||||||
>
|
>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
v-if="team === undefined || team.myRole === 'VIEWER'"
|
v-if="team === undefined || team.myRole === 'VIEWER'"
|
||||||
|
|
@ -50,10 +50,10 @@
|
||||||
:text="t('empty.environments')"
|
:text="t('empty.environments')"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col items-center space-y-4">
|
<div class="flex flex-col items-center space-y-4">
|
||||||
<span class="text-secondaryLight text-center">
|
<span class="text-center text-secondaryLight">
|
||||||
{{ t("environment.import_or_create") }}
|
{{ t("environment.import_or_create") }}
|
||||||
</span>
|
</span>
|
||||||
<div class="flex gap-4 flex-col items-stretch">
|
<div class="flex flex-col items-stretch gap-4">
|
||||||
<HoppButtonPrimary
|
<HoppButtonPrimary
|
||||||
:icon="IconImport"
|
:icon="IconImport"
|
||||||
:label="t('import.title')"
|
:label="t('import.title')"
|
||||||
|
|
@ -94,7 +94,7 @@
|
||||||
v-if="!loading && adapterError"
|
v-if="!loading && adapterError"
|
||||||
class="flex flex-col items-center py-4"
|
class="flex flex-col items-center py-4"
|
||||||
>
|
>
|
||||||
<icon-lucide-help-circle class="mb-4 svg-icons" />
|
<icon-lucide-help-circle class="svg-icons mb-4" />
|
||||||
{{ getErrorMessage(adapterError) }}
|
{{ getErrorMessage(adapterError) }}
|
||||||
</div>
|
</div>
|
||||||
<EnvironmentsTeamsDetails
|
<EnvironmentsTeamsDetails
|
||||||
|
|
|
||||||
|
|
@ -47,9 +47,9 @@
|
||||||
/>
|
/>
|
||||||
</form>
|
</form>
|
||||||
<div v-if="mode === 'email-sent'" class="flex flex-col px-4">
|
<div v-if="mode === 'email-sent'" class="flex flex-col px-4">
|
||||||
<div class="flex flex-col items-center justify-center max-w-md">
|
<div class="flex max-w-md flex-col items-center justify-center">
|
||||||
<icon-lucide-inbox class="w-6 h-6 text-accent" />
|
<icon-lucide-inbox class="h-6 w-6 text-accent" />
|
||||||
<h3 class="my-2 text-lg text-center">
|
<h3 class="my-2 text-center text-lg">
|
||||||
{{ t("auth.we_sent_magic_link") }}
|
{{ t("auth.we_sent_magic_link") }}
|
||||||
</h3>
|
</h3>
|
||||||
<p class="text-center">
|
<p class="text-center">
|
||||||
|
|
@ -63,7 +63,7 @@
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div
|
<div
|
||||||
v-if="mode === 'sign-in' && tosLink && privacyPolicyLink"
|
v-if="mode === 'sign-in' && tosLink && privacyPolicyLink"
|
||||||
class="text-secondaryLight text-tiny"
|
class="text-tiny text-secondaryLight"
|
||||||
>
|
>
|
||||||
By signing in, you are agreeing to our
|
By signing in, you are agreeing to our
|
||||||
<HoppSmartAnchor
|
<HoppSmartAnchor
|
||||||
|
|
@ -90,7 +90,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="mode === 'email-sent'"
|
v-if="mode === 'email-sent'"
|
||||||
class="flex justify-between flex-1 text-secondaryLight"
|
class="flex flex-1 justify-between text-secondaryLight"
|
||||||
>
|
>
|
||||||
<HoppSmartAnchor
|
<HoppSmartAnchor
|
||||||
class="link"
|
class="link"
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
|
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
|
||||||
>
|
>
|
||||||
<span class="flex items-center">
|
<span class="flex items-center">
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("authorization.type") }}
|
{{ t("authorization.type") }}
|
||||||
</label>
|
</label>
|
||||||
<tippy
|
<tippy
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
>
|
>
|
||||||
<span class="select-wrapper">
|
<span class="select-wrapper">
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
class="pr-8 ml-2 rounded-none"
|
class="ml-2 rounded-none pr-8"
|
||||||
:label="authName"
|
:label="authName"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -171,7 +171,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="sticky flex-shrink-0 h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
|
class="z-9 sticky top-upperTertiaryStickyFold h-full min-w-46 max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
|
||||||
>
|
>
|
||||||
<div class="pb-2 text-secondaryLight">
|
<div class="pb-2 text-secondaryLight">
|
||||||
{{ t("helpers.authorization") }}
|
{{ t("helpers.authorization") }}
|
||||||
|
|
|
||||||
|
|
@ -21,19 +21,19 @@
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="gqlField.description"
|
v-if="gqlField.description"
|
||||||
class="py-2 text-secondaryLight field-desc"
|
class="field-desc py-2 text-secondaryLight"
|
||||||
>
|
>
|
||||||
{{ gqlField.description }}
|
{{ gqlField.description }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="gqlField.isDeprecated"
|
v-if="gqlField.isDeprecated"
|
||||||
class="inline-block px-2 py-1 my-1 text-black bg-yellow-200 rounded field-deprecated"
|
class="field-deprecated my-1 inline-block rounded bg-yellow-200 px-2 py-1 text-black"
|
||||||
>
|
>
|
||||||
{{ t("state.deprecated") }}
|
{{ t("state.deprecated") }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="fieldArgs.length > 0">
|
<div v-if="fieldArgs.length > 0">
|
||||||
<h5 class="my-2">Arguments:</h5>
|
<h5 class="my-2">Arguments:</h5>
|
||||||
<div class="pl-4 border-l-2 border-divider">
|
<div class="border-l-2 border-divider pl-4">
|
||||||
<div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
|
<div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
|
||||||
<span>
|
<span>
|
||||||
{{ field.name }}:
|
{{ field.name }}:
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
</span>
|
</span>
|
||||||
<div
|
<div
|
||||||
v-if="field.description"
|
v-if="field.description"
|
||||||
class="py-2 text-secondaryLight field-desc"
|
class="field-desc py-2 text-secondaryLight"
|
||||||
>
|
>
|
||||||
{{ field.description }}
|
{{ field.description }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -84,7 +84,7 @@ export default defineComponent({
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.field-highlighted {
|
.field-highlighted {
|
||||||
@apply border-accent border-b-2;
|
@apply border-b-2 border-accent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-title {
|
.field-title {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
|
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="font-semibold text-secondaryLight">
|
||||||
{{ t("tab.headers") }}
|
{{ t("tab.headers") }}
|
||||||
|
|
@ -42,7 +42,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="bulkMode" ref="bulkEditor" class="flex flex-col flex-1"></div>
|
<div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<draggable
|
<draggable
|
||||||
v-model="workingHeaders"
|
v-model="workingHeaders"
|
||||||
|
|
@ -56,7 +56,7 @@
|
||||||
>
|
>
|
||||||
<template #item="{ element: header, index }">
|
<template #item="{ element: header, index }">
|
||||||
<div
|
<div
|
||||||
class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
|
class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
|
|
@ -71,7 +71,7 @@
|
||||||
:icon="IconGripVertical"
|
:icon="IconGripVertical"
|
||||||
class="cursor-auto text-primary hover:text-primary"
|
class="cursor-auto text-primary hover:text-primary"
|
||||||
:class="{
|
:class="{
|
||||||
'draggable-handle group-hover:text-secondaryLight !cursor-grab':
|
'draggable-handle !cursor-grab group-hover:text-secondaryLight':
|
||||||
index !== workingHeaders?.length - 1,
|
index !== workingHeaders?.length - 1,
|
||||||
}"
|
}"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
|
|
@ -91,7 +91,7 @@
|
||||||
px-4
|
px-4
|
||||||
truncate
|
truncate
|
||||||
"
|
"
|
||||||
class="flex-1 !flex"
|
class="!flex flex-1"
|
||||||
@input="
|
@input="
|
||||||
updateHeader(index, {
|
updateHeader(index, {
|
||||||
id: header.id,
|
id: header.id,
|
||||||
|
|
@ -102,7 +102,7 @@
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
<input
|
<input
|
||||||
class="flex flex-1 px-4 py-2 bg-transparent"
|
class="flex flex-1 bg-transparent px-4 py-2"
|
||||||
:placeholder="`${t('count.value', { count: index + 1 })}`"
|
:placeholder="`${t('count.value', { count: index + 1 })}`"
|
||||||
:name="`value ${String(index)}`"
|
:name="`value ${String(index)}`"
|
||||||
:value="header.value"
|
:value="header.value"
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
|
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="font-semibold text-secondaryLight">
|
||||||
{{ t("request.query") }}
|
{{ t("request.query") }}
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
:title="`${t('request.stop')}`"
|
:title="`${t('request.stop')}`"
|
||||||
:label="`${t('request.stop')}`"
|
:label="`${t('request.stop')}`"
|
||||||
:icon="IconStop"
|
:icon="IconStop"
|
||||||
class="rounded-none !text-accent !hover:text-accentDark"
|
class="!hover:text-accentDark rounded-none !text-accent"
|
||||||
@click="unsubscribe()"
|
@click="unsubscribe()"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
:label="`${selectedOperation.name?.value ?? t('request.run')}`"
|
:label="`${selectedOperation.name?.value ?? t('request.run')}`"
|
||||||
:icon="IconPlay"
|
:icon="IconPlay"
|
||||||
:disabled="!selectedOperation"
|
:disabled="!selectedOperation"
|
||||||
class="rounded-none !text-accent !hover:text-accentDark"
|
class="!hover:text-accentDark rounded-none !text-accent"
|
||||||
@click="runQuery(selectedOperation)"
|
@click="runQuery(selectedOperation)"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
@ -79,7 +79,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div ref="queryEditor" class="flex flex-col flex-1"></div>
|
<div ref="queryEditor" class="flex flex-1 flex-col"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
|
class="sticky top-0 z-10 flex flex-shrink-0 space-x-2 overflow-x-auto bg-primary p-4"
|
||||||
>
|
>
|
||||||
<div class="inline-flex flex-1 space-x-2">
|
<div class="inline-flex flex-1 space-x-2">
|
||||||
<input
|
<input
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
type="url"
|
type="url"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark"
|
class="w-full rounded border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
|
||||||
:placeholder="`${t('request.url')}`"
|
:placeholder="`${t('request.url')}`"
|
||||||
:disabled="connected"
|
:disabled="connected"
|
||||||
@keyup.enter="onConnectClick"
|
@keyup.enter="onConnectClick"
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1 h-full">
|
<div class="flex h-full flex-1 flex-col">
|
||||||
<HoppSmartTabs
|
<HoppSmartTabs
|
||||||
v-model="selectedOptionTab"
|
v-model="selectedOptionTab"
|
||||||
styles="sticky top-0 bg-primary z-10 border-b-0"
|
styles="sticky top-0 bg-primary z-10 border-b-0"
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1 overflow-auto whitespace-nowrap">
|
<div class="flex flex-1 flex-col overflow-auto whitespace-nowrap">
|
||||||
<div v-if="response?.length === 1" class="flex flex-col flex-1">
|
<div v-if="response?.length === 1" class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky top-0 z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
|
class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("response.title") }}
|
{{ t("response.title") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
|
|
@ -33,11 +33,11 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div ref="schemaEditor" class="flex flex-col flex-1"></div>
|
<div ref="schemaEditor" class="flex flex-1 flex-col"></div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-else-if="response && response?.length > 1"
|
v-else-if="response && response?.length > 1"
|
||||||
class="flex flex-col flex-1"
|
class="flex flex-1 flex-col"
|
||||||
>
|
>
|
||||||
<GraphqlSubscriptionLog :log="response" />
|
<GraphqlSubscriptionLog :log="response" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
type="search"
|
type="search"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
:placeholder="`${t('action.search')}`"
|
:placeholder="`${t('action.search')}`"
|
||||||
class="flex flex-1 p-4 py-2 bg-transparent"
|
class="flex flex-1 bg-transparent p-4 py-2"
|
||||||
/>
|
/>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
|
|
@ -112,9 +112,9 @@
|
||||||
<HoppSmartTab :id="'schema'" :icon="IconBox" :label="`${t('tab.schema')}`">
|
<HoppSmartTab :id="'schema'" :icon="IconBox" :label="`${t('tab.schema')}`">
|
||||||
<div
|
<div
|
||||||
v-if="schemaString"
|
v-if="schemaString"
|
||||||
class="sticky top-0 z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
|
class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("graphql.schema") }}
|
{{ t("graphql.schema") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
@ -149,7 +149,7 @@
|
||||||
<div
|
<div
|
||||||
v-if="schemaString"
|
v-if="schemaString"
|
||||||
ref="schemaEditor"
|
ref="schemaEditor"
|
||||||
class="flex flex-col flex-1"
|
class="flex flex-1 flex-col"
|
||||||
></div>
|
></div>
|
||||||
<HoppSmartPlaceholder
|
<HoppSmartPlaceholder
|
||||||
v-else
|
v-else
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div ref="container" class="flex flex-col flex-1">
|
<div ref="container" class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky top-0 z-10 flex items-center justify-between flex-none pl-4 border-b bg-primary border-dividerLight"
|
class="sticky top-0 z-10 flex flex-none items-center justify-between border-b border-dividerLight bg-primary pl-4"
|
||||||
>
|
>
|
||||||
<label for="log" class="py-2 font-semibold text-secondaryLight">
|
<label for="log" class="py-2 font-semibold text-secondaryLight">
|
||||||
{{ "Subscription Log" }}
|
{{ "Subscription Log" }}
|
||||||
|
|
@ -43,7 +43,7 @@
|
||||||
class="overflow-y-auto border-b border-dividerLight"
|
class="overflow-y-auto border-b border-dividerLight"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col h-auto h-full border-r divide-y divide-dividerLight border-dividerLight"
|
class="flex h-auto h-full flex-col divide-y divide-dividerLight border-r border-dividerLight"
|
||||||
>
|
>
|
||||||
<RealtimeLogEntry
|
<RealtimeLogEntry
|
||||||
v-for="(entry, index) in log"
|
v-for="(entry, index) in log"
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<div
|
<div
|
||||||
v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
|
v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
|
||||||
:title="tab.document.request.name"
|
:title="tab.document.request.name"
|
||||||
class="truncate px-2 flex items-center"
|
class="flex items-center truncate px-2"
|
||||||
@dblclick="emit('open-rename-modal')"
|
@dblclick="emit('open-rename-modal')"
|
||||||
@contextmenu.prevent="options?.tippy?.show()"
|
@contextmenu.prevent="options?.tippy?.show()"
|
||||||
@click.middle="emit('close-tab')"
|
@click.middle="emit('close-tab')"
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
theme="popover"
|
theme="popover"
|
||||||
:on-shown="() => tippyActions!.focus()"
|
:on-shown="() => tippyActions!.focus()"
|
||||||
>
|
>
|
||||||
<span class="leading-8 px-2 truncate">
|
<span class="truncate px-2 leading-8">
|
||||||
{{ tab.document.request.name }}
|
{{ tab.document.request.name }}
|
||||||
</span>
|
</span>
|
||||||
<template #content="{ hide }">
|
<template #content="{ hide }">
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<span v-else-if="isEnum" class="text-accent">enum </span>
|
<span v-else-if="isEnum" class="text-accent">enum </span>
|
||||||
{{ gqlType.name }}
|
{{ gqlType.name }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="gqlType.description" class="py-2 text-secondaryLight type-desc">
|
<div v-if="gqlType.description" class="type-desc py-2 text-secondaryLight">
|
||||||
{{ gqlType.description }}
|
{{ gqlType.description }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="interfaces.length > 0">
|
<div v-if="interfaces.length > 0">
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
<GraphqlTypeLink
|
<GraphqlTypeLink
|
||||||
:gql-type="gqlInterface"
|
:gql-type="gqlInterface"
|
||||||
:jump-type-callback="jumpTypeCallback"
|
:jump-type-callback="jumpTypeCallback"
|
||||||
class="pl-4 border-l-2 border-divider"
|
class="border-l-2 border-divider pl-4"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
:key="`child-${index}`"
|
:key="`child-${index}`"
|
||||||
:gql-type="child"
|
:gql-type="child"
|
||||||
:jump-type-callback="jumpTypeCallback"
|
:jump-type-callback="jumpTypeCallback"
|
||||||
class="pl-4 border-l-2 border-divider"
|
class="border-l-2 border-divider pl-4"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="gqlType.getFields">
|
<div v-if="gqlType.getFields">
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
<GraphqlField
|
<GraphqlField
|
||||||
v-for="(field, index) in gqlType.getFields()"
|
v-for="(field, index) in gqlType.getFields()"
|
||||||
:key="`field-${index}`"
|
:key="`field-${index}`"
|
||||||
class="pl-4 border-l-2 border-divider"
|
class="border-l-2 border-divider pl-4"
|
||||||
:gql-field="field"
|
:gql-field="field"
|
||||||
:is-highlighted="isFieldHighlighted({ field })"
|
:is-highlighted="isFieldHighlighted({ field })"
|
||||||
:jump-type-callback="jumpTypeCallback"
|
:jump-type-callback="jumpTypeCallback"
|
||||||
|
|
@ -48,7 +48,7 @@
|
||||||
<div
|
<div
|
||||||
v-for="(value, index) in gqlType.getValues()"
|
v-for="(value, index) in gqlType.getValues()"
|
||||||
:key="`value-${index}`"
|
:key="`value-${index}`"
|
||||||
class="pl-4 border-l-2 border-divider"
|
class="border-l-2 border-divider pl-4"
|
||||||
v-text="value.name"
|
v-text="value.name"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
|
class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="font-semibold text-secondaryLight">
|
||||||
{{ t("request.variables") }}
|
{{ t("request.variables") }}
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
:title="`${t('request.stop')}`"
|
:title="`${t('request.stop')}`"
|
||||||
:label="`${t('request.stop')}`"
|
:label="`${t('request.stop')}`"
|
||||||
:icon="IconStop"
|
:icon="IconStop"
|
||||||
class="rounded-none !text-accent !hover:text-accentDark"
|
class="!hover:text-accentDark rounded-none !text-accent"
|
||||||
@click="unsubscribe()"
|
@click="unsubscribe()"
|
||||||
/>
|
/>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
:label="`${selectedOperation.name?.value ?? t('request.run')}`"
|
:label="`${selectedOperation.name?.value ?? t('request.run')}`"
|
||||||
:icon="IconPlay"
|
:icon="IconPlay"
|
||||||
:disabled="!selectedOperation"
|
:disabled="!selectedOperation"
|
||||||
class="rounded-none !text-accent !hover:text-accentDark"
|
class="!hover:text-accentDark rounded-none !text-accent"
|
||||||
@click="runQuery(selectedOperation)"
|
@click="runQuery(selectedOperation)"
|
||||||
/>
|
/>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
|
|
@ -67,7 +67,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div ref="variableEditor" class="flex flex-col flex-1"></div>
|
<div ref="variableEditor" class="flex flex-1 flex-col"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col group">
|
<div class="group flex flex-col">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<span
|
<span
|
||||||
v-tippy="{
|
v-tippy="{
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
delay: [500, 20],
|
delay: [500, 20],
|
||||||
content: entry.updatedOn ? shortDateTime(entry.updatedOn) : null,
|
content: entry.updatedOn ? shortDateTime(entry.updatedOn) : null,
|
||||||
}"
|
}"
|
||||||
class="flex flex-1 min-w-0 py-2 pl-4 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
|
class="flex min-w-0 flex-1 cursor-pointer py-2 pl-4 pr-2 transition group-hover:text-secondaryDark"
|
||||||
data-testid="restore_history_entry"
|
data-testid="restore_history_entry"
|
||||||
@click="useEntry"
|
@click="useEntry"
|
||||||
>
|
>
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
:title="!entry.star ? t('add.star') : t('remove.star')"
|
:title="!entry.star ? t('add.star') : t('remove.star')"
|
||||||
:icon="entry.star ? IconStarOff : IconStar"
|
:icon="entry.star ? IconStarOff : IconStar"
|
||||||
color="yellow"
|
color="yellow"
|
||||||
:class="{ 'group-hover:inline-flex hidden': !entry.star }"
|
:class="{ 'hidden group-hover:inline-flex': !entry.star }"
|
||||||
data-testid="star_button"
|
data-testid="star_button"
|
||||||
@click="emit('toggle-star')"
|
@click="emit('toggle-star')"
|
||||||
/>
|
/>
|
||||||
|
|
@ -45,7 +45,7 @@
|
||||||
<span
|
<span
|
||||||
v-for="(line, index) in query"
|
v-for="(line, index) in query"
|
||||||
:key="`line-${index}`"
|
:key="`line-${index}`"
|
||||||
class="px-4 font-mono truncate whitespace-pre cursor-pointer text-secondaryLight"
|
class="cursor-pointer truncate whitespace-pre px-4 font-mono text-secondaryLight"
|
||||||
data-testid="restore_history_entry"
|
data-testid="restore_history_entry"
|
||||||
@click="useEntry"
|
@click="useEntry"
|
||||||
>{{ line }}</span
|
>{{ line }}</span
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto border-b bg-primary border-dividerLight"
|
class="sticky top-0 z-10 flex flex-shrink-0 flex-col overflow-x-auto border-b border-dividerLight bg-primary"
|
||||||
>
|
>
|
||||||
<WorkspaceCurrent :section="t('tab.history')" />
|
<WorkspaceCurrent :section="t('tab.history')" />
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
v-model="filterText"
|
v-model="filterText"
|
||||||
type="search"
|
type="search"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
class="flex flex-1 p-4 py-2 bg-transparent"
|
class="flex flex-1 bg-transparent p-4 py-2"
|
||||||
:placeholder="`${t('action.search')}`"
|
:placeholder="`${t('action.search')}`"
|
||||||
/>
|
/>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
@ -69,13 +69,13 @@
|
||||||
open
|
open
|
||||||
>
|
>
|
||||||
<summary
|
<summary
|
||||||
class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer focus:outline-none text-secondaryLight text-tiny group"
|
class="group flex min-w-0 flex-1 cursor-pointer items-center justify-between text-tiny text-secondaryLight transition focus:outline-none"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="inline-flex items-center justify-center px-4 py-2 transition group-hover:text-secondary truncate"
|
class="inline-flex items-center justify-center truncate px-4 py-2 transition group-hover:text-secondary"
|
||||||
>
|
>
|
||||||
<icon-lucide-chevron-right
|
<icon-lucide-chevron-right
|
||||||
class="mr-2 indicator flex flex-shrink-0"
|
class="indicator mr-2 flex flex-shrink-0"
|
||||||
/>
|
/>
|
||||||
<span
|
<span
|
||||||
:class="[
|
:class="[
|
||||||
|
|
@ -124,7 +124,7 @@
|
||||||
:text="`${t('state.nothing_found')} ‟${filterText || filterSelection}”`"
|
:text="`${t('state.nothing_found')} ‟${filterText || filterSelection}”`"
|
||||||
>
|
>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
|
<icon-lucide-search class="svg-icons pb-2 opacity-75" />
|
||||||
</template>
|
</template>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
:label="t('action.clear')"
|
:label="t('action.clear')"
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="flex items-stretch group"
|
class="group flex items-stretch"
|
||||||
@contextmenu.prevent="options!.tippy.show()"
|
@contextmenu.prevent="options!.tippy.show()"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
|
v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
|
||||||
class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
|
class="flex w-16 cursor-pointer items-center justify-center truncate px-2"
|
||||||
:class="entryStatus.className"
|
:class="entryStatus.className"
|
||||||
data-testid="restore_history_entry"
|
data-testid="restore_history_entry"
|
||||||
:title="`${duration}`"
|
:title="`${duration}`"
|
||||||
@click="emit('use-entry')"
|
@click="emit('use-entry')"
|
||||||
>
|
>
|
||||||
<span class="font-semibold truncate text-tiny">
|
<span class="truncate text-tiny font-semibold">
|
||||||
{{ entry.request.method }}
|
{{ entry.request.method }}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
delay: [500, 20],
|
delay: [500, 20],
|
||||||
content: entry.updatedOn ? shortDateTime(entry.updatedOn) : null,
|
content: entry.updatedOn ? shortDateTime(entry.updatedOn) : null,
|
||||||
}"
|
}"
|
||||||
class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
|
class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
|
||||||
data-testid="restore_history_entry"
|
data-testid="restore_history_entry"
|
||||||
@click="emit('use-entry')"
|
@click="emit('use-entry')"
|
||||||
>
|
>
|
||||||
|
|
@ -74,7 +74,7 @@
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
:title="!entry.star ? t('add.star') : t('remove.star')"
|
:title="!entry.star ? t('add.star') : t('remove.star')"
|
||||||
:class="{ 'group-hover:inline-flex hidden': !entry.star }"
|
:class="{ 'hidden group-hover:inline-flex': !entry.star }"
|
||||||
:icon="entry.star ? IconStarOff : IconStar"
|
:icon="entry.star ? IconStarOff : IconStar"
|
||||||
color="yellow"
|
color="yellow"
|
||||||
data-testid="star_button"
|
data-testid="star_button"
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
|
class="sticky top-upperMobileSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperSecondaryStickyFold"
|
||||||
>
|
>
|
||||||
<span class="flex items-center">
|
<span class="flex items-center">
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("authorization.type") }}
|
{{ t("authorization.type") }}
|
||||||
</label>
|
</label>
|
||||||
<tippy
|
<tippy
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
>
|
>
|
||||||
<span class="select-wrapper">
|
<span class="select-wrapper">
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
class="pr-8 ml-2 rounded-none"
|
class="ml-2 rounded-none pr-8"
|
||||||
:label="authName"
|
:label="authName"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -149,7 +149,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="sticky flex-shrink-0 h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
|
class="z-9 sticky top-upperTertiaryStickyFold h-full min-w-46 max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
|
||||||
>
|
>
|
||||||
<div class="pb-2 text-secondaryLight">
|
<div class="pb-2 text-secondaryLight">
|
||||||
{{ t("helpers.authorization") }}
|
{{ t("helpers.authorization") }}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
|
class="sticky top-upperMobileSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperSecondaryStickyFold"
|
||||||
>
|
>
|
||||||
<span class="flex items-center">
|
<span class="flex items-center">
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("request.content_type") }}
|
{{ t("request.content_type") }}
|
||||||
</label>
|
</label>
|
||||||
<tippy
|
<tippy
|
||||||
|
|
@ -16,13 +16,13 @@
|
||||||
<span class="select-wrapper">
|
<span class="select-wrapper">
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
:label="body.contentType || t('state.none')"
|
:label="body.contentType || t('state.none')"
|
||||||
class="pr-8 ml-2 rounded-none"
|
class="ml-2 rounded-none pr-8"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<template #content="{ hide }">
|
<template #content="{ hide }">
|
||||||
<div
|
<div
|
||||||
ref="tippyActions"
|
ref="tippyActions"
|
||||||
class="flex flex-col space-y-2 divide-y focus:outline-none divide-dividerLight"
|
class="flex flex-col space-y-2 divide-y divide-dividerLight focus:outline-none"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
@keyup.escape="hide()"
|
@keyup.escape="hide()"
|
||||||
>
|
>
|
||||||
|
|
@ -46,8 +46,8 @@
|
||||||
:key="`contentTypeItems-${contentTypeItemsIndex}`"
|
:key="`contentTypeItems-${contentTypeItemsIndex}`"
|
||||||
class="flex flex-col text-left"
|
class="flex flex-col text-left"
|
||||||
>
|
>
|
||||||
<div class="flex px-4 py-2 rounded">
|
<div class="flex rounded px-4 py-2">
|
||||||
<span class="font-bold text-tiny text-secondaryLight">
|
<span class="text-tiny font-bold text-secondaryLight">
|
||||||
{{ t(contentTypeItems.title) }}
|
{{ t(contentTypeItems.title) }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
|
class="sticky top-upperMobileStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperMobileTertiaryStickyFold"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("request.body") }}
|
{{ t("request.body") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
>
|
>
|
||||||
<template #item="{ element: { entry }, index }">
|
<template #item="{ element: { entry }, index }">
|
||||||
<div
|
<div
|
||||||
class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
|
class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
|
|
@ -56,7 +56,7 @@
|
||||||
:icon="IconGripVertical"
|
:icon="IconGripVertical"
|
||||||
class="cursor-auto text-primary hover:text-primary"
|
class="cursor-auto text-primary hover:text-primary"
|
||||||
:class="{
|
:class="{
|
||||||
'draggable-handle group-hover:text-secondaryLight !cursor-grab':
|
'draggable-handle !cursor-grab group-hover:text-secondaryLight':
|
||||||
index !== workingParams?.length - 1,
|
index !== workingParams?.length - 1,
|
||||||
}"
|
}"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
|
|
@ -75,7 +75,7 @@
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
<div v-if="entry.isFile" class="file-chips-container">
|
<div v-if="entry.isFile" class="file-chips-container">
|
||||||
<div class="space-x-2 file-chips-wrapper">
|
<div class="file-chips-wrapper space-x-2">
|
||||||
<HoppSmartFileChip
|
<HoppSmartFileChip
|
||||||
v-for="(file, fileIndex) in entry.value"
|
v-for="(file, fileIndex) in entry.value"
|
||||||
:key="`param-${index}-file-${fileIndex}`"
|
:key="`param-${index}-file-${fileIndex}`"
|
||||||
|
|
@ -104,7 +104,7 @@
|
||||||
:name="`attachment${index}`"
|
:name="`attachment${index}`"
|
||||||
type="file"
|
type="file"
|
||||||
multiple
|
multiple
|
||||||
class="p-1 transition cursor-pointer file:transition file:cursor-pointer text-secondaryLight hover:text-secondaryDark file:mr-2 file:py-1 file:px-4 file:rounded file:border-0 file:text-tiny text-tiny file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
|
class="cursor-pointer p-1 text-tiny text-secondaryLight transition file:mr-2 file:cursor-pointer file:rounded file:border-0 file:bg-primaryLight file:px-4 file:py-1 file:text-tiny file:text-secondary file:transition hover:text-secondaryDark hover:file:bg-primaryDark hover:file:text-secondaryDark"
|
||||||
@change="setRequestAttachment(index, entry, $event)"
|
@change="setRequestAttachment(index, entry, $event)"
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
|
|
|
||||||
|
|
@ -28,12 +28,12 @@
|
||||||
</span>
|
</span>
|
||||||
<template #content="{ hide }">
|
<template #content="{ hide }">
|
||||||
<div class="flex flex-col space-y-2">
|
<div class="flex flex-col space-y-2">
|
||||||
<div class="sticky z-10 top-0 flex-shrink-0 overflow-x-auto">
|
<div class="sticky top-0 z-10 flex-shrink-0 overflow-x-auto">
|
||||||
<input
|
<input
|
||||||
v-model="searchQuery"
|
v-model="searchQuery"
|
||||||
type="search"
|
type="search"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
class="flex w-full p-4 py-2 input !bg-primaryContrast"
|
class="input flex w-full !bg-primaryContrast p-4 py-2"
|
||||||
:placeholder="`${t('action.search')}`"
|
:placeholder="`${t('action.search')}`"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -61,7 +61,7 @@
|
||||||
:text="`${t('state.nothing_found')} ‟${searchQuery}”`"
|
:text="`${t('state.nothing_found')} ‟${searchQuery}”`"
|
||||||
>
|
>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
|
<icon-lucide-search class="svg-icons pb-2 opacity-75" />
|
||||||
</template>
|
</template>
|
||||||
</HoppSmartPlaceholder>
|
</HoppSmartPlaceholder>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -70,16 +70,16 @@
|
||||||
</tippy>
|
</tippy>
|
||||||
<div
|
<div
|
||||||
v-if="errorState"
|
v-if="errorState"
|
||||||
class="w-full px-4 py-2 mt-4 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
|
class="mt-4 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
|
||||||
>
|
>
|
||||||
{{ t("error.something_went_wrong") }}
|
{{ t("error.something_went_wrong") }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-else-if="codegenType"
|
v-else-if="codegenType"
|
||||||
class="mt-4 border rounded border-dividerLight"
|
class="mt-4 rounded border border-dividerLight"
|
||||||
>
|
>
|
||||||
<div class="flex items-center justify-between pl-4">
|
<div class="flex items-center justify-between pl-4">
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("request.generated_code") }}
|
{{ t("request.generated_code") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
|
|
@ -106,7 +106,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
ref="generatedCode"
|
ref="generatedCode"
|
||||||
class="border-t rounded-b border-dividerLight"
|
class="rounded-b border-t border-dividerLight"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
|
class="sticky top-upperMobileSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperSecondaryStickyFold"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("request.header_list") }}
|
{{ t("request.header_list") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="bulkMode" ref="bulkEditor" class="flex flex-col flex-1"></div>
|
<div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<draggable
|
<draggable
|
||||||
v-model="workingHeaders"
|
v-model="workingHeaders"
|
||||||
|
|
@ -58,7 +58,7 @@
|
||||||
>
|
>
|
||||||
<template #item="{ element: header, index }">
|
<template #item="{ element: header, index }">
|
||||||
<div
|
<div
|
||||||
class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
|
class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
|
|
@ -73,7 +73,7 @@
|
||||||
:icon="IconGripVertical"
|
:icon="IconGripVertical"
|
||||||
class="cursor-auto text-primary hover:text-primary"
|
class="cursor-auto text-primary hover:text-primary"
|
||||||
:class="{
|
:class="{
|
||||||
'draggable-handle group-hover:text-secondaryLight !cursor-grab':
|
'draggable-handle !cursor-grab group-hover:text-secondaryLight':
|
||||||
index !== workingHeaders?.length - 1,
|
index !== workingHeaders?.length - 1,
|
||||||
}"
|
}"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
|
|
@ -163,12 +163,12 @@
|
||||||
>
|
>
|
||||||
<template #item="{ element: header, index }">
|
<template #item="{ element: header, index }">
|
||||||
<div
|
<div
|
||||||
class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
|
class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
:icon="IconLock"
|
:icon="IconLock"
|
||||||
class="opacity-25 cursor-auto text-secondaryLight bg-divider"
|
class="cursor-auto bg-divider text-secondaryLight opacity-25"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -6,10 +6,10 @@
|
||||||
@close="hideModal"
|
@close="hideModal"
|
||||||
>
|
>
|
||||||
<template #body>
|
<template #body>
|
||||||
<div class="border rounded border-dividerLight">
|
<div class="rounded border border-dividerLight">
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<div class="flex items-center justify-between pl-4">
|
<div class="flex items-center justify-between pl-4">
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
cURL
|
cURL
|
||||||
</label>
|
</label>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
|
|
@ -43,7 +43,7 @@
|
||||||
<div class="h-46">
|
<div class="h-46">
|
||||||
<div
|
<div
|
||||||
ref="curlEditor"
|
ref="curlEditor"
|
||||||
class="h-full border-t rounded-b border-dividerLight"
|
class="h-full rounded-b border-t border-dividerLight"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
|
class="sticky top-upperMobileSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperSecondaryStickyFold"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("request.parameter_list") }}
|
{{ t("request.parameter_list") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="bulkMode" ref="bulkEditor" class="flex flex-col flex-1"></div>
|
<div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<draggable
|
<draggable
|
||||||
v-model="workingParams"
|
v-model="workingParams"
|
||||||
|
|
@ -58,7 +58,7 @@
|
||||||
>
|
>
|
||||||
<template #item="{ element: param, index }">
|
<template #item="{ element: param, index }">
|
||||||
<div
|
<div
|
||||||
class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
|
class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
|
|
@ -73,7 +73,7 @@
|
||||||
:icon="IconGripVertical"
|
:icon="IconGripVertical"
|
||||||
class="cursor-auto text-primary hover:text-primary"
|
class="cursor-auto text-primary hover:text-primary"
|
||||||
:class="{
|
:class="{
|
||||||
'draggable-handle group-hover:text-secondaryLight !cursor-grab':
|
'draggable-handle !cursor-grab group-hover:text-secondaryLight':
|
||||||
index !== workingParams?.length - 1,
|
index !== workingParams?.length - 1,
|
||||||
}"
|
}"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
|
class="sticky top-upperMobileSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperSecondaryStickyFold"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("preRequest.javascript_code") }}
|
{{ t("preRequest.javascript_code") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
<div ref="preRequestEditor" class="h-full"></div>
|
<div ref="preRequestEditor" class="h-full"></div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="sticky flex-shrink-0 h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
|
class="z-9 sticky top-upperTertiaryStickyFold h-full min-w-46 max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
|
||||||
>
|
>
|
||||||
<div class="pb-2 text-secondaryLight">
|
<div class="pb-2 text-secondaryLight">
|
||||||
{{ t("helpers.pre_request_script") }}
|
{{ t("helpers.pre_request_script") }}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
|
class="sticky top-upperMobileStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperMobileTertiaryStickyFold"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("request.raw_body") }}
|
{{ t("request.raw_body") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
@ -59,7 +59,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div ref="rawBodyParameters" class="flex flex-col flex-1"></div>
|
<div ref="rawBodyParameters" class="flex flex-1 flex-col"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="sticky top-0 z-20 flex-none flex-shrink-0 p-4 sm:flex sm:flex-shrink-0 sm:space-x-2 bg-primary"
|
class="sticky top-0 z-20 flex-none flex-shrink-0 bg-primary p-4 sm:flex sm:flex-shrink-0 sm:space-x-2"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex flex-1 border rounded min-w-52 border-divider whitespace-nowrap"
|
class="min-w-52 flex flex-1 whitespace-nowrap rounded border border-divider"
|
||||||
>
|
>
|
||||||
<div class="relative flex">
|
<div class="relative flex">
|
||||||
<label for="method">
|
<label for="method">
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
<span class="select-wrapper">
|
<span class="select-wrapper">
|
||||||
<input
|
<input
|
||||||
id="method"
|
id="method"
|
||||||
class="flex px-4 py-2 font-semibold transition rounded-l cursor-pointer text-secondaryDark w-26 bg-primaryLight"
|
class="flex w-26 cursor-pointer rounded-l bg-primaryLight px-4 py-2 font-semibold text-secondaryDark transition"
|
||||||
:value="tab.document.request.method"
|
:value="tab.document.request.method"
|
||||||
:readonly="!isCustomMethod"
|
:readonly="!isCustomMethod"
|
||||||
:placeholder="`${t('request.method')}`"
|
:placeholder="`${t('request.method')}`"
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="flex flex-1 transition border-l rounded-r border-divider bg-primaryLight whitespace-nowrap"
|
class="flex flex-1 whitespace-nowrap rounded-r border-l border-divider bg-primaryLight transition"
|
||||||
>
|
>
|
||||||
<SmartEnvInput
|
<SmartEnvInput
|
||||||
v-model="tab.document.request.endpoint"
|
v-model="tab.document.request.endpoint"
|
||||||
|
|
@ -59,7 +59,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex mt-2 sm:mt-0">
|
<div class="mt-2 flex sm:mt-0">
|
||||||
<HoppButtonPrimary
|
<HoppButtonPrimary
|
||||||
id="send"
|
id="send"
|
||||||
v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
|
v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
|
||||||
|
|
@ -67,7 +67,7 @@
|
||||||
'action.send'
|
'action.send'
|
||||||
)} <kbd>${getSpecialKey()}</kbd><kbd>↩</kbd>`"
|
)} <kbd>${getSpecialKey()}</kbd><kbd>↩</kbd>`"
|
||||||
:label="`${!loading ? t('action.send') : t('action.cancel')}`"
|
:label="`${!loading ? t('action.send') : t('action.cancel')}`"
|
||||||
class="flex-1 rounded-r-none min-w-20"
|
class="min-w-20 flex-1 rounded-r-none"
|
||||||
@click="!loading ? newSendRequest() : cancelRequest()"
|
@click="!loading ? newSendRequest() : cancelRequest()"
|
||||||
/>
|
/>
|
||||||
<span class="flex">
|
<span class="flex">
|
||||||
|
|
@ -134,7 +134,7 @@
|
||||||
</template>
|
</template>
|
||||||
</tippy>
|
</tippy>
|
||||||
</span>
|
</span>
|
||||||
<span class="flex ml-2 transition border rounded border-divider">
|
<span class="ml-2 flex rounded border border-divider transition">
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
|
v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
|
||||||
:title="`${t(
|
:title="`${t(
|
||||||
|
|
@ -174,7 +174,7 @@
|
||||||
name="request-name"
|
name="request-name"
|
||||||
type="text"
|
type="text"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
class="mb-2 input !bg-primaryContrast"
|
class="input mb-2 !bg-primaryContrast"
|
||||||
@keyup.enter="hide()"
|
@keyup.enter="hide()"
|
||||||
/>
|
/>
|
||||||
<HoppSmartItem
|
<HoppSmartItem
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1 relative">
|
<div class="relative flex flex-1 flex-col">
|
||||||
<HttpResponseMeta :response="doc.response" />
|
<HttpResponseMeta :response="doc.response" />
|
||||||
<LensesResponseBodyRenderer
|
<LensesResponseBodyRenderer
|
||||||
v-if="!loading && hasResponse"
|
v-if="!loading && hasResponse"
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="sticky top-0 z-10 flex items-center justify-center flex-shrink-0 p-4 overflow-auto overflow-x-auto bg-primary whitespace-nowrap"
|
class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-center overflow-auto overflow-x-auto whitespace-nowrap bg-primary p-4"
|
||||||
>
|
>
|
||||||
<AppShortcutsPrompt v-if="response == null" class="flex-1" />
|
<AppShortcutsPrompt v-if="response == null" class="flex-1" />
|
||||||
<div v-else class="flex flex-col flex-1">
|
<div v-else class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
v-if="response.type === 'loading'"
|
v-if="response.type === 'loading'"
|
||||||
class="flex flex-col items-center justify-center"
|
class="flex flex-col items-center justify-center"
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
:text="t('helpers.network_fail')"
|
:text="t('helpers.network_fail')"
|
||||||
large
|
large
|
||||||
>
|
>
|
||||||
<AppInterceptor class="p-2 border rounded border-dividerLight" />
|
<AppInterceptor class="rounded border border-dividerLight p-2" />
|
||||||
</HoppSmartPlaceholder>
|
</HoppSmartPlaceholder>
|
||||||
<HoppSmartPlaceholder
|
<HoppSmartPlaceholder
|
||||||
v-if="response.type === 'script_fail'"
|
v-if="response.type === 'script_fail'"
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
large
|
large
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="mt-2 w-full px-4 py-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
|
class="mt-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
|
||||||
>
|
>
|
||||||
{{ response.error.name }}: {{ response.error.message }}<br />
|
{{ response.error.name }}: {{ response.error.message }}<br />
|
||||||
{{ response.error.stack }}
|
{{ response.error.stack }}
|
||||||
|
|
@ -38,7 +38,7 @@
|
||||||
</HoppSmartPlaceholder>
|
</HoppSmartPlaceholder>
|
||||||
<div
|
<div
|
||||||
v-if="response.type === 'success' || response.type === 'fail'"
|
v-if="response.type === 'success' || response.type === 'fail'"
|
||||||
class="flex items-center font-semibold text-tiny"
|
class="flex items-center text-tiny font-semibold"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
:class="statusCategory.className"
|
:class="statusCategory.className"
|
||||||
|
|
@ -78,7 +78,7 @@
|
||||||
:class="[
|
:class="[
|
||||||
response === null || response?.type === 'network_fail'
|
response === null || response?.type === 'network_fail'
|
||||||
? 'absolute right-2 top-2'
|
? 'absolute right-2 top-2'
|
||||||
: 'ml-2 -m-2',
|
: '-m-2 ml-2',
|
||||||
]"
|
]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -2,14 +2,14 @@
|
||||||
<div
|
<div
|
||||||
v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
|
v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
|
||||||
:title="tab.document.request.name"
|
:title="tab.document.request.name"
|
||||||
class="truncate px-2 flex items-center"
|
class="flex items-center truncate px-2"
|
||||||
@dblclick="emit('open-rename-modal')"
|
@dblclick="emit('open-rename-modal')"
|
||||||
@contextmenu.prevent="options?.tippy?.show()"
|
@contextmenu.prevent="options?.tippy?.show()"
|
||||||
@click.middle="emit('close-tab')"
|
@click.middle="emit('close-tab')"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="font-semibold text-tiny"
|
class="text-tiny font-semibold"
|
||||||
:class="getMethodLabelColorClassOf(tab.document.request)"
|
:style="{ color: getMethodLabelColorClassOf(tab.document.request) }"
|
||||||
>
|
>
|
||||||
{{ tab.document.request.method }}
|
{{ tab.document.request.method }}
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
theme="popover"
|
theme="popover"
|
||||||
:on-shown="() => tippyActions!.focus()"
|
:on-shown="() => tippyActions!.focus()"
|
||||||
>
|
>
|
||||||
<span class="leading-8 px-2 truncate">
|
<span class="truncate px-2 leading-8">
|
||||||
{{ tab.document.request.name }}
|
{{ tab.document.request.name }}
|
||||||
</span>
|
</span>
|
||||||
<template #content="{ hide }">
|
<template #content="{ hide }">
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,9 @@
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
|
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("test.report") }}
|
{{ t("test.report") }}
|
||||||
</label>
|
</label>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
|
|
@ -21,19 +21,19 @@
|
||||||
@click="clearContent()"
|
@click="clearContent()"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="border-b divide-y-4 divide-dividerLight border-dividerLight">
|
<div class="divide-y-4 divide-dividerLight border-b border-dividerLight">
|
||||||
<div v-if="haveEnvVariables" class="flex flex-col">
|
<div v-if="haveEnvVariables" class="flex flex-col">
|
||||||
<details class="flex flex-col divide-y divide-dividerLight" open>
|
<details class="flex flex-col divide-y divide-dividerLight" open>
|
||||||
<summary
|
<summary
|
||||||
class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer focus:outline-none text-secondaryLight text-tiny group"
|
class="group flex min-w-0 flex-1 cursor-pointer items-center justify-between text-tiny text-secondaryLight transition focus:outline-none"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="inline-flex items-center justify-center px-4 py-2 transition group-hover:text-secondary truncate"
|
class="inline-flex items-center justify-center truncate px-4 py-2 transition group-hover:text-secondary"
|
||||||
>
|
>
|
||||||
<icon-lucide-chevron-right
|
<icon-lucide-chevron-right
|
||||||
class="mr-2 indicator flex flex-shrink-0"
|
class="indicator mr-2 flex flex-shrink-0"
|
||||||
/>
|
/>
|
||||||
<span class="truncate capitalize-first">
|
<span class="capitalize-first truncate">
|
||||||
{{ t("environment.title") }}
|
{{ t("environment.title") }}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -41,24 +41,24 @@
|
||||||
<div class="divide-y divide-dividerLight">
|
<div class="divide-y divide-dividerLight">
|
||||||
<div
|
<div
|
||||||
v-if="noEnvSelected && !globalHasAdditions"
|
v-if="noEnvSelected && !globalHasAdditions"
|
||||||
class="flex p-4 bg-error text-secondaryDark"
|
class="flex bg-error p-4 text-secondaryDark"
|
||||||
role="alert"
|
role="alert"
|
||||||
>
|
>
|
||||||
<icon-lucide-alert-triangle class="mr-4 svg-icons" />
|
<icon-lucide-alert-triangle class="svg-icons mr-4" />
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<p>
|
<p>
|
||||||
{{ t("environment.no_environment_description") }}
|
{{ t("environment.no_environment_description") }}
|
||||||
</p>
|
</p>
|
||||||
<p class="flex mt-3 space-x-2">
|
<p class="mt-3 flex space-x-2">
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
:label="t('environment.add_to_global')"
|
:label="t('environment.add_to_global')"
|
||||||
class="text-tiny !bg-primary"
|
class="!bg-primary text-tiny"
|
||||||
filled
|
filled
|
||||||
@click="addEnvToGlobal()"
|
@click="addEnvToGlobal()"
|
||||||
/>
|
/>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
:label="t('environment.create_new')"
|
:label="t('environment.create_new')"
|
||||||
class="text-tiny !bg-primary"
|
class="!bg-primary text-tiny"
|
||||||
filled
|
filled
|
||||||
@click="displayModalAdd(true)"
|
@click="displayModalAdd(true)"
|
||||||
/>
|
/>
|
||||||
|
|
@ -121,17 +121,17 @@
|
||||||
class="flex items-center px-4 py-2"
|
class="flex items-center px-4 py-2"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex items-center flex-shrink flex-shrink-0 overflow-x-auto"
|
class="flex flex-shrink flex-shrink-0 items-center overflow-x-auto"
|
||||||
>
|
>
|
||||||
<component
|
<component
|
||||||
:is="result.status === 'pass' ? IconCheck : IconClose"
|
:is="result.status === 'pass' ? IconCheck : IconClose"
|
||||||
class="mr-4 svg-icons"
|
class="svg-icons mr-4"
|
||||||
:class="
|
:class="
|
||||||
result.status === 'pass' ? 'text-green-500' : 'text-red-500'
|
result.status === 'pass' ? 'text-green-500' : 'text-red-500'
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="flex items-center flex-shrink flex-shrink-0 space-x-2 overflow-x-auto"
|
class="flex flex-shrink flex-shrink-0 items-center space-x-2 overflow-x-auto"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
v-if="result.message"
|
v-if="result.message"
|
||||||
|
|
@ -140,7 +140,7 @@
|
||||||
{{ result.message }}
|
{{ result.message }}
|
||||||
</span>
|
</span>
|
||||||
<span class="inline-flex text-secondaryLight">
|
<span class="inline-flex text-secondaryLight">
|
||||||
<icon-lucide-minus class="mr-2 svg-icons" />
|
<icon-lucide-minus class="svg-icons mr-2" />
|
||||||
{{
|
{{
|
||||||
result.status === "pass"
|
result.status === "pass"
|
||||||
? t("test.passed")
|
? t("test.passed")
|
||||||
|
|
|
||||||
|
|
@ -17,23 +17,23 @@
|
||||||
class="flex items-center px-4 py-2"
|
class="flex items-center px-4 py-2"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex items-center flex-shrink flex-shrink-0 overflow-x-auto"
|
class="flex flex-shrink flex-shrink-0 items-center overflow-x-auto"
|
||||||
>
|
>
|
||||||
<component
|
<component
|
||||||
:is="result.status === 'pass' ? IconCheck : IconClose"
|
:is="result.status === 'pass' ? IconCheck : IconClose"
|
||||||
class="mr-4 svg-icons"
|
class="svg-icons mr-4"
|
||||||
:class="
|
:class="
|
||||||
result.status === 'pass' ? 'text-green-500' : 'text-red-500'
|
result.status === 'pass' ? 'text-green-500' : 'text-red-500'
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="flex items-center flex-shrink flex-shrink-0 space-x-2 overflow-x-auto"
|
class="flex flex-shrink flex-shrink-0 items-center space-x-2 overflow-x-auto"
|
||||||
>
|
>
|
||||||
<span v-if="result.message" class="inline-flex text-secondaryDark">
|
<span v-if="result.message" class="inline-flex text-secondaryDark">
|
||||||
{{ result.message }}
|
{{ result.message }}
|
||||||
</span>
|
</span>
|
||||||
<span class="inline-flex text-secondaryLight">
|
<span class="inline-flex text-secondaryLight">
|
||||||
<icon-lucide-minus class="mr-2 svg-icons" />
|
<icon-lucide-minus class="svg-icons mr-2" />
|
||||||
{{
|
{{
|
||||||
result.status === "pass" ? t("test.passed") : t("test.failed")
|
result.status === "pass" ? t("test.passed") : t("test.failed")
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,35 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex items-center justify-between px-4 py-2">
|
<div class="flex items-center justify-between px-4 py-2">
|
||||||
<div class="flex items-center flex-shrink flex-shrink-0 overflow-x-auto">
|
<div class="flex flex-shrink flex-shrink-0 items-center overflow-x-auto">
|
||||||
<component
|
<component
|
||||||
:is="getIcon(status)"
|
:is="getIcon(status)"
|
||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
class="mr-4 svg-icons cursor-help"
|
class="svg-icons mr-4 cursor-help"
|
||||||
:class="getStyle(status)"
|
:class="getStyle(status)"
|
||||||
:title="`${t(getTooltip(status))}`"
|
:title="`${t(getTooltip(status))}`"
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="flex items-center flex-shrink flex-shrink-0 space-x-2 overflow-x-auto"
|
class="flex flex-shrink flex-shrink-0 items-center space-x-2 overflow-x-auto"
|
||||||
>
|
>
|
||||||
<span class="inline-flex text-secondaryDark">
|
<span class="inline-flex text-secondaryDark">
|
||||||
{{ env.key }}
|
{{ env.key }}
|
||||||
</span>
|
</span>
|
||||||
<span class="inline-flex text-secondaryDark">
|
<span class="inline-flex text-secondaryDark">
|
||||||
<icon-lucide-minus class="mr-2 svg-icons" />
|
<icon-lucide-minus class="svg-icons mr-2" />
|
||||||
{{ env.value }}
|
{{ env.value }}
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
v-if="status === 'updations'"
|
v-if="status === 'updations'"
|
||||||
class="inline-flex text-secondaryLight"
|
class="inline-flex text-secondaryLight"
|
||||||
>
|
>
|
||||||
<icon-lucide-arrow-left class="mr-2 svg-icons" />
|
<icon-lucide-arrow-left class="svg-icons mr-2" />
|
||||||
{{ env.previousValue }}
|
{{ env.previousValue }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
v-if="global"
|
v-if="global"
|
||||||
class="px-1 ml-4 rounded bg-accentLight text-accentContrast text-tiny"
|
class="ml-4 rounded bg-accentLight px-1 text-tiny text-accentContrast"
|
||||||
>
|
>
|
||||||
Global
|
Global
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
|
class="sticky top-upperMobileSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperSecondaryStickyFold"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("test.javascript_code") }}
|
{{ t("test.javascript_code") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
<div ref="testScriptEditor" class="h-full"></div>
|
<div ref="testScriptEditor" class="h-full"></div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="sticky flex-shrink-0 h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
|
class="z-9 sticky top-upperTertiaryStickyFold h-full min-w-46 max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
|
||||||
>
|
>
|
||||||
<div class="pb-2 text-secondaryLight">
|
<div class="pb-2 text-secondaryLight">
|
||||||
{{ t("helpers.post_request_tests") }}
|
{{ t("helpers.post_request_tests") }}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
|
class="sticky top-upperMobileStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperMobileTertiaryStickyFold"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("request.body") }}
|
{{ t("request.body") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="bulkMode" ref="bulkEditor" class="flex flex-col flex-1"></div>
|
<div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<draggable
|
<draggable
|
||||||
v-model="workingUrlEncodedParams"
|
v-model="workingUrlEncodedParams"
|
||||||
|
|
@ -58,7 +58,7 @@
|
||||||
>
|
>
|
||||||
<template #item="{ element: param, index }">
|
<template #item="{ element: param, index }">
|
||||||
<div
|
<div
|
||||||
class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
|
class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
|
|
@ -73,7 +73,7 @@
|
||||||
:icon="IconGripVertical"
|
:icon="IconGripVertical"
|
||||||
class="cursor-auto text-primary hover:text-primary"
|
class="cursor-auto text-primary hover:text-primary"
|
||||||
:class="{
|
:class="{
|
||||||
'draggable-handle group-hover:text-secondaryLight !cursor-grab':
|
'draggable-handle !cursor-grab group-hover:text-secondaryLight':
|
||||||
index !== workingUrlEncodedParams?.length - 1,
|
index !== workingUrlEncodedParams?.length - 1,
|
||||||
}"
|
}"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
<span class="select-wrapper">
|
<span class="select-wrapper">
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
:label="auth.addTo || t('state.none')"
|
:label="auth.addTo || t('state.none')"
|
||||||
class="pr-8 ml-2 rounded-none"
|
class="ml-2 rounded-none pr-8"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<template #content="{ hide }">
|
<template #content="{ hide }">
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
|
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("request.header_list") }}
|
{{ t("request.header_list") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,25 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="flex border-b divide-x divide-dividerLight border-dividerLight group"
|
class="group flex divide-x divide-dividerLight border-b border-dividerLight"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="flex flex-1 min-w-0 px-4 py-2 transition group-hover:text-secondaryDark"
|
class="flex min-w-0 flex-1 px-4 py-2 transition group-hover:text-secondaryDark"
|
||||||
>
|
>
|
||||||
<span class="truncate rounded-sm select-all">
|
<span class="select-all truncate rounded-sm">
|
||||||
{{ header.key }}
|
{{ header.key }}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="flex justify-between flex-1 min-w-0 py-2 pl-4 transition group-hover:text-secondaryDark"
|
class="flex min-w-0 flex-1 justify-between py-2 pl-4 transition group-hover:text-secondaryDark"
|
||||||
>
|
>
|
||||||
<span class="truncate rounded-sm select-all">
|
<span class="select-all truncate rounded-sm">
|
||||||
{{ header.value }}
|
{{ header.value }}
|
||||||
</span>
|
</span>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
:title="t('action.copy')"
|
:title="t('action.copy')"
|
||||||
:icon="copyIcon"
|
:icon="copyIcon"
|
||||||
class="hidden group-hover:inline-flex !py-0"
|
class="hidden !py-0 group-hover:inline-flex"
|
||||||
@click="copyHeader(header.value)"
|
@click="copyHeader(header.value)"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
:id="lens.renderer"
|
:id="lens.renderer"
|
||||||
:key="`lens-${index}`"
|
:key="`lens-${index}`"
|
||||||
:label="t(lens.lensName)"
|
:label="t(lens.lensName)"
|
||||||
class="flex flex-col flex-1 w-full h-full"
|
class="flex h-full w-full flex-1 flex-col"
|
||||||
>
|
>
|
||||||
<component
|
<component
|
||||||
:is="lensRendererFor(lens.renderer)"
|
:is="lensRendererFor(lens.renderer)"
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
id="headers"
|
id="headers"
|
||||||
:label="t('response.headers')"
|
:label="t('response.headers')"
|
||||||
:info="`${maybeHeaders.length}`"
|
:info="`${maybeHeaders.length}`"
|
||||||
class="flex flex-col flex-1"
|
class="flex flex-1 flex-col"
|
||||||
>
|
>
|
||||||
<LensesHeadersRenderer :headers="maybeHeaders" />
|
<LensesHeadersRenderer :headers="maybeHeaders" />
|
||||||
</HoppSmartTab>
|
</HoppSmartTab>
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
id="results"
|
id="results"
|
||||||
:label="t('test.results')"
|
:label="t('test.results')"
|
||||||
:indicator="showIndicator"
|
:indicator="showIndicator"
|
||||||
class="flex flex-col flex-1"
|
class="flex flex-1 flex-col"
|
||||||
>
|
>
|
||||||
<HttpTestResult v-model="doc.testResults" />
|
<HttpTestResult v-model="doc.testResults" />
|
||||||
</HoppSmartTab>
|
</HoppSmartTab>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
|
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("response.body") }}
|
{{ t("response.body") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
|
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("response.body") }}
|
{{ t("response.body") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
<div
|
<div
|
||||||
v-show="!previewEnabled"
|
v-show="!previewEnabled"
|
||||||
ref="htmlResponse"
|
ref="htmlResponse"
|
||||||
class="flex flex-col flex-1"
|
class="flex flex-1 flex-col"
|
||||||
></div>
|
></div>
|
||||||
<iframe
|
<iframe
|
||||||
v-show="previewEnabled"
|
v-show="previewEnabled"
|
||||||
|
|
@ -124,6 +124,6 @@ defineActionHandler("response.copy", () => copyResponse())
|
||||||
@apply w-full;
|
@apply w-full;
|
||||||
@apply border;
|
@apply border;
|
||||||
@apply border-dividerLight;
|
@apply border-dividerLight;
|
||||||
@apply z-5;
|
@apply z-10;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
|
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("response.body") }}
|
{{ t("response.body") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-if="response.type === 'success' || response.type === 'fail'"
|
v-if="response.type === 'success' || response.type === 'fail'"
|
||||||
class="flex flex-col flex-1"
|
class="flex flex-1 flex-col"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
|
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("response.body") }}
|
{{ t("response.body") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
|
|
@ -48,13 +48,13 @@
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="toggleFilter"
|
v-if="toggleFilter"
|
||||||
class="sticky z-10 flex flex-shrink-0 overflow-x-auto border-b bg-primary top-lowerTertiaryStickyFold border-dividerLight"
|
class="sticky top-lowerTertiaryStickyFold z-10 flex flex-shrink-0 overflow-x-auto border-b border-dividerLight bg-primary"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="inline-flex items-center flex-1 bg-primaryLight border-divider text-secondaryDark"
|
class="inline-flex flex-1 items-center border-divider bg-primaryLight text-secondaryDark"
|
||||||
>
|
>
|
||||||
<span class="inline-flex items-center flex-1 px-4">
|
<span class="inline-flex flex-1 items-center px-4">
|
||||||
<icon-lucide-search class="w-4 h-4 text-secondaryLight" />
|
<icon-lucide-search class="h-4 w-4 text-secondaryLight" />
|
||||||
<input
|
<input
|
||||||
v-model="filterQueryText"
|
v-model="filterQueryText"
|
||||||
v-focus
|
v-focus
|
||||||
|
|
@ -65,7 +65,7 @@
|
||||||
</span>
|
</span>
|
||||||
<div
|
<div
|
||||||
v-if="filterResponseError"
|
v-if="filterResponseError"
|
||||||
class="flex items-center justify-center px-2 py-1 rounded text-tiny text-accentContrast"
|
class="flex items-center justify-center rounded px-2 py-1 text-tiny text-accentContrast"
|
||||||
:class="{
|
:class="{
|
||||||
'bg-red-500':
|
'bg-red-500':
|
||||||
filterResponseError.type === 'JSON_PARSE_FAILED' ||
|
filterResponseError.type === 'JSON_PARSE_FAILED' ||
|
||||||
|
|
@ -88,12 +88,12 @@
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
ref="jsonResponse"
|
ref="jsonResponse"
|
||||||
class="flex flex-col flex-1 h-auto h-full"
|
class="flex h-auto h-full flex-1 flex-col"
|
||||||
:class="toggleFilter ? 'responseToggleOn' : 'responseToggleOff'"
|
:class="toggleFilter ? 'responseToggleOn' : 'responseToggleOff'"
|
||||||
></div>
|
></div>
|
||||||
<div
|
<div
|
||||||
v-if="outlinePath"
|
v-if="outlinePath"
|
||||||
class="sticky bottom-0 z-10 flex flex-shrink-0 px-2 overflow-auto overflow-x-auto border-t bg-primaryLight border-dividerLight flex-nowrap"
|
class="sticky bottom-0 z-10 flex flex-shrink-0 flex-nowrap overflow-auto overflow-x-auto border-t border-dividerLight bg-primaryLight px-2"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-for="(item, index) in outlinePath"
|
v-for="(item, index) in outlinePath"
|
||||||
|
|
@ -191,7 +191,7 @@
|
||||||
</tippy>
|
</tippy>
|
||||||
<icon-lucide-chevron-right
|
<icon-lucide-chevron-right
|
||||||
v-if="index + 1 !== outlinePath.length"
|
v-if="index + 1 !== outlinePath.length"
|
||||||
class="opacity-50 text-secondaryLight svg-icons"
|
class="svg-icons text-secondaryLight opacity-50"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -376,14 +376,14 @@ defineActionHandler("response.copy", () => copyResponse())
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.outline-item {
|
.outline-item {
|
||||||
@apply cursor-pointer;
|
@apply cursor-pointer;
|
||||||
@apply flex-grow-0 flex-shrink-0;
|
@apply flex-shrink-0 flex-grow-0;
|
||||||
@apply text-secondaryLight;
|
@apply text-secondaryLight;
|
||||||
@apply inline-flex;
|
@apply inline-flex;
|
||||||
@apply items-center;
|
@apply items-center;
|
||||||
@apply px-2;
|
@apply px-2;
|
||||||
@apply py-1;
|
@apply py-1;
|
||||||
@apply transition;
|
@apply transition;
|
||||||
@apply hover: text-secondary;
|
@apply hover:text-secondary;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.responseToggleOff .cm-panels) {
|
:deep(.responseToggleOff .cm-panels) {
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
|
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("response.body") }}
|
{{ t("response.body") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
|
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("response.body") }}
|
{{ t("response.body") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div ref="rawResponse" class="flex flex-col flex-1"></div>
|
<div ref="rawResponse" class="flex flex-1 flex-col"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
|
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("response.body") }}
|
{{ t("response.body") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
|
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
|
||||||
>
|
>
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("response.body") }}
|
{{ t("response.body") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div ref="xmlResponse" class="flex flex-col flex-1"></div>
|
<div ref="xmlResponse" class="flex flex-1 flex-col"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="block w-full my-6 border divide-y lg:flex lg:my-0 lg:border-0 lg:divide-y-0 lg:divide-x divide-dividerLight border-dividerLight"
|
class="my-6 block w-full divide-y divide-dividerLight border border-dividerLight lg:my-0 lg:flex lg:divide-x lg:divide-y-0 lg:border-0"
|
||||||
>
|
>
|
||||||
<div class="font-mono text-tiny table-box">
|
<div class="table-box font-mono text-tiny">
|
||||||
{{ shortcode.id }}
|
{{ shortcode.id }}
|
||||||
</div>
|
</div>
|
||||||
<div class="table-box" :class="requestLabelColor">
|
<div class="table-box" :class="requestLabelColor">
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
<div ref="timeStampRef" class="table-box">
|
<div ref="timeStampRef" class="table-box">
|
||||||
{{ dateStamp }}
|
{{ dateStamp }}
|
||||||
</div>
|
</div>
|
||||||
<div class="justify-center table-box">
|
<div class="table-box justify-center">
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
:title="t('action.open_workspace')"
|
:title="t('action.open_workspace')"
|
||||||
|
|
@ -117,6 +117,6 @@ const copyShortcode = (codeID: string) => {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.table-box {
|
.table-box {
|
||||||
@apply flex flex-1 items-center px-4 py-1 truncate;
|
@apply flex flex-1 items-center truncate px-4 py-1;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<div class="my-1 text-secondaryLight">
|
<div class="my-1 text-secondaryLight">
|
||||||
{{ t("settings.short_codes_description") }}
|
{{ t("settings.short_codes_description") }}
|
||||||
</div>
|
</div>
|
||||||
<div class="relative py-4 overflow-x-auto">
|
<div class="relative overflow-x-auto py-4">
|
||||||
<div v-if="loading" class="flex flex-col items-center justify-center">
|
<div v-if="loading" class="flex flex-col items-center justify-center">
|
||||||
<HoppSmartSpinner class="mb-4" />
|
<HoppSmartSpinner class="mb-4" />
|
||||||
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
|
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
</HoppSmartPlaceholder>
|
</HoppSmartPlaceholder>
|
||||||
<div v-else-if="!loading">
|
<div v-else-if="!loading">
|
||||||
<div
|
<div
|
||||||
class="hidden w-full border-t rounded-t bg-primaryLight lg:flex border-x border-dividerLight"
|
class="hidden w-full rounded-t border-x border-t border-dividerLight bg-primaryLight lg:flex"
|
||||||
>
|
>
|
||||||
<div class="flex w-full overflow-y-scroll">
|
<div class="flex w-full overflow-y-scroll">
|
||||||
<div class="table-box">
|
<div class="table-box">
|
||||||
|
|
@ -35,13 +35,13 @@
|
||||||
<div class="table-box">
|
<div class="table-box">
|
||||||
{{ t("shortcodes.created_on") }}
|
{{ t("shortcodes.created_on") }}
|
||||||
</div>
|
</div>
|
||||||
<div class="justify-center table-box">
|
<div class="table-box justify-center">
|
||||||
{{ t("shortcodes.actions") }}
|
{{ t("shortcodes.actions") }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col items-center justify-between w-full overflow-y-scroll border rounded max-h-sm lg:rounded-t-none lg:divide-y border-dividerLight divide-dividerLight"
|
class="flex max-h-sm w-full flex-col items-center justify-between divide-dividerLight overflow-y-scroll rounded border border-dividerLight lg:divide-y lg:rounded-t-none"
|
||||||
>
|
>
|
||||||
<ProfileShortcode
|
<ProfileShortcode
|
||||||
v-for="(shortcode, shortcodeIndex) in myShortcodes"
|
v-for="(shortcode, shortcodeIndex) in myShortcodes"
|
||||||
|
|
@ -63,7 +63,7 @@
|
||||||
v-if="!loading && adapterError"
|
v-if="!loading && adapterError"
|
||||||
class="flex flex-col items-center py-4"
|
class="flex flex-col items-center py-4"
|
||||||
>
|
>
|
||||||
<icon-lucide-help-circle class="mb-4 svg-icons" />
|
<icon-lucide-help-circle class="svg-icons mb-4" />
|
||||||
{{ getErrorMessage(adapterError) }}
|
{{ getErrorMessage(adapterError) }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -163,6 +163,6 @@ const getErrorMessage = (err: GQLError<string>) => {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.table-box {
|
.table-box {
|
||||||
@apply flex flex-1 items-center px-4 py-2 truncate;
|
@apply flex flex-1 items-center truncate px-4 py-2;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -26,14 +26,14 @@
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-else-if="myTeams.length"
|
v-else-if="myTeams.length"
|
||||||
class="flex flex-col p-4 space-y-2 border border-red-500 rounded-lg text-secondaryDark bg-error"
|
class="flex flex-col space-y-2 rounded-lg border border-red-500 bg-error p-4 text-secondaryDark"
|
||||||
>
|
>
|
||||||
<h2 class="font-bold text-red-500">
|
<h2 class="font-bold text-red-500">
|
||||||
{{ t("error.danger_zone") }}
|
{{ t("error.danger_zone") }}
|
||||||
</h2>
|
</h2>
|
||||||
<div>
|
<div>
|
||||||
{{ t("error.delete_account") }}
|
{{ t("error.delete_account") }}
|
||||||
<ul class="my-4 ml-8 space-y-2 list-disc">
|
<ul class="my-4 ml-8 list-disc space-y-2">
|
||||||
<li v-for="team in myTeams" :key="team.id">
|
<li v-for="team in myTeams" :key="team.id">
|
||||||
{{ team.name }}
|
{{ team.name }}
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -45,7 +45,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col p-4 mb-4 space-y-2 border border-red-500 rounded-lg text-secondaryDark bg-error"
|
class="mb-4 flex flex-col space-y-2 rounded-lg border border-red-500 bg-error p-4 text-secondaryDark"
|
||||||
>
|
>
|
||||||
<h2 class="font-bold text-red-500">
|
<h2 class="font-bold text-red-500">
|
||||||
{{ t("error.danger_zone") }}
|
{{ t("error.danger_zone") }}
|
||||||
|
|
@ -83,7 +83,7 @@
|
||||||
myTeams.length > 0 ||
|
myTeams.length > 0 ||
|
||||||
userVerificationInput !== 'delete my account'
|
userVerificationInput !== 'delete my account'
|
||||||
"
|
"
|
||||||
class="!bg-red-500 !hover:bg-red-600 !border-red-500 !hover:border-red-600"
|
class="!hover:bg-red-600 !hover:border-red-600 !border-red-500 !bg-red-500"
|
||||||
@click="deleteUserAccount"
|
@click="deleteUserAccount"
|
||||||
/>
|
/>
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col flex-1"
|
class="flex flex-1 flex-col"
|
||||||
:class="{ eventFeildShown: showEventField }"
|
:class="{ eventFeildShown: showEventField }"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-if="showEventField"
|
v-if="showEventField"
|
||||||
class="sticky z-10 flex items-center justify-center flex-shrink-0 overflow-x-auto border-b bg-primary border-dividerLight"
|
class="sticky z-10 flex flex-shrink-0 items-center justify-center overflow-x-auto border-b border-dividerLight bg-primary"
|
||||||
:class="eventFieldStyles"
|
:class="eventFieldStyles"
|
||||||
>
|
>
|
||||||
<icon-lucide-rss class="mx-4 svg-icons text-accentLight" />
|
<icon-lucide-rss class="svg-icons mx-4 text-accentLight" />
|
||||||
<input
|
<input
|
||||||
id="event_name"
|
id="event_name"
|
||||||
v-model="eventName"
|
v-model="eventName"
|
||||||
class="w-full py-2 pr-4 truncate bg-primary"
|
class="w-full truncate bg-primary py-2 pr-4"
|
||||||
name="event_name"
|
name="event_name"
|
||||||
:placeholder="`${t('socketio.event_name')}`"
|
:placeholder="`${t('socketio.event_name')}`"
|
||||||
type="text"
|
type="text"
|
||||||
|
|
@ -20,11 +20,11 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
|
class="sticky z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
|
||||||
:class="stickyHeaderStyles"
|
:class="stickyHeaderStyles"
|
||||||
>
|
>
|
||||||
<span class="flex items-center">
|
<span class="flex items-center">
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("websocket.message") }}
|
{{ t("websocket.message") }}
|
||||||
</label>
|
</label>
|
||||||
<tippy
|
<tippy
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
<span class="select-wrapper">
|
<span class="select-wrapper">
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
:label="contentType || t('state.none').toLowerCase()"
|
:label="contentType || t('state.none').toLowerCase()"
|
||||||
class="pr-8 ml-2 rounded-none"
|
class="ml-2 rounded-none pr-8"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<template #content="{ hide }">
|
<template #content="{ hide }">
|
||||||
|
|
@ -74,7 +74,7 @@
|
||||||
:label="`${t('action.send')}`"
|
:label="`${t('action.send')}`"
|
||||||
:disabled="!communicationBody || !isConnected"
|
:disabled="!communicationBody || !isConnected"
|
||||||
:icon="IconSend"
|
:icon="IconSend"
|
||||||
class="rounded-none !text-accent !hover:text-accentDark"
|
class="!hover:text-accentDark rounded-none !text-accent"
|
||||||
@click="sendMessage()"
|
@click="sendMessage()"
|
||||||
/>
|
/>
|
||||||
<HoppSmartCheckbox
|
<HoppSmartCheckbox
|
||||||
|
|
@ -130,7 +130,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div ref="wsCommunicationBody" class="flex flex-col flex-1"></div>
|
<div ref="wsCommunicationBody" class="flex flex-1 flex-col"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-1 flex-col">
|
||||||
<div
|
<div
|
||||||
class="sticky z-10 flex items-center justify-between flex-shrink-0 py-2 pl-4 pr-2 overflow-x-auto border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
|
class="sticky top-upperPrimaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary py-2 pl-4 pr-2"
|
||||||
>
|
>
|
||||||
<span class="flex items-center">
|
<span class="flex items-center">
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("mqtt.connection_config") }}
|
{{ t("mqtt.connection_config") }}
|
||||||
</label>
|
</label>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
</HoppSmartCheckbox>
|
</HoppSmartCheckbox>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-1 h-full border-dividerLight">
|
<div class="flex h-full flex-1 border-dividerLight">
|
||||||
<div class="w-1/3 border-r border-dividerLight">
|
<div class="w-1/3 border-r border-dividerLight">
|
||||||
<div class="flex flex-1 border-b border-dividerLight">
|
<div class="flex flex-1 border-b border-dividerLight">
|
||||||
<SmartEnvInput
|
<SmartEnvInput
|
||||||
|
|
@ -55,16 +55,16 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="flex items-center justify-between px-4 border-b border-dividerLight"
|
class="flex items-center justify-between border-b border-dividerLight px-4"
|
||||||
>
|
>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<label class="font-semibold truncate text-secondaryLight">
|
<label class="truncate font-semibold text-secondaryLight">
|
||||||
{{ t("mqtt.lw_qos") }}
|
{{ t("mqtt.lw_qos") }}
|
||||||
</label>
|
</label>
|
||||||
<tippy interactive trigger="click" theme="popover">
|
<tippy interactive trigger="click" theme="popover">
|
||||||
<span class="select-wrapper">
|
<span class="select-wrapper">
|
||||||
<HoppButtonSecondary
|
<HoppButtonSecondary
|
||||||
class="pr-8 ml-2 rounded-none"
|
class="ml-2 rounded-none pr-8"
|
||||||
:label="`${config.lwQos}`"
|
:label="`${config.lwQos}`"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1 overflow-auto whitespace-nowrap">
|
<div class="flex flex-1 flex-col overflow-auto whitespace-nowrap">
|
||||||
<div
|
<div
|
||||||
v-if="log.length !== 0"
|
v-if="log.length !== 0"
|
||||||
class="sticky top-0 z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
|
class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
|
||||||
>
|
>
|
||||||
<label for="log" class="font-semibold truncate text-secondaryLight">
|
<label for="log" class="truncate font-semibold text-secondaryLight">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
@ -43,7 +43,7 @@
|
||||||
<div
|
<div
|
||||||
v-if="log.length !== 0"
|
v-if="log.length !== 0"
|
||||||
ref="logs"
|
ref="logs"
|
||||||
class="flex flex-col flex-1 overflow-y-auto"
|
class="flex flex-1 flex-col overflow-y-auto"
|
||||||
>
|
>
|
||||||
<div class="border-b border-dividerLight">
|
<div class="border-b border-dividerLight">
|
||||||
<div class="flex flex-col divide-y divide-dividerLight">
|
<div class="flex flex-col divide-y divide-dividerLight">
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue