feat: refactor buttons
This commit is contained in:
Liyas Thomas
GitHub
2
.github/ISSUE_TEMPLATE/custom.md
vendored
2
.github/ISSUE_TEMPLATE/custom.md
vendored
@@ -6,5 +6,3 @@ labels: ''
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
1
assets/icons/chrome.svg
Normal file
1
assets/icons/chrome.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="2491" height="2500" viewBox="0 0 435.816 437.46"><path d="M217.341.039s128.478-5.783 196.57 123.337H206.416s-39.188-1.289-72.593 46.255c-9.634 19.916-19.91 40.473-8.349 80.937C108.773 222.309 36.823 97.04 36.823 97.04S87.578 5.176 217.341.039z" fill="#c6352e"/><path d="M407.223 327.871s-59.247 114.143-205.118 108.533c17.995-31.148 103.772-179.682 103.772-179.682s20.709-33.289-3.744-85.991c-12.431-18.305-25.09-37.486-65.919-47.713 32.836-.326 177.285.021 177.285.021s54.168 89.891-6.276 204.832z" fill="#f4d911"/><path d="M28.373 328.738s-69.224-108.395 8.58-231.908c17.979 31.16 103.71 179.72 103.71 179.72s18.469 34.578 76.341 39.756c22.061-1.609 45.007-2.982 74.279-33.223-16.139 28.594-88.673 153.521-88.673 153.521S97.681 438.56 28.373 328.738z" fill="#81b354"/><path d="M202.105 437.46l29.187-121.793s32.092-2.504 58.982-32.017c-16.693 29.365-88.169 153.81-88.169 153.81z" fill="#7baa50"/><path d="M119.59 220.093c0-53.69 43.52-97.215 97.215-97.215 53.69 0 97.214 43.524 97.214 97.215 0 53.693-43.522 97.219-97.214 97.219-53.695 0-97.215-43.525-97.215-97.219z" fill="#fff"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="-829.128" y1="1417.339" x2="-829.128" y2="1261.441" gradientTransform="matrix(1 0 0 -1 1045.93 1557.636)"><stop offset="0" stop-color="#a2c0e6"/><stop offset="1" stop-color="#406cb1"/></linearGradient><path d="M135.86 220.093c0-44.702 36.238-80.941 80.945-80.941 44.698 0 80.94 36.239 80.94 80.941 0 44.703-36.242 80.945-80.94 80.945-44.707.001-80.945-36.244-80.945-80.945z" fill="url(#a)"/><path d="M413.5 123.039l-120.183 35.237s-18.123-26.596-57.104-35.258c33.776-.115 177.287.021 177.287.021z" fill="#e7ce12"/><path d="M123.137 246.197c-16.89-29.25-86.31-149.16-86.31-149.16l89.029 88.07s-9.149 18.82-5.68 45.7l2.961 15.39z" fill="#bc332c"/></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
1
assets/icons/firefox.svg
Normal file
1
assets/icons/firefox.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.1 KiB |
1
assets/icons/github.svg
Normal file
1
assets/icons/github.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="2500" height="2432" viewBox="0 0 256 249" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><g fill="#161614"><path d="M127.505 0C57.095 0 0 57.085 0 127.505c0 56.336 36.534 104.13 87.196 120.99 6.372 1.18 8.712-2.766 8.712-6.134 0-3.04-.119-13.085-.173-23.739-35.473 7.713-42.958-15.044-42.958-15.044-5.8-14.738-14.157-18.656-14.157-18.656-11.568-7.914.872-7.752.872-7.752 12.804.9 19.546 13.14 19.546 13.14 11.372 19.493 29.828 13.857 37.104 10.6 1.144-8.242 4.449-13.866 8.095-17.05-28.32-3.225-58.092-14.158-58.092-63.014 0-13.92 4.981-25.295 13.138-34.224-1.324-3.212-5.688-16.18 1.235-33.743 0 0 10.707-3.427 35.073 13.07 10.17-2.826 21.078-4.242 31.914-4.29 10.836.048 21.752 1.464 31.942 4.29 24.337-16.497 35.029-13.07 35.029-13.07 6.94 17.563 2.574 30.531 1.25 33.743 8.175 8.929 13.122 20.303 13.122 34.224 0 48.972-29.828 59.756-58.22 62.912 4.573 3.957 8.648 11.717 8.648 23.612 0 17.06-.148 30.791-.148 34.991 0 3.393 2.295 7.369 8.759 6.117 50.634-16.879 87.122-64.656 87.122-120.973C255.009 57.085 197.922 0 127.505 0"/><path d="M47.755 181.634c-.28.633-1.278.823-2.185.389-.925-.416-1.445-1.28-1.145-1.916.275-.652 1.273-.834 2.196-.396.927.415 1.455 1.287 1.134 1.923M54.027 187.23c-.608.564-1.797.302-2.604-.589-.834-.889-.99-2.077-.373-2.65.627-.563 1.78-.3 2.616.59.834.899.996 2.08.36 2.65M58.33 194.39c-.782.543-2.06.034-2.849-1.1-.781-1.133-.781-2.493.017-3.038.792-.545 2.05-.055 2.85 1.07.78 1.153.78 2.513-.019 3.069M65.606 202.683c-.699.77-2.187.564-3.277-.488-1.114-1.028-1.425-2.487-.724-3.258.707-.772 2.204-.555 3.302.488 1.107 1.026 1.445 2.496.7 3.258M75.01 205.483c-.307.998-1.741 1.452-3.185 1.028-1.442-.437-2.386-1.607-2.095-2.616.3-1.005 1.74-1.478 3.195-1.024 1.44.435 2.386 1.596 2.086 2.612M85.714 206.67c.036 1.052-1.189 1.924-2.705 1.943-1.525.033-2.758-.818-2.774-1.852 0-1.062 1.197-1.926 2.721-1.951 1.516-.03 2.758.815 2.758 1.86M96.228 206.267c.182 1.026-.872 2.08-2.377 2.36-1.48.27-2.85-.363-3.039-1.38-.184-1.052.89-2.105 2.367-2.378 1.508-.262 2.857.355 3.049 1.398"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
1
assets/icons/google.svg
Normal file
1
assets/icons/google.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M118.2 208.3c19.9-60.3 76.5-103.6 143.7-103.6 36.1 0 68.6 12.8 94.3 33.7L430.5 64C385.2 24.4 327 0 261.8 0 160.9 0 74 57.6 32.3 141.9l85.9 66.4z" fill="#ea4335"/><path d="M348 384.3c-23.3 15-52.8 23-86.2 23-66.9 0-123.3-43-143.4-102.9l-86.2 65.4C73.9 454.3 160.8 512 261.8 512c62.6 0 122.4-22.2 167.1-64L348 384.3z" fill="#34a853"/><path d="M428.9 448c46.8-43.7 77.2-108.7 77.2-192 0-15.1-2.3-31.4-5.8-46.5H261.8v98.9h137.3c-6.8 33.3-25 59-51.1 75.9l80.9 63.7z" fill="#4a90e2"/><path d="M118.4 304.4c-5.1-15.2-7.9-31.4-7.9-48.4 0-16.7 2.7-32.7 7.6-47.7l-85.9-66.4C15.1 176.2 5.8 214.9 5.8 256c0 40.9 9.5 79.6 26.4 113.8l86.2-65.4z" fill="#fbbc05"/></svg>
|
||||
|
After Width: | Height: | Size: 726 B |
1
assets/icons/twitter.svg
Normal file
1
assets/icons/twitter.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg clip-rule="evenodd" fill-rule="evenodd" height="1684" stroke-linejoin="round" stroke-miterlimit="2" viewBox="-89.00934757 -46.8841404 643.93723344 446.8841404" width="2500" xmlns="http://www.w3.org/2000/svg"><path d="m154.729 400c185.669 0 287.205-153.876 287.205-287.312 0-4.37-.089-8.72-.286-13.052a205.304 205.304 0 0 0 50.352-52.29c-18.087 8.044-37.55 13.458-57.968 15.899 20.841-12.501 36.84-32.278 44.389-55.852a202.42 202.42 0 0 1 -64.098 24.511c-18.42-19.628-44.644-31.904-73.682-31.904-55.744 0-100.948 45.222-100.948 100.965 0 7.925.887 15.631 2.619 23.025-83.895-4.223-158.287-44.405-208.074-105.504a100.739 100.739 0 0 0 -13.668 50.754c0 35.034 17.82 65.961 44.92 84.055a100.172 100.172 0 0 1 -45.716-12.63c-.015.424-.015.837-.015 1.29 0 48.903 34.794 89.734 80.982 98.986a101.036 101.036 0 0 1 -26.617 3.553c-6.493 0-12.821-.639-18.971-1.82 12.851 40.122 50.115 69.319 94.296 70.135-34.549 27.089-78.07 43.224-125.371 43.224a204.9 204.9 0 0 1 -24.078-1.399c44.674 28.645 97.72 45.359 154.734 45.359" fill="#1da1f2" fill-rule="nonzero"/></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -10,28 +10,34 @@
|
||||
font-variant-ligatures: common-ligatures;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@apply bg-accent;
|
||||
@apply text-primary;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@apply h-1;
|
||||
@apply w-2;
|
||||
|
||||
&:hover {
|
||||
@apply bg-primaryDark;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-secondaryLight;
|
||||
@apply bg-divider;
|
||||
@apply rounded-full;
|
||||
@apply border-solid;
|
||||
@apply border-4;
|
||||
@apply border-transparent;
|
||||
@apply bg-clip-content;
|
||||
|
||||
&:hover {
|
||||
@apply bg-secondary;
|
||||
@apply bg-dividerDark;
|
||||
@apply bg-clip-content;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@apply w-4;
|
||||
@apply h-4;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@apply bg-accent;
|
||||
@apply text-primary;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
@apply text-secondaryLight;
|
||||
@apply opacity-25;
|
||||
@@ -44,6 +50,7 @@ html {
|
||||
body {
|
||||
@apply bg-primary;
|
||||
@apply text-secondary;
|
||||
@apply text-sm;
|
||||
@apply font-medium;
|
||||
@apply select-none;
|
||||
@apply overflow-x-hidden;
|
||||
@@ -52,15 +59,11 @@ body {
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
body.sticky-footer footer {
|
||||
@apply opacity-25;
|
||||
}
|
||||
|
||||
.page-enter-active,
|
||||
.page-leave-active,
|
||||
.layout-enter-active,
|
||||
.layout-leave-active {
|
||||
@apply transition;
|
||||
@apply transition-opacity;
|
||||
}
|
||||
|
||||
.page-enter,
|
||||
@@ -70,76 +73,41 @@ body.sticky-footer footer {
|
||||
@apply opacity-0;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.svg-icons {
|
||||
@apply inline-flex;
|
||||
@apply flex-shrink-0;
|
||||
@apply h-5;
|
||||
@apply w-5;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply inline-flex;
|
||||
@apply text-current;
|
||||
@apply no-underline;
|
||||
@apply outline-none;
|
||||
@apply focus-visible:ring;
|
||||
@apply focus-visible:ring-inset;
|
||||
@apply focus-visible:ring-accent;
|
||||
|
||||
&.link {
|
||||
@apply text-accent;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
& > div {
|
||||
@apply flex;
|
||||
@apply py-2 px-2;
|
||||
@apply w-full;
|
||||
@apply items-center;
|
||||
@apply justify-between;
|
||||
@apply text-accent;
|
||||
|
||||
@apply hover:text-accent;
|
||||
@apply focus:text-accent;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
@apply min-h-screen;
|
||||
@apply flex flex-col flex-nowrap;
|
||||
}
|
||||
|
||||
.wrapper .page {
|
||||
min-height: calc(100vh - 153px);
|
||||
}
|
||||
|
||||
.content,
|
||||
.columns,
|
||||
.footer {
|
||||
@apply flex flex-1;
|
||||
}
|
||||
|
||||
.sticky-inner {
|
||||
@apply flex flex-col;
|
||||
@apply items-start items-stretch;
|
||||
@apply order-1;
|
||||
@apply sticky;
|
||||
@apply top-0;
|
||||
@apply h-full;
|
||||
}
|
||||
|
||||
main {
|
||||
@apply flex flex-col flex-1;
|
||||
@apply order-2;
|
||||
@apply relative;
|
||||
@apply px-4;
|
||||
}
|
||||
|
||||
.heading {
|
||||
@apply flex;
|
||||
@apply items-center;
|
||||
@apply m-0;
|
||||
@apply font-bold;
|
||||
}
|
||||
|
||||
h3.heading {
|
||||
@apply m-2;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply text-sm;
|
||||
}
|
||||
|
||||
hr {
|
||||
@apply border-b border-dashed border-divider;
|
||||
@apply my-4;
|
||||
button {
|
||||
@apply font-medium;
|
||||
@apply outline-none;
|
||||
@apply focus-visible:ring;
|
||||
@apply focus-visible:ring-inset;
|
||||
@apply focus-visible:ring-accent;
|
||||
}
|
||||
|
||||
.tippy-popper {
|
||||
@@ -154,26 +122,26 @@ hr {
|
||||
}
|
||||
|
||||
.popover-theme {
|
||||
@apply bg-primaryLight;
|
||||
@apply bg-primary;
|
||||
@apply text-secondary;
|
||||
@apply p-2;
|
||||
@apply shadow-md;
|
||||
@apply shadow-lg;
|
||||
}
|
||||
|
||||
&[x-placement^="top"] .tippy-tooltip .tippy-arrow {
|
||||
border-top-color: var(--primary-light-color);
|
||||
border-top-color: var(--primary-color);
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] .tippy-tooltip .tippy-arrow {
|
||||
border-bottom-color: var(--primary-light-color);
|
||||
border-bottom-color: var(--primary-color);
|
||||
}
|
||||
|
||||
&[x-placement^="left"] .tippy-tooltip .tippy-arrow {
|
||||
border-left-color: var(--primary-light-color);
|
||||
border-left-color: var(--primary-color);
|
||||
}
|
||||
|
||||
&[x-placement^="right"] .tippy-tooltip .tippy-arrow {
|
||||
border-right-color: var(--primary-light-color);
|
||||
border-right-color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -185,6 +153,12 @@ hr {
|
||||
@apply items-stretch;
|
||||
}
|
||||
|
||||
.heading {
|
||||
@apply font-bold;
|
||||
@apply text-secondaryDark;
|
||||
@apply text-lg;
|
||||
}
|
||||
|
||||
.info:not(.toasted) {
|
||||
@apply m-4;
|
||||
@apply text-secondaryLight;
|
||||
@@ -195,96 +169,6 @@ hr {
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@apply inline-flex;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply p-4;
|
||||
@apply bg-accent;
|
||||
@apply text-primary;
|
||||
@apply font-bold;
|
||||
@apply fill-current;
|
||||
@apply outline-none;
|
||||
@apply border-none;
|
||||
|
||||
span {
|
||||
@apply inline-flex;
|
||||
@apply ml-4;
|
||||
@apply text-left;
|
||||
}
|
||||
|
||||
&:not([disabled]):hover,
|
||||
&:not([disabled]):active,
|
||||
&:not([disabled]):focus {
|
||||
@apply text-primary;
|
||||
@apply fill-current;
|
||||
@apply outline-none;
|
||||
|
||||
box-shadow: inset 0 0 0 2px var(--secondary-color);
|
||||
}
|
||||
|
||||
&.icon {
|
||||
@apply bg-transparent;
|
||||
@apply text-secondaryLight;
|
||||
@apply fill-current;
|
||||
@apply outline-none;
|
||||
@apply border-none;
|
||||
@apply rounded-lg;
|
||||
|
||||
&:not([disabled]):hover,
|
||||
&:not([disabled]):active,
|
||||
&:not([disabled]):focus {
|
||||
@apply text-secondary;
|
||||
@apply fill-current;
|
||||
@apply shadow-none;
|
||||
}
|
||||
}
|
||||
|
||||
&.primary {
|
||||
@apply text-accent;
|
||||
@apply px-6;
|
||||
|
||||
&:not([disabled]):hover,
|
||||
&:not([disabled]):active,
|
||||
&:not([disabled]):focus {
|
||||
@apply bg-accent;
|
||||
@apply text-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes beat {
|
||||
30% {
|
||||
@apply transform;
|
||||
@apply scale-90;
|
||||
}
|
||||
50% {
|
||||
@apply transform;
|
||||
@apply scale-110;
|
||||
}
|
||||
100% {
|
||||
@apply transform;
|
||||
@apply scale-100;
|
||||
}
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
&:active {
|
||||
animation: beat 0.5s forwards 1;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset:target,
|
||||
section:target {
|
||||
animation: highlight 2s ease;
|
||||
}
|
||||
|
||||
@keyframes highlight {
|
||||
50% {
|
||||
box-shadow: 0 0 0 2px var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@apply truncate;
|
||||
}
|
||||
@@ -295,64 +179,12 @@ input[type="radio"],
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.show-on-large-screen {
|
||||
@apply flex flex-1;
|
||||
}
|
||||
|
||||
.drop-down-input,
|
||||
.url-field,
|
||||
.input,
|
||||
.select,
|
||||
.textarea,
|
||||
kbd,
|
||||
code,
|
||||
pre {
|
||||
@apply flex;
|
||||
@apply p-4;
|
||||
@apply bg-primaryDark;
|
||||
@apply text-secondary;
|
||||
@apply font-mono;
|
||||
@apply select-text;
|
||||
@apply resize-y;
|
||||
@apply outline-none;
|
||||
@apply w-full;
|
||||
|
||||
&:not([readonly]):not(.ace_editor):hover,
|
||||
&:not([readonly]):not(.ace_editor):active,
|
||||
&:not([readonly]):not(.ace_editor):focus {
|
||||
box-shadow: inset 0 0 0 2px var(--secondary-light-color);
|
||||
}
|
||||
}
|
||||
|
||||
.drop-down-input {
|
||||
@apply cursor-pointer;
|
||||
@apply rounded-none;
|
||||
|
||||
min-width: 128px;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: inset 0 0 0 2px var(--secondary-light-color);
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
@apply grid;
|
||||
}
|
||||
|
||||
pre.ace_editor {
|
||||
@apply font-mono;
|
||||
@apply z-0;
|
||||
@apply resize-none;
|
||||
}
|
||||
|
||||
kbd,
|
||||
code,
|
||||
pre {
|
||||
@apply w-auto;
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
@apply relative;
|
||||
@apply w-full;
|
||||
@@ -439,12 +271,6 @@ input[type="checkbox"] {
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
@apply p-4;
|
||||
@apply text-secondaryLight;
|
||||
@apply text-sm;
|
||||
}
|
||||
|
||||
.row-wrapper {
|
||||
@apply flex flex-1 flex-row;
|
||||
@apply items-center;
|
||||
@@ -627,7 +453,3 @@ section {
|
||||
margin-left: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.virtual-list {
|
||||
@apply overflow-auto;
|
||||
}
|
||||
|
||||
@@ -19,6 +19,10 @@
|
||||
--secondary-dark-color: rgba(0, 0, 0, 0.5);
|
||||
// Border color
|
||||
--divider-color: rgba(255, 255, 255, 0.05);
|
||||
// Light Border color
|
||||
--divider-light-color: rgba(255, 255, 255, 0.05);
|
||||
// Dark Border color
|
||||
--divider-dark-color: rgba(255, 255, 255, 0.05);
|
||||
// Error color
|
||||
--error-color: rgba(255, 255, 255, 0.05);
|
||||
// Tooltip color
|
||||
@@ -42,6 +46,10 @@
|
||||
--secondary-dark-color: theme("colors.gray.700");
|
||||
// Border color
|
||||
--divider-color: theme("colors.gray.200");
|
||||
// Light Border color
|
||||
--divider-light-color: theme("colors.gray.100");
|
||||
// Dark Border color
|
||||
--divider-dark-color: theme("colors.gray.300");
|
||||
// Error color
|
||||
--error-color: theme("colors.gray.700");
|
||||
// Tooltip color
|
||||
@@ -65,6 +73,10 @@
|
||||
--secondary-dark-color: rgba(9, 9, 9, 0.5);
|
||||
// Border color
|
||||
--divider-color: rgba(255, 255, 255, 0.11);
|
||||
// Light Border color
|
||||
--divider-light-color: rgba(255, 255, 255, 0.11);
|
||||
// Dark Border color
|
||||
--divider-dark-color: rgba(255, 255, 255, 0.11);
|
||||
// Error color
|
||||
--error-color: rgba(255, 255, 255, 0.05);
|
||||
// Tooltip color
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("extensions") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -13,62 +11,24 @@
|
||||
{{ $t("extensions_info1") }}
|
||||
</p>
|
||||
<div class="px-2">
|
||||
<a
|
||||
href="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<button class="icon button">
|
||||
<svg
|
||||
class="material-icons"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<path
|
||||
d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm8.003 8.657c-1.276-3.321-4.46-4.605-5.534-4.537 3.529 1.376 4.373 6.059 4.06 7.441-.307-1.621-1.286-3.017-1.872-3.385 3.417 8.005-4.835 10.465-7.353 7.687.649.168 1.931.085 2.891-.557.898-.602.983-.638 1.56-.683.686-.053-.041-1.406-1.539-1.177-.616.094-1.632.819-2.88.341-1.508-.576-1.46-2.634.096-2.015.337-.437.088-1.263.088-1.263.452-.414 1.022-.706 1.37-.911.228-.135.829-.507.795-1.23-.123-.096-.32-.219-.766-.193-1.736.11-1.852-.518-1.967-.808.078-.668.524-1.534 1.361-1.931-1.257-.193-2.28.397-2.789 1.154-.809-.174-1.305-.183-2.118-.031-.316-.24-.666-.67-.878-1.181C6.36 3.312 9.027 2 12 2c5.912 0 8.263 4.283 8.003 6.657z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Firefox</span>
|
||||
<span
|
||||
v-if="hasFirefoxExtInstalled"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('installed')"
|
||||
class="icon button"
|
||||
>
|
||||
<i class="material-icons">done</i>
|
||||
</span>
|
||||
</button>
|
||||
</a>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
|
||||
blank
|
||||
:title="{ hasFirefoxExtInstalled: $t('installed') }"
|
||||
svg="firefox"
|
||||
label="Firefox"
|
||||
/>
|
||||
</div>
|
||||
<div class="px-2">
|
||||
<a
|
||||
href="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<button class="icon button">
|
||||
<svg
|
||||
class="material-icons"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<path
|
||||
d="M2.897 4.181A11.87 11.87 0 0111.969 0c4.288 0 8.535 2.273 10.717 6.554h-9.293c-1.674.001-2.755-.037-3.926.579-1.376.724-2.415 2.067-2.777 3.644L2.897 4.181zM8.007 12c0 2.2 1.789 3.99 3.988 3.99s3.988-1.79 3.988-3.99-1.789-3.991-3.988-3.991S8.007 9.8 8.007 12zm5.536 5.223c-2.238.666-4.858-.073-6.293-2.549-1.095-1.891-3.989-6.933-5.305-9.225A11.856 11.856 0 000 11.956c0 5.448 3.726 10.65 9.673 11.818l3.87-6.551zm2.158-9.214a5.463 5.463 0 011.007 6.719 1815.43 1815.43 0 01-5.46 9.248C18.437 24.419 24 18.616 24 12.004c0-1.313-.22-2.66-.69-3.995h-7.609z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Chrome</span>
|
||||
<span
|
||||
v-if="hasChromeExtInstalled"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('installed')"
|
||||
class="icon button"
|
||||
>
|
||||
<i class="material-icons">done</i>
|
||||
</span>
|
||||
</button>
|
||||
</a>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
|
||||
blank
|
||||
:title="{ hasChromeExtInstalled: $t('installed') }"
|
||||
svg="chrome"
|
||||
label="Chrome"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -1,135 +1,90 @@
|
||||
<template>
|
||||
<header class="flex container items-center justify-between p-2 flex-1">
|
||||
<div class="flex items-center relative ml-2">
|
||||
<nuxt-link :to="localePath('index')">
|
||||
<h1 class="heading logo">Hoppscotch</h1>
|
||||
</nuxt-link>
|
||||
<AppGitHubStarButton class="ml-8" />
|
||||
<div class="inline-flex space-x-2 items-center flex-shrink-0">
|
||||
<AppLogo class="h-6" />
|
||||
</div>
|
||||
<div class="flex">
|
||||
<button
|
||||
<div class="inline-flex space-x-2 items-center flex-shrink-0">
|
||||
<TabPrimary
|
||||
id="installPWA"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('install_pwa')"
|
||||
class="icon button"
|
||||
@click.prevent="showInstallPrompt()"
|
||||
>
|
||||
<i class="material-icons">offline_bolt</i>
|
||||
</button>
|
||||
<a
|
||||
href="https://github.com/hoppscotch/hoppscotch"
|
||||
target="_blank"
|
||||
aria-label="GitHub"
|
||||
rel="noopener"
|
||||
>
|
||||
<button
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="GitHub"
|
||||
class="icon button"
|
||||
aria-label="GitHub"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
class="material-icons"
|
||||
>
|
||||
<path
|
||||
d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<tippy v-if="currentUser === null" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('login_with')"
|
||||
class="icon button"
|
||||
>
|
||||
<i class="material-icons">login</i>
|
||||
</button>
|
||||
</template>
|
||||
<FirebaseLogin @show-email="showEmail = true" />
|
||||
</tippy>
|
||||
<tippy v-else trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="
|
||||
(currentUser.displayName ||
|
||||
'<label><i>Name not found</i></label>') +
|
||||
'<br>' +
|
||||
(currentUser.email || '<label><i>Email not found</i></label>')
|
||||
"
|
||||
class="icon button"
|
||||
aria-label="Account"
|
||||
>
|
||||
<img
|
||||
icon="offline_bolt"
|
||||
@click.native="showInstallPrompt()"
|
||||
/>
|
||||
<span tabindex="-1">
|
||||
<span v-if="currentUser === null">
|
||||
<ButtonSecondary label="Sign in" @click.native="showLogin = true" />
|
||||
<ButtonPrimary label="Sign up" @click.native="showLogin = true" />
|
||||
</span>
|
||||
<tippy v-else tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<ProfilePicture
|
||||
v-if="currentUser.photoURL"
|
||||
:src="currentUser.photoURL"
|
||||
class="w-6 h-6 rounded-full material-icons"
|
||||
alt="Profile image"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:url="currentUser.photoURL"
|
||||
class="mr-4"
|
||||
:title="
|
||||
(currentUser.displayName ||
|
||||
'<label><i>Name not found</i></label>') +
|
||||
'<br>' +
|
||||
(currentUser.email || '<label><i>Email not found</i></label>')
|
||||
"
|
||||
/>
|
||||
<i v-else class="material-icons">account_circle</i>
|
||||
</button>
|
||||
</template>
|
||||
<div>
|
||||
<nuxt-link :to="localePath('settings')">
|
||||
<button class="icon button">
|
||||
<i class="material-icons">settings</i>
|
||||
<span>
|
||||
{{ $t("settings") }}
|
||||
</span>
|
||||
</button>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div>
|
||||
<TabPrimary
|
||||
v-else
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('account')"
|
||||
icon="account_circle"
|
||||
/>
|
||||
</template>
|
||||
<SmartItem to="/settings" icon="settings" :label="$t('settings')" />
|
||||
<FirebaseLogout />
|
||||
</div>
|
||||
</tippy>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="icon button"
|
||||
>
|
||||
<i class="material-icons">drag_indicator</i>
|
||||
</button>
|
||||
</template>
|
||||
<button class="icon button" @click="showExtensions = true">
|
||||
<i class="material-icons">extension</i>
|
||||
<span>{{ $t("extensions") }}</span>
|
||||
</button>
|
||||
<button class="icon button" @click="showShortcuts = true">
|
||||
<i class="material-icons">keyboard</i>
|
||||
<span>{{ $t("shortcuts") }}</span>
|
||||
</button>
|
||||
<button
|
||||
class="icon button"
|
||||
onClick="window.open('https://twitter.com/share?text=👽 Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.&url=https://hoppscotch.io&hashtags=hoppscotch&via=hoppscotch_io');"
|
||||
</tippy>
|
||||
</span>
|
||||
<span tabindex="-1">
|
||||
<tippy
|
||||
ref="options"
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
|
||||
<path
|
||||
d="M24 4.557a9.83 9.83 0 01-2.828.775 4.932 4.932 0 002.165-2.724 9.864 9.864 0 01-3.127 1.195 4.916 4.916 0 00-3.594-1.555c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 3.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 19.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 4.557z"
|
||||
<template #trigger>
|
||||
<TabPrimary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
icon="drag_indicator"
|
||||
/>
|
||||
</svg>
|
||||
<span>Tweet</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="navigatorShare"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="icon button"
|
||||
@click="nativeShare"
|
||||
>
|
||||
<i class="material-icons">share</i>
|
||||
<span>Share</span>
|
||||
</button>
|
||||
</tippy>
|
||||
</template>
|
||||
<SmartItem
|
||||
icon="extension"
|
||||
:label="$t('extensions')"
|
||||
@click.native="
|
||||
showExtensions = true
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
icon="keyboard"
|
||||
:label="$t('shortcuts')"
|
||||
@click.native="
|
||||
showShortcuts = true
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
v-if="navigatorShare"
|
||||
icon="share"
|
||||
:label="$t('share')"
|
||||
@click.native="
|
||||
nativeShare()
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
</tippy>
|
||||
</span>
|
||||
</div>
|
||||
<AppLogin :show="showLogin" @hide-modal="showLogin = false" />
|
||||
<AppExtensions
|
||||
:show="showExtensions"
|
||||
@hide-modal="showExtensions = false"
|
||||
@@ -152,6 +107,7 @@ export default {
|
||||
// that can be called to show the user the installation
|
||||
// prompt.
|
||||
showInstallPrompt: null,
|
||||
showLogin: false,
|
||||
showExtensions: false,
|
||||
showShortcuts: false,
|
||||
showEmail: false,
|
||||
|
||||
26
components/app/Login.vue
Normal file
26
components/app/Login.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<SmartModal v-if="show" @close="hideModal">
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("login") }}</h3>
|
||||
<div>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
<FirebaseLogin />
|
||||
</template>
|
||||
</SmartModal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
show: Boolean,
|
||||
},
|
||||
methods: {
|
||||
hideModal() {
|
||||
this.$emit("hide-modal")
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,22 +1,35 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 612.001 612.001">
|
||||
<svg class="logo" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<linearGradient
|
||||
id="a"
|
||||
gradientTransform="matrix(1 0 0 -1 0 -24914)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="0"
|
||||
x2="512"
|
||||
y1="-25170"
|
||||
y2="-25170"
|
||||
>
|
||||
<stop offset="0" stop-color="#31d8ff" />
|
||||
<stop offset="1" stop-color="#ff80ff" />
|
||||
</linearGradient>
|
||||
<path
|
||||
:fill="color"
|
||||
data-old_color="#202124"
|
||||
class="active-path"
|
||||
data-original="#202124"
|
||||
d="M64.601 236.822C64.601 394.256 192.786 612 306.001 612 412.582 612 547.4 394.256 547.4 236.822S439.322 0 306 0 64.601 79.388 64.601 236.822zm304.12 116.415c29.475-29.475 70.598-40.195 108.552-32.173 8.021 37.954-2.698 79.077-32.173 108.552-29.475 29.476-70.598 40.196-108.552 32.174-8.022-37.955 2.698-79.078 32.173-108.552zm-233.994-32.174c37.954-8.02 79.077 2.698 108.552 32.173 29.475 29.475 40.195 70.598 32.173 108.552-37.954 8.021-79.077-2.698-108.552-32.173-29.475-29.476-40.194-70.598-32.173-108.552z"
|
||||
d="M512 256c0 141.387-114.613 256-256 256S0 397.387 0 256 114.613 0 256 0s256 114.613 256 256zm0 0"
|
||||
fill="url(#a)"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
<style scoped lang="scss">
|
||||
.logo {
|
||||
animation: 200ms appear;
|
||||
}
|
||||
</script>
|
||||
|
||||
@keyframes appear {
|
||||
0% {
|
||||
@apply opacity-0;
|
||||
}
|
||||
100% {
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,18 +1,7 @@
|
||||
<template>
|
||||
<fieldset :id="label.toLowerCase()">
|
||||
<legend v-if="!noLegend" @click.prevent="collapse">
|
||||
<span>{{ label }}</span>
|
||||
<i class="ml-2 align-middle material-icons">
|
||||
{{ isCollapsed(label) ? "expand_more" : "expand_less" }}
|
||||
</i>
|
||||
</legend>
|
||||
<div
|
||||
class="collapsible"
|
||||
:class="{ hidden: isCollapsed(label.toLowerCase()) }"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</fieldset>
|
||||
<section :id="label.toLowerCase()">
|
||||
<slot></slot>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -24,51 +13,6 @@ export default Vue.extend({
|
||||
type: String,
|
||||
default: "Section",
|
||||
},
|
||||
noLegend: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
sectionString(): string {
|
||||
return `${this.$route.path.replace(/\/+$/, "")}/${this.label}`
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
collapse() {
|
||||
// Save collapsed section into the collapsedSections array
|
||||
this.$store.commit("setCollapsedSection", this.sectionString)
|
||||
},
|
||||
isCollapsed(_label: string) {
|
||||
return (
|
||||
this.$store.state.theme.collapsedSections.includes(
|
||||
this.sectionString
|
||||
) || false
|
||||
)
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
fieldset {
|
||||
@apply my-4;
|
||||
@apply rounded-lg;
|
||||
@apply bg-primaryDark;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
@apply w-full;
|
||||
|
||||
legend {
|
||||
@apply px-4;
|
||||
@apply text-secondary;
|
||||
@apply font-bold;
|
||||
@apply cursor-pointer;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("shortcuts") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
|
||||
@@ -84,7 +84,7 @@ nav.secondary-nav {
|
||||
@apply text-secondaryLight;
|
||||
@apply fill-current;
|
||||
@apply outline-none;
|
||||
@apply transition;
|
||||
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("new_collection") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="addNewCollection">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="addNewCollection" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("new_folder") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="addFolder">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="addFolder" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("edit_collection") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="saveCollection">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="saveCollection" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("edit_folder") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -21,12 +19,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="editFolder">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="editFolder" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("edit_request") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="saveRequest">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="saveRequest" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,41 +3,38 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="mode == 'import_from_my_collections'"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="Back"
|
||||
class="tooltip-target icon button"
|
||||
@click="
|
||||
icon="arrow_back"
|
||||
@click.native="
|
||||
mode = 'import_export'
|
||||
mySelectedCollectionID = undefined
|
||||
"
|
||||
>
|
||||
<i class="material-icons">arrow_back</i>
|
||||
</button>
|
||||
|
||||
/>
|
||||
<tippy
|
||||
v-if="
|
||||
mode == 'import_export' && collectionsType.type == 'my-collections'
|
||||
"
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
icon="more_vert"
|
||||
/>
|
||||
</template>
|
||||
<div>
|
||||
<button class="icon button" @click="readCollectionGist">
|
||||
<i class="material-icons">assignment_returned</i>
|
||||
<span>{{ $t("import_from_gist") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
icon="assignment_returned"
|
||||
:label="$t('import_from_gist')"
|
||||
@click.native="readCollectionGist"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
@@ -49,7 +46,7 @@
|
||||
: null,
|
||||
}"
|
||||
>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
:disabled="
|
||||
!currentUser
|
||||
? true
|
||||
@@ -57,76 +54,62 @@
|
||||
? true
|
||||
: false
|
||||
"
|
||||
class="icon button"
|
||||
@click="createCollectionGist"
|
||||
>
|
||||
<i class="material-icons">assignment_turned_in</i>
|
||||
<span>{{ $t("create_secret_gist") }}</span>
|
||||
</button>
|
||||
icon="assignment_turned_in"
|
||||
:label="$t('create_secret_gist')"
|
||||
@click.native="createCollectionGist"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
<div v-if="mode == 'import_export'" class="flex flex-col p-2 items-start">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('replace_current')"
|
||||
class="icon button"
|
||||
@click="openDialogChooseFileToReplaceWith"
|
||||
>
|
||||
<i class="material-icons">folder_special</i>
|
||||
<span>{{ $t("replace_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToReplaceWith"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="replaceWithJSON"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
icon="folder_special"
|
||||
:label="$t('replace_json')"
|
||||
@click.native="openDialogChooseFileToReplaceWith"
|
||||
/>
|
||||
<input
|
||||
ref="inputChooseFileToReplaceWith"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="replaceWithJSON"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('preserve_current')"
|
||||
class="icon button"
|
||||
@click="openDialogChooseFileToImportFrom"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("import_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToImportFrom"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="importFromJSON"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
icon="create_new_folder"
|
||||
:label="$t('import_json')"
|
||||
@click.native="openDialogChooseFileToImportFrom"
|
||||
/>
|
||||
<input
|
||||
ref="inputChooseFileToImportFrom"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="importFromJSON"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.type == 'team-collections'"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('preserve_current')"
|
||||
class="icon button"
|
||||
@click="mode = 'import_from_my_collections'"
|
||||
>
|
||||
<i class="material-icons">folder_shared</i>
|
||||
<span>{{ $t("import_from_my_collections") }}</span>
|
||||
</button>
|
||||
<button
|
||||
icon="folder_shared"
|
||||
:label="$t('import_from_my_collections')"
|
||||
@click.native="mode = 'import_from_my_collections'"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="exportJSON"
|
||||
>
|
||||
<i class="material-icons">drive_file_move</i>
|
||||
<span>
|
||||
{{ $t("export_as_json") }}
|
||||
</span>
|
||||
</button>
|
||||
icon="drive_file_move"
|
||||
:label="$t('export_as_json')"
|
||||
@click.native="exportJSON"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="mode == 'import_from_my_collections'">
|
||||
<span class="select-wrapper">
|
||||
@@ -164,14 +147,13 @@
|
||||
<div v-if="mode == 'import_from_my_collections'">
|
||||
<span></span>
|
||||
<span>
|
||||
<button
|
||||
class="m-2 icon button"
|
||||
<ButtonSecondary
|
||||
class="m-2"
|
||||
:disabled="mySelectedCollectionID == undefined"
|
||||
@click="importFromMyCollections"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("import") }}</span>
|
||||
</button>
|
||||
icon="create_new_folder"
|
||||
:label="$t('import')"
|
||||
@click.native="importFromMyCollections"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("save_request_as") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -41,12 +39,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="saveRequestAs">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="saveRequestAs" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("new_collection") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="addNewCollection">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="addNewCollection" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("new_folder") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="addFolder">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="addFolder" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="[
|
||||
'row-wrapper transition duration-150 ease-in-out',
|
||||
{ 'bg-primaryDark': dragging },
|
||||
]"
|
||||
:class="['row-wrapper ease-in-out', { 'bg-primaryDark': dragging }]"
|
||||
@dragover.prevent
|
||||
@drop.prevent="dropEvent"
|
||||
@dragover="dragging = true"
|
||||
@@ -12,65 +9,58 @@
|
||||
@dragleave="dragging = false"
|
||||
@dragend="dragging = false"
|
||||
>
|
||||
<button class="icon button" @click="toggleShowChildren">
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<ButtonSecondary @click.native="toggleShowChildren" />
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
|
||||
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
|
||||
<i v-else class="material-icons">folder</i>
|
||||
<span>{{ collection.name }}</span>
|
||||
|
||||
<i v-else class="material-icons">folder</i>
|
||||
<span>{{ collection.name }}</span>
|
||||
</button>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="doc"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('import')"
|
||||
class="icon button"
|
||||
@click="$emit('select-collection')"
|
||||
>
|
||||
<i class="material-icons">topic</i>
|
||||
</button>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
@click.native="$emit('select-collection')"
|
||||
/>
|
||||
<i class="material-icons">topic</i>
|
||||
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="
|
||||
<ButtonSecondary
|
||||
@click.native="
|
||||
$emit('add-folder', {
|
||||
path: `${collectionIndex}`,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="$emit('edit-collection')">
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="$emit('edit-collection')" />
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="confirmRemove = true">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="confirmRemove = true" />
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("edit_collection") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="saveCollection">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="saveCollection" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("edit_folder") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="editFolder">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="editFolder" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("edit_request") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="saveRequest">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="saveRequest" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="[
|
||||
'row-wrapper transition duration-150 ease-in-out',
|
||||
{ 'bg-primaryDark': dragging },
|
||||
]"
|
||||
:class="['row-wrapper ease-in-out', { 'bg-primaryDark': dragging }]"
|
||||
@dragover.prevent
|
||||
@drop.prevent="dropEvent"
|
||||
@dragover="dragging = true"
|
||||
@@ -13,54 +10,43 @@
|
||||
@dragend="dragging = false"
|
||||
>
|
||||
<div>
|
||||
<button class="icon button" @click="toggleShowChildren">
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<ButtonSecondary @click.native="toggleShowChildren" />
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
|
||||
<i v-else class="material-icons">folder_open</i>
|
||||
<span>{{ folder.name }}</span>
|
||||
</button>
|
||||
<i v-else class="material-icons">folder_open</i>
|
||||
<span>{{ folder.name }}</span>
|
||||
</div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="$emit('add-folder', { folder, path: folderPath })"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
@click.native="$emit('add-folder', { folder, path: folderPath })"
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="$emit('edit-folder', { folder, folderPath })"
|
||||
>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
@click.native="$emit('edit-folder', { folder, folderPath })"
|
||||
/>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="confirmRemove = true">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="confirmRemove = true" />
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -3,21 +3,20 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
|
||||
<div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button class="icon button" @click="readCollectionGist">
|
||||
<i class="material-icons">assignment_returned</i>
|
||||
<span>{{ $t("import_from_gist") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
icon="assignment_returned"
|
||||
:label="$t('import_from_gist')"
|
||||
@click.native="readCollectionGist"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
@@ -29,7 +28,7 @@
|
||||
: null,
|
||||
}"
|
||||
>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
:disabled="
|
||||
!currentUser
|
||||
? true
|
||||
@@ -37,66 +36,56 @@
|
||||
? true
|
||||
: false
|
||||
"
|
||||
class="icon button"
|
||||
@click="createCollectionGist"
|
||||
>
|
||||
<i class="material-icons">assignment_turned_in</i>
|
||||
<span>{{ $t("create_secret_gist") }}</span>
|
||||
</button>
|
||||
@click.native="createCollectionGist"
|
||||
/>
|
||||
<i class="material-icons">assignment_turned_in</i>
|
||||
<span>{{ $t("create_secret_gist") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
<div class="flex flex-col items-start p-2">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('replace_current')"
|
||||
class="icon button"
|
||||
@click="openDialogChooseFileToReplaceWith"
|
||||
>
|
||||
<i class="material-icons">folder_special</i>
|
||||
<span>{{ $t("replace_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToReplaceWith"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="replaceWithJSON"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
@click.native="openDialogChooseFileToReplaceWith"
|
||||
/>
|
||||
<i class="material-icons">folder_special</i>
|
||||
<span>{{ $t("replace_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToReplaceWith"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="replaceWithJSON"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('preserve_current')"
|
||||
class="icon button"
|
||||
@click="openDialogChooseFileToImportFrom"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("import_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToImportFrom"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="importFromJSON"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
@click.native="openDialogChooseFileToImportFrom"
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("import_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToImportFrom"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="importFromJSON"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="exportJSON"
|
||||
>
|
||||
<i class="material-icons">drive_file_move</i>
|
||||
<span>
|
||||
{{ $t("export_as_json") }}
|
||||
</span>
|
||||
</button>
|
||||
@click.native="exportJSON"
|
||||
/>
|
||||
<i class="material-icons">drive_file_move</i>
|
||||
<span>
|
||||
{{ $t("export_as_json") }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="[
|
||||
'row-wrapper transition duration-150 ease-in-out',
|
||||
{ 'bg-primaryDark': dragging },
|
||||
]"
|
||||
:class="['row-wrapper ease-in-out', { 'bg-primaryDark': dragging }]"
|
||||
draggable="true"
|
||||
@dragstart="dragStart"
|
||||
@dragover.stop
|
||||
@@ -12,50 +9,40 @@
|
||||
@dragend="dragging = false"
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="!doc ? $t('use_request') : ''"
|
||||
class="icon button"
|
||||
@click="!doc ? selectRequest() : {}"
|
||||
>
|
||||
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
|
||||
<i v-else class="material-icons">description</i>
|
||||
<span>{{ request.name }}</span>
|
||||
</button>
|
||||
:class="{ 'mx-3 text-green-400': isSelected }"
|
||||
:icon="isSelected ? 'check_circle' : 'description'"
|
||||
:label="request.name"
|
||||
@click.native="!doc ? selectRequest() : {}"
|
||||
/>
|
||||
</div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
icon="more_vert"
|
||||
/>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="
|
||||
<ButtonSecondary
|
||||
@click.native="
|
||||
$emit('edit-request', {
|
||||
request,
|
||||
requestIndex,
|
||||
folderPath,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="confirmRemove = true">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="confirmRemove = true" />
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<AppSection label="collections">
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<input
|
||||
v-if="showCollActions"
|
||||
v-model="filterText"
|
||||
@@ -46,23 +46,21 @@
|
||||
@hide-modal="displayModalImportExport(false)"
|
||||
/>
|
||||
<div class="border-b row-wrapper border-divider">
|
||||
<button class="icon button" @click="displayModalAdd(true)">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("new") }}</span>
|
||||
</button>
|
||||
<button
|
||||
<ButtonSecondary @click.native="displayModalAdd(true)" />
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("new") }}</span>
|
||||
|
||||
<ButtonSecondary
|
||||
v-if="showCollActions"
|
||||
class="icon button"
|
||||
@click="displayModalImportExport(true)"
|
||||
>
|
||||
{{ $t("import_export") }}
|
||||
</button>
|
||||
@click.native="displayModalImportExport(true)"
|
||||
/>
|
||||
{{ $t("import_export") }}
|
||||
</div>
|
||||
<p v-if="collections.length === 0" class="info">
|
||||
<i class="material-icons">help_outline</i>
|
||||
{{ $t("create_new_collection") }}
|
||||
</p>
|
||||
<div class="virtual-list">
|
||||
<div class="overflow-auto">
|
||||
<ul class="flex-col">
|
||||
<li
|
||||
v-for="(collection, index) in filteredCollections"
|
||||
@@ -245,9 +243,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.virtual-list {
|
||||
max-height: calc(100vh - 270px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<AppSection label="collections">
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<input
|
||||
v-if="!saveRequest"
|
||||
v-model="filterText"
|
||||
@@ -54,45 +54,40 @@
|
||||
@update-team-collections="updateTeamCollections"
|
||||
/>
|
||||
<div class="border-b row-wrapper border-divider">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="
|
||||
collectionsType.type == 'team-collections' &&
|
||||
(collectionsType.selectedTeam == undefined ||
|
||||
collectionsType.selectedTeam.myRole == 'VIEWER')
|
||||
"
|
||||
class="icon button"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
disabled
|
||||
@click="displayModalAdd(true)"
|
||||
>
|
||||
<i class="material-icons">add</i>
|
||||
<div
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('disable_new_collection')"
|
||||
>
|
||||
<span>{{ $t("new") }}</span>
|
||||
</div>
|
||||
</button>
|
||||
<button v-else class="icon button" @click="displayModalAdd(true)">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("new") }}</span>
|
||||
</button>
|
||||
<button
|
||||
icon="add"
|
||||
:title="$t('disable_new_collection')"
|
||||
:label="$t('new')"
|
||||
@click.native="displayModalAdd(true)"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-else
|
||||
icon="add"
|
||||
:label="$t('new')"
|
||||
@click.native="displayModalAdd(true)"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-if="!saveRequest"
|
||||
:disabled="
|
||||
collectionsType.type == 'team-collections' &&
|
||||
collectionsType.selectedTeam == undefined
|
||||
"
|
||||
class="icon button"
|
||||
@click="displayModalImportExport(true)"
|
||||
>
|
||||
{{ $t("import_export") }}
|
||||
</button>
|
||||
:label="$t('import_export')"
|
||||
@click.native="displayModalImportExport(true)"
|
||||
/>
|
||||
</div>
|
||||
<p v-if="collections.length === 0" class="info">
|
||||
<i class="material-icons">help_outline</i>
|
||||
{{ $t("create_new_collection") }}
|
||||
</p>
|
||||
<div class="virtual-list">
|
||||
<div class="overflow-auto">
|
||||
<ul class="flex-col">
|
||||
<li
|
||||
v-for="(collection, index) in filteredCollections"
|
||||
@@ -636,9 +631,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.virtual-list {
|
||||
max-height: calc(100vh - 270px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="[
|
||||
'row-wrapper transition duration-150 ease-in-out',
|
||||
{ 'bg-primaryDark': dragging },
|
||||
]"
|
||||
:class="['row-wrapper ease-in-out', { 'bg-primaryDark': dragging }]"
|
||||
@dragover.prevent
|
||||
@drop.prevent="dropEvent"
|
||||
@dragover="dragging = true"
|
||||
@@ -12,75 +9,66 @@
|
||||
@dragleave="dragging = false"
|
||||
@dragend="dragging = false"
|
||||
>
|
||||
<button class="icon button" @click="toggleShowChildren">
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<ButtonSecondary @click.native="toggleShowChildren" />
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
|
||||
<i v-else class="material-icons">folder</i>
|
||||
<span>{{ collection.name }}</span>
|
||||
|
||||
<i v-else class="material-icons">folder</i>
|
||||
<span>{{ collection.name }}</span>
|
||||
</button>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="doc && !selected"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('import')"
|
||||
class="icon button"
|
||||
@click="$emit('select-collection')"
|
||||
>
|
||||
<i class="material-icons">check_box_outline_blank</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="$emit('select-collection')"
|
||||
/>
|
||||
<i class="material-icons">check_box_outline_blank</i>
|
||||
<ButtonSecondary
|
||||
v-if="doc && selected"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="$emit('unselect-collection')"
|
||||
>
|
||||
<i class="material-icons">check_box</i>
|
||||
</button>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
@click.native="$emit('unselect-collection')"
|
||||
/>
|
||||
<i class="material-icons">check_box</i>
|
||||
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="
|
||||
<ButtonSecondary
|
||||
@click.native="
|
||||
$emit('add-folder', {
|
||||
folder: collection,
|
||||
path: `${collectionIndex}`,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="$emit('edit-collection')">
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="$emit('edit-collection')" />
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="confirmRemove = true">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="confirmRemove = true" />
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="[
|
||||
'row-wrapper transition duration-150 ease-in-out',
|
||||
{ 'bg-primaryDark': dragging },
|
||||
]"
|
||||
:class="['row-wrapper ease-in-out', { 'bg-primaryDark': dragging }]"
|
||||
@dragover.prevent
|
||||
@drop.prevent="dropEvent"
|
||||
@dragover="dragging = true"
|
||||
@@ -13,43 +10,34 @@
|
||||
@dragend="dragging = false"
|
||||
>
|
||||
<div>
|
||||
<button class="icon button" @click="toggleShowChildren">
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<i v-else class="material-icons">folder_open</i>
|
||||
<span>{{ folder.name ? folder.name : folder.title }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="toggleShowChildren" />
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<i v-else class="material-icons">folder_open</i>
|
||||
<span>{{ folder.name ? folder.name : folder.title }}</span>
|
||||
</div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="$emit('add-folder', { folder, path: folderPath })"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
@click.native="$emit('add-folder', { folder, path: folderPath })"
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="
|
||||
<ButtonSecondary
|
||||
@click.native="
|
||||
$emit('edit-folder', {
|
||||
folder,
|
||||
folderIndex,
|
||||
@@ -57,16 +45,14 @@
|
||||
folderPath,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="confirmRemove = true">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="confirmRemove = true" />
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="[
|
||||
'row-wrapper transition duration-150 ease-in-out',
|
||||
{ 'bg-primaryDark': dragging },
|
||||
]"
|
||||
:class="['row-wrapper ease-in-out', { 'bg-primaryDark': dragging }]"
|
||||
draggable="true"
|
||||
@dragstart="dragStart"
|
||||
@dragover.stop
|
||||
@@ -12,36 +9,26 @@
|
||||
@dragend="dragging = false"
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="!doc ? $t('use_request') : ''"
|
||||
class="icon button"
|
||||
@click="!doc ? selectRequest() : {}"
|
||||
>
|
||||
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
|
||||
<span v-else :class="getRequestLabelColor(request.method)">{{
|
||||
request.method
|
||||
}}</span>
|
||||
<span>{{ request.name }}</span>
|
||||
</button>
|
||||
:class="[
|
||||
getRequestLabelColor(request.method),
|
||||
{ 'mx-3 text-green-400': isSelected },
|
||||
]"
|
||||
:icon="isSelected ? 'check_circle' : ''"
|
||||
:label="request.method + request.name"
|
||||
@click.native="!doc ? selectRequest() : {}"
|
||||
/>
|
||||
</div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="
|
||||
<ButtonSecondary
|
||||
@click.native="
|
||||
$emit('edit-request', {
|
||||
collectionIndex,
|
||||
folderIndex,
|
||||
@@ -51,16 +38,14 @@
|
||||
folderPath,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="confirmRemove = true">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="confirmRemove = true" />
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -1,85 +1,74 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="transition duration-150 ease-in-out row-wrapper">
|
||||
<button class="icon button" @click="toggleShowChildren">
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<div class="ease-in-out row-wrapper">
|
||||
<ButtonSecondary @click.native="toggleShowChildren" />
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
|
||||
<i v-else class="material-icons">folder</i>
|
||||
<span>{{ collection.title }}</span>
|
||||
|
||||
<i v-else class="material-icons">folder</i>
|
||||
<span>{{ collection.title }}</span>
|
||||
</button>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="doc && !selected"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('import')"
|
||||
class="icon button"
|
||||
@click="$emit('select-collection')"
|
||||
>
|
||||
<i class="material-icons">check_box_outline_blank</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="$emit('select-collection')"
|
||||
/>
|
||||
<i class="material-icons">check_box_outline_blank</i>
|
||||
<ButtonSecondary
|
||||
v-if="doc && selected"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="$emit('unselect-collection')"
|
||||
>
|
||||
<i class="material-icons">check_box</i>
|
||||
</button>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
@click.native="$emit('unselect-collection')"
|
||||
/>
|
||||
<i class="material-icons">check_box</i>
|
||||
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
class="icon button"
|
||||
@click="
|
||||
@click.native="
|
||||
$emit('add-folder', {
|
||||
folder: collection,
|
||||
path: `${collectionIndex}`,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
class="icon button"
|
||||
@click="$emit('edit-collection')"
|
||||
>
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
@click.native="$emit('edit-collection')"
|
||||
/>
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
class="icon button"
|
||||
@click="confirmRemove = true"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
@click.native="confirmRemove = true"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -1,49 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="transition duration-150 ease-in-out row-wrapper">
|
||||
<div class="ease-in-out row-wrapper">
|
||||
<div>
|
||||
<button class="icon button" @click="toggleShowChildren">
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<ButtonSecondary @click.native="toggleShowChildren" />
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
|
||||
<i v-else class="material-icons">folder_open</i>
|
||||
<span>{{ folder.name ? folder.name : folder.title }}</span>
|
||||
</button>
|
||||
<i v-else class="material-icons">folder_open</i>
|
||||
<span>{{ folder.name ? folder.name : folder.title }}</span>
|
||||
</div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
class="icon button"
|
||||
@click="$emit('add-folder', { folder, path: folderPath })"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</button>
|
||||
@click.native="$emit('add-folder', { folder, path: folderPath })"
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("new_folder") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
class="icon button"
|
||||
@click="
|
||||
@click.native="
|
||||
$emit('edit-folder', {
|
||||
folder,
|
||||
folderIndex,
|
||||
@@ -51,20 +45,17 @@
|
||||
folderPath: '',
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
class="icon button"
|
||||
@click="confirmRemove = true"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
@click.native="confirmRemove = true"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -1,38 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="transition duration-150 ease-in-out row-wrapper">
|
||||
<div class="ease-in-out row-wrapper">
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="!doc ? $t('use_request') : ''"
|
||||
class="icon button"
|
||||
@click="!doc ? selectRequest() : {}"
|
||||
@click.native="!doc ? selectRequest() : {}"
|
||||
/>
|
||||
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
|
||||
<span v-else :class="getRequestLabelColor(request.method)">{{
|
||||
request.method
|
||||
}}</span>
|
||||
<span>{{ request.name }}</span>
|
||||
</button>
|
||||
<span v-else :class="getRequestLabelColor(request.method)">{{
|
||||
request.method
|
||||
}}</span>
|
||||
<span>{{ request.name }}</span>
|
||||
</div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="
|
||||
<ButtonSecondary
|
||||
@click.native="
|
||||
$emit('edit-request', {
|
||||
collectionIndex,
|
||||
folderIndex,
|
||||
@@ -41,16 +36,14 @@
|
||||
requestIndex,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">edit</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="confirmRemove = true">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="confirmRemove = true" />
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("new_environment") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -22,12 +20,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="addNewEnvironment">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="addNewEnvironment" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("edit_environment") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -21,14 +19,12 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="variableList">{{ $t("env_variable_list") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
class="icon button"
|
||||
@click="clearContent($event)"
|
||||
>
|
||||
<i class="material-icons">{{ clearIcon }}</i>
|
||||
</button>
|
||||
icon="clearIcon"
|
||||
@click.native="clearContent($event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
@@ -62,36 +58,29 @@
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="variable"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="removeEnvironmentVariable(index)"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="removeEnvironmentVariable(index)"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon button" @click="addEnvironmentVariable">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="addEnvironmentVariable" />
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="saveEnvironment">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="saveEnvironment" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -2,32 +2,24 @@
|
||||
<div>
|
||||
<div class="row-wrapper">
|
||||
<div>
|
||||
<button class="icon button" @click="$emit('edit-environment')">
|
||||
<i class="material-icons">layers</i>
|
||||
<span>{{ environment.name }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="$emit('edit-environment')" />
|
||||
<i class="material-icons">layers</i>
|
||||
<span>{{ environment.name }}</span>
|
||||
</div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button class="icon button" @click="$emit('edit-environment')">
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="$emit('edit-environment')" />
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="confirmRemove = true">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="confirmRemove = true" />
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -5,21 +5,18 @@
|
||||
{{ $t("import_export") }} {{ $t("environments") }}
|
||||
</h3>
|
||||
<div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button class="icon button" @click="readEnvironmentGist">
|
||||
<i class="material-icons">assignment_returned</i>
|
||||
<span>{{ $t("import_from_gist") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="readEnvironmentGist" />
|
||||
<i class="material-icons">assignment_returned</i>
|
||||
<span>{{ $t("import_from_gist") }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
@@ -31,7 +28,7 @@
|
||||
: null,
|
||||
}"
|
||||
>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
:disabled="
|
||||
!currentUser
|
||||
? true
|
||||
@@ -39,66 +36,56 @@
|
||||
? true
|
||||
: false
|
||||
"
|
||||
class="icon button"
|
||||
@click="createEnvironmentGist"
|
||||
>
|
||||
<i class="material-icons">assignment_turned_in</i>
|
||||
<span>{{ $t("create_secret_gist") }}</span>
|
||||
</button>
|
||||
@click.native="createEnvironmentGist"
|
||||
/>
|
||||
<i class="material-icons">assignment_turned_in</i>
|
||||
<span>{{ $t("create_secret_gist") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
<div class="flex flex-col items-start p-2">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('replace_current')"
|
||||
class="icon button"
|
||||
@click="openDialogChooseFileToReplaceWith"
|
||||
>
|
||||
<i class="material-icons">folder_special</i>
|
||||
<span>{{ $t("replace_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToReplaceWith"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="replaceWithJSON"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
@click.native="openDialogChooseFileToReplaceWith"
|
||||
/>
|
||||
<i class="material-icons">folder_special</i>
|
||||
<span>{{ $t("replace_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToReplaceWith"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="replaceWithJSON"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('preserve_current')"
|
||||
class="icon button"
|
||||
@click="openDialogChooseFileToImportFrom"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("import_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToImportFrom"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="importFromJSON"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
@click.native="openDialogChooseFileToImportFrom"
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
<span>{{ $t("import_json") }}</span>
|
||||
<input
|
||||
ref="inputChooseFileToImportFrom"
|
||||
class="input"
|
||||
type="file"
|
||||
style="display: none"
|
||||
accept="application/json"
|
||||
@change="importFromJSON"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="exportJSON"
|
||||
>
|
||||
<i class="material-icons">drive_file_move</i>
|
||||
<span>
|
||||
{{ $t("export_as_json") }}
|
||||
</span>
|
||||
</button>
|
||||
@click.native="exportJSON"
|
||||
/>
|
||||
<i class="material-icons">drive_file_move</i>
|
||||
<span>
|
||||
{{ $t("export_as_json") }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<AppSection label="environments">
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<span class="select-wrapper">
|
||||
<select
|
||||
v-model="selectedEnvironmentIndex"
|
||||
@@ -37,22 +37,22 @@
|
||||
/>
|
||||
<div class="border-b row-wrapper border-divider">
|
||||
<div>
|
||||
<button class="icon button" @click="displayModalAdd(true)">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
icon="add"
|
||||
:label="$t('new')"
|
||||
@click.native="displayModalAdd(true)"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="displayModalImportExport(true)">
|
||||
{{ $t("import_export") }}
|
||||
</button>
|
||||
<ButtonSecondary @click.native="displayModalImportExport(true)" />
|
||||
{{ $t("import_export") }}
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="environments.length === 0" class="info">
|
||||
<i class="material-icons">help_outline</i>
|
||||
{{ $t("create_new_environment") }}
|
||||
</p>
|
||||
<div class="virtual-list">
|
||||
<div class="overflow-auto">
|
||||
<ul class="flex-col">
|
||||
<li
|
||||
v-for="(environment, index) in environments"
|
||||
@@ -122,9 +122,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.virtual-list {
|
||||
max-height: calc(100vh - 270px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
<SmartModal v-if="show" @close="hideModal">
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("login_with") }} {{ $t("email") }}</h3>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</template>
|
||||
<template v-if="mode === 'sign-in'" #body>
|
||||
<label for="email"> E-mail </label>
|
||||
@@ -41,11 +39,8 @@
|
||||
<template v-if="mode === 'sign-in'" #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button v-if="signingInWithEmail" class="icon button" type="button">
|
||||
{{ $t("loading") }}
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
<ButtonSPrimary
|
||||
:loading="signingInWithEmail"
|
||||
class="rounded-md button"
|
||||
:disabled="
|
||||
form.email.length !== 0
|
||||
@@ -56,11 +51,9 @@
|
||||
"
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
@click="signInWithEmail"
|
||||
>
|
||||
{{ $t("send_magic_link") }}
|
||||
</button>
|
||||
</span>
|
||||
:label="$t('send_magic_link')"
|
||||
@click.native="signInWithEmail"
|
||||
/></span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
</template>
|
||||
|
||||
@@ -1,40 +1,87 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<button class="icon button" @click="signInWithGoogle">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
class="material-icons"
|
||||
>
|
||||
<path
|
||||
d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Google</span>
|
||||
</button>
|
||||
<div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
|
||||
<SmartItem
|
||||
svg="google"
|
||||
label="Continue with Google"
|
||||
@click.native="signInWithGoogle"
|
||||
/>
|
||||
<SmartItem
|
||||
svg="github"
|
||||
label="Continue with GitHub"
|
||||
@click.native="signInWithGithub"
|
||||
/>
|
||||
<SmartItem
|
||||
icon="mail"
|
||||
label="Continue with Email"
|
||||
@click.native="mode = 'email'"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="signInWithGithub">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
class="material-icons"
|
||||
>
|
||||
<path
|
||||
d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
|
||||
/>
|
||||
</svg>
|
||||
<span>GitHub</span>
|
||||
</button>
|
||||
<p v-if="mode === 'sign-in'" class="mx-4 mt-8 text-secondaryLight text-xs">
|
||||
By signing in, you are agreeing to our
|
||||
<SmartAnchor class="link" to="/index" label="Terms of Service" />
|
||||
and
|
||||
<SmartAnchor class="link" to="/index" label="Privacy Policy" />.
|
||||
</p>
|
||||
<div v-if="mode === 'email'" class="flex items-center px-4">
|
||||
<label for="email"> Email </label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
class="flex flex-1 ml-4 rounded px-4 py-2 outline-none"
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="you@mail.com"
|
||||
autocomplete="email"
|
||||
required
|
||||
spellcheck="false"
|
||||
autofocus
|
||||
@keyup.enter="signInWithEmail"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="$emit('show-email')">
|
||||
<i class="material-icons">mail</i>
|
||||
<span>{{ $t("email") }}</span>
|
||||
</button>
|
||||
<div v-if="mode === 'email'">
|
||||
<div class="flex flex-col">
|
||||
<ButtonPrimary
|
||||
:loading="signingInWithEmail"
|
||||
class="mx-4 mt-4"
|
||||
:disabled="
|
||||
form.email.length !== 0
|
||||
? emailRegex.test(form.email)
|
||||
? false
|
||||
: true
|
||||
: true
|
||||
"
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
:label="$t('send_magic_link')"
|
||||
@click.native="signInWithEmail"
|
||||
/>
|
||||
</div>
|
||||
<p class="mx-4 mt-8 text-secondaryLight text-xs">
|
||||
Back to
|
||||
<SmartAnchor
|
||||
class="link"
|
||||
to="#"
|
||||
label="all sign in options"
|
||||
@click.native="mode = 'sign-in'"
|
||||
/>.
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="mode === 'email-sent'">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex justify-center max-w-md p-4 items-center flex-col">
|
||||
<i class="material-icons text-accent" style="font-size: 64px">
|
||||
verified
|
||||
</i>
|
||||
<h3 class="font-bold my-2 text-center text-xl">
|
||||
{{ $t("we_sent_magic_link") }}
|
||||
</h3>
|
||||
<p class="text-center">
|
||||
{{ $t("we_sent_magic_link_description", { email: form.email }) }}
|
||||
</p>
|
||||
<p class="mt-4 text-secondaryLight">{{ $t("check_your_inbox") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -47,9 +94,28 @@ import {
|
||||
signInWithEmailAndPassword,
|
||||
signInUserWithGithub,
|
||||
setProviderInfo,
|
||||
currentUser$,
|
||||
signInWithEmail,
|
||||
} from "~/helpers/fb/auth"
|
||||
import { setLocalConfig } from "~/newstore/localpersistence"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
email: "",
|
||||
},
|
||||
signingInWithEmail: false,
|
||||
emailRegex:
|
||||
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
|
||||
mode: "sign-in",
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$subscribeTo(currentUser$, (user) => {
|
||||
if (user) this.hideModal()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
showLoginSuccess() {
|
||||
this.$toast.info(this.$t("login_success"), {
|
||||
@@ -199,6 +265,32 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
async signInWithEmail() {
|
||||
this.signingInWithEmail = true
|
||||
const actionCodeSettings = {
|
||||
url: `${process.env.BASE_URL}/enter`,
|
||||
handleCodeInApp: true,
|
||||
}
|
||||
await signInWithEmail(this.form.email, actionCodeSettings)
|
||||
.then(() => {
|
||||
this.mode = "email-sent"
|
||||
setLocalConfig("emailForSignIn", this.form.email)
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$toast.error(error.message, {
|
||||
icon: "error",
|
||||
})
|
||||
this.signingInWithEmail = false
|
||||
})
|
||||
.finally(() => {
|
||||
this.signingInWithEmail = false
|
||||
})
|
||||
},
|
||||
hideModal() {
|
||||
this.mode = "sign-in"
|
||||
this.$toast.clear()
|
||||
this.$emit("hide-modal")
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<button class="icon button" @click="logout">
|
||||
<i class="material-icons">exit_to_app</i>
|
||||
<span>{{ $t("logout") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
icon="exit_to_app"
|
||||
:label="$t('logout')"
|
||||
@click.native="logout"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<span
|
||||
:class="{ 'cursor-pointer': !isScalar }"
|
||||
class="font-mono text-sm text-accent"
|
||||
@click="jumpToType"
|
||||
@click.native="jumpToType"
|
||||
>
|
||||
{{ typeString }}
|
||||
</span>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<li>
|
||||
<input
|
||||
data-testid="'url'"
|
||||
@@ -10,72 +10,64 @@
|
||||
:value="entry.url"
|
||||
:placeholder="$t('empty_req_name')"
|
||||
class="input cursor-pointer text-sm bg-transparent"
|
||||
@click="$emit('use-entry')"
|
||||
@click.native="$emit('use-entry')"
|
||||
/>
|
||||
</li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: !entry.star ? $t('add_star') : $t('remove_star'),
|
||||
}"
|
||||
data-testid="star_button"
|
||||
class="icon button"
|
||||
:class="{ stared: entry.star }"
|
||||
@click="$emit('toggle-star')"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ entry.star ? "star" : "star_border" }}
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="$emit('toggle-star')"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ entry.star ? "star" : "star_border" }}
|
||||
</i>
|
||||
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: expand ? $t('hide_more') : $t('show_more'),
|
||||
}"
|
||||
data-testid="query_expand"
|
||||
class="icon button"
|
||||
@click="expand = !expand"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ expand ? "unfold_less" : "unfold_more" }}
|
||||
</i>
|
||||
</button>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
@click.native="expand = !expand"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ expand ? "unfold_less" : "unfold_more" }}
|
||||
</i>
|
||||
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('options')"
|
||||
data-testid="options"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
data-testid="restore_history_entry"
|
||||
class="icon button"
|
||||
:aria-label="$t('restore')"
|
||||
@click="$emit('use-entry')"
|
||||
>
|
||||
<i class="material-icons">restore</i>
|
||||
<span>{{ $t("restore") }}</span>
|
||||
</button>
|
||||
@click.native="$emit('use-entry')"
|
||||
/>
|
||||
<i class="material-icons">restore</i>
|
||||
<span>{{ $t("restore") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
data-testid="delete_history_entry"
|
||||
class="icon button"
|
||||
:aria-label="$t('delete')"
|
||||
@click="$emit('delete-entry')"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
@click.native="$emit('delete-entry')"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<li data-testid="'query'">
|
||||
<input
|
||||
v-for="(line, index) in query"
|
||||
@@ -89,7 +81,7 @@
|
||||
</li>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div v-if="showMore" class="show-on-large-screen">
|
||||
<div v-if="showMore" class="flex">
|
||||
<li>
|
||||
<input
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<AppSection label="history">
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<input
|
||||
v-model="filterText"
|
||||
aria-label="Search"
|
||||
@@ -10,7 +10,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="divide-y virtual-list divide-dashed divide-divider"
|
||||
class="divide-y overflow-auto divide-dashed divide-divider"
|
||||
:class="{ filled: filteredHistory.length }"
|
||||
>
|
||||
<ul v-for="(entry, index) in filteredHistory" :key="`entry-${index}`">
|
||||
@@ -44,49 +44,42 @@
|
||||
</p>
|
||||
<div v-if="history.length !== 0" class="rounded-b-lg bg-primaryDark">
|
||||
<div v-if="!isClearingHistory" class="row-wrapper">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
data-testid="clear_history"
|
||||
class="icon button"
|
||||
:disabled="history.length === 0"
|
||||
@click="enableHistoryClearing"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
<span>{{ $t("clear_all") }}</span>
|
||||
</button>
|
||||
<button
|
||||
@click.native="enableHistoryClearing"
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
<span>{{ $t("clear_all") }}</span>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{ content: !showMore ? $t('show_more') : $t('hide_more') }"
|
||||
class="icon button"
|
||||
@click="toggleCollapse()"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ !showMore ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
</button>
|
||||
@click.native="toggleCollapse()"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ !showMore ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
</div>
|
||||
<div v-else class="row-wrapper">
|
||||
<p class="info">
|
||||
<i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
|
||||
</p>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('yes')"
|
||||
data-testid="confirm_clear_history"
|
||||
class="icon button"
|
||||
@click="clearHistory"
|
||||
>
|
||||
<i class="material-icons">done</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="clearHistory"
|
||||
/>
|
||||
<i class="material-icons">done</i>
|
||||
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('no')"
|
||||
data-testid="reject_clear_history"
|
||||
class="icon button"
|
||||
@click="disableHistoryClearing"
|
||||
>
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
@click.native="disableHistoryClearing"
|
||||
/>
|
||||
<i class="material-icons">close</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -175,28 +168,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.virtual-list {
|
||||
max-height: calc(100vh - 270px);
|
||||
|
||||
[readonly] {
|
||||
@apply cursor-default;
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
@apply flex-col;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.virtual-list.filled {
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
.labels {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<span
|
||||
class="p-2 m-2 truncate inline-flex cursor-pointer items-center text-sm"
|
||||
:class="entryStatus.className"
|
||||
:style="{ '--status-code': entry.status }"
|
||||
@click="$emit('use-entry')"
|
||||
@click.native="$emit('use-entry')"
|
||||
>
|
||||
{{ `${entry.method} \xA0 • \xA0 ${entry.status}` }}
|
||||
</span>
|
||||
@@ -17,28 +17,26 @@
|
||||
:value="entry.name"
|
||||
:placeholder="$t('empty_req_name')"
|
||||
class="input cursor-pointer text-sm bg-transparent"
|
||||
@click="$emit('use-entry')"
|
||||
@click.native="$emit('use-entry')"
|
||||
/>
|
||||
</li>
|
||||
<span>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: !entry.star ? $t('add_star') : $t('remove_star'),
|
||||
}"
|
||||
data-testid="star_button"
|
||||
class="icon button"
|
||||
:class="{ stared: entry.star }"
|
||||
@click="$emit('toggle-star')"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ entry.star ? "star" : "star_border" }}
|
||||
</i>
|
||||
</button>
|
||||
@click.native="$emit('toggle-star')"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ entry.star ? "star" : "star_border" }}
|
||||
</i>
|
||||
</span>
|
||||
<!-- <li>
|
||||
<button
|
||||
class="icon button"
|
||||
<ButtonSecondary
|
||||
|
||||
v-tippy="{ theme: 'tooltip' }" title="{
|
||||
content: !entry.usesScripts
|
||||
? 'No pre-request script'
|
||||
@@ -48,43 +46,37 @@
|
||||
<i class="material-icons">
|
||||
{{ !entry.usesScripts ? "http" : "code" }}
|
||||
</i>
|
||||
</button>
|
||||
|
||||
</li> -->
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('options')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
data-testid="restore_history_entry"
|
||||
class="icon button"
|
||||
:aria-label="$t('edit')"
|
||||
@click="$emit('use-entry')"
|
||||
>
|
||||
<i class="material-icons">restore</i>
|
||||
<span>{{ $t("restore") }}</span>
|
||||
</button>
|
||||
@click.native="$emit('use-entry')"
|
||||
/>
|
||||
<i class="material-icons">restore</i>
|
||||
<span>{{ $t("restore") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
data-testid="delete_history_entry"
|
||||
class="icon button"
|
||||
:aria-label="$t('delete')"
|
||||
@click="$emit('delete-entry')"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
@click.native="$emit('delete-entry')"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
<div class="show-on-large-screen">
|
||||
<div class="flex">
|
||||
<li>
|
||||
<input
|
||||
:aria-label="$t('url')"
|
||||
@@ -97,7 +89,7 @@
|
||||
</li>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div v-if="showMore" class="show-on-large-screen">
|
||||
<div v-if="showMore" class="flex">
|
||||
<li>
|
||||
<input
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
|
||||
@@ -5,14 +5,12 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="reqParamList">{{ $t("request_body") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
class="icon button"
|
||||
@click="clearContent('bodyParams', $event)"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
@click.native="clearContent('bodyParams', $event)"
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@@ -68,7 +66,7 @@
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: param.hasOwnProperty('active')
|
||||
@@ -77,30 +75,27 @@
|
||||
: $t('turn_on')
|
||||
: $t('turn_off'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="toggleActive(index, param)"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
param.hasOwnProperty("active")
|
||||
? param.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</button>
|
||||
@click.native="toggleActive(index, param)"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
param.hasOwnProperty("active")
|
||||
? param.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</li>
|
||||
</div>
|
||||
<div v-if="contentType === 'multipart/form-data'">
|
||||
<li>
|
||||
<label for="attachment" class="p-0">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
class="w-full button icon"
|
||||
@click="$refs.attachment[index].click()"
|
||||
>
|
||||
<i class="material-icons">attach_file</i>
|
||||
</button>
|
||||
@click.native="$refs.attachment[index].click()"
|
||||
/>
|
||||
<i class="material-icons">attach_file</i>
|
||||
</label>
|
||||
<input
|
||||
ref="attachment"
|
||||
@@ -114,27 +109,23 @@
|
||||
</div>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="removeRequestBodyParam(index)"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="removeRequestBodyParam(index)"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button
|
||||
class="icon button"
|
||||
<ButtonSecondary
|
||||
name="addrequest"
|
||||
@click="addRequestBodyParam"
|
||||
>
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
@click.native="addRequestBodyParam"
|
||||
/>
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -3,15 +3,13 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("generate_code") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
<label for="requestType">{{ $t("choose_language") }}</label>
|
||||
<span class="select-wrapper">
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<pre v-if="requestType">{{
|
||||
codegens.find((x) => x.id === requestType).name
|
||||
@@ -27,24 +25,21 @@
|
||||
/>
|
||||
</template>
|
||||
<div v-for="gen in codegens" :key="gen.id">
|
||||
<button class="icon button" @click="requestType = gen.id">
|
||||
{{ gen.name }}
|
||||
</button>
|
||||
<ButtonSecondary @click.native="requestType = gen.id" />
|
||||
{{ gen.name }}
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
<div class="row-wrapper">
|
||||
<label for="generatedCode">{{ $t("generated_code") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
ref="copyRequestCode"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_code')"
|
||||
class="icon button"
|
||||
@click="copyRequestCode"
|
||||
>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</button>
|
||||
@click.native="copyRequestCode"
|
||||
/>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<SmartAceEditor
|
||||
|
||||
@@ -5,14 +5,12 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="headerList">{{ $t("header_list") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
class="icon button"
|
||||
@click="clearContent('headers', $event)"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
@click.native="clearContent('headers', $event)"
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@@ -63,7 +61,7 @@
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: header.hasOwnProperty('active')
|
||||
@@ -72,45 +70,40 @@
|
||||
: $t('turn_on')
|
||||
: $t('turn_off'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="
|
||||
@click.native="
|
||||
$store.commit('setActiveHeader', {
|
||||
index,
|
||||
value: header.hasOwnProperty('active') ? !header.active : false,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
header.hasOwnProperty("active")
|
||||
? header.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
header.hasOwnProperty("active")
|
||||
? header.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</li>
|
||||
</div>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="removeRequestHeader(index)"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="removeRequestHeader(index)"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon button" @click="addRequestHeader">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="addRequestHeader" />
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</AppSection>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("import_curl") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -20,12 +18,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="handleImport">
|
||||
{{ $t("import") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('import')" @click.native="handleImport" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -5,14 +5,12 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="paramList">{{ $t("parameter_list") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
class="icon button"
|
||||
@click="clearContent('parameters', $event)"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
@click.native="clearContent('parameters', $event)"
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@@ -82,7 +80,7 @@
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: param.hasOwnProperty('active')
|
||||
@@ -91,45 +89,40 @@
|
||||
: $t('turn_on')
|
||||
: $t('turn_off'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="
|
||||
@click.native="
|
||||
$store.commit('setActiveParams', {
|
||||
index,
|
||||
value: param.hasOwnProperty('active') ? !param.active : false,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
param.hasOwnProperty("active")
|
||||
? param.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
param.hasOwnProperty("active")
|
||||
? param.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</li>
|
||||
</div>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="removeRequestParam(index)"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="removeRequestParam(index)"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon button" @click="addRequestParam">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="addRequestParam" />
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</AppSection>
|
||||
|
||||
@@ -5,25 +5,22 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="rawBody">{{ $t("raw_request_body") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="rawInput && contentType.endsWith('json')"
|
||||
ref="prettifyRequest"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('prettify_body')"
|
||||
class="icon button"
|
||||
@click="prettifyRequestBody"
|
||||
>
|
||||
<i class="material-icons">{{ prettifyIcon }}</i>
|
||||
</button>
|
||||
@click.native="prettifyRequestBody"
|
||||
/>
|
||||
<i class="material-icons">{{ prettifyIcon }}</i>
|
||||
|
||||
<label for="payload" class="p-0">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('import_json')"
|
||||
class="icon button"
|
||||
@click="$refs.payload.click()"
|
||||
>
|
||||
<i class="material-icons">post_add</i>
|
||||
</button>
|
||||
@click.native="$refs.payload.click()"
|
||||
/>
|
||||
<i class="material-icons">post_add</i>
|
||||
</label>
|
||||
<input
|
||||
ref="payload"
|
||||
@@ -32,14 +29,12 @@
|
||||
type="file"
|
||||
@change="uploadPayload"
|
||||
/>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
class="icon button"
|
||||
@click="clearContent('rawParams', $event)"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
@click.native="clearContent('rawParams', $event)"
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
|
||||
@@ -3,23 +3,19 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("manage_token") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
<div class="row-wrapper">
|
||||
<label>{{ $t("token_list") }}</label>
|
||||
<div v-if="tokens.length != 0">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
class="icon button"
|
||||
@click="clearContent('tokens', $event)"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
icon="clear_all"
|
||||
@click.native="clearContent('tokens', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ul v-for="(token, index) in tokens" :key="index">
|
||||
@@ -41,24 +37,20 @@
|
||||
</li>
|
||||
<div class="row-wrapper">
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('use_token')"
|
||||
class="icon button"
|
||||
@click="useOAuthToken(token.value)"
|
||||
>
|
||||
<i class="material-icons">input</i>
|
||||
</button>
|
||||
icon="input"
|
||||
@click.native="useOAuthToken(token.value)"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="removeOAuthToken(index)"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
icon="delete"
|
||||
@click.native="removeOAuthToken(index)"
|
||||
/>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
@@ -39,6 +39,9 @@
|
||||
large
|
||||
reverse
|
||||
/>
|
||||
<ButtonSecondary label="Dashboard" icon="chevron_right" />
|
||||
<ButtonPrimary label="GitHub" svg="github" large rounded />
|
||||
<AppGitHubStarButton />
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="body">{{ $t("response_body") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="ToggleExpandResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
@@ -12,46 +12,38 @@
|
||||
? $t('expand_response')
|
||||
: $t('collapse_response'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="ToggleExpandResponse"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="ToggleExpandResponse"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click.prevent="togglePreview"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ !previewEnabled ? "visibility" : "visibility_off" }}
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native.prevent="togglePreview"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ !previewEnabled ? "visibility" : "visibility_off" }}
|
||||
</i>
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="downloadResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="downloadResponse"
|
||||
>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="downloadResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="copyResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_response')"
|
||||
class="icon button"
|
||||
@click="copyResponse"
|
||||
>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</button>
|
||||
@click.native="copyResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="response-details-wrapper">
|
||||
|
||||
@@ -3,16 +3,14 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="body">{{ $t("response_body") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="downloadResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="downloadResponse"
|
||||
>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
</button>
|
||||
@click.native="downloadResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="response-details-wrapper">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="body">{{ $t("response_body") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="ToggleExpandResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
@@ -12,33 +12,27 @@
|
||||
? $t('expand_response')
|
||||
: $t('collapse_response'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="ToggleExpandResponse"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="ToggleExpandResponse"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
<ButtonSecondary
|
||||
v-if="response.body && canDownloadResponse"
|
||||
ref="downloadResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="downloadResponse"
|
||||
>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="downloadResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="copyResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_response')"
|
||||
class="icon button"
|
||||
@click="copyResponse"
|
||||
>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</button>
|
||||
@click.native="copyResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="response-details-wrapper">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="body">{{ $t("response_body") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="ToggleExpandResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
@@ -12,33 +12,27 @@
|
||||
? $t('expand_response')
|
||||
: $t('collapse_response'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="ToggleExpandResponse"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="ToggleExpandResponse"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
<ButtonSecondary
|
||||
v-if="response.body && canDownloadResponse"
|
||||
ref="downloadResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="downloadResponse"
|
||||
>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="downloadResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="copyResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_response')"
|
||||
class="icon button"
|
||||
@click="copyResponse"
|
||||
>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</button>
|
||||
@click.native="copyResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="response-details-wrapper">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="body">{{ $t("response_body") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="ToggleExpandResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
@@ -12,33 +12,27 @@
|
||||
? $t('expand_response')
|
||||
: $t('collapse_response'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="ToggleExpandResponse"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="ToggleExpandResponse"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="downloadResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="downloadResponse"
|
||||
>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="downloadResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ downloadIcon }}</i>
|
||||
<ButtonSecondary
|
||||
v-if="response.body"
|
||||
ref="copyResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_response')"
|
||||
class="icon button"
|
||||
@click="copyResponse"
|
||||
>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</button>
|
||||
@click.native="copyResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ copyIcon }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="response-details-wrapper">
|
||||
|
||||
58
components/profile/Picture.vue
Normal file
58
components/profile/Picture.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative flex items-center justify-center"
|
||||
:class="`h-${size} w-${size}`"
|
||||
>
|
||||
<img
|
||||
class="
|
||||
absolute
|
||||
object-cover object-center
|
||||
transition
|
||||
rounded-lg
|
||||
bg-primaryDark
|
||||
"
|
||||
:class="`h-${size} w-${size} bg-${color}`"
|
||||
:src="url"
|
||||
:alt="alt"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="absolute inset-0 rounded-lg shadow-inner"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
default: `https://avatars.dicebear.com/v2/avataaars/${Math.random()
|
||||
.toString(36)
|
||||
.substring(7)}.svg?mood[]=happy`,
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 6,
|
||||
},
|
||||
radius: {
|
||||
type: String,
|
||||
default: "md",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "gray",
|
||||
},
|
||||
alt: {
|
||||
type: String,
|
||||
default: "Profile picture",
|
||||
// default() {
|
||||
// return this.url
|
||||
// .split('/')
|
||||
// .pop()
|
||||
// .split('.')[0]
|
||||
// .split('#')[0]
|
||||
// .split('?')[0]
|
||||
// },
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -16,19 +16,18 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="connect" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="connect"
|
||||
:disabled="!validUrl"
|
||||
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
|
||||
@click="toggleConnection"
|
||||
>
|
||||
{{ connectionState ? $t("disconnect") : $t("connect") }}
|
||||
<span>
|
||||
<i class="material-icons">{{
|
||||
!connectionState ? "sync" : "sync_disabled"
|
||||
}}</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="toggleConnection"
|
||||
/>
|
||||
{{ connectionState ? $t("disconnect") : $t("connect") }}
|
||||
<span>
|
||||
<i class="material-icons">{{
|
||||
!connectionState ? "sync" : "sync_disabled"
|
||||
}}</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@@ -64,18 +63,17 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="publish" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="publish"
|
||||
class="button"
|
||||
name="get"
|
||||
:disabled="!canpublish"
|
||||
@click="publish"
|
||||
>
|
||||
{{ $t("mqtt_publish") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="publish"
|
||||
/>
|
||||
{{ $t("mqtt_publish") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@@ -93,24 +91,21 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="subscribe" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="subscribe"
|
||||
name="get"
|
||||
:disabled="!cansubscribe"
|
||||
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
|
||||
@click="toggleSubscription"
|
||||
>
|
||||
{{
|
||||
subscriptionState
|
||||
? $t("mqtt_unsubscribe")
|
||||
: $t("mqtt_subscribe")
|
||||
}}
|
||||
<span>
|
||||
<i class="material-icons">{{
|
||||
subscriptionState ? "sync_disabled" : "sync"
|
||||
}}</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="toggleSubscription"
|
||||
/>
|
||||
{{
|
||||
subscriptionState ? $t("mqtt_unsubscribe") : $t("mqtt_subscribe")
|
||||
}}
|
||||
<span>
|
||||
<i class="material-icons">{{
|
||||
subscriptionState ? "sync_disabled" : "sync"
|
||||
}}</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
@@ -29,20 +29,19 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="connect" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="connect"
|
||||
:disabled="!urlValid"
|
||||
name="connect"
|
||||
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
|
||||
@click="toggleConnection"
|
||||
>
|
||||
{{ !connectionState ? $t("connect") : $t("disconnect") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="toggleConnection"
|
||||
/>
|
||||
{{ !connectionState ? $t("connect") : $t("disconnect") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@@ -99,39 +98,35 @@
|
||||
</li>
|
||||
<div v-if="index + 1 !== communication.inputs.length">
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="removeCommunicationInput({ index })"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="removeCommunicationInput({ index })"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
<div v-if="index + 1 === communication.inputs.length">
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="send"
|
||||
class="button"
|
||||
name="send"
|
||||
:disabled="!connectionState"
|
||||
@click="sendMessage"
|
||||
>
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="sendMessage"
|
||||
/>
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon button" @click="addCommunicationInput">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="addCommunicationInput" />
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</AppSection>
|
||||
|
||||
@@ -17,20 +17,19 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="start" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="start"
|
||||
:disabled="!serverValid"
|
||||
name="start"
|
||||
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
|
||||
@click="toggleSSEConnection"
|
||||
>
|
||||
{{ !connectionSSEState ? $t("start") : $t("stop") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionSSEState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="toggleSSEConnection"
|
||||
/>
|
||||
{{ !connectionSSEState ? $t("start") : $t("stop") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionSSEState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
@@ -18,20 +18,19 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="connect" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="connect"
|
||||
:disabled="!urlValid"
|
||||
class="button"
|
||||
name="connect"
|
||||
@click="toggleConnection"
|
||||
>
|
||||
{{ !connectionState ? $t("connect") : $t("disconnect") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="toggleConnection"
|
||||
/>
|
||||
{{ !connectionState ? $t("connect") : $t("disconnect") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@@ -66,7 +65,7 @@
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: protocol.hasOwnProperty('active')
|
||||
@@ -75,44 +74,39 @@
|
||||
: $t('turn_on')
|
||||
: $t('turn_off'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="
|
||||
@click.native="
|
||||
protocol.active = protocol.hasOwnProperty('active')
|
||||
? !protocol.active
|
||||
: false
|
||||
"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
protocol.hasOwnProperty("active")
|
||||
? protocol.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
protocol.hasOwnProperty("active")
|
||||
? protocol.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</li>
|
||||
</div>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="deleteProtocol({ index })"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="deleteProtocol({ index })"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon button" @click="addProtocol">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="addProtocol" />
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</AppSection>
|
||||
@@ -141,18 +135,17 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="send" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="send"
|
||||
name="send"
|
||||
:disabled="!connectionState"
|
||||
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
|
||||
@click="sendMessage"
|
||||
>
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="sendMessage"
|
||||
/>
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
@@ -11,30 +11,15 @@
|
||||
<!-- text-pink-400 -->
|
||||
<!-- text-red-400 -->
|
||||
<!-- text-yellow-400 -->
|
||||
<span
|
||||
<ButtonSecondary
|
||||
v-for="(color, index) of accentColors"
|
||||
:key="`color-${index}`"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="capitalized(color)"
|
||||
class="
|
||||
inline-flex
|
||||
items-center
|
||||
justify-center
|
||||
p-3
|
||||
m-2
|
||||
transition
|
||||
duration-150
|
||||
ease-in-out
|
||||
bg-transparent
|
||||
rounded-full
|
||||
cursor-pointer
|
||||
hover:shadow-none
|
||||
"
|
||||
:title="capitalized(color)"
|
||||
:class="[`text-${color}-400`, { 'bg-primary': color === active }]"
|
||||
@click="setActiveColor(color)"
|
||||
>
|
||||
<i class="material-icons">lens</i>
|
||||
</span>
|
||||
icon="lens"
|
||||
@click.native="setActiveColor(color)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="show-if-initialized" :class="{ initialized }">
|
||||
<div v-if="lang == 'json'" class="outline">
|
||||
<div v-for="(p, index) in currPath" :key="index" class="block">
|
||||
<div class="label" @click="onBlockClick(index)">
|
||||
<div class="label" @click.native="onBlockClick(index)">
|
||||
{{ p }}
|
||||
</div>
|
||||
<i v-if="index + 1 !== currPath.length" class="material-icons"
|
||||
@@ -18,7 +18,7 @@
|
||||
v-for="(sib, i) in currSib"
|
||||
:key="i"
|
||||
class="sib"
|
||||
@click="goToSib(sib)"
|
||||
@click.native="goToSib(sib)"
|
||||
>
|
||||
{{ sib.key ? sib.key.value : i }}
|
||||
</div>
|
||||
@@ -277,7 +277,7 @@ export default {
|
||||
|
||||
.label {
|
||||
@apply p-2;
|
||||
@apply transition;
|
||||
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
}
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
class="inline-flex items-center justify-center focus:outline-none"
|
||||
:class="[
|
||||
color
|
||||
? `text-${color}-500 transition hover:text-${color}-600 focus:text-${color}-600`
|
||||
: 'transition hover:text-secondaryDark focus:text-secondaryDark',
|
||||
? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
|
||||
: 'hover:text-secondaryDark focus:text-secondaryDark',
|
||||
{ 'opacity-50 cursor-not-allowed': disabled },
|
||||
{ 'flex-row-reverse': reverse },
|
||||
]"
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
:class="styles"
|
||||
@input="updateSuggestions"
|
||||
@keyup="updateSuggestions"
|
||||
@click="updateSuggestions"
|
||||
@click.native="updateSuggestions"
|
||||
@keydown="handleKeystroke"
|
||||
/>
|
||||
<ul
|
||||
@@ -24,7 +24,7 @@
|
||||
v-for="(suggestion, index) in suggestions"
|
||||
:key="index"
|
||||
:class="{ active: currentSuggestionIndex === index }"
|
||||
@click.prevent="forceSuggestion(suggestion)"
|
||||
@click.native.prevent="forceSuggestion(suggestion)"
|
||||
>
|
||||
{{ suggestion }}
|
||||
</li>
|
||||
@@ -200,7 +200,7 @@ export default {
|
||||
@apply mx-2;
|
||||
@apply left-0;
|
||||
@apply z-50;
|
||||
@apply transition;
|
||||
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
@apply shadow-lg;
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<span>
|
||||
<tippy
|
||||
ref="language"
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
@@ -9,15 +10,15 @@
|
||||
:animate-fill="false"
|
||||
>
|
||||
<template #trigger>
|
||||
<button v-tippy="{ theme: 'tooltip' }" :title="$t('choose_language')">
|
||||
<span class="mr-2 text-lg">
|
||||
{{
|
||||
$i18n.locales.find(({ code }) => code == $i18n.locale).country
|
||||
| formatCountry
|
||||
}}
|
||||
</span>
|
||||
{{ $i18n.locales.find(({ code }) => code == $i18n.locale).name }}
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('choose_language')"
|
||||
:label="$i18n.locales.find(({ code }) => code == $i18n.locale).name"
|
||||
/>
|
||||
{{
|
||||
$i18n.locales.find(({ code }) => code == $i18n.locale).country
|
||||
| formatCountry
|
||||
}}
|
||||
</template>
|
||||
<NuxtLink
|
||||
v-for="locale in $i18n.locales.filter(
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<label>
|
||||
<!-- <ColorScheme placeholder="..." tag="span">
|
||||
<ColorScheme placeholder="..." tag="span">
|
||||
{{ $t("background") }}:
|
||||
{{
|
||||
$colorMode.preference.charAt(0).toUpperCase() +
|
||||
@@ -10,37 +10,21 @@
|
||||
<span v-if="$colorMode.preference === 'system'">
|
||||
({{ $colorMode.value }} mode detected)
|
||||
</span>
|
||||
</ColorScheme> -->
|
||||
</ColorScheme>
|
||||
</label>
|
||||
<div>
|
||||
<span
|
||||
<ButtonSecondary
|
||||
v-for="(color, index) of colors"
|
||||
:key="`color-${index}`"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
|
||||
class="
|
||||
inline-flex
|
||||
items-center
|
||||
justify-center
|
||||
p-3
|
||||
m-2
|
||||
transition
|
||||
duration-150
|
||||
ease-in-out
|
||||
bg-transparent
|
||||
rounded-full
|
||||
cursor-pointer
|
||||
text-secondaryLight
|
||||
hover:text-secondary
|
||||
"
|
||||
:class="[
|
||||
{ 'bg-primary': color === $colorMode.preference },
|
||||
{ 'text-accent hover:text-accent': color === $colorMode.value },
|
||||
]"
|
||||
@click="$colorMode.preference = color"
|
||||
>
|
||||
<i class="material-icons">{{ getIcon(color) }}</i>
|
||||
</span>
|
||||
:icon="getIcon(color)"
|
||||
@click.native="$colorMode.preference = color"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("confirm") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary icon="close" @click.native="hideModal" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
@@ -14,12 +12,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ no }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="resolve">
|
||||
{{ yes }}
|
||||
</button>
|
||||
<ButtonSecondary :label="no" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="yes" @click.native="resolve" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
<template>
|
||||
<span class="chip">
|
||||
<span><slot></slot></span>
|
||||
<button class="p-2 icon" @click="$emit('chip-delete')">
|
||||
<i class="material-icons close-button"> close </i>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
class="p-2 close-button icon"
|
||||
icon="close"
|
||||
@click.native="$emit('chip-delete')"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@@ -18,7 +20,7 @@
|
||||
@apply bg-primaryDark;
|
||||
@apply text-secondary;
|
||||
@apply font-mono;
|
||||
@apply transition;
|
||||
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
@apply border border-divider;
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
right-0
|
||||
cursor-pointer
|
||||
"
|
||||
@click="$emit('toggle')"
|
||||
@click.native="$emit('toggle')"
|
||||
>
|
||||
<i
|
||||
class="
|
||||
|
||||
19
components/smart/Icon.vue
Normal file
19
components/smart/Icon.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<component :is="src" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
src() {
|
||||
return require(`~/assets/icons/${this.name}.svg?inline`)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
93
components/smart/Item.vue
Normal file
93
components/smart/Item.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<SmartLink
|
||||
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
|
||||
:exact="exact"
|
||||
:blank="blank"
|
||||
class="
|
||||
inline-flex
|
||||
px-4
|
||||
py-2
|
||||
text-sm
|
||||
transition
|
||||
rounded-lg
|
||||
focus:bg-primaryDark focus:text-secondaryDark
|
||||
hover:bg-primaryDark hover:text-secondaryDark
|
||||
focus:outline-none
|
||||
"
|
||||
:class="[
|
||||
{ 'opacity-50 cursor-not-allowed': disabled },
|
||||
{ 'flex-1': label },
|
||||
{ 'flex-row-reverse justify-end': reverse },
|
||||
]"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<i
|
||||
v-if="icon"
|
||||
:class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
|
||||
class="material-icons"
|
||||
>
|
||||
{{ icon }}
|
||||
</i>
|
||||
<SmartIcon
|
||||
v-if="svg"
|
||||
:name="svg"
|
||||
:class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
|
||||
class="svg-icons"
|
||||
/>
|
||||
<div class="inline-flex items-start" :class="{ 'flex-col': description }">
|
||||
<div class="font-semibold">
|
||||
{{ label }}
|
||||
</div>
|
||||
<p v-if="description" class="my-2 text-xs text-left text-secondaryLight">
|
||||
{{ description }}
|
||||
</p>
|
||||
</div>
|
||||
</SmartLink>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
to: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
exact: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
blank: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
svg: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
infoIcon: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -8,24 +8,20 @@
|
||||
@mouseup="onBackdropMouseUp"
|
||||
@mousedown="onBackdropMouseDown"
|
||||
>
|
||||
<div class="modal-wrapper">
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<div class="row-wrapper">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<div class="row-wrapper">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="flex flex-col">
|
||||
<slot name="body"></slot>
|
||||
<!-- <div class="top fade"></div>
|
||||
<div class="bottom fade"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="flex flex-col">
|
||||
<slot name="body"></slot>
|
||||
</div>
|
||||
<div v-if="hasFooterSlot" class="modal-footer">
|
||||
<div class="row-wrapper">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="hasFooterSlot" class="modal-footer">
|
||||
<div class="row-wrapper">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,7 +46,7 @@ export default {
|
||||
return {
|
||||
stackId: Math.random(),
|
||||
shouldCloseOnBackdropClick: true,
|
||||
// when transition doesn't fire on unmount, we should manually remove the modal from DOM
|
||||
// when doesn't fire on unmount, we should manually remove the modal from DOM
|
||||
// (for example, when the parent component of this modal gets destroyed)
|
||||
shouldCleanupDomOnUnmount: true,
|
||||
}
|
||||
@@ -127,33 +123,23 @@ export default {
|
||||
@apply flex;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.64);
|
||||
}
|
||||
|
||||
.modal-wrapper {
|
||||
@apply flex flex-1;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply bg-primaryLight;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@apply relative;
|
||||
@apply flex flex-1 flex-col;
|
||||
@apply m-2;
|
||||
@apply transition;
|
||||
@apply p-4;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
@apply bg-primary;
|
||||
@apply rounded-lg;
|
||||
@apply shadow-2xl;
|
||||
@apply border-4 border-tooltip;
|
||||
|
||||
max-height: calc(100vh - 128px);
|
||||
max-width: 640px;
|
||||
@apply shadow-xl;
|
||||
@apply max-w-md;
|
||||
@apply max-h-xl;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
@@ -161,6 +147,7 @@ export default {
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
@apply my-4;
|
||||
@apply overflow-auto;
|
||||
}
|
||||
|
||||
@@ -168,15 +155,6 @@ export default {
|
||||
@apply p-2;
|
||||
}
|
||||
|
||||
/*
|
||||
* The following styles are auto-applied to elements with
|
||||
* transition="modal" when their visibility is toggled
|
||||
* by Vue.js.
|
||||
*
|
||||
* You can easily play with the modal transition by editing
|
||||
* these styles.
|
||||
*/
|
||||
|
||||
.modal-enter,
|
||||
.modal-leave-active {
|
||||
@apply opacity-0;
|
||||
@@ -186,30 +164,7 @@ export default {
|
||||
.modal-leave-active .modal-container {
|
||||
@apply transform;
|
||||
@apply scale-90;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
}
|
||||
|
||||
// .fade {
|
||||
// @apply absolute;
|
||||
// @apply block;
|
||||
// @apply transition;
|
||||
// @apply ease-in-out;
|
||||
// @apply duration-150;
|
||||
|
||||
// left: 16px;
|
||||
// right: 20px;
|
||||
// height: 32px;
|
||||
|
||||
// &.top {
|
||||
// top: 56px;
|
||||
// background: linear-gradient(to bottom, var(--primary-color), transparent);
|
||||
// }
|
||||
|
||||
// &.bottom {
|
||||
// bottom: 16px;
|
||||
// background: linear-gradient(to top, var(--primary-color), transparent);
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
||||
34
components/smart/Spinner.vue
Normal file
34
components/smart/Spinner.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<svg
|
||||
class="animate-spin"
|
||||
:class="`w-${size} h-${size}`"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
/>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
size: {
|
||||
type: Number,
|
||||
default: 6,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,27 +1,29 @@
|
||||
<template>
|
||||
<section class="tabs-wrapper">
|
||||
<div class="tabs-wrapper">
|
||||
<div class="tabs" :class="styles">
|
||||
<ul>
|
||||
<li
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="{ 'is-active': tab.isActive }"
|
||||
:tabindex="0"
|
||||
@keyup.enter="selectTab(tab)"
|
||||
>
|
||||
<a :href="tab.href" @click="selectTab(tab)">
|
||||
<div class="flex w-0">
|
||||
<div class="inline-flex">
|
||||
<button
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
class="tab"
|
||||
:class="{ 'is-active': tab.isActive }"
|
||||
:tabindex="0"
|
||||
@keyup.enter="selectTab(tab)"
|
||||
@click="selectTab(tab)"
|
||||
>
|
||||
<i v-if="tab.icon" class="material-icons">
|
||||
{{ tab.icon }}
|
||||
</i>
|
||||
<span v-if="tab.label">{{ tab.label }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs-details">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -56,7 +58,10 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tabs-wrapper {
|
||||
@apply flex flex-col flex-nowrap flex-1;
|
||||
@apply flex;
|
||||
@apply flex-col;
|
||||
@apply flex-nowrap;
|
||||
@apply flex-1;
|
||||
|
||||
.tabs {
|
||||
@apply flex;
|
||||
@@ -64,53 +69,35 @@ export default {
|
||||
@apply overflow-auto;
|
||||
@apply mt-4;
|
||||
|
||||
ul {
|
||||
.tab {
|
||||
@apply flex;
|
||||
@apply w-0;
|
||||
}
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply p-3;
|
||||
@apply text-secondaryLight;
|
||||
@apply font-semibold;
|
||||
@apply cursor-pointer;
|
||||
@apply transition;
|
||||
@apply border-b-2;
|
||||
@apply border-transparent;
|
||||
@apply rounded-t-lg;
|
||||
|
||||
li {
|
||||
@apply inline-flex;
|
||||
@apply outline-none;
|
||||
@apply border-none;
|
||||
|
||||
a {
|
||||
@apply flex;
|
||||
@apply items-center;
|
||||
@apply justify-center;
|
||||
@apply py-2 px-4;
|
||||
@apply text-secondaryLight text-sm;
|
||||
@apply rounded-lg;
|
||||
@apply cursor-pointer;
|
||||
@apply transition-colors;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
|
||||
.material-icons {
|
||||
@apply m-4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply text-secondary;
|
||||
}
|
||||
.material-icons {
|
||||
@apply mr-4;
|
||||
}
|
||||
|
||||
&:focus a {
|
||||
@apply text-secondary;
|
||||
&:hover {
|
||||
@apply text-secondaryDark;
|
||||
}
|
||||
|
||||
&.is-active a {
|
||||
@apply bg-divider;
|
||||
@apply text-secondary;
|
||||
&:focus {
|
||||
@apply text-secondaryDark;
|
||||
@apply outline-none;
|
||||
}
|
||||
&.is-active {
|
||||
@apply text-accent;
|
||||
@apply border-accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
ul,
|
||||
ol {
|
||||
@apply flex-row flex-nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
84
components/tab/Primary.vue
Normal file
84
components/tab/Primary.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<SmartLink
|
||||
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
|
||||
:exact="exact"
|
||||
:blank="blank"
|
||||
class="
|
||||
inline-flex
|
||||
items-center
|
||||
px-4
|
||||
py-2
|
||||
font-semibold
|
||||
truncate
|
||||
transition
|
||||
rounded-lg
|
||||
focus:outline-none
|
||||
"
|
||||
:class="[
|
||||
color
|
||||
? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
|
||||
: 'hover:text-secondaryDark focus:text-accent',
|
||||
{ 'opacity-50 cursor-not-allowed': disabled },
|
||||
{ 'flex-row-reverse': reverse },
|
||||
]"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<i
|
||||
v-if="icon"
|
||||
:class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
|
||||
class="material-icons"
|
||||
>
|
||||
{{ icon }}
|
||||
</i>
|
||||
<SmartIcon
|
||||
v-if="svg"
|
||||
:name="svg"
|
||||
:class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
|
||||
class="svg-icons"
|
||||
/>
|
||||
{{ label }}
|
||||
</SmartLink>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
to: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
exact: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
blank: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
svg: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
91
components/tab/Secondary.vue
Normal file
91
components/tab/Secondary.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<SmartLink
|
||||
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
|
||||
:exact="exact"
|
||||
:blank="blank"
|
||||
class="
|
||||
inline-flex
|
||||
items-center
|
||||
flex-1
|
||||
py-2
|
||||
font-semibold
|
||||
transition
|
||||
transform
|
||||
hover:translate-x-2
|
||||
focus:translate-x-2 focus:outline-none
|
||||
"
|
||||
:class="[
|
||||
label ? 'px-3 rounded-lg' : 'px-2 rounded-full',
|
||||
active
|
||||
? color
|
||||
? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
|
||||
: 'text-accent'
|
||||
: 'hover:text-secondaryDark focus:text-secondaryDark',
|
||||
color
|
||||
? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
|
||||
: '',
|
||||
{ 'translate-x-2': active },
|
||||
{ 'opacity-50 cursor-not-allowed': disabled },
|
||||
]"
|
||||
:disabled="disabled"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
v-if="icon"
|
||||
:class="label ? 'mr-4 opacity-75' : ''"
|
||||
class="material-icons"
|
||||
>
|
||||
{{ icon }}
|
||||
</i>
|
||||
<SmartIcon
|
||||
v-if="svg"
|
||||
:name="svg"
|
||||
:class="label ? 'mr-4 opacity-75' : ''"
|
||||
class="svg-icons"
|
||||
/>
|
||||
{{ label }}
|
||||
</SmartLink>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
to: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
exact: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
blank: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
svg: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -2,9 +2,8 @@
|
||||
<SmartModal v-if="show" @close="hideModal">
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("new_team") }}</h3>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="hideModal" />
|
||||
<i class="material-icons">close</i>
|
||||
</template>
|
||||
<template #body>
|
||||
<ul>
|
||||
@@ -27,12 +26,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="addNewTeam">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="addNewTeam" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -2,9 +2,8 @@
|
||||
<SmartModal v-if="show" @close="hideModal">
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("edit_team") }}</h3>
|
||||
<button class="icon button" @click="hideModal">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="hideModal" />
|
||||
<i class="material-icons">close</i>
|
||||
</template>
|
||||
<template #body>
|
||||
<ul>
|
||||
@@ -57,7 +56,7 @@
|
||||
</li>
|
||||
<li>
|
||||
<span class="select-wrapper">
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<input
|
||||
class="input"
|
||||
@@ -72,40 +71,29 @@
|
||||
/>
|
||||
</template>
|
||||
<div>
|
||||
<button class="icon button" @click="updateRole(index, 'OWNER')">
|
||||
OWNER
|
||||
</button>
|
||||
<ButtonSecondary @click.native="updateRole(index, 'OWNER')" />
|
||||
OWNER
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="updateRole(index, 'EDITOR')"
|
||||
>
|
||||
EDITOR
|
||||
</button>
|
||||
<ButtonSecondary @click.native="updateRole(index, 'EDITOR')" />
|
||||
EDITOR
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="updateRole(index, 'VIEWER')"
|
||||
>
|
||||
VIEWER
|
||||
</button>
|
||||
<ButtonSecondary @click.native="updateRole(index, 'VIEWER')" />
|
||||
VIEWER
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="member"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="removeExistingTeamMember(member.user.uid)"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="removeExistingTeamMember(member.user.uid)"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@@ -132,7 +120,7 @@
|
||||
</li>
|
||||
<li>
|
||||
<span class="select-wrapper">
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<input
|
||||
class="input"
|
||||
@@ -147,55 +135,45 @@
|
||||
/>
|
||||
</template>
|
||||
<div>
|
||||
<button class="icon button" @click="member.value = 'OWNER'">
|
||||
OWNER
|
||||
</button>
|
||||
<ButtonSecondary @click.native="member.value = 'OWNER'" />
|
||||
OWNER
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="member.value = 'EDITOR'">
|
||||
EDITOR
|
||||
</button>
|
||||
<ButtonSecondary @click.native="member.value = 'EDITOR'" />
|
||||
EDITOR
|
||||
</div>
|
||||
<div>
|
||||
<button class="icon button" @click="member.value = 'VIEWER'">
|
||||
VIEWER
|
||||
</button>
|
||||
<ButtonSecondary @click.native="member.value = 'VIEWER'" />
|
||||
VIEWER
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="member"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="removeTeamMember(index)"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="removeTeamMember(index)"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon button" @click="addTeamMember">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="addTeamMember" />
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button" @click="hideModal">
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
<button class="icon button primary" @click="saveTeam">
|
||||
{{ $t("save") }}
|
||||
</button>
|
||||
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
|
||||
<ButtonPrimary :label="$t('save')" @click.native="saveTeam" />
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -1,57 +1,46 @@
|
||||
<template>
|
||||
<div class="row-wrapper">
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="team.myRole === 'OWNER' ? $t('edit') : ''"
|
||||
class="icon button"
|
||||
@click="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
|
||||
>
|
||||
<i class="material-icons">group</i>
|
||||
<span>{{ team.name }}</span>
|
||||
</button>
|
||||
@click.native="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
|
||||
/>
|
||||
<i class="material-icons">group</i>
|
||||
<span>{{ team.name }}</span>
|
||||
</div>
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<button
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
class="tooltip-target icon button"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<div v-if="team.myRole === 'OWNER'">
|
||||
<button class="icon button" @click="$emit('edit-team')">
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="$emit('edit-team')" />
|
||||
<i class="material-icons">create</i>
|
||||
<span>{{ $t("edit") }}</span>
|
||||
</div>
|
||||
<div v-if="team.myRole === 'OWNER'">
|
||||
<button class="icon button" @click="deleteTeam">
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="deleteTeam" />
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("delete") }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
<ButtonSecondary
|
||||
:disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
|
||||
@click="exitTeam"
|
||||
>
|
||||
<i class="material-icons">remove</i>
|
||||
<div
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
@click.native="exitTeam"
|
||||
/>
|
||||
<i class="material-icons">remove</i>
|
||||
<div
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content:
|
||||
team.myRole === 'OWNER' && team.ownersCount == 1
|
||||
? $t('disable_exit')
|
||||
: '',
|
||||
}"
|
||||
>
|
||||
<span>{{ $t("exit") }}</span>
|
||||
</div>
|
||||
</button>
|
||||
>
|
||||
<span>{{ $t("exit") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
@@ -21,10 +21,11 @@
|
||||
/>
|
||||
<div class="row-wrapper">
|
||||
<div>
|
||||
<button class="icon button" @click="displayModalAdd(true)">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
icon="add"
|
||||
:label="$t('new')"
|
||||
@click.native="displayModalAdd(true)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="$apollo.queries.myTeams.loading" class="info">
|
||||
@@ -33,7 +34,7 @@
|
||||
<p v-if="myTeams.length === 0" class="info">
|
||||
<i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
|
||||
</p>
|
||||
<div v-else class="virtual-list">
|
||||
<div v-else class="overflow-auto">
|
||||
<ul class="flex-col">
|
||||
<li v-for="(team, index) in myTeams" :key="`team-${index}`">
|
||||
<TeamsTeam
|
||||
@@ -127,13 +128,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.virtual-list {
|
||||
max-height: calc(100vh - 241px);
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply flex flex-col;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<transition
|
||||
:appear="appear"
|
||||
name="translate-fade"
|
||||
enter-active-class="transition duration-500"
|
||||
enter-active-class="duration-500"
|
||||
enter-class="opacity-0"
|
||||
enter-to-class="opacity-100"
|
||||
leave-active-class="transition duration-500"
|
||||
leave-active-class="duration-500"
|
||||
leave-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<transition
|
||||
:appear="appear"
|
||||
name="translate-slide-right"
|
||||
enter-active-class="transition duration-500 transform"
|
||||
enter-active-class="duration-500 transform"
|
||||
enter-class="-translate-x-full"
|
||||
enter-to-class="translate-x-0"
|
||||
leave-active-class="transition duration-500 transform"
|
||||
leave-active-class="duration-500 transform"
|
||||
leave-class="translate-x-0"
|
||||
leave-to-class="-translate-x-full"
|
||||
>
|
||||
|
||||
@@ -255,6 +255,7 @@
|
||||
"extensions_info2": "Get Hoppscotch browser extension!",
|
||||
"installed": "Installed",
|
||||
"login_with": "Login with",
|
||||
"login": "Login",
|
||||
"logged_out": "Logged out",
|
||||
"login_success": "Successfully logged in",
|
||||
"logout": "Logout",
|
||||
@@ -331,7 +332,7 @@
|
||||
"user_removed": "User removed successfully",
|
||||
"import_from_my_collections": "Import from My Collections",
|
||||
"export_as_json": "Export as JSON",
|
||||
"send_magic_link": "Send a magic link to sign in",
|
||||
"send_magic_link": "Send a magic link",
|
||||
"check_your_inbox": "Check your inbox.",
|
||||
"you_can_dismiss_this_modal": "You can dismiss this ",
|
||||
"we_sent_magic_link": "We sent you a magic link!",
|
||||
@@ -339,5 +340,6 @@
|
||||
"hide_sidebar": "Hide sidebar",
|
||||
"show_sidebar": "Show sidebar",
|
||||
"protocols": "Protocols",
|
||||
"protocol_count": "protocol {count}"
|
||||
"protocol_count": "protocol {count}",
|
||||
"share": "Share"
|
||||
}
|
||||
|
||||
@@ -31,16 +31,16 @@
|
||||
</Splitpanes>
|
||||
</Pane>
|
||||
<Pane style="height: auto" class="bg-primaryDark">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
class="button icon"
|
||||
@click="hideNavigationPane = !hideNavigationPane"
|
||||
>
|
||||
<i class="material-icons">menu_open</i>
|
||||
</button>
|
||||
<button class="button icon" @click="hideHeaderPane = !hideHeaderPane">
|
||||
<i class="material-icons">menu_open</i>
|
||||
</button>
|
||||
<AppFooter />
|
||||
@click.native="hideNavigationPane = !hideNavigationPane"
|
||||
/>
|
||||
<i class="material-icons">menu_open</i>
|
||||
<ButtonSecondary
|
||||
class="button icon"
|
||||
@click.native="hideHeaderPane = !hideHeaderPane"
|
||||
/>
|
||||
<i class="material-icons">menu_open</i>
|
||||
</Pane>
|
||||
</Splitpanes>
|
||||
</div>
|
||||
|
||||
@@ -3,20 +3,12 @@
|
||||
<h1 class="mb-4 font-mono heading text-4xl">{{ statusCode }}</h1>
|
||||
<h3 class="mb-4 heading font-mono text-xs">{{ message }}</h3>
|
||||
<p class="mt-4 border-t border-tooltip">
|
||||
<nuxt-link to="/">
|
||||
<button class="icon button">
|
||||
<i class="material-icons">home</i>
|
||||
<span>
|
||||
{{ $t("go_home") }}
|
||||
</span>
|
||||
</button>
|
||||
</nuxt-link>
|
||||
<button class="icon button" @click="reloadApplication">
|
||||
<i class="material-icons">refresh</i>
|
||||
<span>
|
||||
{{ $t("reload") }}
|
||||
</span>
|
||||
</button>
|
||||
<ButtonSecondary to="/" icon="home" :label="$t('go_home')" />
|
||||
<ButtonSecondary
|
||||
icon="refresh"
|
||||
:label="$t('reload')"
|
||||
@click.native="reloadApplication"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -32,13 +24,6 @@ export default {
|
||||
},
|
||||
},
|
||||
|
||||
head() {
|
||||
return {
|
||||
bodyAttrs: {
|
||||
class: "sticky-footer",
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
statusCode() {
|
||||
return (this.error && this.error.statusCode) || 500
|
||||
@@ -47,6 +32,7 @@ export default {
|
||||
return this.error.message || this.$t("something_went_wrong")
|
||||
},
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
initializeFirebase()
|
||||
},
|
||||
|
||||
@@ -120,6 +120,8 @@ export default {
|
||||
"nuxt-windicss",
|
||||
// https://github.com/nuxt-community/color-mode-module
|
||||
"@nuxtjs/color-mode",
|
||||
// https://github.com/nuxt-community/svg-module
|
||||
"@nuxtjs/svg",
|
||||
// https: //github.com/nuxt-community/google-fonts-module
|
||||
"@nuxtjs/google-fonts",
|
||||
// https://github.com/nuxt/typescript
|
||||
|
||||
69
package-lock.json
generated
69
package-lock.json
generated
@@ -60,6 +60,7 @@
|
||||
"@nuxtjs/google-fonts": "^1.3.0",
|
||||
"@nuxtjs/pwa": "^3.3.5",
|
||||
"@nuxtjs/stylelint-module": "^4.0.0",
|
||||
"@nuxtjs/svg": "^0.1.12",
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@types/lodash": "^4.14.170",
|
||||
"@vue/test-utils": "^1.2.1",
|
||||
@@ -5396,6 +5397,18 @@
|
||||
"stylelint-webpack-plugin": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@nuxtjs/svg": {
|
||||
"version": "0.1.12",
|
||||
"resolved": "https://registry.npmjs.org/@nuxtjs/svg/-/svg-0.1.12.tgz",
|
||||
"integrity": "sha512-QJjArXOcQzDn7gzc/pFr960NTediubeZ5djtqV3BkOnZnANSOvtxFp2LnHF6e4rFq9CTEabPr89WZUwrVDemEQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"file-loader": "^6.0.0",
|
||||
"raw-loader": "^4.0.0",
|
||||
"url-loader": "^4.1.0",
|
||||
"vue-svg-loader": "^0.16.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@nuxtjs/toast": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@nuxtjs/toast/-/toast-3.3.1.tgz",
|
||||
@@ -27182,6 +27195,18 @@
|
||||
"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
|
||||
"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q="
|
||||
},
|
||||
"node_modules/svg-to-vue": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/svg-to-vue/-/svg-to-vue-0.7.0.tgz",
|
||||
"integrity": "sha512-Tg2nMmf3BQorYCAjxbtTkYyWPVSeox5AZUFvfy4MoWK/5tuQlnA/h3LAlTjV3sEvOC5FtUNovRSj3p784l4KOA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"svgo": "^1.3.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue-template-compiler": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svgo": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
|
||||
@@ -29477,6 +29502,19 @@
|
||||
"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
|
||||
"integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ="
|
||||
},
|
||||
"node_modules/vue-svg-loader": {
|
||||
"version": "0.16.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-svg-loader/-/vue-svg-loader-0.16.0.tgz",
|
||||
"integrity": "sha512-2RtFXlTCYWm8YAEO2qAOZ2SuIF2NvLutB5muc3KDYoZq5ZeCHf8ggzSan3ksbbca7CJ/Aw57ZnDF4B7W/AkGtw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"loader-utils": "^1.2.3",
|
||||
"svg-to-vue": "^0.7.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue-template-compiler": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-template-compiler": {
|
||||
"version": "2.6.14",
|
||||
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz",
|
||||
@@ -35807,6 +35845,18 @@
|
||||
"stylelint-webpack-plugin": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"@nuxtjs/svg": {
|
||||
"version": "0.1.12",
|
||||
"resolved": "https://registry.npmjs.org/@nuxtjs/svg/-/svg-0.1.12.tgz",
|
||||
"integrity": "sha512-QJjArXOcQzDn7gzc/pFr960NTediubeZ5djtqV3BkOnZnANSOvtxFp2LnHF6e4rFq9CTEabPr89WZUwrVDemEQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"file-loader": "^6.0.0",
|
||||
"raw-loader": "^4.0.0",
|
||||
"url-loader": "^4.1.0",
|
||||
"vue-svg-loader": "^0.16.0"
|
||||
}
|
||||
},
|
||||
"@nuxtjs/toast": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@nuxtjs/toast/-/toast-3.3.1.tgz",
|
||||
@@ -54170,6 +54220,15 @@
|
||||
"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
|
||||
"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q="
|
||||
},
|
||||
"svg-to-vue": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/svg-to-vue/-/svg-to-vue-0.7.0.tgz",
|
||||
"integrity": "sha512-Tg2nMmf3BQorYCAjxbtTkYyWPVSeox5AZUFvfy4MoWK/5tuQlnA/h3LAlTjV3sEvOC5FtUNovRSj3p784l4KOA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"svgo": "^1.3.2"
|
||||
}
|
||||
},
|
||||
"svgo": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
|
||||
@@ -56091,6 +56150,16 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-svg-loader": {
|
||||
"version": "0.16.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-svg-loader/-/vue-svg-loader-0.16.0.tgz",
|
||||
"integrity": "sha512-2RtFXlTCYWm8YAEO2qAOZ2SuIF2NvLutB5muc3KDYoZq5ZeCHf8ggzSan3ksbbca7CJ/Aw57ZnDF4B7W/AkGtw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loader-utils": "^1.2.3",
|
||||
"svg-to-vue": "^0.7.0"
|
||||
}
|
||||
},
|
||||
"vue-template-compiler": {
|
||||
"version": "2.6.14",
|
||||
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz",
|
||||
|
||||
@@ -76,6 +76,7 @@
|
||||
"@nuxtjs/google-fonts": "^1.3.0",
|
||||
"@nuxtjs/pwa": "^3.3.5",
|
||||
"@nuxtjs/stylelint-module": "^4.0.0",
|
||||
"@nuxtjs/svg": "^0.1.12",
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@types/lodash": "^4.14.170",
|
||||
"@vue/test-utils": "^1.2.1",
|
||||
|
||||
298
pages/api.vue
298
pages/api.vue
@@ -10,7 +10,7 @@
|
||||
<li class="shrink">
|
||||
<label for="method">{{ $t("method") }}</label>
|
||||
<span class="select-wrapper">
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<input
|
||||
id="method"
|
||||
@@ -24,16 +24,14 @@
|
||||
v-for="(methodMenuItem, index) in methodMenuItems"
|
||||
:key="`method-${index}`"
|
||||
>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="
|
||||
<ButtonSecondary
|
||||
@click.native="
|
||||
customMethod =
|
||||
methodMenuItem == 'CUSTOM' ? true : false
|
||||
method = methodMenuItem
|
||||
"
|
||||
>
|
||||
{{ methodMenuItem }}
|
||||
</button>
|
||||
/>
|
||||
{{ methodMenuItem }}
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
@@ -57,31 +55,27 @@
|
||||
</li>
|
||||
<li class="shrink">
|
||||
<label class="hide-on-small-screen" for="send"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="!runningRequest"
|
||||
:disabled="!isValidURL"
|
||||
@click="sendRequest"
|
||||
@click.native="sendRequest"
|
||||
id="send"
|
||||
class="button"
|
||||
ref="sendButton"
|
||||
>
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
icon="send"
|
||||
:label="$t('send')"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-else
|
||||
@click="cancelRequest"
|
||||
@click.native="cancelRequest"
|
||||
id="send"
|
||||
class="button"
|
||||
ref="sendButton"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
<span>
|
||||
<i class="material-icons">clear</i>
|
||||
</span>
|
||||
</button>
|
||||
/>
|
||||
{{ $t("cancel") }}
|
||||
<span>
|
||||
<i class="material-icons">clear</i>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
@@ -108,7 +102,12 @@
|
||||
$t("content_type")
|
||||
}}</label>
|
||||
<span class="select-wrapper">
|
||||
<tippy trigger="click" theme="popover" arrow>
|
||||
<tippy
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<input
|
||||
id="contentType"
|
||||
@@ -123,12 +122,10 @@
|
||||
) in validContentTypes"
|
||||
:key="`content-type-${index}`"
|
||||
>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="contentType = contentTypeMenuItem"
|
||||
>
|
||||
{{ contentTypeMenuItem }}
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
@click.native="contentType = contentTypeMenuItem"
|
||||
/>
|
||||
{{ contentTypeMenuItem }}
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
@@ -177,55 +174,48 @@
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<span>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="showCurlImportModal = !showCurlImportModal"
|
||||
<ButtonSecondary
|
||||
@click.native="showCurlImportModal = !showCurlImportModal"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('import_curl')"
|
||||
>
|
||||
<i class="material-icons">import_export</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="showCodegenModal = !showCodegenModal"
|
||||
/>
|
||||
<i class="material-icons">import_export</i>
|
||||
|
||||
<ButtonSecondary
|
||||
@click.native="showCodegenModal = !showCodegenModal"
|
||||
:disabled="!isValidURL"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('show_code')"
|
||||
>
|
||||
<i class="material-icons">code</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">code</i>
|
||||
</span>
|
||||
<span>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="copyRequest"
|
||||
<ButtonSecondary
|
||||
@click.native="copyRequest"
|
||||
ref="copyRequest"
|
||||
:disabled="!isValidURL"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_request_link')"
|
||||
>
|
||||
<i v-if="navigatorShare" class="material-icons">share</i>
|
||||
<i v-else class="material-icons">content_copy</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="saveRequest"
|
||||
/>
|
||||
<i v-if="navigatorShare" class="material-icons">share</i>
|
||||
<i v-else class="material-icons">content_copy</i>
|
||||
|
||||
<ButtonSecondary
|
||||
@click.native="saveRequest"
|
||||
ref="saveRequest"
|
||||
:disabled="!isValidURL"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('save_to_collections')"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="clearContent('', $event)"
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
|
||||
<ButtonSecondary
|
||||
@click.native="clearContent('', $event)"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear_all')"
|
||||
ref="clearAll"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</span>
|
||||
</div>
|
||||
</AppSection>
|
||||
@@ -276,14 +266,12 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="auth">{{ $t("authentication") }}</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="clearContent('auth', $event)"
|
||||
<ButtonSecondary
|
||||
@click.native="clearContent('auth', $event)"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="select-wrapper">
|
||||
@@ -316,22 +304,20 @@
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
class="icon button"
|
||||
<ButtonSecondary
|
||||
ref="switchVisibility"
|
||||
@click="switchVisibility"
|
||||
@click.native="switchVisibility"
|
||||
/>
|
||||
<i
|
||||
class="material-icons"
|
||||
v-if="passwordFieldType === 'text'"
|
||||
>visibility</i
|
||||
>
|
||||
<i
|
||||
class="material-icons"
|
||||
v-if="passwordFieldType !== 'text'"
|
||||
>visibility_off</i
|
||||
>
|
||||
<i
|
||||
class="material-icons"
|
||||
v-if="passwordFieldType === 'text'"
|
||||
>visibility</i
|
||||
>
|
||||
<i
|
||||
class="material-icons"
|
||||
v-if="passwordFieldType !== 'text'"
|
||||
>visibility_off</i
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@@ -344,24 +330,23 @@
|
||||
name="bearer_token"
|
||||
v-model="bearerToken"
|
||||
/>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="auth === 'OAuth 2.0'"
|
||||
class="icon button"
|
||||
@click="showTokenListModal = !showTokenListModal"
|
||||
@click.native="
|
||||
showTokenListModal = !showTokenListModal
|
||||
"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('use_token')"
|
||||
>
|
||||
<i class="material-icons">open_in_new</i>
|
||||
</button>
|
||||
<button
|
||||
/>
|
||||
<i class="material-icons">open_in_new</i>
|
||||
|
||||
<ButtonSecondary
|
||||
v-if="auth === 'OAuth 2.0'"
|
||||
class="icon button"
|
||||
@click="showTokenRequest = !showTokenRequest"
|
||||
@click.native="showTokenRequest = !showTokenRequest"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('get_token')"
|
||||
>
|
||||
<i class="material-icons">vpn_key</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">vpn_key</i>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -384,30 +369,28 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="token-name">{{ $t("token_name") }}</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="showTokenRequestList = true"
|
||||
<ButtonSecondary
|
||||
@click.native="showTokenRequestList = true"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('manage_token_req')"
|
||||
>
|
||||
<i class="material-icons">library_add</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="clearContent('access_token', $event)"
|
||||
/>
|
||||
<i class="material-icons">library_add</i>
|
||||
|
||||
<ButtonSecondary
|
||||
@click.native="
|
||||
clearContent('access_token', $event)
|
||||
"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="showTokenRequest = false"
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
|
||||
<ButtonSecondary
|
||||
@click.native="showTokenRequest = false"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('close')"
|
||||
>
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">close</i>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
@@ -496,13 +479,11 @@
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="handleAccessTokenRequest"
|
||||
>
|
||||
<i class="material-icons">vpn_key</i>
|
||||
<span>{{ $t("request_token") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
@click.native="handleAccessTokenRequest"
|
||||
/>
|
||||
<i class="material-icons">vpn_key</i>
|
||||
<span>{{ $t("request_token") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</AppSection>
|
||||
@@ -518,19 +499,13 @@
|
||||
<div class="row-wrapper">
|
||||
<label>{{ $t("javascript_code") }}</label>
|
||||
<div>
|
||||
<a
|
||||
href="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<button
|
||||
class="icon button"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('wiki')"
|
||||
>
|
||||
<i class="material-icons">help_outline</i>
|
||||
</button>
|
||||
</a>
|
||||
<ButtonSecondary
|
||||
to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
|
||||
blank
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('wiki')"
|
||||
icon="help_outline"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SmartJsEditor
|
||||
@@ -558,19 +533,13 @@
|
||||
<div class="row-wrapper">
|
||||
<label>{{ $t("javascript_code") }}</label>
|
||||
<div>
|
||||
<a
|
||||
href="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<button
|
||||
class="icon button"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('wiki')"
|
||||
>
|
||||
<i class="material-icons">help_outline</i>
|
||||
</button>
|
||||
</a>
|
||||
<ButtonSecondary
|
||||
to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
|
||||
blank
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('wiki')"
|
||||
icon="help_outline"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SmartJsEditor
|
||||
@@ -590,14 +559,12 @@
|
||||
<div class="row-wrapper">
|
||||
<label>Test Reports</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon button"
|
||||
@click="clearContent('tests', $event)"
|
||||
<ButtonSecondary
|
||||
@click.native="clearContent('tests', $event)"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -722,33 +689,29 @@
|
||||
<template #header>
|
||||
<h3 class="heading">{{ $t("manage_token_req") }}</h3>
|
||||
<div>
|
||||
<button class="icon button" @click="showTokenRequestList = false">
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="showTokenRequestList = false" />
|
||||
<i class="material-icons">close</i>
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
<div class="row-wrapper">
|
||||
<label for="token-req-list">{{ $t("token_req_list") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
:disabled="this.tokenReqs.length === 0"
|
||||
class="icon button"
|
||||
@click="showTokenRequestList = false"
|
||||
@click.native="showTokenRequestList = false"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('use_token_req')"
|
||||
>
|
||||
<i class="material-icons">input</i>
|
||||
</button>
|
||||
<button
|
||||
/>
|
||||
<i class="material-icons">input</i>
|
||||
|
||||
<ButtonSecondary
|
||||
:disabled="this.tokenReqs.length === 0"
|
||||
class="icon button"
|
||||
@click="removeOAuthTokenReq"
|
||||
@click.native="removeOAuthTokenReq"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
@@ -788,9 +751,8 @@
|
||||
<template #footer>
|
||||
<span></span>
|
||||
<span>
|
||||
<button class="icon button primary" @click="addOAuthTokenReq">
|
||||
{{ $t("save_token_req") }}
|
||||
</button>
|
||||
<ButtonPrimary @click.native="addOAuthTokenReq" />
|
||||
{{ $t("save_token_req") }}
|
||||
</span>
|
||||
</template>
|
||||
</SmartModal>
|
||||
|
||||
@@ -10,15 +10,13 @@
|
||||
</p>
|
||||
<div class="row-wrapper">
|
||||
<label for="collectionUpload">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="JSON"
|
||||
class="icon button"
|
||||
@click="$refs.collectionUpload.click()"
|
||||
>
|
||||
<i class="material-icons">folder</i>
|
||||
<span>{{ $t("import_collections") }}</span>
|
||||
</button>
|
||||
icon="folder"
|
||||
:label="$t('import_collections')"
|
||||
@click.native="$refs.collectionUpload.click()"
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
ref="collectionUpload"
|
||||
@@ -28,14 +26,12 @@
|
||||
@change="uploadCollection"
|
||||
/>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
class="icon button"
|
||||
@click="collectionJSON = '[]'"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
icon="clear_all"
|
||||
@click.native="collectionJSON = '[]'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SmartAceEditor
|
||||
@@ -51,10 +47,11 @@
|
||||
useWorker: false,
|
||||
}"
|
||||
/>
|
||||
<button class="icon button" @click="getDoc">
|
||||
<i class="material-icons">topic</i>
|
||||
<span>{{ $t("generate_docs") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary
|
||||
icon="topic"
|
||||
:label="$t('generate_docs')"
|
||||
@click.native="getDoc"
|
||||
/>
|
||||
</div>
|
||||
</AppSection>
|
||||
|
||||
@@ -75,7 +72,7 @@
|
||||
: null,
|
||||
}"
|
||||
>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
:disabled="
|
||||
!currentUser
|
||||
? true
|
||||
@@ -83,12 +80,10 @@
|
||||
? true
|
||||
: false
|
||||
"
|
||||
class="icon button"
|
||||
@click="createDocsGist"
|
||||
>
|
||||
<i class="material-icons">assignment</i>
|
||||
<span>{{ $t("create_secret_gist") }}</span>
|
||||
</button>
|
||||
icon="assignment"
|
||||
label="$t('create_secret_gist')"
|
||||
@click.native="createDocsGist"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="get" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="get"
|
||||
name="get"
|
||||
class="
|
||||
@@ -27,15 +27,14 @@
|
||||
rounded-b-lg
|
||||
md:rounded-bl-none md:rounded-br-lg
|
||||
"
|
||||
@click="onPollSchemaClick"
|
||||
@click.native="onPollSchemaClick"
|
||||
/>
|
||||
{{ !isPollingSchema ? $t("connect") : $t("disconnect") }}
|
||||
<span
|
||||
><i class="material-icons">{{
|
||||
!isPollingSchema ? "sync" : "sync_disabled"
|
||||
}}</i></span
|
||||
>
|
||||
{{ !isPollingSchema ? $t("connect") : $t("disconnect") }}
|
||||
<span
|
||||
><i class="material-icons">{{
|
||||
!isPollingSchema ? "sync" : "sync_disabled"
|
||||
}}</i></span
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@@ -49,14 +48,12 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="headerList">{{ $t("header_list") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
class="icon button"
|
||||
@click="headers = []"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
@click.native="headers = []"
|
||||
/>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@@ -103,7 +100,7 @@
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: header.hasOwnProperty('active')
|
||||
@@ -112,8 +109,7 @@
|
||||
: $t('turn_on')
|
||||
: $t('turn_off'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="
|
||||
@click.native="
|
||||
$store.commit('setActiveGQLHeader', {
|
||||
index,
|
||||
value: header.hasOwnProperty('active')
|
||||
@@ -121,38 +117,34 @@
|
||||
: false,
|
||||
})
|
||||
"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
header.hasOwnProperty("active")
|
||||
? header.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
header.hasOwnProperty("active")
|
||||
? header.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</li>
|
||||
</div>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="removeRequestHeader(index)"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="removeRequestHeader(index)"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon button" @click="addRequestHeader">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="addRequestHeader" />
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -162,7 +154,7 @@
|
||||
<div class="row-wrapper">
|
||||
<label>{{ $t("schema") }}</label>
|
||||
<div v-if="schema">
|
||||
<button
|
||||
<ButtonSecondary
|
||||
ref="ToggleExpandResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
@@ -170,31 +162,27 @@
|
||||
? $t('expand_response')
|
||||
: $t('collapse_response'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="ToggleExpandResponse"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="ToggleExpandResponse"
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
|
||||
</i>
|
||||
|
||||
<ButtonSecondary
|
||||
ref="downloadSchema"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="downloadSchema"
|
||||
>
|
||||
<i class="material-icons">{{ downloadSchemaIcon }}</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="downloadSchema"
|
||||
/>
|
||||
<i class="material-icons">{{ downloadSchemaIcon }}</i>
|
||||
|
||||
<ButtonSecondary
|
||||
ref="copySchemaCode"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_schema')"
|
||||
class="icon button"
|
||||
@click="copySchema"
|
||||
>
|
||||
<i class="material-icons">{{ copySchemaIcon }}</i>
|
||||
</button>
|
||||
@click.native="copySchema"
|
||||
/>
|
||||
<i class="material-icons">{{ copySchemaIcon }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<SmartAceEditor
|
||||
@@ -227,42 +215,38 @@
|
||||
<div class="row-wrapper gqlRunQuery">
|
||||
<label for="gqlQuery">{{ $t("query") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="
|
||||
`${$t('run_query')} (${getSpecialKey()}-Enter)`
|
||||
"
|
||||
class="button"
|
||||
@click="runQuery()"
|
||||
>
|
||||
<i class="material-icons">play_arrow</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="runQuery()"
|
||||
/>
|
||||
<i class="material-icons">play_arrow</i>
|
||||
|
||||
<ButtonSecondary
|
||||
ref="copyQueryButton"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_query')"
|
||||
class="icon button"
|
||||
@click="copyQuery"
|
||||
>
|
||||
<i class="material-icons">{{ copyQueryIcon }}</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="copyQuery"
|
||||
/>
|
||||
<i class="material-icons">{{ copyQueryIcon }}</i>
|
||||
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
|
||||
class="icon button"
|
||||
@click="doPrettifyQuery"
|
||||
>
|
||||
<i class="material-icons">{{ prettifyIcon }}</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="doPrettifyQuery"
|
||||
/>
|
||||
<i class="material-icons">{{ prettifyIcon }}</i>
|
||||
|
||||
<ButtonSecondary
|
||||
ref="saveRequest"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('save_to_collections')"
|
||||
class="icon button"
|
||||
@click="saveRequest"
|
||||
>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
</button>
|
||||
@click.native="saveRequest"
|
||||
/>
|
||||
<i class="material-icons">create_new_folder</i>
|
||||
</div>
|
||||
</div>
|
||||
<GraphqlQueryEditor
|
||||
@@ -307,26 +291,23 @@
|
||||
<div class="row-wrapper">
|
||||
<label for="responseField">{{ $t("response_body") }}</label>
|
||||
<div>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-if="response"
|
||||
ref="downloadResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('download_file')"
|
||||
class="icon button"
|
||||
@click="downloadResponse"
|
||||
>
|
||||
<i class="material-icons">{{ downloadResponseIcon }}</i>
|
||||
</button>
|
||||
<button
|
||||
@click.native="downloadResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ downloadResponseIcon }}</i>
|
||||
|
||||
<ButtonSecondary
|
||||
v-if="response"
|
||||
ref="copyResponseButton"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('copy_response')"
|
||||
class="icon button"
|
||||
@click="copyResponse"
|
||||
>
|
||||
<i class="material-icons">{{ copyResponseIcon }}</i>
|
||||
</button>
|
||||
@click.native="copyResponse"
|
||||
/>
|
||||
<i class="material-icons">{{ copyResponseIcon }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<SmartAceEditor
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user