refactor: lint + minor ui fixes
This commit is contained in:
liyasthomas
@@ -37,7 +37,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
@apply bg-divider;
|
@apply bg-accentDark;
|
||||||
|
@apply text-accentContrast;
|
||||||
}
|
}
|
||||||
|
|
||||||
input::placeholder,
|
input::placeholder,
|
||||||
|
|||||||
@@ -1,16 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="bg-error flex justify-between">
|
<div class="bg-error flex justify-between">
|
||||||
<span
|
<span
|
||||||
class="
|
class="group relative flex items-center justify-center px-4 py-2 transition"
|
||||||
group
|
|
||||||
relative
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
transition
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<i class="material-icons mr-2">info_outline</i>
|
<i class="material-icons mr-2">info_outline</i>
|
||||||
<span class="text-secondaryDark">
|
<span class="text-secondaryDark">
|
||||||
|
|||||||
@@ -53,12 +53,7 @@
|
|||||||
:title="t('team.invite_tooltip')"
|
:title="t('team.invite_tooltip')"
|
||||||
:label="t('team.invite')"
|
:label="t('team.invite')"
|
||||||
svg="user-plus"
|
svg="user-plus"
|
||||||
class="
|
class="!bg-green-500 !text-green-500 !bg-opacity-15 !hover:bg-opacity-10 !hover:text-green-600 !hover:bg-green-400"
|
||||||
!bg-green-500
|
|
||||||
!text-green-500
|
|
||||||
!bg-opacity-15
|
|
||||||
!hover:bg-opacity-10 !hover:text-green-600 !hover:bg-green-400
|
|
||||||
"
|
|
||||||
@click.native="showTeamsModal = true"
|
@click.native="showTeamsModal = true"
|
||||||
/>
|
/>
|
||||||
<span class="px-2">
|
<span class="px-2">
|
||||||
|
|||||||
@@ -14,16 +14,7 @@
|
|||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
name="command"
|
name="command"
|
||||||
:placeholder="`${t('app.type_a_command_search')}`"
|
:placeholder="`${t('app.type_a_command_search')}`"
|
||||||
class="
|
class="border-dividerLight text-secondaryDark flex flex-shrink-0 p-6 text-base bg-transparent border-b"
|
||||||
flex
|
|
||||||
border-dividerLight
|
|
||||||
text-secondaryDark
|
|
||||||
flex-shrink-0
|
|
||||||
p-6
|
|
||||||
text-base
|
|
||||||
bg-transparent
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
/>
|
/>
|
||||||
<AppFuse
|
<AppFuse
|
||||||
v-if="search && show"
|
v-if="search && show"
|
||||||
@@ -33,22 +24,14 @@
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
v-else
|
v-else
|
||||||
class="
|
class="divide-dividerLight hide-scrollbar flex flex-col flex-1 space-y-4 overflow-auto divide-y"
|
||||||
flex flex-col
|
|
||||||
divide-dividerLight
|
|
||||||
hide-scrollbar
|
|
||||||
flex-1
|
|
||||||
space-y-4
|
|
||||||
overflow-auto
|
|
||||||
divide-y
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-for="(map, mapIndex) in mappings"
|
v-for="(map, mapIndex) in mappings"
|
||||||
:key="`map-${mapIndex}`"
|
:key="`map-${mapIndex}`"
|
||||||
class="flex flex-col"
|
class="flex flex-col"
|
||||||
>
|
>
|
||||||
<h5 class="px-6 py-2 my-2 text-secondaryLight">
|
<h5 class="text-secondaryLight px-6 py-2 my-2">
|
||||||
{{ t(map.section) }}
|
{{ t(map.section) }}
|
||||||
</h5>
|
</h5>
|
||||||
<AppPowerSearchEntry
|
<AppPowerSearchEntry
|
||||||
|
|||||||
@@ -1,23 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<button
|
<button
|
||||||
class="
|
class="search-entry focus:outline-none flex items-center flex-1 px-6 py-2 transition cursor-pointer"
|
||||||
search-entry
|
|
||||||
focus:outline-none
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
flex-1
|
|
||||||
px-6
|
|
||||||
py-2
|
|
||||||
transition
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
:class="{ active: active }"
|
:class="{ active: active }"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
@click="$emit('action', shortcut.action)"
|
@click="$emit('action', shortcut.action)"
|
||||||
@keydown.enter="$emit('action', shortcut.action)"
|
@keydown.enter="$emit('action', shortcut.action)"
|
||||||
>
|
>
|
||||||
<SmartIcon
|
<SmartIcon
|
||||||
class="mr-4 opacity-50 svg-icons transition"
|
class="svg-icons mr-4 transition opacity-50"
|
||||||
:class="{ 'opacity-100 text-secondaryDark': active }"
|
:class="{ 'opacity-100 text-secondaryDark': active }"
|
||||||
:name="shortcut.icon"
|
:name="shortcut.icon"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -2,62 +2,34 @@
|
|||||||
<AppSlideOver :show="show" @close="close()">
|
<AppSlideOver :show="show" @close="close()">
|
||||||
<template #content>
|
<template #content>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between p-2 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
sticky
|
|
||||||
top-0
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
p-2
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
|
<h3 class="heading ml-4">{{ t("app.shortcuts") }}</h3>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<ButtonSecondary svg="x" class="rounded" @click.native="close()" />
|
<ButtonSecondary svg="x" class="rounded" @click.native="close()" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="border-b bg-primary border-dividerLight">
|
<div class="bg-primary border-dividerLight border-b">
|
||||||
<div class="flex flex-col mx-6 my-4">
|
<div class="flex flex-col mx-6 my-4">
|
||||||
<input
|
<input
|
||||||
v-model="filterText"
|
v-model="filterText"
|
||||||
type="search"
|
type="search"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
class="
|
class="bg-primaryLight border-dividerLight focus-visible:border-divider flex w-full px-4 py-2 border rounded"
|
||||||
bg-primaryLight
|
|
||||||
border-dividerLight
|
|
||||||
focus-visible:border-divider
|
|
||||||
flex
|
|
||||||
w-full
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
border
|
|
||||||
rounded
|
|
||||||
"
|
|
||||||
:placeholder="`${t('action.search')}`"
|
:placeholder="`${t('action.search')}`"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="filterText"
|
v-if="filterText"
|
||||||
class="
|
class="divide-dividerLight hide-scrollbar flex flex-col flex-1 overflow-auto divide-y"
|
||||||
flex flex-col
|
|
||||||
divide-dividerLight
|
|
||||||
hide-scrollbar
|
|
||||||
flex-1
|
|
||||||
overflow-auto
|
|
||||||
divide-y
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-for="(map, mapIndex) in searchResults"
|
v-for="(map, mapIndex) in searchResults"
|
||||||
:key="`map-${mapIndex}`"
|
:key="`map-${mapIndex}`"
|
||||||
class="px-6 py-4 space-y-4"
|
class="px-6 py-4 space-y-4"
|
||||||
>
|
>
|
||||||
<h1 class="font-semibold text-secondaryDark">
|
<h1 class="text-secondaryDark font-semibold">
|
||||||
{{ t(map.item.section) }}
|
{{ t(map.item.section) }}
|
||||||
</h1>
|
</h1>
|
||||||
<AppShortcutsEntry
|
<AppShortcutsEntry
|
||||||
@@ -68,16 +40,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="searchResults.length === 0"
|
v-if="searchResults.length === 0"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<i class="pb-2 opacity-75 material-icons">manage_search</i>
|
<i class="material-icons pb-2 opacity-75">manage_search</i>
|
||||||
<span class="text-center">
|
<span class="text-center">
|
||||||
{{ t("state.nothing_found") }} "{{ filterText }}"
|
{{ t("state.nothing_found") }} "{{ filterText }}"
|
||||||
</span>
|
</span>
|
||||||
@@ -85,21 +50,14 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-else
|
v-else
|
||||||
class="
|
class="divide-dividerLight hide-scrollbar flex flex-col flex-1 overflow-auto divide-y"
|
||||||
flex flex-col
|
|
||||||
divide-dividerLight
|
|
||||||
hide-scrollbar
|
|
||||||
flex-1
|
|
||||||
overflow-auto
|
|
||||||
divide-y
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-for="(map, mapIndex) in mappings"
|
v-for="(map, mapIndex) in mappings"
|
||||||
:key="`map-${mapIndex}`"
|
:key="`map-${mapIndex}`"
|
||||||
class="px-6 py-4 space-y-4"
|
class="px-6 py-4 space-y-4"
|
||||||
>
|
>
|
||||||
<h1 class="font-semibold text-secondaryDark">
|
<h1 class="text-secondaryDark font-semibold">
|
||||||
{{ t(map.section) }}
|
{{ t(map.section) }}
|
||||||
</h1>
|
</h1>
|
||||||
<AppShortcutsEntry
|
<AppShortcutsEntry
|
||||||
|
|||||||
@@ -3,30 +3,14 @@
|
|||||||
<transition v-if="show" name="fade" appear>
|
<transition v-if="show" name="fade" appear>
|
||||||
<div class="fixed inset-0 z-20 transition-opacity" @keydown.esc="close()">
|
<div class="fixed inset-0 z-20 transition-opacity" @keydown.esc="close()">
|
||||||
<div
|
<div
|
||||||
class="absolute inset-0 bg-primaryLight opacity-90"
|
class="bg-primaryLight opacity-90 absolute inset-0"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
@click="close()"
|
@click="close()"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
<aside
|
<aside
|
||||||
class="
|
class="bg-primary w-96 fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto transition duration-300 ease-in-out transform"
|
||||||
flex
|
|
||||||
bg-primary
|
|
||||||
w-96
|
|
||||||
fixed
|
|
||||||
top-0
|
|
||||||
right-0
|
|
||||||
z-30
|
|
||||||
flex-col
|
|
||||||
h-full
|
|
||||||
max-w-full
|
|
||||||
overflow-auto
|
|
||||||
transition
|
|
||||||
duration-300
|
|
||||||
ease-in-out
|
|
||||||
transform
|
|
||||||
"
|
|
||||||
:class="show ? 'shadow-xl translate-x-0' : 'translate-x-full'"
|
:class="show ? 'shadow-xl translate-x-0' : 'translate-x-full'"
|
||||||
>
|
>
|
||||||
<slot name="content"></slot>
|
<slot name="content"></slot>
|
||||||
|
|||||||
@@ -3,16 +3,7 @@
|
|||||||
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
|
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
|
||||||
:exact="exact"
|
:exact="exact"
|
||||||
:blank="blank"
|
:blank="blank"
|
||||||
class="
|
class="focus:outline-none focus-visible:bg-accentDark inline-flex items-center justify-center py-2 font-bold transition"
|
||||||
focus:outline-none
|
|
||||||
focus-visible:bg-accentDark
|
|
||||||
inline-flex
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
py-2
|
|
||||||
font-bold
|
|
||||||
transition
|
|
||||||
"
|
|
||||||
:class="[
|
:class="[
|
||||||
color
|
color
|
||||||
? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)`
|
? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)`
|
||||||
@@ -38,7 +29,7 @@
|
|||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
v-if="!loading"
|
v-if="!loading"
|
||||||
class="inline-flex items-center justify-center whitespace-nowrap"
|
class="whitespace-nowrap inline-flex items-center justify-center"
|
||||||
:class="{ 'flex-row-reverse': reverse }"
|
:class="{ 'flex-row-reverse': reverse }"
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
@@ -65,7 +56,7 @@
|
|||||||
<kbd
|
<kbd
|
||||||
v-for="(key, index) in shortcut"
|
v-for="(key, index) in shortcut"
|
||||||
:key="`key-${index}`"
|
:key="`key-${index}`"
|
||||||
class="inline-flex px-1 ml-1 rounded bg-accentLight"
|
class="bg-accentLight inline-flex px-1 ml-1 rounded"
|
||||||
>
|
>
|
||||||
{{ key }}
|
{{ key }}
|
||||||
</kbd>
|
</kbd>
|
||||||
|
|||||||
@@ -3,18 +3,7 @@
|
|||||||
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
|
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
|
||||||
:exact="exact"
|
:exact="exact"
|
||||||
:blank="blank"
|
:blank="blank"
|
||||||
class="
|
class="whitespace-nowrap hover:bg-primaryDark focus:outline-none focus-visible:bg-primaryDark inline-flex items-center justify-center py-2 font-semibold transition"
|
||||||
whitespace-nowrap
|
|
||||||
hover:bg-primaryDark
|
|
||||||
focus:outline-none
|
|
||||||
focus-visible:bg-primaryDark
|
|
||||||
inline-flex
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
py-2
|
|
||||||
font-semibold
|
|
||||||
transition
|
|
||||||
"
|
|
||||||
:class="[
|
:class="[
|
||||||
color
|
color
|
||||||
? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)`
|
? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)`
|
||||||
@@ -28,7 +17,7 @@
|
|||||||
'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
|
'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
|
||||||
outline,
|
outline,
|
||||||
},
|
},
|
||||||
{ '!bg-primaryDark': filled },
|
{ '!bg-primaryLight !hover:bg-primaryDark': filled },
|
||||||
]"
|
]"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
>
|
>
|
||||||
@@ -56,14 +45,7 @@
|
|||||||
<kbd
|
<kbd
|
||||||
v-for="(key, index) in shortcut"
|
v-for="(key, index) in shortcut"
|
||||||
:key="`key-${index}`"
|
:key="`key-${index}`"
|
||||||
class="
|
class="bg-dividerLight text-secondaryLight inline-flex px-1 ml-1 rounded"
|
||||||
bg-dividerLight
|
|
||||||
text-secondaryLight
|
|
||||||
inline-flex
|
|
||||||
px-1
|
|
||||||
ml-1
|
|
||||||
rounded
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
{{ key }}
|
{{ key }}
|
||||||
</kbd>
|
</kbd>
|
||||||
|
|||||||
@@ -18,19 +18,7 @@
|
|||||||
type="text"
|
type="text"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
autofocus
|
autofocus
|
||||||
class="
|
class="border-dividerLight hover:bg-primaryDark flex w-full px-4 py-2 font-semibold bg-transparent border-t appearance-none cursor-pointer"
|
||||||
border-dividerLight
|
|
||||||
hover:bg-primaryDark
|
|
||||||
flex
|
|
||||||
w-full
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
font-semibold
|
|
||||||
bg-transparent
|
|
||||||
border-t
|
|
||||||
appearance-none
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
@change="updateSelectedTeam(myTeams[$event.target.value])"
|
@change="updateSelectedTeam(myTeams[$event.target.value])"
|
||||||
>
|
>
|
||||||
<option
|
<option
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
||||||
<div
|
<div
|
||||||
class="flex items-center group"
|
class="group flex items-center"
|
||||||
@dragover.prevent
|
@dragover.prevent
|
||||||
@drop.prevent="dropEvent"
|
@drop.prevent="dropEvent"
|
||||||
@dragover="dragging = true"
|
@dragover="dragging = true"
|
||||||
@@ -20,16 +20,7 @@
|
|||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="
|
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
|
||||||
flex
|
|
||||||
group-hover:text-secondaryDark
|
|
||||||
flex-1
|
|
||||||
min-w-0
|
|
||||||
py-2
|
|
||||||
pr-2
|
|
||||||
transition
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
>
|
>
|
||||||
<span class="truncate"> {{ collection.name }} </span>
|
<span class="truncate"> {{ collection.name }} </span>
|
||||||
@@ -39,7 +30,7 @@
|
|||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
svg="folder-plus"
|
svg="folder-plus"
|
||||||
:title="$t('folder.new')"
|
:title="$t('folder.new')"
|
||||||
class="hidden group-hover:inline-flex"
|
class="group-hover:inline-flex hidden"
|
||||||
@click.native="
|
@click.native="
|
||||||
$emit('add-folder', {
|
$emit('add-folder', {
|
||||||
path: `${collectionIndex}`,
|
path: `${collectionIndex}`,
|
||||||
@@ -100,16 +91,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-if="showChildren || isFiltered" class="flex">
|
<div v-if="showChildren || isFiltered" class="flex">
|
||||||
<div
|
<div
|
||||||
class="
|
class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
|
||||||
flex
|
|
||||||
w-1
|
|
||||||
transform
|
|
||||||
transition
|
|
||||||
cursor-nsResize
|
|
||||||
ml-5.5
|
|
||||||
bg-dividerLight
|
|
||||||
hover:scale-x-125 hover:bg-dividerDark
|
|
||||||
"
|
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
></div>
|
></div>
|
||||||
<div class="flex flex-col flex-1 truncate">
|
<div class="flex flex-col flex-1 truncate">
|
||||||
@@ -150,27 +132,12 @@
|
|||||||
v-if="
|
v-if="
|
||||||
collection.folders.length === 0 && collection.requests.length === 0
|
collection.folders.length === 0 && collection.requests.length === 0
|
||||||
"
|
"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/pack.svg`"
|
:src="`/images/states/${$colorMode.value}/pack.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="
|
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
|
||||||
object-contain
|
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
object-center
|
|
||||||
w-16
|
|
||||||
h-16
|
|
||||||
mb-4
|
|
||||||
"
|
|
||||||
:alt="$t('empty.collection')"
|
:alt="$t('empty.collection')"
|
||||||
/>
|
/>
|
||||||
<span class="text-center">
|
<span class="text-center">
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
||||||
<div
|
<div
|
||||||
class="flex items-center group"
|
class="group flex items-center"
|
||||||
@dragover.prevent
|
@dragover.prevent
|
||||||
@drop.prevent="dropEvent"
|
@drop.prevent="dropEvent"
|
||||||
@dragover="dragging = true"
|
@dragover="dragging = true"
|
||||||
@@ -20,16 +20,7 @@
|
|||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="
|
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
|
||||||
flex
|
|
||||||
group-hover:text-secondaryDark
|
|
||||||
flex-1
|
|
||||||
min-w-0
|
|
||||||
py-2
|
|
||||||
pr-2
|
|
||||||
transition
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
>
|
>
|
||||||
<span class="truncate">
|
<span class="truncate">
|
||||||
@@ -41,7 +32,7 @@
|
|||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
svg="folder-plus"
|
svg="folder-plus"
|
||||||
:title="$t('folder.new')"
|
:title="$t('folder.new')"
|
||||||
class="hidden group-hover:inline-flex"
|
class="group-hover:inline-flex hidden"
|
||||||
@click.native="$emit('add-folder', { folder, path: folderPath })"
|
@click.native="$emit('add-folder', { folder, path: folderPath })"
|
||||||
/>
|
/>
|
||||||
<span>
|
<span>
|
||||||
@@ -96,16 +87,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-if="showChildren || isFiltered" class="flex">
|
<div v-if="showChildren || isFiltered" class="flex">
|
||||||
<div
|
<div
|
||||||
class="
|
class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
|
||||||
flex
|
|
||||||
w-1
|
|
||||||
transform
|
|
||||||
transition
|
|
||||||
cursor-nsResize
|
|
||||||
ml-5.5
|
|
||||||
bg-dividerLight
|
|
||||||
hover:scale-x-125 hover:bg-dividerDark
|
|
||||||
"
|
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
></div>
|
></div>
|
||||||
<div class="flex flex-col flex-1 truncate">
|
<div class="flex flex-col flex-1 truncate">
|
||||||
@@ -149,27 +131,12 @@
|
|||||||
folder.requests &&
|
folder.requests &&
|
||||||
folder.requests.length === 0
|
folder.requests.length === 0
|
||||||
"
|
"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/pack.svg`"
|
:src="`/images/states/${$colorMode.value}/pack.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="
|
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
|
||||||
object-contain
|
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
object-center
|
|
||||||
w-16
|
|
||||||
h-16
|
|
||||||
mb-4
|
|
||||||
"
|
|
||||||
:alt="$t('empty.folder')"
|
:alt="$t('empty.folder')"
|
||||||
/>
|
/>
|
||||||
<span class="text-center">
|
<span class="text-center">
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
||||||
<div
|
<div
|
||||||
class="flex items-center group"
|
class="group flex items-center"
|
||||||
draggable="true"
|
draggable="true"
|
||||||
@dragstart="dragStart"
|
@dragstart="dragStart"
|
||||||
@dragover.stop
|
@dragover.stop
|
||||||
@@ -9,15 +9,7 @@
|
|||||||
@dragend="dragging = false"
|
@dragend="dragging = false"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="
|
class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
w-16
|
|
||||||
px-2
|
|
||||||
truncate
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
@click="!doc ? selectRequest() : {}"
|
@click="!doc ? selectRequest() : {}"
|
||||||
>
|
>
|
||||||
<SmartIcon
|
<SmartIcon
|
||||||
@@ -27,16 +19,7 @@
|
|||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="
|
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
|
||||||
flex
|
|
||||||
group-hover:text-secondaryDark
|
|
||||||
flex-1
|
|
||||||
min-w-0
|
|
||||||
py-2
|
|
||||||
pr-2
|
|
||||||
transition
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
@click="!doc ? selectRequest() : {}"
|
@click="!doc ? selectRequest() : {}"
|
||||||
>
|
>
|
||||||
<span class="truncate"> {{ request.name }} </span>
|
<span class="truncate"> {{ request.name }} </span>
|
||||||
@@ -47,7 +30,7 @@
|
|||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
svg="rotate-ccw"
|
svg="rotate-ccw"
|
||||||
:title="$t('action.restore')"
|
:title="$t('action.restore')"
|
||||||
class="hidden group-hover:inline-flex"
|
class="group-hover:inline-flex hidden"
|
||||||
@click.native="!doc ? selectRequest() : {}"
|
@click.native="!doc ? selectRequest() : {}"
|
||||||
/>
|
/>
|
||||||
<span>
|
<span>
|
||||||
|
|||||||
@@ -4,17 +4,7 @@
|
|||||||
:class="{ 'rounded border border-divider': savingMode }"
|
:class="{ 'rounded border border-divider': savingMode }"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="
|
class="divide-dividerLight border-dividerLight sticky top-0 z-10 flex flex-col border-b divide-y"
|
||||||
flex
|
|
||||||
divide-dividerLight
|
|
||||||
border-dividerLight
|
|
||||||
sticky
|
|
||||||
top-0
|
|
||||||
z-10
|
|
||||||
flex-col
|
|
||||||
border-b
|
|
||||||
divide-y
|
|
||||||
"
|
|
||||||
:class="{ 'bg-primary': !savingMode }"
|
:class="{ 'bg-primary': !savingMode }"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
@@ -72,7 +62,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="collections.length === 0"
|
v-if="collections.length === 0"
|
||||||
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/pack.svg`"
|
:src="`/images/states/${$colorMode.value}/pack.svg`"
|
||||||
@@ -91,9 +81,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
|
v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
|
||||||
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
>
|
>
|
||||||
<i class="pb-2 opacity-75 material-icons">manage_search</i>
|
<i class="material-icons pb-2 opacity-75">manage_search</i>
|
||||||
<span class="text-center">
|
<span class="text-center">
|
||||||
{{ $t("state.nothing_found") }} "{{ filterText }}"
|
{{ $t("state.nothing_found") }} "{{ filterText }}"
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -4,19 +4,7 @@
|
|||||||
:class="{ 'rounded border border-divider': saveRequest }"
|
:class="{ 'rounded border border-divider': saveRequest }"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="
|
class="divide-dividerLight bg-primary border-dividerLight sticky top-0 z-10 flex flex-col border-b divide-y rounded-t"
|
||||||
flex
|
|
||||||
divide-dividerLight
|
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
sticky
|
|
||||||
top-0
|
|
||||||
z-10
|
|
||||||
flex-col
|
|
||||||
border-b
|
|
||||||
divide-y
|
|
||||||
rounded-t
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div v-if="!saveRequest" class="search-wrappe">
|
<div v-if="!saveRequest" class="search-wrappe">
|
||||||
<input
|
<input
|
||||||
@@ -110,7 +98,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="filteredCollections.length === 0 && filterText.length === 0"
|
v-if="filteredCollections.length === 0 && filterText.length === 0"
|
||||||
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/pack.svg`"
|
:src="`/images/states/${$colorMode.value}/pack.svg`"
|
||||||
@@ -143,9 +131,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="filterText.length !== 0 && filteredCollections.length === 0"
|
v-if="filterText.length !== 0 && filteredCollections.length === 0"
|
||||||
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
>
|
>
|
||||||
<i class="pb-2 opacity-75 material-icons">manage_search</i>
|
<i class="material-icons pb-2 opacity-75">manage_search</i>
|
||||||
<span class="text-center">
|
<span class="text-center">
|
||||||
{{ $t("state.nothing_found") }} "{{ filterText }}"
|
{{ $t("state.nothing_found") }} "{{ filterText }}"
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
||||||
<div
|
<div
|
||||||
class="flex items-center group"
|
class="group flex items-center"
|
||||||
@dragover.prevent
|
@dragover.prevent
|
||||||
@drop.prevent="dropEvent"
|
@drop.prevent="dropEvent"
|
||||||
@dragover="dragging = true"
|
@dragover="dragging = true"
|
||||||
@@ -20,16 +20,7 @@
|
|||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="
|
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
|
||||||
flex
|
|
||||||
group-hover:text-secondaryDark
|
|
||||||
flex-1
|
|
||||||
min-w-0
|
|
||||||
py-2
|
|
||||||
pr-2
|
|
||||||
transition
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
>
|
>
|
||||||
<span class="truncate"> {{ collection.name }} </span>
|
<span class="truncate"> {{ collection.name }} </span>
|
||||||
@@ -56,7 +47,7 @@
|
|||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
svg="folder-plus"
|
svg="folder-plus"
|
||||||
:title="$t('folder.new')"
|
:title="$t('folder.new')"
|
||||||
class="hidden group-hover:inline-flex"
|
class="group-hover:inline-flex hidden"
|
||||||
@click.native="
|
@click.native="
|
||||||
$emit('add-folder', {
|
$emit('add-folder', {
|
||||||
folder: collection,
|
folder: collection,
|
||||||
@@ -119,16 +110,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-if="showChildren || isFiltered" class="flex">
|
<div v-if="showChildren || isFiltered" class="flex">
|
||||||
<div
|
<div
|
||||||
class="
|
class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
|
||||||
flex
|
|
||||||
w-1
|
|
||||||
transform
|
|
||||||
transition
|
|
||||||
cursor-nsResize
|
|
||||||
ml-5.5
|
|
||||||
bg-dividerLight
|
|
||||||
hover:scale-x-125 hover:bg-dividerDark
|
|
||||||
"
|
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
></div>
|
></div>
|
||||||
<div class="flex flex-col flex-1 truncate">
|
<div class="flex flex-col flex-1 truncate">
|
||||||
@@ -176,27 +158,12 @@
|
|||||||
(collection.requests == undefined ||
|
(collection.requests == undefined ||
|
||||||
collection.requests.length === 0)
|
collection.requests.length === 0)
|
||||||
"
|
"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/pack.svg`"
|
:src="`/images/states/${$colorMode.value}/pack.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="
|
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
|
||||||
object-contain
|
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
object-center
|
|
||||||
w-16
|
|
||||||
h-16
|
|
||||||
mb-4
|
|
||||||
"
|
|
||||||
:alt="$t('empty.collection')"
|
:alt="$t('empty.collection')"
|
||||||
/>
|
/>
|
||||||
<span class="text-center">
|
<span class="text-center">
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
||||||
<div
|
<div
|
||||||
class="flex items-center group"
|
class="group flex items-center"
|
||||||
@dragover.prevent
|
@dragover.prevent
|
||||||
@drop.prevent="dropEvent"
|
@drop.prevent="dropEvent"
|
||||||
@dragover="dragging = true"
|
@dragover="dragging = true"
|
||||||
@@ -20,16 +20,7 @@
|
|||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="
|
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
|
||||||
flex
|
|
||||||
group-hover:text-secondaryDark
|
|
||||||
flex-1
|
|
||||||
min-w-0
|
|
||||||
py-2
|
|
||||||
pr-2
|
|
||||||
transition
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
>
|
>
|
||||||
<span class="truncate">
|
<span class="truncate">
|
||||||
@@ -41,7 +32,7 @@
|
|||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
svg="folder-plus"
|
svg="folder-plus"
|
||||||
:title="$t('folder.new')"
|
:title="$t('folder.new')"
|
||||||
class="hidden group-hover:inline-flex"
|
class="group-hover:inline-flex hidden"
|
||||||
@click.native="$emit('add-folder', { folder, path: folderPath })"
|
@click.native="$emit('add-folder', { folder, path: folderPath })"
|
||||||
/>
|
/>
|
||||||
<span>
|
<span>
|
||||||
@@ -101,16 +92,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-if="showChildren || isFiltered" class="flex">
|
<div v-if="showChildren || isFiltered" class="flex">
|
||||||
<div
|
<div
|
||||||
class="
|
class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
|
||||||
flex
|
|
||||||
w-1
|
|
||||||
transform
|
|
||||||
transition
|
|
||||||
cursor-nsResize
|
|
||||||
ml-5.5
|
|
||||||
bg-dividerLight
|
|
||||||
hover:scale-x-125 hover:bg-dividerDark
|
|
||||||
"
|
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
></div>
|
></div>
|
||||||
<div class="flex flex-col flex-1 truncate">
|
<div class="flex flex-col flex-1 truncate">
|
||||||
@@ -158,27 +140,12 @@
|
|||||||
folder.requests &&
|
folder.requests &&
|
||||||
folder.requests.length === 0
|
folder.requests.length === 0
|
||||||
"
|
"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/pack.svg`"
|
:src="`/images/states/${$colorMode.value}/pack.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="
|
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
|
||||||
object-contain
|
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
object-center
|
|
||||||
w-16
|
|
||||||
h-16
|
|
||||||
mb-4
|
|
||||||
"
|
|
||||||
:alt="$t('empty.folder')"
|
:alt="$t('empty.folder')"
|
||||||
/>
|
/>
|
||||||
<span class="text-center">
|
<span class="text-center">
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
||||||
<div
|
<div
|
||||||
class="flex items-center group"
|
class="group flex items-center"
|
||||||
draggable="true"
|
draggable="true"
|
||||||
@dragstart="dragStart"
|
@dragstart="dragStart"
|
||||||
@dragover.stop
|
@dragover.stop
|
||||||
@@ -9,15 +9,7 @@
|
|||||||
@dragend="dragging = false"
|
@dragend="dragging = false"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="
|
class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
w-16
|
|
||||||
px-2
|
|
||||||
truncate
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
:class="getRequestLabelColor(request.method)"
|
:class="getRequestLabelColor(request.method)"
|
||||||
@click="!doc ? selectRequest() : {}"
|
@click="!doc ? selectRequest() : {}"
|
||||||
>
|
>
|
||||||
@@ -32,17 +24,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="
|
class="group-hover:text-secondaryDark flex items-center flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
|
||||||
group-hover:text-secondaryDark
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
flex-1
|
|
||||||
min-w-0
|
|
||||||
py-2
|
|
||||||
pr-2
|
|
||||||
transition
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
@click="!doc ? selectRequest() : {}"
|
@click="!doc ? selectRequest() : {}"
|
||||||
>
|
>
|
||||||
<span class="truncate"> {{ request.name }} </span>
|
<span class="truncate"> {{ request.name }} </span>
|
||||||
@@ -62,7 +44,7 @@
|
|||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
svg="rotate-ccw"
|
svg="rotate-ccw"
|
||||||
:title="$t('action.restore')"
|
:title="$t('action.restore')"
|
||||||
class="hidden group-hover:inline-flex"
|
class="group-hover:inline-flex hidden"
|
||||||
@click.native="!doc ? selectRequest() : {}"
|
@click.native="!doc ? selectRequest() : {}"
|
||||||
/>
|
/>
|
||||||
<span>
|
<span>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<div class="flex items-center group">
|
<div class="group flex items-center">
|
||||||
<span
|
<span
|
||||||
class="flex items-center justify-center px-4 cursor-pointer"
|
class="flex items-center justify-center px-4 cursor-pointer"
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
@@ -12,16 +12,7 @@
|
|||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="
|
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
|
||||||
flex
|
|
||||||
group-hover:text-secondaryDark
|
|
||||||
flex-1
|
|
||||||
min-w-0
|
|
||||||
py-2
|
|
||||||
pr-2
|
|
||||||
transition
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
>
|
>
|
||||||
<span class="truncate"> {{ collection.title }} </span>
|
<span class="truncate"> {{ collection.title }} </span>
|
||||||
@@ -48,7 +39,7 @@
|
|||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
svg="folder-plus"
|
svg="folder-plus"
|
||||||
:title="$t('folder.new')"
|
:title="$t('folder.new')"
|
||||||
class="hidden group-hover:inline-flex"
|
class="group-hover:inline-flex hidden"
|
||||||
@click.native="
|
@click.native="
|
||||||
$emit('add-folder', {
|
$emit('add-folder', {
|
||||||
folder: collection,
|
folder: collection,
|
||||||
@@ -115,16 +106,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-if="showChildren || isFiltered" class="flex">
|
<div v-if="showChildren || isFiltered" class="flex">
|
||||||
<div
|
<div
|
||||||
class="
|
class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
|
||||||
flex
|
|
||||||
w-1
|
|
||||||
transform
|
|
||||||
transition
|
|
||||||
cursor-nsResize
|
|
||||||
ml-5.5
|
|
||||||
bg-dividerLight
|
|
||||||
hover:scale-x-125 hover:bg-dividerDark
|
|
||||||
"
|
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
></div>
|
></div>
|
||||||
<div class="flex flex-col flex-1 truncate">
|
<div class="flex flex-col flex-1 truncate">
|
||||||
@@ -170,27 +152,12 @@
|
|||||||
(collection.requests == undefined ||
|
(collection.requests == undefined ||
|
||||||
collection.requests.length === 0)
|
collection.requests.length === 0)
|
||||||
"
|
"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/pack.svg`"
|
:src="`/images/states/${$colorMode.value}/pack.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="
|
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
|
||||||
object-contain
|
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
object-center
|
|
||||||
w-16
|
|
||||||
h-16
|
|
||||||
mb-4
|
|
||||||
"
|
|
||||||
:alt="$t('empty.collection')"
|
:alt="$t('empty.collection')"
|
||||||
/>
|
/>
|
||||||
<span class="text-center">
|
<span class="text-center">
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<div class="flex items-center group">
|
<div class="group flex items-center">
|
||||||
<span
|
<span
|
||||||
class="flex items-center justify-center px-4 cursor-pointer"
|
class="flex items-center justify-center px-4 cursor-pointer"
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
@@ -12,16 +12,7 @@
|
|||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="
|
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
|
||||||
flex
|
|
||||||
group-hover:text-secondaryDark
|
|
||||||
flex-1
|
|
||||||
min-w-0
|
|
||||||
py-2
|
|
||||||
pr-2
|
|
||||||
transition
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
>
|
>
|
||||||
<span class="truncate">
|
<span class="truncate">
|
||||||
@@ -34,7 +25,7 @@
|
|||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
svg="folder-plus"
|
svg="folder-plus"
|
||||||
:title="$t('folder.new')"
|
:title="$t('folder.new')"
|
||||||
class="hidden group-hover:inline-flex"
|
class="group-hover:inline-flex hidden"
|
||||||
@click.native="$emit('add-folder', { folder, path: folderPath })"
|
@click.native="$emit('add-folder', { folder, path: folderPath })"
|
||||||
/>
|
/>
|
||||||
<span>
|
<span>
|
||||||
@@ -98,16 +89,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-if="showChildren || isFiltered" class="flex">
|
<div v-if="showChildren || isFiltered" class="flex">
|
||||||
<div
|
<div
|
||||||
class="
|
class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
|
||||||
flex
|
|
||||||
w-1
|
|
||||||
transform
|
|
||||||
transition
|
|
||||||
cursor-nsResize
|
|
||||||
ml-5.5
|
|
||||||
bg-dividerLight
|
|
||||||
hover:scale-x-125 hover:bg-dividerDark
|
|
||||||
"
|
|
||||||
@click="toggleShowChildren()"
|
@click="toggleShowChildren()"
|
||||||
></div>
|
></div>
|
||||||
<div class="flex flex-col flex-1 truncate">
|
<div class="flex flex-col flex-1 truncate">
|
||||||
@@ -151,27 +133,12 @@
|
|||||||
(folder.children == undefined || folder.children.length === 0) &&
|
(folder.children == undefined || folder.children.length === 0) &&
|
||||||
(folder.requests == undefined || folder.requests.length === 0)
|
(folder.requests == undefined || folder.requests.length === 0)
|
||||||
"
|
"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/pack.svg`"
|
:src="`/images/states/${$colorMode.value}/pack.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="
|
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
|
||||||
object-contain
|
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
object-center
|
|
||||||
w-16
|
|
||||||
h-16
|
|
||||||
mb-4
|
|
||||||
"
|
|
||||||
:alt="$t('empty.folder')"
|
:alt="$t('empty.folder')"
|
||||||
/>
|
/>
|
||||||
<span class="text-center">
|
<span class="text-center">
|
||||||
|
|||||||
@@ -1,16 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<div class="flex items-center group">
|
<div class="group flex items-center">
|
||||||
<span
|
<span
|
||||||
class="
|
class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
w-16
|
|
||||||
px-2
|
|
||||||
truncate
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
:class="getRequestLabelColor(request.method)"
|
:class="getRequestLabelColor(request.method)"
|
||||||
@click="!doc ? selectRequest() : {}"
|
@click="!doc ? selectRequest() : {}"
|
||||||
>
|
>
|
||||||
@@ -25,17 +17,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="
|
class="group-hover:text-secondaryDark flex items-center flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
|
||||||
group-hover:text-secondaryDark
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
flex-1
|
|
||||||
min-w-0
|
|
||||||
py-2
|
|
||||||
pr-2
|
|
||||||
transition
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
@click="!doc ? selectRequest() : {}"
|
@click="!doc ? selectRequest() : {}"
|
||||||
>
|
>
|
||||||
<span class="truncate"> {{ request.name }} </span>
|
<span class="truncate"> {{ request.name }} </span>
|
||||||
@@ -54,7 +36,7 @@
|
|||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
svg="rotate-ccw"
|
svg="rotate-ccw"
|
||||||
:title="$t('action.restore')"
|
:title="$t('action.restore')"
|
||||||
class="hidden group-hover:inline-flex"
|
class="group-hover:inline-flex hidden"
|
||||||
@click.native="!doc ? selectRequest() : {}"
|
@click.native="!doc ? selectRequest() : {}"
|
||||||
/>
|
/>
|
||||||
<span>
|
<span>
|
||||||
|
|||||||
@@ -43,11 +43,11 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="border rounded divide-dividerLight border-divider divide-y">
|
<div class="divide-dividerLight border-divider border divide-y rounded">
|
||||||
<div
|
<div
|
||||||
v-for="(variable, index) in vars"
|
v-for="(variable, index) in vars"
|
||||||
:key="`variable-${index}`"
|
:key="`variable-${index}`"
|
||||||
class="flex divide-dividerLight divide-x"
|
class="divide-dividerLight flex divide-x"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
v-model="variable.key"
|
v-model="variable.key"
|
||||||
@@ -74,27 +74,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="vars.length === 0"
|
v-if="vars.length === 0"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/blockchain.svg`"
|
:src="`/images/states/${$colorMode.value}/blockchain.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="
|
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
|
||||||
object-contain
|
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
object-center
|
|
||||||
w-16
|
|
||||||
h-16
|
|
||||||
my-4
|
|
||||||
"
|
|
||||||
:alt="$t('empty.environments')"
|
:alt="$t('empty.environments')"
|
||||||
/>
|
/>
|
||||||
<span class="pb-4 text-center">
|
<span class="pb-4 text-center">
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex items-center group">
|
<div class="group flex items-center">
|
||||||
<span
|
<span
|
||||||
class="flex items-center justify-center px-4 cursor-pointer"
|
class="flex items-center justify-center px-4 cursor-pointer"
|
||||||
@click="$emit('edit-environment')"
|
@click="$emit('edit-environment')"
|
||||||
@@ -7,16 +7,7 @@
|
|||||||
<SmartIcon class="svg-icons" name="layers" />
|
<SmartIcon class="svg-icons" name="layers" />
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="
|
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
|
||||||
flex
|
|
||||||
group-hover:text-secondaryDark
|
|
||||||
flex-1
|
|
||||||
min-w-0
|
|
||||||
py-2
|
|
||||||
pr-2
|
|
||||||
transition
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
@click="$emit('edit-environment')"
|
@click="$emit('edit-environment')"
|
||||||
>
|
>
|
||||||
<span class="truncate">
|
<span class="truncate">
|
||||||
|
|||||||
@@ -1,18 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<AppSection :label="`${$t('environment.title')}`">
|
<AppSection :label="`${$t('environment.title')}`">
|
||||||
<div class="sticky top-0 z-10 flex flex-col rounded-t bg-primary">
|
<div class="bg-primary sticky top-0 z-10 flex flex-col rounded-t">
|
||||||
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
|
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<span
|
<span
|
||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
:title="`${$t('environment.select')}`"
|
:title="`${$t('environment.select')}`"
|
||||||
class="
|
class="border-dividerLight select-wrapper flex-1 bg-transparent border-b"
|
||||||
border-dividerLight
|
|
||||||
select-wrapper
|
|
||||||
flex-1
|
|
||||||
bg-transparent
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<ButtonSecondary
|
<ButtonSecondary
|
||||||
v-if="selectedEnvironmentIndex !== -1"
|
v-if="selectedEnvironmentIndex !== -1"
|
||||||
@@ -51,7 +45,7 @@
|
|||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
</tippy>
|
</tippy>
|
||||||
<div class="flex justify-between flex-1 border-b border-dividerLight">
|
<div class="border-dividerLight flex justify-between flex-1 border-b">
|
||||||
<ButtonSecondary
|
<ButtonSecondary
|
||||||
svg="plus"
|
svg="plus"
|
||||||
:label="`${$t('action.new')}`"
|
:label="`${$t('action.new')}`"
|
||||||
@@ -92,7 +86,7 @@
|
|||||||
<EnvironmentsEnvironment
|
<EnvironmentsEnvironment
|
||||||
environment-index="Global"
|
environment-index="Global"
|
||||||
:environment="globalEnvironment"
|
:environment="globalEnvironment"
|
||||||
class="border-b border-dashed border-dividerLight"
|
class="border-dividerLight border-b border-dashed"
|
||||||
@edit-environment="editEnvironment('Global')"
|
@edit-environment="editEnvironment('Global')"
|
||||||
/>
|
/>
|
||||||
<EnvironmentsEnvironment
|
<EnvironmentsEnvironment
|
||||||
@@ -105,7 +99,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="environments.length === 0"
|
v-if="environments.length === 0"
|
||||||
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/blockchain.svg`"
|
:src="`/images/states/${$colorMode.value}/blockchain.svg`"
|
||||||
|
|||||||
@@ -21,28 +21,19 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="gqlField.description"
|
v-if="gqlField.description"
|
||||||
class="py-2 text-secondaryLight field-desc"
|
class="text-secondaryLight field-desc py-2"
|
||||||
>
|
>
|
||||||
{{ gqlField.description }}
|
{{ gqlField.description }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="gqlField.isDeprecated"
|
v-if="gqlField.isDeprecated"
|
||||||
class="
|
class="field-deprecated inline-block px-2 py-1 my-1 text-black bg-yellow-200 rounded"
|
||||||
field-deprecated
|
|
||||||
inline-block
|
|
||||||
px-2
|
|
||||||
py-1
|
|
||||||
my-1
|
|
||||||
text-black
|
|
||||||
bg-yellow-200
|
|
||||||
rounded
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
{{ $t("state.deprecated") }}
|
{{ $t("state.deprecated") }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="fieldArgs.length > 0">
|
<div v-if="fieldArgs.length > 0">
|
||||||
<h5 class="my-2">Arguments:</h5>
|
<h5 class="my-2">Arguments:</h5>
|
||||||
<div class="pl-4 border-l-2 border-divider">
|
<div class="border-divider pl-4 border-l-2">
|
||||||
<div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
|
<div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
|
||||||
<span>
|
<span>
|
||||||
{{ field.name }}:
|
{{ field.name }}:
|
||||||
@@ -53,7 +44,7 @@
|
|||||||
</span>
|
</span>
|
||||||
<div
|
<div
|
||||||
v-if="field.description"
|
v-if="field.description"
|
||||||
class="py-2 text-secondaryLight field-desc"
|
class="text-secondaryLight field-desc py-2"
|
||||||
>
|
>
|
||||||
{{ field.description }}
|
{{ field.description }}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="sticky top-0 z-10 flex p-4 bg-primary">
|
<div class="bg-primary sticky top-0 z-10 flex p-4">
|
||||||
<div class="inline-flex flex-1 space-x-2">
|
<div class="inline-flex flex-1 space-x-2">
|
||||||
<input
|
<input
|
||||||
id="url"
|
id="url"
|
||||||
@@ -7,18 +7,7 @@
|
|||||||
type="url"
|
type="url"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
class="
|
class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark w-full px-4 py-2 border rounded"
|
||||||
bg-primaryLight
|
|
||||||
border-divider
|
|
||||||
text-secondaryDark
|
|
||||||
hover:border-dividerDark
|
|
||||||
focus-visible:bg-transparent focus-visible:border-dividerDark
|
|
||||||
w-full
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
border
|
|
||||||
rounded
|
|
||||||
"
|
|
||||||
:placeholder="`${t('request.url')}`"
|
:placeholder="`${t('request.url')}`"
|
||||||
:disabled="connected"
|
:disabled="connected"
|
||||||
@keyup.enter="onConnectClick"
|
@keyup.enter="onConnectClick"
|
||||||
|
|||||||
@@ -19,22 +19,9 @@
|
|||||||
<SmartTab :id="'query'" :label="`${t('tab.query')}`" :selected="true">
|
<SmartTab :id="'query'" :label="`${t('tab.query')}`" :selected="true">
|
||||||
<AppSection label="query">
|
<AppSection label="query">
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-upperSecondaryStickyFold
|
|
||||||
gqlRunQuery
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ t("request.query") }}
|
{{ t("request.query") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
@@ -66,21 +53,9 @@
|
|||||||
<SmartTab :id="'variables'" :label="`${t('tab.variables')}`">
|
<SmartTab :id="'variables'" :label="`${t('tab.variables')}`">
|
||||||
<AppSection label="variables">
|
<AppSection label="variables">
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-upperSecondaryStickyFold
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ t("request.variables") }}
|
{{ t("request.variables") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
@@ -106,21 +81,9 @@
|
|||||||
<SmartTab :id="'headers'" :label="`${t('tab.headers')}`">
|
<SmartTab :id="'headers'" :label="`${t('tab.headers')}`">
|
||||||
<AppSection label="headers">
|
<AppSection label="headers">
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-upperSecondaryStickyFold
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ t("tab.headers") }}
|
{{ t("tab.headers") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
@@ -158,13 +121,7 @@
|
|||||||
<div
|
<div
|
||||||
v-for="(header, index) in headers"
|
v-for="(header, index) in headers"
|
||||||
:key="`header-${String(index)}`"
|
:key="`header-${String(index)}`"
|
||||||
class="
|
class="divide-dividerLight border-dividerLight flex border-b divide-x"
|
||||||
divide-dividerLight
|
|
||||||
border-dividerLight
|
|
||||||
flex
|
|
||||||
border-b
|
|
||||||
divide-x
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<SmartAutoComplete
|
<SmartAutoComplete
|
||||||
:placeholder="`${t('count.header', { count: index + 1 })}`"
|
:placeholder="`${t('count.header', { count: index + 1 })}`"
|
||||||
@@ -242,27 +199,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="headers.length === 0"
|
v-if="headers.length === 0"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/add_category.svg`"
|
:src="`/images/states/${$colorMode.value}/add_category.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="
|
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
|
||||||
object-contain
|
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
object-center
|
|
||||||
w-16
|
|
||||||
h-16
|
|
||||||
my-4
|
|
||||||
"
|
|
||||||
:alt="`${t('empty.headers')}`"
|
:alt="`${t('empty.headers')}`"
|
||||||
/>
|
/>
|
||||||
<span class="pb-4 text-center">
|
<span class="pb-4 text-center">
|
||||||
|
|||||||
@@ -9,21 +9,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-else-if="responseString">
|
<div v-else-if="responseString">
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
sticky
|
|
||||||
top-0
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ t("response.title") }}
|
{{ t("response.title") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
@@ -54,18 +42,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-else
|
v-else
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center flex-1 p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
flex-1
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div class="flex pb-4 my-4 space-x-2">
|
<div class="flex pb-4 my-4 space-x-2">
|
||||||
<div class="flex flex-col items-end text-right space-y-4">
|
<div class="flex flex-col items-end space-y-4 text-right">
|
||||||
<span class="flex items-center flex-1">
|
<span class="flex items-center flex-1">
|
||||||
{{ t("shortcut.general.command_menu") }}
|
{{ t("shortcut.general.command_menu") }}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -34,27 +34,12 @@
|
|||||||
subscriptionFields.length === 0 &&
|
subscriptionFields.length === 0 &&
|
||||||
graphqlTypes.length === 0
|
graphqlTypes.length === 0
|
||||||
"
|
"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/add_comment.svg`"
|
:src="`/images/states/${$colorMode.value}/add_comment.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="
|
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
|
||||||
object-contain
|
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
object-center
|
|
||||||
w-16
|
|
||||||
h-16
|
|
||||||
my-4
|
|
||||||
"
|
|
||||||
:alt="`${t('empty.documentation')}`"
|
:alt="`${t('empty.documentation')}`"
|
||||||
/>
|
/>
|
||||||
<span class="mb-4 text-center">
|
<span class="mb-4 text-center">
|
||||||
@@ -62,7 +47,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<div class="sticky top-0 z-10 flex bg-primary">
|
<div class="bg-primary sticky top-0 z-10 flex">
|
||||||
<input
|
<input
|
||||||
v-model="graphqlFieldsFilterText"
|
v-model="graphqlFieldsFilterText"
|
||||||
type="search"
|
type="search"
|
||||||
@@ -155,21 +140,9 @@
|
|||||||
<AppSection ref="schema" label="schema">
|
<AppSection ref="schema" label="schema">
|
||||||
<div
|
<div
|
||||||
v-if="schemaString"
|
v-if="schemaString"
|
||||||
class="
|
class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
sticky
|
|
||||||
top-0
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ t("graphql.schema") }}
|
{{ t("graphql.schema") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
@@ -206,27 +179,12 @@
|
|||||||
<div v-if="schemaString" ref="schemaEditor"></div>
|
<div v-if="schemaString" ref="schemaEditor"></div>
|
||||||
<div
|
<div
|
||||||
v-else
|
v-else
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/blockchain.svg`"
|
:src="`/images/states/${$colorMode.value}/blockchain.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="
|
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
|
||||||
object-contain
|
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
object-center
|
|
||||||
w-16
|
|
||||||
h-16
|
|
||||||
my-4
|
|
||||||
"
|
|
||||||
:alt="`${t('empty.schema')}`"
|
:alt="`${t('empty.schema')}`"
|
||||||
/>
|
/>
|
||||||
<span class="mb-4 text-center">
|
<span class="mb-4 text-center">
|
||||||
|
|||||||
@@ -1,18 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col group">
|
<div class="group flex flex-col">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<span
|
<span
|
||||||
class="
|
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pl-4 pr-2 transition cursor-pointer"
|
||||||
flex
|
|
||||||
group-hover:text-secondaryDark
|
|
||||||
flex-1
|
|
||||||
min-w-0
|
|
||||||
py-2
|
|
||||||
pl-4
|
|
||||||
pr-2
|
|
||||||
transition
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
data-testid="restore_history_entry"
|
data-testid="restore_history_entry"
|
||||||
@click="useEntry"
|
@click="useEntry"
|
||||||
>
|
>
|
||||||
@@ -25,7 +15,7 @@
|
|||||||
svg="trash"
|
svg="trash"
|
||||||
color="red"
|
color="red"
|
||||||
:title="$t('action.remove')"
|
:title="$t('action.remove')"
|
||||||
class="hidden group-hover:inline-flex"
|
class="group-hover:inline-flex hidden"
|
||||||
data-testid="delete_history_entry"
|
data-testid="delete_history_entry"
|
||||||
@click.native="$emit('delete-entry')"
|
@click.native="$emit('delete-entry')"
|
||||||
/>
|
/>
|
||||||
@@ -33,7 +23,7 @@
|
|||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
:title="expand ? $t('hide.more') : $t('show.more')"
|
:title="expand ? $t('hide.more') : $t('show.more')"
|
||||||
:svg="expand ? 'minimize-2' : 'maximize-2'"
|
:svg="expand ? 'minimize-2' : 'maximize-2'"
|
||||||
class="hidden group-hover:inline-flex"
|
class="group-hover:inline-flex hidden"
|
||||||
@click.native="expand = !expand"
|
@click.native="expand = !expand"
|
||||||
/>
|
/>
|
||||||
<ButtonSecondary
|
<ButtonSecondary
|
||||||
@@ -50,7 +40,7 @@
|
|||||||
<span
|
<span
|
||||||
v-for="(line, index) in query"
|
v-for="(line, index) in query"
|
||||||
:key="`line-${index}`"
|
:key="`line-${index}`"
|
||||||
class="px-4 truncate whitespace-pre cursor-pointer text-secondaryLight"
|
class="text-secondaryLight px-4 truncate whitespace-pre cursor-pointer"
|
||||||
data-testid="restore_history_entry"
|
data-testid="restore_history_entry"
|
||||||
@click="useEntry"
|
@click="useEntry"
|
||||||
>{{ line }}</span
|
>{{ line }}</span
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex items-center group">
|
<div class="group flex items-center">
|
||||||
<span
|
<span
|
||||||
class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
|
class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
|
||||||
:class="entryStatus.className"
|
:class="entryStatus.className"
|
||||||
@@ -10,16 +10,7 @@
|
|||||||
{{ entry.request.method }}
|
{{ entry.request.method }}
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="
|
class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
|
||||||
flex
|
|
||||||
group-hover:text-secondaryDark
|
|
||||||
flex-1
|
|
||||||
min-w-0
|
|
||||||
py-2
|
|
||||||
pr-2
|
|
||||||
transition
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
data-testid="restore_history_entry"
|
data-testid="restore_history_entry"
|
||||||
:title="`${duration}`"
|
:title="`${duration}`"
|
||||||
@click="$emit('use-entry')"
|
@click="$emit('use-entry')"
|
||||||
@@ -33,7 +24,7 @@
|
|||||||
svg="trash"
|
svg="trash"
|
||||||
color="red"
|
color="red"
|
||||||
:title="$t('action.remove')"
|
:title="$t('action.remove')"
|
||||||
class="hidden group-hover:inline-flex"
|
class="group-hover:inline-flex hidden"
|
||||||
data-testid="delete_history_entry"
|
data-testid="delete_history_entry"
|
||||||
@click.native="$emit('delete-entry')"
|
@click.native="$emit('delete-entry')"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -1,22 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-upperSecondaryStickyFold
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<span class="flex items-center">
|
<span class="flex items-center">
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ $t("authorization.type") }}
|
{{ $t("authorization.type") }}
|
||||||
</label>
|
</label>
|
||||||
<tippy
|
<tippy
|
||||||
@@ -95,7 +83,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="authType === 'none'"
|
v-if="authType === 'none'"
|
||||||
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/login.svg`"
|
:src="`/images/states/${$colorMode.value}/login.svg`"
|
||||||
@@ -116,16 +104,16 @@
|
|||||||
class="mb-4"
|
class="mb-4"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="authType === 'basic'" class="flex border-b border-dividerLight">
|
<div v-if="authType === 'basic'" class="border-dividerLight flex border-b">
|
||||||
<div class="w-2/3 border-r border-dividerLight">
|
<div class="border-dividerLight w-2/3 border-r">
|
||||||
<div class="flex border-b border-dividerLight">
|
<div class="border-dividerLight flex border-b">
|
||||||
<SmartEnvInput
|
<SmartEnvInput
|
||||||
v-model="basicUsername"
|
v-model="basicUsername"
|
||||||
:placeholder="$t('authorization.username')"
|
:placeholder="$t('authorization.username')"
|
||||||
styles="bg-transparent flex flex-1 py-1 px-4"
|
styles="bg-transparent flex flex-1 py-1 px-4"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex border-b border-dividerLight">
|
<div class="border-dividerLight flex border-b">
|
||||||
<SmartEnvInput
|
<SmartEnvInput
|
||||||
v-model="basicPassword"
|
v-model="basicPassword"
|
||||||
:placeholder="$t('authorization.password')"
|
:placeholder="$t('authorization.password')"
|
||||||
@@ -134,20 +122,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
|
||||||
bg-primary
|
|
||||||
top-upperTertiaryStickyFold
|
|
||||||
min-w-46
|
|
||||||
max-w-1/3
|
|
||||||
z-9
|
|
||||||
sticky
|
|
||||||
h-full
|
|
||||||
p-4
|
|
||||||
overflow-auto
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div class="p-2">
|
<div class="p-2">
|
||||||
<div class="pb-2 text-secondaryLight">
|
<div class="text-secondaryLight pb-2">
|
||||||
{{ $t("helpers.authorization") }}
|
{{ $t("helpers.authorization") }}
|
||||||
</div>
|
</div>
|
||||||
<SmartAnchor
|
<SmartAnchor
|
||||||
@@ -159,9 +137,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="authType === 'bearer'" class="flex border-b border-dividerLight">
|
<div v-if="authType === 'bearer'" class="border-dividerLight flex border-b">
|
||||||
<div class="w-2/3 border-r border-dividerLight">
|
<div class="border-dividerLight w-2/3 border-r">
|
||||||
<div class="flex border-b border-dividerLight">
|
<div class="border-dividerLight flex border-b">
|
||||||
<SmartEnvInput
|
<SmartEnvInput
|
||||||
v-model="bearerToken"
|
v-model="bearerToken"
|
||||||
placeholder="Token"
|
placeholder="Token"
|
||||||
@@ -170,20 +148,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
|
||||||
bg-primary
|
|
||||||
top-upperTertiaryStickyFold
|
|
||||||
min-w-46
|
|
||||||
max-w-1/3
|
|
||||||
z-9
|
|
||||||
sticky
|
|
||||||
h-full
|
|
||||||
p-4
|
|
||||||
overflow-auto
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div class="p-2">
|
<div class="p-2">
|
||||||
<div class="pb-2 text-secondaryLight">
|
<div class="text-secondaryLight pb-2">
|
||||||
{{ $t("helpers.authorization") }}
|
{{ $t("helpers.authorization") }}
|
||||||
</div>
|
</div>
|
||||||
<SmartAnchor
|
<SmartAnchor
|
||||||
@@ -197,10 +165,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="authType === 'oauth-2'"
|
v-if="authType === 'oauth-2'"
|
||||||
class="flex border-b border-dividerLight"
|
class="border-dividerLight flex border-b"
|
||||||
>
|
>
|
||||||
<div class="w-2/3 border-r border-dividerLight">
|
<div class="border-dividerLight w-2/3 border-r">
|
||||||
<div class="flex border-b border-dividerLight">
|
<div class="border-dividerLight flex border-b">
|
||||||
<SmartEnvInput
|
<SmartEnvInput
|
||||||
v-model="oauth2Token"
|
v-model="oauth2Token"
|
||||||
placeholder="Token"
|
placeholder="Token"
|
||||||
@@ -210,20 +178,10 @@
|
|||||||
<HttpOAuth2Authorization />
|
<HttpOAuth2Authorization />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
|
||||||
bg-primary
|
|
||||||
top-upperTertiaryStickyFold
|
|
||||||
min-w-46
|
|
||||||
max-w-1/3
|
|
||||||
z-9
|
|
||||||
sticky
|
|
||||||
h-full
|
|
||||||
p-4
|
|
||||||
overflow-auto
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div class="p-2">
|
<div class="p-2">
|
||||||
<div class="pb-2 text-secondaryLight">
|
<div class="text-secondaryLight pb-2">
|
||||||
{{ $t("helpers.authorization") }}
|
{{ $t("helpers.authorization") }}
|
||||||
</div>
|
</div>
|
||||||
<SmartAnchor
|
<SmartAnchor
|
||||||
|
|||||||
@@ -1,22 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-upperSecondaryStickyFold
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<span class="flex items-center">
|
<span class="flex items-center">
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ $t("request.content_type") }}
|
{{ $t("request.content_type") }}
|
||||||
</label>
|
</label>
|
||||||
<tippy
|
<tippy
|
||||||
@@ -65,7 +53,7 @@
|
|||||||
<HttpRawBody v-else-if="contentType !== null" :content-type="contentType" />
|
<HttpRawBody v-else-if="contentType !== null" :content-type="contentType" />
|
||||||
<div
|
<div
|
||||||
v-if="contentType == null"
|
v-if="contentType == null"
|
||||||
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
|
:src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
|
||||||
|
|||||||
@@ -1,21 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<AppSection label="bodyParameters">
|
<AppSection label="bodyParameters">
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-upperTertiaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-upperTertiaryStickyFold
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ $t("request.body") }}
|
{{ $t("request.body") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
@@ -43,7 +31,7 @@
|
|||||||
<div
|
<div
|
||||||
v-for="(param, index) in bodyParams"
|
v-for="(param, index) in bodyParams"
|
||||||
:key="`param-${index}`"
|
:key="`param-${index}`"
|
||||||
class="flex border-b divide-dividerLight border-dividerLight divide-x"
|
class="divide-dividerLight border-dividerLight flex border-b divide-x"
|
||||||
>
|
>
|
||||||
<SmartEnvInput
|
<SmartEnvInput
|
||||||
v-model="param.key"
|
v-model="param.key"
|
||||||
@@ -153,7 +141,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="bodyParams.length === 0"
|
v-if="bodyParams.length === 0"
|
||||||
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
|
:src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
|
||||||
|
|||||||
@@ -1,21 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<AppSection label="headers">
|
<AppSection label="headers">
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-upperSecondaryStickyFold
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ t("request.header_list") }}
|
{{ t("request.header_list") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
@@ -53,7 +41,7 @@
|
|||||||
<div
|
<div
|
||||||
v-for="(header, index) in headers$"
|
v-for="(header, index) in headers$"
|
||||||
:key="`header-${index}`"
|
:key="`header-${index}`"
|
||||||
class="flex border-b divide-dividerLight border-dividerLight divide-x"
|
class="divide-dividerLight border-dividerLight flex border-b divide-x"
|
||||||
>
|
>
|
||||||
<SmartAutoComplete
|
<SmartAutoComplete
|
||||||
:placeholder="`${t('count.header', { count: index + 1 })}`"
|
:placeholder="`${t('count.header', { count: index + 1 })}`"
|
||||||
@@ -137,27 +125,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="headers$.length === 0"
|
v-if="headers$.length === 0"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/add_category.svg`"
|
:src="`/images/states/${$colorMode.value}/add_category.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="
|
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
|
||||||
object-contain
|
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
object-center
|
|
||||||
w-16
|
|
||||||
h-16
|
|
||||||
my-4
|
|
||||||
"
|
|
||||||
:alt="`${t('empty.headers')}`"
|
:alt="`${t('empty.headers')}`"
|
||||||
/>
|
/>
|
||||||
<span class="pb-4 text-center">
|
<span class="pb-4 text-center">
|
||||||
|
|||||||
@@ -1,21 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<AppSection label="parameters">
|
<AppSection label="parameters">
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-upperSecondaryStickyFold
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ t("request.parameter_list") }}
|
{{ t("request.parameter_list") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
@@ -53,7 +41,7 @@
|
|||||||
<div
|
<div
|
||||||
v-for="(param, index) in params$"
|
v-for="(param, index) in params$"
|
||||||
:key="`param-${index}`"
|
:key="`param-${index}`"
|
||||||
class="flex border-b divide-dividerLight border-dividerLight divide-x"
|
class="divide-dividerLight border-dividerLight flex border-b divide-x"
|
||||||
>
|
>
|
||||||
<SmartEnvInput
|
<SmartEnvInput
|
||||||
v-model="param.key"
|
v-model="param.key"
|
||||||
@@ -130,27 +118,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="params$.length === 0"
|
v-if="params$.length === 0"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/add_files.svg`"
|
:src="`/images/states/${$colorMode.value}/add_files.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="
|
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
|
||||||
object-contain
|
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
object-center
|
|
||||||
w-16
|
|
||||||
h-16
|
|
||||||
my-4
|
|
||||||
"
|
|
||||||
:alt="`${t('empty.parameters')}`"
|
:alt="`${t('empty.parameters')}`"
|
||||||
/>
|
/>
|
||||||
<span class="pb-4 text-center">
|
<span class="pb-4 text-center">
|
||||||
|
|||||||
@@ -1,21 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<AppSection id="script" :label="`${t('preRequest.script')}`">
|
<AppSection id="script" :label="`${t('preRequest.script')}`">
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-upperSecondaryStickyFold
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ t("preRequest.javascript_code") }}
|
{{ t("preRequest.javascript_code") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
@@ -41,24 +29,14 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex border-b border-dividerLight">
|
<div class="border-dividerLight flex border-b">
|
||||||
<div class="w-2/3 border-r border-dividerLight">
|
<div class="border-dividerLight w-2/3 border-r">
|
||||||
<div ref="preRrequestEditor"></div>
|
<div ref="preRrequestEditor"></div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
|
||||||
bg-primary
|
|
||||||
top-upperTertiaryStickyFold
|
|
||||||
min-w-46
|
|
||||||
max-w-1/3
|
|
||||||
z-9
|
|
||||||
sticky
|
|
||||||
h-full
|
|
||||||
p-4
|
|
||||||
overflow-auto
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div class="pb-2 text-secondaryLight">
|
<div class="text-secondaryLight pb-2">
|
||||||
{{ t("helpers.pre_request_script") }}
|
{{ t("helpers.pre_request_script") }}
|
||||||
</div>
|
</div>
|
||||||
<SmartAnchor
|
<SmartAnchor
|
||||||
@@ -66,7 +44,7 @@
|
|||||||
to="https://docs.hoppscotch.io/features/pre-request-script"
|
to="https://docs.hoppscotch.io/features/pre-request-script"
|
||||||
blank
|
blank
|
||||||
/>
|
/>
|
||||||
<h4 class="pt-6 font-bold text-secondaryLight">
|
<h4 class="text-secondaryLight pt-6 font-bold">
|
||||||
{{ t("preRequest.snippets") }}
|
{{ t("preRequest.snippets") }}
|
||||||
</h4>
|
</h4>
|
||||||
<div class="flex flex-col pt-4">
|
<div class="flex flex-col pt-4">
|
||||||
|
|||||||
@@ -1,21 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-upperTertiaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-upperTertiaryStickyFold
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ t("request.raw_body") }}
|
{{ t("request.raw_body") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|||||||
@@ -1,16 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary hide-scrollbar sticky top-0 z-10 flex p-4 space-x-2 overflow-x-auto"
|
||||||
bg-primary
|
|
||||||
hide-scrollbar
|
|
||||||
sticky
|
|
||||||
top-0
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
p-4
|
|
||||||
space-x-2
|
|
||||||
overflow-x-auto
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div class="flex flex-1">
|
<div class="flex flex-1">
|
||||||
<div class="relative flex">
|
<div class="relative flex">
|
||||||
@@ -26,22 +16,7 @@
|
|||||||
<span class="select-wrapper">
|
<span class="select-wrapper">
|
||||||
<input
|
<input
|
||||||
id="method"
|
id="method"
|
||||||
class="
|
class="bg-primaryLight border-divider text-secondaryDark w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex px-4 py-2 font-semibold border rounded-l cursor-pointer"
|
||||||
bg-primaryLight
|
|
||||||
border-divider
|
|
||||||
text-secondaryDark
|
|
||||||
w-26
|
|
||||||
hover:border-dividerDark
|
|
||||||
focus-visible:bg-transparent
|
|
||||||
focus-visible:border-dividerDark
|
|
||||||
flex
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
font-semibold
|
|
||||||
border
|
|
||||||
rounded-l
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
:value="newMethod"
|
:value="newMethod"
|
||||||
:readonly="!isCustomMethod"
|
:readonly="!isCustomMethod"
|
||||||
:placeholder="`${t('request.method')}`"
|
:placeholder="`${t('request.method')}`"
|
||||||
@@ -83,7 +58,7 @@
|
|||||||
<div class="flex">
|
<div class="flex">
|
||||||
<ButtonPrimary
|
<ButtonPrimary
|
||||||
id="send"
|
id="send"
|
||||||
class="flex-1 rounded-r-none min-w-20"
|
class="min-w-20 flex-1 rounded-r-none"
|
||||||
:label="`${!loading ? t('action.send') : t('action.cancel')}`"
|
:label="`${!loading ? t('action.send') : t('action.cancel')}`"
|
||||||
@click.native="!loading ? newSendRequest() : cancelRequest()"
|
@click.native="!loading ? newSendRequest() : cancelRequest()"
|
||||||
/>
|
/>
|
||||||
@@ -164,7 +139,7 @@
|
|||||||
name="request-name"
|
name="request-name"
|
||||||
type="text"
|
type="text"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
class="mb-2 input"
|
class="input mb-2"
|
||||||
@keyup.enter="saveOptions.tippy().hide()"
|
@keyup.enter="saveOptions.tippy().hide()"
|
||||||
/>
|
/>
|
||||||
<SmartItem
|
<SmartItem
|
||||||
|
|||||||
@@ -1,31 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary hide-scrollbar whitespace-nowrap sticky top-0 z-10 flex items-center p-4 overflow-auto"
|
||||||
bg-primary
|
|
||||||
hide-scrollbar
|
|
||||||
whitespace-nowrap
|
|
||||||
sticky
|
|
||||||
top-0
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
p-4
|
|
||||||
overflow-auto
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-if="response == null"
|
v-if="response == null"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center flex-1"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
flex-1
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div class="flex pb-4 my-4 space-x-2">
|
<div class="flex pb-4 my-4 space-x-2">
|
||||||
<div class="flex flex-col items-end text-right space-y-4">
|
<div class="flex flex-col items-end space-y-4 text-right">
|
||||||
<span class="flex items-center flex-1">
|
<span class="flex items-center flex-1">
|
||||||
{{ t("shortcut.request.send_request") }}
|
{{ t("shortcut.request.send_request") }}
|
||||||
</span>
|
</span>
|
||||||
@@ -80,21 +62,13 @@
|
|||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/youre_lost.svg`"
|
:src="`/images/states/${$colorMode.value}/youre_lost.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="
|
class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
|
||||||
object-contain
|
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
object-center
|
|
||||||
w-32
|
|
||||||
h-32
|
|
||||||
my-4
|
|
||||||
"
|
|
||||||
:alt="`${t('error.network_fail')}`"
|
:alt="`${t('error.network_fail')}`"
|
||||||
/>
|
/>
|
||||||
<span class="mb-2 font-semibold text-center">
|
<span class="mb-2 font-semibold text-center">
|
||||||
{{ t("error.network_fail") }}
|
{{ t("error.network_fail") }}
|
||||||
</span>
|
</span>
|
||||||
<span class="max-w-sm mb-4 text-center text-secondaryLight">
|
<span class="text-secondaryLight max-w-sm mb-4 text-center">
|
||||||
{{ t("helpers.network_fail") }}
|
{{ t("helpers.network_fail") }}
|
||||||
</span>
|
</span>
|
||||||
<AppInterceptor />
|
<AppInterceptor />
|
||||||
@@ -102,7 +76,7 @@
|
|||||||
<div
|
<div
|
||||||
v-if="response.type === 'success' || 'fail'"
|
v-if="response.type === 'success' || 'fail'"
|
||||||
:class="statusCategory.className"
|
:class="statusCategory.className"
|
||||||
class="font-semibold space-x-4"
|
class="space-x-4 font-semibold"
|
||||||
>
|
>
|
||||||
<span v-if="response.statusCode">
|
<span v-if="response.statusCode">
|
||||||
<span class="text-secondary"> {{ t("response.status") }}: </span>
|
<span class="text-secondary"> {{ t("response.status") }}: </span>
|
||||||
|
|||||||
@@ -7,21 +7,9 @@
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-lowerSecondaryStickyFold
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ t("test.report") }}
|
{{ t("test.report") }}
|
||||||
</label>
|
</label>
|
||||||
<ButtonSecondary
|
<ButtonSecondary
|
||||||
@@ -31,7 +19,7 @@
|
|||||||
@click.native="clearContent()"
|
@click.native="clearContent()"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="border-b divide-dividerLight border-dividerLight divide-y-4">
|
<div class="divide-dividerLight border-dividerLight border-b divide-y-4">
|
||||||
<div v-if="testResults.tests" class="divide-dividerLight divide-y-4">
|
<div v-if="testResults.tests" class="divide-dividerLight divide-y-4">
|
||||||
<HttpTestResultEntry
|
<HttpTestResultEntry
|
||||||
v-for="(result, index) in testResults.tests"
|
v-for="(result, index) in testResults.tests"
|
||||||
@@ -53,7 +41,7 @@
|
|||||||
class="flex items-center px-4 py-2"
|
class="flex items-center px-4 py-2"
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
class="mr-4 material-icons"
|
class="material-icons mr-4"
|
||||||
:class="
|
:class="
|
||||||
result.status === 'pass' ? 'text-green-500' : 'text-red-500'
|
result.status === 'pass' ? 'text-green-500' : 'text-red-500'
|
||||||
"
|
"
|
||||||
@@ -76,7 +64,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-else
|
v-else
|
||||||
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/validation.svg`"
|
:src="`/images/states/${$colorMode.value}/validation.svg`"
|
||||||
|
|||||||
@@ -1,21 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<AppSection id="script" :label="`${t('test.script')}`">
|
<AppSection id="script" :label="`${t('test.script')}`">
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-upperSecondaryStickyFold
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ t("test.javascript_code") }}
|
{{ t("test.javascript_code") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
@@ -41,24 +29,14 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex border-b border-dividerLight">
|
<div class="border-dividerLight flex border-b">
|
||||||
<div class="w-2/3 border-r border-dividerLight">
|
<div class="border-dividerLight w-2/3 border-r">
|
||||||
<div ref="testScriptEditor"></div>
|
<div ref="testScriptEditor"></div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
|
||||||
bg-primary
|
|
||||||
top-upperTertiaryStickyFold
|
|
||||||
min-w-46
|
|
||||||
max-w-1/3
|
|
||||||
z-9
|
|
||||||
sticky
|
|
||||||
h-full
|
|
||||||
p-4
|
|
||||||
overflow-auto
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div class="pb-2 text-secondaryLight">
|
<div class="text-secondaryLight pb-2">
|
||||||
{{ t("helpers.post_request_tests") }}
|
{{ t("helpers.post_request_tests") }}
|
||||||
</div>
|
</div>
|
||||||
<SmartAnchor
|
<SmartAnchor
|
||||||
@@ -66,7 +44,7 @@
|
|||||||
to="https://docs.hoppscotch.io/features/tests"
|
to="https://docs.hoppscotch.io/features/tests"
|
||||||
blank
|
blank
|
||||||
/>
|
/>
|
||||||
<h4 class="pt-6 font-bold text-secondaryLight">
|
<h4 class="text-secondaryLight pt-6 font-bold">
|
||||||
{{ t("test.snippets") }}
|
{{ t("test.snippets") }}
|
||||||
</h4>
|
</h4>
|
||||||
<div class="flex flex-col pt-4">
|
<div class="flex flex-col pt-4">
|
||||||
|
|||||||
@@ -1,21 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-lowerSecondaryStickyFold
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ t("request.header_list") }}
|
{{ t("request.header_list") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
@@ -32,40 +20,17 @@
|
|||||||
<div
|
<div
|
||||||
v-for="(header, index) in headers"
|
v-for="(header, index) in headers"
|
||||||
:key="`header-${index}`"
|
:key="`header-${index}`"
|
||||||
class="
|
class="divide-dividerLight border-dividerLight group flex border-b divide-x"
|
||||||
divide-dividerLight
|
|
||||||
border-dividerLight
|
|
||||||
group
|
|
||||||
flex
|
|
||||||
border-b
|
|
||||||
divide-x
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="
|
class="group-hover:text-secondaryDark flex flex-1 min-w-0 px-4 py-2 transition"
|
||||||
flex
|
|
||||||
group-hover:text-secondaryDark
|
|
||||||
flex-1
|
|
||||||
min-w-0
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
transition
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<span class="truncate rounded-sm select-all">
|
<span class="truncate rounded-sm select-all">
|
||||||
{{ header.key }}
|
{{ header.key }}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="
|
class="group-hover:text-secondaryDark flex flex-1 min-w-0 px-4 py-2 transition"
|
||||||
flex
|
|
||||||
group-hover:text-secondaryDark
|
|
||||||
flex-1
|
|
||||||
min-w-0
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
transition
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<span class="truncate rounded-sm select-all">
|
<span class="truncate rounded-sm select-all">
|
||||||
{{ header.value }}
|
{{ header.value }}
|
||||||
|
|||||||
@@ -1,21 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-1">
|
<div class="flex flex-col flex-1">
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-lowerSecondaryStickyFold
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ t("response.body") }}
|
{{ t("response.body") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|||||||
@@ -1,21 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-lowerSecondaryStickyFold
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ $t("response.body") }}
|
{{ $t("response.body") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
@@ -30,7 +18,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img
|
<img
|
||||||
class="flex flex-1 max-w-full border-b border-dividerLight"
|
class="border-dividerLight flex flex-1 max-w-full border-b"
|
||||||
:src="imageSource"
|
:src="imageSource"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
:alt="imageSource"
|
:alt="imageSource"
|
||||||
|
|||||||
@@ -1,21 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-lowerSecondaryStickyFold
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">{{
|
<label class="text-secondaryLight font-semibold">{{
|
||||||
t("response.body")
|
t("response.body")
|
||||||
}}</label>
|
}}</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
@@ -48,20 +36,7 @@
|
|||||||
<div ref="jsonResponse"></div>
|
<div ref="jsonResponse"></div>
|
||||||
<div
|
<div
|
||||||
v-if="outlinePath"
|
v-if="outlinePath"
|
||||||
class="
|
class="bg-primaryLight border-dividerLight flex-nowrap hide-scrollbar sticky bottom-0 z-10 flex flex-1 px-2 overflow-auto border-t"
|
||||||
flex
|
|
||||||
bg-primaryLight
|
|
||||||
border-dividerLight
|
|
||||||
flex-nowrap
|
|
||||||
hide-scrollbar
|
|
||||||
sticky
|
|
||||||
bottom-0
|
|
||||||
z-10
|
|
||||||
flex-1
|
|
||||||
px-2
|
|
||||||
overflow-auto
|
|
||||||
border-t
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-for="(item, index) in outlinePath"
|
v-for="(item, index) in outlinePath"
|
||||||
@@ -140,7 +115,7 @@
|
|||||||
</tippy>
|
</tippy>
|
||||||
<i
|
<i
|
||||||
v-if="index + 1 !== outlinePath.length"
|
v-if="index + 1 !== outlinePath.length"
|
||||||
class="opacity-50 text-secondaryLight material-icons"
|
class="text-secondaryLight material-icons opacity-50"
|
||||||
>chevron_right</i
|
>chevron_right</i
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,21 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-lowerSecondaryStickyFold
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ t("response.body") }}
|
{{ t("response.body") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|||||||
@@ -1,21 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-lowerSecondaryStickyFold
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ t("response.body") }}
|
{{ t("response.body") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|||||||
@@ -1,16 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="relative flex items-center justify-center w-5 h-5 cursor-pointer">
|
<div class="relative flex items-center justify-center w-5 h-5 cursor-pointer">
|
||||||
<img
|
<img
|
||||||
class="
|
class="bg-primaryDark absolute object-cover object-center w-5 h-5 transition rounded-full"
|
||||||
object-cover
|
|
||||||
bg-primaryDark
|
|
||||||
absolute
|
|
||||||
object-center
|
|
||||||
w-5
|
|
||||||
h-5
|
|
||||||
transition
|
|
||||||
rounded-full
|
|
||||||
"
|
|
||||||
:src="url"
|
:src="url"
|
||||||
:alt="alt"
|
:alt="alt"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
@@ -18,16 +9,7 @@
|
|||||||
<div class="absolute inset-0 rounded-full shadow-inner"></div>
|
<div class="absolute inset-0 rounded-full shadow-inner"></div>
|
||||||
<span
|
<span
|
||||||
v-if="indicator"
|
v-if="indicator"
|
||||||
class="
|
class="border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
|
||||||
border-primary
|
|
||||||
rounded-full
|
|
||||||
border-2
|
|
||||||
h-2.5
|
|
||||||
-top-0.5
|
|
||||||
-right-0.5
|
|
||||||
w-2.5
|
|
||||||
absolute
|
|
||||||
"
|
|
||||||
:class="indicatorStyles"
|
:class="indicatorStyles"
|
||||||
></span>
|
></span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,21 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
sticky
|
|
||||||
top-0
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label for="log" class="py-2 font-semibold text-secondaryLight">
|
<label for="log" class="text-secondaryLight py-2 font-semibold">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -9,10 +9,13 @@
|
|||||||
>
|
>
|
||||||
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
|
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
|
||||||
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
|
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
|
||||||
<Pane class="hide-scrollbar !overflow-auto">
|
<Pane
|
||||||
|
:size="COLUMN_LAYOUT ? 45 : 50"
|
||||||
|
class="hide-scrollbar !overflow-auto"
|
||||||
|
>
|
||||||
<AppSection label="request">
|
<AppSection label="request">
|
||||||
<div
|
<div
|
||||||
class="sticky top-0 z-10 flex flex-col p-4 bg-primary space-y-4"
|
class="bg-primary sticky top-0 z-10 flex flex-col p-4 space-y-4"
|
||||||
>
|
>
|
||||||
<div class="inline-flex flex-1 space-x-2">
|
<div class="inline-flex flex-1 space-x-2">
|
||||||
<input
|
<input
|
||||||
@@ -21,19 +24,7 @@
|
|||||||
type="url"
|
type="url"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
class="
|
class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark w-full px-4 py-2 border rounded"
|
||||||
bg-primaryLight
|
|
||||||
border-divider
|
|
||||||
text-secondaryDark
|
|
||||||
hover:border-dividerDark
|
|
||||||
focus-visible:bg-transparent
|
|
||||||
focus-visible:border-dividerDark
|
|
||||||
w-full
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
border
|
|
||||||
rounded
|
|
||||||
"
|
|
||||||
:placeholder="$t('mqtt.url')"
|
:placeholder="$t('mqtt.url')"
|
||||||
:disabled="connectionState"
|
:disabled="connectionState"
|
||||||
@keyup.enter="validUrl ? toggleConnection() : null"
|
@keyup.enter="validUrl ? toggleConnection() : null"
|
||||||
@@ -72,7 +63,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</AppSection>
|
</AppSection>
|
||||||
</Pane>
|
</Pane>
|
||||||
<Pane class="hide-scrollbar !overflow-auto">
|
<Pane
|
||||||
|
:size="COLUMN_LAYOUT ? 65 : 50"
|
||||||
|
class="hide-scrollbar !overflow-auto"
|
||||||
|
>
|
||||||
<AppSection label="response">
|
<AppSection label="response">
|
||||||
<RealtimeLog :title="$t('mqtt.log')" :log="log" />
|
<RealtimeLog :title="$t('mqtt.log')" :log="log" />
|
||||||
</AppSection>
|
</AppSection>
|
||||||
@@ -87,7 +81,7 @@
|
|||||||
>
|
>
|
||||||
<AppSection label="messages">
|
<AppSection label="messages">
|
||||||
<div class="flex inline-flex flex-col flex-1 p-4">
|
<div class="flex inline-flex flex-col flex-1 p-4">
|
||||||
<label for="pub_topic" class="font-semibold text-secondaryLight">
|
<label for="pub_topic" class="text-secondaryLight font-semibold">
|
||||||
{{ $t("mqtt.topic") }}
|
{{ $t("mqtt.topic") }}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@@ -103,7 +97,7 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center justify-between flex-1 p-4">
|
<div class="flex items-center justify-between flex-1 p-4">
|
||||||
<label for="mqtt-message" class="font-semibold text-secondaryLight">
|
<label for="mqtt-message" class="text-secondaryLight font-semibold">
|
||||||
{{ $t("mqtt.communication") }}
|
{{ $t("mqtt.communication") }}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@@ -126,18 +120,9 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="
|
class="border-dividerLight flex inline-flex flex-col flex-1 p-4 mt-4 border-t"
|
||||||
flex-col
|
|
||||||
border-dividerLight
|
|
||||||
flex
|
|
||||||
inline-flex
|
|
||||||
flex-1
|
|
||||||
p-4
|
|
||||||
mt-4
|
|
||||||
border-t
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label for="sub_topic" class="font-semibold text-secondaryLight">
|
<label for="sub_topic" class="text-secondaryLight font-semibold">
|
||||||
{{ $t("mqtt.topic") }}
|
{{ $t("mqtt.topic") }}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -9,9 +9,12 @@
|
|||||||
>
|
>
|
||||||
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
|
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
|
||||||
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
|
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
|
||||||
<Pane class="hide-scrollbar !overflow-auto">
|
<Pane
|
||||||
|
:size="COLUMN_LAYOUT ? 45 : 50"
|
||||||
|
class="hide-scrollbar !overflow-auto"
|
||||||
|
>
|
||||||
<AppSection label="request">
|
<AppSection label="request">
|
||||||
<div class="sticky top-0 z-10 flex p-4 bg-primary">
|
<div class="bg-primary sticky top-0 z-10 flex p-4">
|
||||||
<div class="inline-flex flex-1 space-x-2">
|
<div class="inline-flex flex-1 space-x-2">
|
||||||
<div class="flex flex-1">
|
<div class="flex flex-1">
|
||||||
<label for="client-version">
|
<label for="client-version">
|
||||||
@@ -28,22 +31,7 @@
|
|||||||
id="client-version"
|
id="client-version"
|
||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
title="socket.io-client version"
|
title="socket.io-client version"
|
||||||
class="
|
class="bg-primaryLight border-divider text-secondaryDark w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex px-4 py-2 font-semibold border rounded-l cursor-pointer"
|
||||||
bg-primaryLight
|
|
||||||
border-divider
|
|
||||||
text-secondaryDark
|
|
||||||
w-26
|
|
||||||
hover:border-dividerDark
|
|
||||||
focus-visible:bg-transparent
|
|
||||||
focus-visible:border-dividerDark
|
|
||||||
flex
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
font-semibold
|
|
||||||
border
|
|
||||||
rounded-l
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
:value="`Client ${clientVersion}`"
|
:value="`Client ${clientVersion}`"
|
||||||
readonly
|
readonly
|
||||||
:disabled="connectionState"
|
:disabled="connectionState"
|
||||||
@@ -65,20 +53,7 @@
|
|||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
:class="{ error: !urlValid }"
|
:class="{ error: !urlValid }"
|
||||||
class="
|
class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex flex-1 w-full px-4 py-2 border"
|
||||||
flex
|
|
||||||
bg-primaryLight
|
|
||||||
border-divider
|
|
||||||
text-secondaryDark
|
|
||||||
hover:border-dividerDark
|
|
||||||
focus-visible:bg-transparent
|
|
||||||
focus-visible:border-dividerDark
|
|
||||||
flex-1
|
|
||||||
w-full
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
border
|
|
||||||
"
|
|
||||||
:placeholder="$t('socketio.url')"
|
:placeholder="$t('socketio.url')"
|
||||||
:disabled="connectionState"
|
:disabled="connectionState"
|
||||||
@keyup.enter="urlValid ? toggleConnection() : null"
|
@keyup.enter="urlValid ? toggleConnection() : null"
|
||||||
@@ -86,21 +61,7 @@
|
|||||||
<input
|
<input
|
||||||
id="socketio-path"
|
id="socketio-path"
|
||||||
v-model="path"
|
v-model="path"
|
||||||
class="
|
class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex flex-1 w-full px-4 py-2 border rounded-r"
|
||||||
flex
|
|
||||||
bg-primaryLight
|
|
||||||
border-divider
|
|
||||||
text-secondaryDark
|
|
||||||
hover:border-dividerDark
|
|
||||||
focus-visible:bg-transparent
|
|
||||||
focus-visible:border-dividerDark
|
|
||||||
flex-1
|
|
||||||
w-full
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
border
|
|
||||||
rounded-r
|
|
||||||
"
|
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
:disabled="connectionState"
|
:disabled="connectionState"
|
||||||
@keyup.enter="urlValid ? toggleConnection() : null"
|
@keyup.enter="urlValid ? toggleConnection() : null"
|
||||||
@@ -123,7 +84,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</AppSection>
|
</AppSection>
|
||||||
</Pane>
|
</Pane>
|
||||||
<Pane class="hide-scrollbar !overflow-auto">
|
<Pane
|
||||||
|
:size="COLUMN_LAYOUT ? 65 : 50"
|
||||||
|
class="hide-scrollbar !overflow-auto"
|
||||||
|
>
|
||||||
<AppSection label="response">
|
<AppSection label="response">
|
||||||
<RealtimeLog :title="$t('socketio.log')" :log="communication.log" />
|
<RealtimeLog :title="$t('socketio.log')" :log="communication.log" />
|
||||||
</AppSection>
|
</AppSection>
|
||||||
@@ -138,7 +102,7 @@
|
|||||||
>
|
>
|
||||||
<AppSection label="messages">
|
<AppSection label="messages">
|
||||||
<div class="flex inline-flex flex-col flex-1 p-4">
|
<div class="flex inline-flex flex-col flex-1 p-4">
|
||||||
<label for="events" class="font-semibold text-secondaryLight">
|
<label for="events" class="text-secondaryLight font-semibold">
|
||||||
{{ $t("socketio.events") }}
|
{{ $t("socketio.events") }}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@@ -155,7 +119,7 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center justify-between flex-1 p-4">
|
<div class="flex items-center justify-between flex-1 p-4">
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ $t("socketio.communication") }}
|
{{ $t("socketio.communication") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
|
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
|
||||||
<Pane class="hide-scrollbar !overflow-auto">
|
<Pane :size="COLUMN_LAYOUT ? 45 : 50" class="hide-scrollbar !overflow-auto">
|
||||||
<div class="sticky top-0 z-10 flex p-4 bg-primary">
|
<div class="bg-primary sticky top-0 z-10 flex p-4">
|
||||||
<div class="inline-flex flex-1 space-x-2">
|
<div class="inline-flex flex-1 space-x-2">
|
||||||
<div class="flex flex-1">
|
<div class="flex flex-1">
|
||||||
<input
|
<input
|
||||||
@@ -10,57 +10,21 @@
|
|||||||
type="url"
|
type="url"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
:class="{ error: !serverValid }"
|
:class="{ error: !serverValid }"
|
||||||
class="
|
class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex flex-1 w-full px-4 py-2 border rounded-l"
|
||||||
flex
|
|
||||||
bg-primaryLight
|
|
||||||
border-divider
|
|
||||||
text-secondaryDark
|
|
||||||
hover:border-dividerDark
|
|
||||||
focus-visible:bg-transparent focus-visible:border-dividerDark
|
|
||||||
flex-1
|
|
||||||
w-full
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
border
|
|
||||||
rounded-l
|
|
||||||
"
|
|
||||||
:placeholder="$t('sse.url')"
|
:placeholder="$t('sse.url')"
|
||||||
:disabled="connectionSSEState"
|
:disabled="connectionSSEState"
|
||||||
@keyup.enter="serverValid ? toggleSSEConnection() : null"
|
@keyup.enter="serverValid ? toggleSSEConnection() : null"
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
for="event-type"
|
for="event-type"
|
||||||
class="
|
class="bg-primaryLight border-divider text-secondaryLight px-4 py-2 font-semibold truncate border-t border-b"
|
||||||
border-t
|
|
||||||
bg-primaryLight
|
|
||||||
border-divider
|
|
||||||
text-secondaryLight
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
font-semibold
|
|
||||||
truncate
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
{{ $t("sse.event_type") }}
|
{{ $t("sse.event_type") }}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="event-type"
|
id="event-type"
|
||||||
v-model="eventType"
|
v-model="eventType"
|
||||||
class="
|
class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex flex-1 w-full px-4 py-2 border rounded-r"
|
||||||
flex
|
|
||||||
bg-primaryLight
|
|
||||||
border-divider
|
|
||||||
text-secondaryDark
|
|
||||||
hover:border-dividerDark
|
|
||||||
focus-visible:bg-transparent focus-visible:border-dividerDark
|
|
||||||
flex-1
|
|
||||||
w-full
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
border
|
|
||||||
rounded-r
|
|
||||||
"
|
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
:disabled="connectionSSEState"
|
:disabled="connectionSSEState"
|
||||||
@keyup.enter="serverValid ? toggleSSEConnection() : null"
|
@keyup.enter="serverValid ? toggleSSEConnection() : null"
|
||||||
@@ -80,7 +44,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Pane>
|
</Pane>
|
||||||
<Pane class="hide-scrollbar !overflow-auto">
|
<Pane :size="COLUMN_LAYOUT ? 65 : 50" class="hide-scrollbar !overflow-auto">
|
||||||
<AppSection label="response">
|
<AppSection label="response">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
|
|||||||
@@ -9,26 +9,17 @@
|
|||||||
>
|
>
|
||||||
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
|
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
|
||||||
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
|
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
|
||||||
<Pane class="hide-scrollbar !overflow-auto">
|
<Pane
|
||||||
|
:size="COLUMN_LAYOUT ? 45 : 50"
|
||||||
|
class="hide-scrollbar !overflow-auto"
|
||||||
|
>
|
||||||
<AppSection label="request">
|
<AppSection label="request">
|
||||||
<div class="sticky top-0 z-10 flex p-4 bg-primary">
|
<div class="bg-primary sticky top-0 z-10 flex p-4">
|
||||||
<div class="inline-flex flex-1 space-x-2">
|
<div class="inline-flex flex-1 space-x-2">
|
||||||
<input
|
<input
|
||||||
id="websocket-url"
|
id="websocket-url"
|
||||||
v-model="url"
|
v-model="url"
|
||||||
class="
|
class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark w-full px-4 py-2 border rounded"
|
||||||
bg-primaryLight
|
|
||||||
border-divider
|
|
||||||
text-secondaryDark
|
|
||||||
hover:border-dividerDark
|
|
||||||
focus-visible:bg-transparent
|
|
||||||
focus-visible:border-dividerDark
|
|
||||||
w-full
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
border
|
|
||||||
rounded
|
|
||||||
"
|
|
||||||
type="url"
|
type="url"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
@@ -53,21 +44,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight top-upperPrimaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
top-upperPrimaryStickyFold
|
|
||||||
sticky
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-between
|
|
||||||
flex-1
|
|
||||||
pl-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label class="font-semibold text-secondaryLight">
|
<label class="text-secondaryLight font-semibold">
|
||||||
{{ $t("websocket.protocols") }}
|
{{ $t("websocket.protocols") }}
|
||||||
</label>
|
</label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
@@ -88,13 +67,7 @@
|
|||||||
<div
|
<div
|
||||||
v-for="(protocol, index) of protocols"
|
v-for="(protocol, index) of protocols"
|
||||||
:key="`protocol-${index}`"
|
:key="`protocol-${index}`"
|
||||||
class="
|
class="divide-dividerLight border-dividerLight flex border-b divide-x"
|
||||||
divide-dividerLight
|
|
||||||
border-dividerLight
|
|
||||||
flex
|
|
||||||
border-b
|
|
||||||
divide-x
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
v-model="protocol.value"
|
v-model="protocol.value"
|
||||||
@@ -141,27 +114,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="protocols.length === 0"
|
v-if="protocols.length === 0"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/add_category.svg`"
|
:src="`/images/states/${$colorMode.value}/add_category.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="
|
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
|
||||||
object-contain
|
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
object-center
|
|
||||||
w-16
|
|
||||||
h-16
|
|
||||||
my-4
|
|
||||||
"
|
|
||||||
:alt="$t('empty.protocols')"
|
:alt="$t('empty.protocols')"
|
||||||
/>
|
/>
|
||||||
<span class="mb-4 text-center">
|
<span class="mb-4 text-center">
|
||||||
@@ -170,7 +128,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</AppSection>
|
</AppSection>
|
||||||
</Pane>
|
</Pane>
|
||||||
<Pane class="hide-scrollbar !overflow-auto">
|
<Pane
|
||||||
|
:size="COLUMN_LAYOUT ? 65 : 50"
|
||||||
|
class="hide-scrollbar !overflow-auto"
|
||||||
|
>
|
||||||
<AppSection label="response">
|
<AppSection label="response">
|
||||||
<RealtimeLog
|
<RealtimeLog
|
||||||
:title="$t('websocket.log')"
|
:title="$t('websocket.log')"
|
||||||
@@ -190,7 +151,7 @@
|
|||||||
<div class="flex inline-flex flex-col flex-1 p-4">
|
<div class="flex inline-flex flex-col flex-1 p-4">
|
||||||
<label
|
<label
|
||||||
for="websocket-message"
|
for="websocket-message"
|
||||||
class="font-semibold text-secondaryLight"
|
class="text-secondaryLight font-semibold"
|
||||||
>
|
>
|
||||||
{{ $t("websocket.communication") }}
|
{{ $t("websocket.communication") }}
|
||||||
</label>
|
</label>
|
||||||
|
|||||||
@@ -1,15 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="
|
class="flex-nowrap group hover:text-secondaryDark inline-flex items-center justify-center transition cursor-pointer"
|
||||||
flex-nowrap
|
|
||||||
group
|
|
||||||
hover:text-secondaryDark
|
|
||||||
inline-flex
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
transition
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
@click="$emit('change')"
|
@click="$emit('change')"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
|
|||||||
@@ -3,18 +3,7 @@
|
|||||||
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
|
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
|
||||||
:exact="exact"
|
:exact="exact"
|
||||||
:blank="blank"
|
:blank="blank"
|
||||||
class="
|
class="hover:bg-primaryDark hover:text-secondaryDark focus:outline-none focus-visible:bg-primaryDark focus-visible:text-secondaryDark inline-flex items-center flex-shrink-0 px-4 py-2 transition rounded"
|
||||||
hover:bg-primaryDark hover:text-secondaryDark
|
|
||||||
focus:outline-none
|
|
||||||
focus-visible:bg-primaryDark focus-visible:text-secondaryDark
|
|
||||||
inline-flex
|
|
||||||
items-center
|
|
||||||
flex-shrink-0
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
transition
|
|
||||||
rounded
|
|
||||||
"
|
|
||||||
:class="[
|
:class="[
|
||||||
{ 'opacity-75 cursor-not-allowed': disabled },
|
{ 'opacity-75 cursor-not-allowed': disabled },
|
||||||
{ 'pointer-events-none': loading },
|
{ 'pointer-events-none': loading },
|
||||||
@@ -53,7 +42,7 @@
|
|||||||
class="svg-icons"
|
class="svg-icons"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<SmartSpinner v-else class="mr-4 text-secondaryDark" />
|
<SmartSpinner v-else class="text-secondaryDark mr-4" />
|
||||||
<div
|
<div
|
||||||
class="inline-flex items-start flex-1 truncate"
|
class="inline-flex items-start flex-1 truncate"
|
||||||
:class="{ 'flex-col': description }"
|
:class="{ 'flex-col': description }"
|
||||||
@@ -63,14 +52,14 @@
|
|||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
v-if="description"
|
v-if="description"
|
||||||
class="my-2 font-medium text-left text-secondaryLight"
|
class="text-secondaryLight my-2 font-medium text-left"
|
||||||
>
|
>
|
||||||
{{ description }}
|
{{ description }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<i
|
<i
|
||||||
v-if="infoIcon"
|
v-if="infoIcon"
|
||||||
class="items-center self-center ml-6 material-icons"
|
class="material-icons items-center self-center ml-6"
|
||||||
:class="{ 'text-accent': activeInfoIcon }"
|
:class="{ 'text-accent': activeInfoIcon }"
|
||||||
>
|
>
|
||||||
{{ infoIcon }}
|
{{ infoIcon }}
|
||||||
|
|||||||
@@ -2,14 +2,14 @@
|
|||||||
<transition name="fade" appear @leave="onTransitionLeaveStart">
|
<transition name="fade" appear @leave="onTransitionLeaveStart">
|
||||||
<div
|
<div
|
||||||
ref="modal"
|
ref="modal"
|
||||||
class="fixed inset-0 z-10 z-50 overflow-y-auto hide-scrollbar transition"
|
class="hide-scrollbar fixed inset-0 z-10 z-50 overflow-y-auto transition"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex items-end justify-center min-h-screen text-center sm:block"
|
class="sm:block flex items-end justify-center min-h-screen text-center"
|
||||||
>
|
>
|
||||||
<transition name="fade" appear>
|
<transition name="fade" appear>
|
||||||
<div
|
<div
|
||||||
class="fixed inset-0 bg-primaryLight opacity-90 transition"
|
class="bg-primaryLight opacity-90 fixed inset-0 transition"
|
||||||
@touchstart="!dialog ? close() : null"
|
@touchstart="!dialog ? close() : null"
|
||||||
@touchend="!dialog ? close() : null"
|
@touchend="!dialog ? close() : null"
|
||||||
@mouseup="!dialog ? close() : null"
|
@mouseup="!dialog ? close() : null"
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
</transition>
|
</transition>
|
||||||
<span
|
<span
|
||||||
v-if="placement === 'center'"
|
v-if="placement === 'center'"
|
||||||
class="hidden sm:h-screen sm:inline-block sm:align-middle"
|
class="sm:h-screen sm:inline-block sm:align-middle hidden"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
>​</span
|
>​</span
|
||||||
>
|
>
|
||||||
@@ -32,18 +32,7 @@
|
|||||||
leave-to-class="scale-95 translate-y-4"
|
leave-to-class="scale-95 translate-y-4"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary sm:align-middle sm:rounded-xl inline-block w-full overflow-hidden text-left align-bottom transition-all transform shadow-lg"
|
||||||
bg-primary
|
|
||||||
sm:align-middle sm:rounded-xl
|
|
||||||
inline-block
|
|
||||||
w-full
|
|
||||||
overflow-hidden
|
|
||||||
text-left
|
|
||||||
align-bottom
|
|
||||||
transition-all
|
|
||||||
transform
|
|
||||||
shadow-lg
|
|
||||||
"
|
|
||||||
:class="[
|
:class="[
|
||||||
{ 'mt-24 md:mb-8': placement === 'top' },
|
{ 'mt-24 md:mb-8': placement === 'top' },
|
||||||
{ 'p-4': !fullWidth },
|
{ 'p-4': !fullWidth },
|
||||||
@@ -66,7 +55,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col overflow-y-auto max-h-md hide-scrollbar"
|
class="max-h-md hide-scrollbar flex flex-col overflow-y-auto"
|
||||||
:class="{ 'py-2': !fullWidth }"
|
:class="{ 'py-2': !fullWidth }"
|
||||||
>
|
>
|
||||||
<slot name="body"></slot>
|
<slot name="body"></slot>
|
||||||
|
|||||||
@@ -3,16 +3,7 @@
|
|||||||
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
|
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
|
||||||
:exact="exact"
|
:exact="exact"
|
||||||
:blank="blank"
|
:blank="blank"
|
||||||
class="
|
class="focus:outline-none inline-flex items-center px-4 py-2 truncate transition rounded"
|
||||||
focus:outline-none
|
|
||||||
inline-flex
|
|
||||||
items-center
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
truncate
|
|
||||||
transition
|
|
||||||
rounded
|
|
||||||
"
|
|
||||||
:class="[
|
:class="[
|
||||||
color
|
color
|
||||||
? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
|
? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
|
||||||
|
|||||||
@@ -3,19 +3,7 @@
|
|||||||
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
|
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
|
||||||
:exact="exact"
|
:exact="exact"
|
||||||
:blank="blank"
|
:blank="blank"
|
||||||
class="
|
class="hover:translate-x-2 focus:outline-none focus-visible:translate-x-2 inline-flex items-center flex-1 py-2 font-semibold truncate transition transform"
|
||||||
hover:translate-x-2
|
|
||||||
focus:outline-none
|
|
||||||
focus-visible:translate-x-2
|
|
||||||
inline-flex
|
|
||||||
items-center
|
|
||||||
flex-1
|
|
||||||
py-2
|
|
||||||
font-semibold
|
|
||||||
truncate
|
|
||||||
transition
|
|
||||||
transform
|
|
||||||
"
|
|
||||||
:class="[
|
:class="[
|
||||||
label ? 'px-3' : 'px-2',
|
label ? 'px-3' : 'px-2',
|
||||||
active
|
active
|
||||||
|
|||||||
@@ -47,31 +47,16 @@
|
|||||||
E.isRight(teamDetails.data) &&
|
E.isRight(teamDetails.data) &&
|
||||||
teamDetails.data.right.team.teamMembers
|
teamDetails.data.right.team.teamMembers
|
||||||
"
|
"
|
||||||
class="border rounded divide-dividerLight border-divider divide-y"
|
class="divide-dividerLight border-divider border divide-y rounded"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-if="teamDetails.data.right.team.teamMembers === 0"
|
v-if="teamDetails.data.right.team.teamMembers === 0"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/add_group.svg`"
|
:src="`/images/states/${$colorMode.value}/add_group.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="
|
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
|
||||||
object-contain
|
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
object-center
|
|
||||||
w-16
|
|
||||||
h-16
|
|
||||||
my-4
|
|
||||||
"
|
|
||||||
:alt="`${t('empty.members')}`"
|
:alt="`${t('empty.members')}`"
|
||||||
/>
|
/>
|
||||||
<span class="pb-4 text-center">
|
<span class="pb-4 text-center">
|
||||||
@@ -91,7 +76,7 @@
|
|||||||
<div
|
<div
|
||||||
v-for="(member, index) in membersList"
|
v-for="(member, index) in membersList"
|
||||||
:key="`member-${index}`"
|
:key="`member-${index}`"
|
||||||
class="flex divide-dividerLight divide-x"
|
class="divide-dividerLight flex divide-x"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
class="flex flex-1 px-4 py-2 bg-transparent"
|
class="flex flex-1 px-4 py-2 bg-transparent"
|
||||||
@@ -111,13 +96,7 @@
|
|||||||
<template #trigger>
|
<template #trigger>
|
||||||
<span class="select-wrapper">
|
<span class="select-wrapper">
|
||||||
<input
|
<input
|
||||||
class="
|
class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
|
||||||
flex flex-1
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
bg-transparent
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
:placeholder="`${t('team.permissions')}`"
|
:placeholder="`${t('team.permissions')}`"
|
||||||
:name="'value' + index"
|
:name="'value' + index"
|
||||||
:value="
|
:value="
|
||||||
@@ -175,7 +154,7 @@
|
|||||||
v-if="!teamDetails.loading && E.isLeft(teamDetails.data)"
|
v-if="!teamDetails.loading && E.isLeft(teamDetails.data)"
|
||||||
class="flex flex-col items-center"
|
class="flex flex-col items-center"
|
||||||
>
|
>
|
||||||
<i class="mb-4 material-icons">help_outline</i>
|
<i class="material-icons mb-4">help_outline</i>
|
||||||
{{ t("error.something_went_wrong") }}
|
{{ t("error.something_went_wrong") }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<template #body>
|
<template #body>
|
||||||
<div v-if="sendInvitesResult.length" class="flex flex-col px-4">
|
<div v-if="sendInvitesResult.length" class="flex flex-col px-4">
|
||||||
<div class="flex flex-col items-center justify-center max-w-md">
|
<div class="flex flex-col items-center justify-center max-w-md">
|
||||||
<SmartIcon class="w-6 h-6 text-accent" name="users" />
|
<SmartIcon class="text-accent w-6 h-6" name="users" />
|
||||||
<h3 class="my-2 text-lg text-center">
|
<h3 class="my-2 text-lg text-center">
|
||||||
{{ t("team.we_sent_invite_link") }}
|
{{ t("team.we_sent_invite_link") }}
|
||||||
</h3>
|
</h3>
|
||||||
@@ -12,16 +12,7 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="
|
class="border-dividerLight flex flex-col p-4 mt-8 space-y-6 border rounded"
|
||||||
flex
|
|
||||||
border-dividerLight
|
|
||||||
flex-col
|
|
||||||
p-4
|
|
||||||
mt-8
|
|
||||||
space-y-6
|
|
||||||
border
|
|
||||||
rounded
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-for="(invitee, index) in sendInvitesResult"
|
v-for="(invitee, index) in sendInvitesResult"
|
||||||
@@ -29,7 +20,7 @@
|
|||||||
>
|
>
|
||||||
<p class="flex items-center">
|
<p class="flex items-center">
|
||||||
<i
|
<i
|
||||||
class="mr-4 material-icons"
|
class="material-icons mr-4"
|
||||||
:class="
|
:class="
|
||||||
invitee.status === 'error' ? 'text-red-500' : 'text-green-500'
|
invitee.status === 'error' ? 'text-red-500' : 'text-green-500'
|
||||||
"
|
"
|
||||||
@@ -60,7 +51,7 @@
|
|||||||
{{ t("team.pending_invites") }}
|
{{ t("team.pending_invites") }}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="border rounded divide-dividerLight border-divider divide-y">
|
<div class="divide-dividerLight border-divider border divide-y rounded">
|
||||||
<div
|
<div
|
||||||
v-if="pendingInvites.loading"
|
v-if="pendingInvites.loading"
|
||||||
class="flex items-center justify-center p-4"
|
class="flex items-center justify-center p-4"
|
||||||
@@ -75,32 +66,18 @@
|
|||||||
v-for="(invitee, index) in pendingInvites.data.right.team
|
v-for="(invitee, index) in pendingInvites.data.right.team
|
||||||
.teamInvitations"
|
.teamInvitations"
|
||||||
:key="`invitee-${index}`"
|
:key="`invitee-${index}`"
|
||||||
class="flex divide-dividerLight divide-x"
|
class="divide-dividerLight flex divide-x"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
v-if="invitee"
|
v-if="invitee"
|
||||||
class="
|
class="text-secondaryLight flex flex-1 px-4 py-2 bg-transparent"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-1
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
bg-transparent
|
|
||||||
"
|
|
||||||
:placeholder="`${t('team.email')}`"
|
:placeholder="`${t('team.email')}`"
|
||||||
:name="'param' + index"
|
:name="'param' + index"
|
||||||
:value="invitee.inviteeEmail"
|
:value="invitee.inviteeEmail"
|
||||||
readonly
|
readonly
|
||||||
/>
|
/>
|
||||||
<input
|
<input
|
||||||
class="
|
class="text-secondaryLight flex flex-1 px-4 py-2 bg-transparent"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-1
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
bg-transparent
|
|
||||||
"
|
|
||||||
:placeholder="`${t('team.permissions')}`"
|
:placeholder="`${t('team.permissions')}`"
|
||||||
:name="'value' + index"
|
:name="'value' + index"
|
||||||
:value="
|
:value="
|
||||||
@@ -126,14 +103,7 @@
|
|||||||
E.isRight(pendingInvites.data) &&
|
E.isRight(pendingInvites.data) &&
|
||||||
pendingInvites.data.right.team.teamInvitations.length === 0
|
pendingInvites.data.right.team.teamInvitations.length === 0
|
||||||
"
|
"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<span class="text-center">
|
<span class="text-center">
|
||||||
{{ t("empty.pending_invites") }}
|
{{ t("empty.pending_invites") }}
|
||||||
@@ -143,7 +113,7 @@
|
|||||||
v-if="!pendingInvites.loading && E.isLeft(pendingInvites.data)"
|
v-if="!pendingInvites.loading && E.isLeft(pendingInvites.data)"
|
||||||
class="flex flex-col items-center p-4"
|
class="flex flex-col items-center p-4"
|
||||||
>
|
>
|
||||||
<i class="mb-4 material-icons">help_outline</i>
|
<i class="material-icons mb-4">help_outline</i>
|
||||||
{{ t("error.something_went_wrong") }}
|
{{ t("error.something_went_wrong") }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -161,11 +131,11 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="border rounded divide-dividerLight border-divider divide-y">
|
<div class="divide-dividerLight border-divider border divide-y rounded">
|
||||||
<div
|
<div
|
||||||
v-for="(invitee, index) in newInvites"
|
v-for="(invitee, index) in newInvites"
|
||||||
:key="`new-invitee-${index}`"
|
:key="`new-invitee-${index}`"
|
||||||
class="flex divide-dividerLight divide-x"
|
class="divide-dividerLight flex divide-x"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
v-model="invitee.key"
|
v-model="invitee.key"
|
||||||
@@ -185,13 +155,7 @@
|
|||||||
<template #trigger>
|
<template #trigger>
|
||||||
<span class="select-wrapper">
|
<span class="select-wrapper">
|
||||||
<input
|
<input
|
||||||
class="
|
class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
|
||||||
flex flex-1
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
bg-transparent
|
|
||||||
cursor-pointer
|
|
||||||
"
|
|
||||||
:placeholder="`${t('team.permissions')}`"
|
:placeholder="`${t('team.permissions')}`"
|
||||||
:name="'value' + index"
|
:name="'value' + index"
|
||||||
:value="
|
:value="
|
||||||
@@ -245,27 +209,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="newInvites.length === 0"
|
v-if="newInvites.length === 0"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/add_group.svg`"
|
:src="`/images/states/${$colorMode.value}/add_group.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="
|
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
|
||||||
object-contain
|
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
object-center
|
|
||||||
w-16
|
|
||||||
h-16
|
|
||||||
mb-4
|
|
||||||
"
|
|
||||||
:alt="`${t('empty.invites')}`"
|
:alt="`${t('empty.invites')}`"
|
||||||
/>
|
/>
|
||||||
<span class="pb-4 text-center">
|
<span class="pb-4 text-center">
|
||||||
@@ -280,34 +229,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="newInvites.length"
|
v-if="newInvites.length"
|
||||||
class="
|
class="border-dividerLight flex flex-col items-start px-4 py-4 mt-4 border rounded"
|
||||||
flex
|
|
||||||
border-dividerLight
|
|
||||||
flex-col
|
|
||||||
items-start
|
|
||||||
px-4
|
|
||||||
py-4
|
|
||||||
mt-4
|
|
||||||
border
|
|
||||||
rounded
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="
|
class="bg-primaryDark border-divider flex items-center justify-center px-2 py-1 mb-4 font-semibold border rounded-full"
|
||||||
bg-primaryDark
|
|
||||||
border-divider
|
|
||||||
flex
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
px-2
|
|
||||||
py-1
|
|
||||||
mb-4
|
|
||||||
font-semibold
|
|
||||||
border
|
|
||||||
rounded-full
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<i class="mr-2 text-secondaryLight material-icons">help_outline</i>
|
<i class="text-secondaryLight material-icons mr-2">help_outline</i>
|
||||||
{{ t("profile.roles") }}
|
{{ t("profile.roles") }}
|
||||||
</span>
|
</span>
|
||||||
<p>
|
<p>
|
||||||
@@ -318,14 +245,7 @@
|
|||||||
<ul class="mt-4 space-y-4">
|
<ul class="mt-4 space-y-4">
|
||||||
<li class="flex">
|
<li class="flex">
|
||||||
<span
|
<span
|
||||||
class="
|
class="text-secondaryDark max-w-16 w-1/4 font-semibold uppercase truncate"
|
||||||
text-secondaryDark
|
|
||||||
max-w-16
|
|
||||||
w-1/4
|
|
||||||
font-semibold
|
|
||||||
uppercase
|
|
||||||
truncate
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
{{ t("profile.owner") }}
|
{{ t("profile.owner") }}
|
||||||
</span>
|
</span>
|
||||||
@@ -335,14 +255,7 @@
|
|||||||
</li>
|
</li>
|
||||||
<li class="flex">
|
<li class="flex">
|
||||||
<span
|
<span
|
||||||
class="
|
class="text-secondaryDark max-w-16 w-1/4 font-semibold uppercase truncate"
|
||||||
text-secondaryDark
|
|
||||||
max-w-16
|
|
||||||
w-1/4
|
|
||||||
font-semibold
|
|
||||||
uppercase
|
|
||||||
truncate
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
{{ t("profile.editor") }}
|
{{ t("profile.editor") }}
|
||||||
</span>
|
</span>
|
||||||
@@ -352,14 +265,7 @@
|
|||||||
</li>
|
</li>
|
||||||
<li class="flex">
|
<li class="flex">
|
||||||
<span
|
<span
|
||||||
class="
|
class="text-secondaryDark max-w-16 w-1/4 font-semibold uppercase truncate"
|
||||||
text-secondaryDark
|
|
||||||
max-w-16
|
|
||||||
w-1/4
|
|
||||||
font-semibold
|
|
||||||
uppercase
|
|
||||||
truncate
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
{{ t("profile.viewer") }}
|
{{ t("profile.viewer") }}
|
||||||
</span>
|
</span>
|
||||||
@@ -374,7 +280,7 @@
|
|||||||
<template #footer>
|
<template #footer>
|
||||||
<p
|
<p
|
||||||
v-if="sendInvitesResult.length"
|
v-if="sendInvitesResult.length"
|
||||||
class="flex justify-between flex-1 text-secondaryLight"
|
class="text-secondaryLight flex justify-between flex-1"
|
||||||
>
|
>
|
||||||
<SmartAnchor
|
<SmartAnchor
|
||||||
class="link"
|
class="link"
|
||||||
|
|||||||
@@ -19,27 +19,12 @@
|
|||||||
E.isRight(myTeams.data) &&
|
E.isRight(myTeams.data) &&
|
||||||
myTeams.data.right.myTeams.length === 0
|
myTeams.data.right.myTeams.length === 0
|
||||||
"
|
"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/add_group.svg`"
|
:src="`/images/states/${$colorMode.value}/add_group.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="
|
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-8"
|
||||||
object-contain
|
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
object-center
|
|
||||||
w-16
|
|
||||||
h-16
|
|
||||||
mb-8
|
|
||||||
"
|
|
||||||
:alt="`${t('empty.teams')}`"
|
:alt="`${t('empty.teams')}`"
|
||||||
/>
|
/>
|
||||||
<span class="mb-4 text-center">
|
<span class="mb-4 text-center">
|
||||||
@@ -72,7 +57,7 @@
|
|||||||
v-if="!myTeams.loading && E.isLeft(myTeams.data)"
|
v-if="!myTeams.loading && E.isLeft(myTeams.data)"
|
||||||
class="flex flex-col items-center"
|
class="flex flex-col items-center"
|
||||||
>
|
>
|
||||||
<i class="mb-4 material-icons">help_outline</i>
|
<i class="material-icons mb-4">help_outline</i>
|
||||||
{{ t("error.something_went_wrong") }}
|
{{ t("error.something_went_wrong") }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -37,7 +37,8 @@ export const baseTheme = EditorView.theme({
|
|||||||
borderColor: "var(--secondary-color)",
|
borderColor: "var(--secondary-color)",
|
||||||
},
|
},
|
||||||
".cm-selectionBackground, .cm-content ::selection, .cm-line ::selection": {
|
".cm-selectionBackground, .cm-content ::selection, .cm-line ::selection": {
|
||||||
backgroundColor: "var(--divider-color)",
|
backgroundColor: "var(--accent-color)",
|
||||||
|
color: "var(--accent-contrast-color)",
|
||||||
},
|
},
|
||||||
".cm-panels": {
|
".cm-panels": {
|
||||||
backgroundColor: "var(--primary-light-color)",
|
backgroundColor: "var(--primary-light-color)",
|
||||||
|
|||||||
@@ -9,37 +9,23 @@
|
|||||||
>
|
>
|
||||||
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
|
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
|
||||||
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
|
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
|
||||||
<Pane class="hide-scrollbar !overflow-auto">
|
<Pane
|
||||||
|
:size="COLUMN_LAYOUT ? 45 : 50"
|
||||||
|
class="hide-scrollbar !overflow-auto"
|
||||||
|
>
|
||||||
<AppSection label="import">
|
<AppSection label="import">
|
||||||
<div class="flex items-start justify-between p-4">
|
<div class="flex items-start justify-between p-4">
|
||||||
<label>
|
<label>
|
||||||
{{ $t("documentation.generate_message") }}
|
{{ $t("documentation.generate_message") }}
|
||||||
</label>
|
</label>
|
||||||
<span
|
<span
|
||||||
class="
|
class="bg-accentDark text-accentContrast inline-flex px-2 py-1 rounded"
|
||||||
bg-accentDark
|
|
||||||
text-accentContrast
|
|
||||||
inline-flex
|
|
||||||
px-2
|
|
||||||
py-1
|
|
||||||
rounded
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
BETA
|
BETA
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight sticky top-0 z-10 flex items-start justify-between border-b"
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
sticky
|
|
||||||
top-0
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-start
|
|
||||||
justify-between
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<label for="collectionUpload">
|
<label for="collectionUpload">
|
||||||
<ButtonSecondary
|
<ButtonSecondary
|
||||||
@@ -68,24 +54,12 @@
|
|||||||
<textarea-autosize
|
<textarea-autosize
|
||||||
id="import-curl"
|
id="import-curl"
|
||||||
v-model="collectionJSON"
|
v-model="collectionJSON"
|
||||||
class="p-4 font-mono bg-primary"
|
class="bg-primary p-4 font-mono"
|
||||||
autofocus
|
autofocus
|
||||||
rows="8"
|
rows="8"
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="
|
class="bg-primary border-dividerLight sticky bottom-0 z-10 flex items-start justify-between p-4 border-t border-b"
|
||||||
border-t
|
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
sticky
|
|
||||||
bottom-0
|
|
||||||
z-10
|
|
||||||
flex
|
|
||||||
items-start
|
|
||||||
justify-between
|
|
||||||
p-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<ButtonPrimary
|
<ButtonPrimary
|
||||||
:label="$t('documentation.generate')"
|
:label="$t('documentation.generate')"
|
||||||
@@ -94,38 +68,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</AppSection>
|
</AppSection>
|
||||||
</Pane>
|
</Pane>
|
||||||
<Pane class="hide-scrollbar !overflow-auto">
|
<Pane
|
||||||
|
:size="COLUMN_LAYOUT ? 65 : 50"
|
||||||
|
class="hide-scrollbar !overflow-auto"
|
||||||
|
>
|
||||||
<AppSection label="documentation">
|
<AppSection label="documentation">
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<div
|
<div
|
||||||
v-if="items.length === 0"
|
v-if="items.length === 0"
|
||||||
class="
|
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||||
flex
|
|
||||||
text-secondaryLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
justify-center
|
|
||||||
p-4
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<i class="pb-2 opacity-75 material-icons">topic</i>
|
<i class="material-icons pb-2 opacity-75">topic</i>
|
||||||
<span class="text-center">
|
<span class="text-center">
|
||||||
{{ $t("helpers.generate_documentation_first") }}
|
{{ $t("helpers.generate_documentation_first") }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-else
|
v-else
|
||||||
class="
|
class="bg-primary border-dividerLight sticky top-0 z-10 flex flex-1 p-4 border-b"
|
||||||
flex
|
|
||||||
bg-primary
|
|
||||||
border-dividerLight
|
|
||||||
sticky
|
|
||||||
top-0
|
|
||||||
z-10
|
|
||||||
flex-1
|
|
||||||
p-4
|
|
||||||
border-b
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
v-tippy="{ theme: 'tooltip' }"
|
v-tippy="{ theme: 'tooltip' }"
|
||||||
|
|||||||
@@ -9,11 +9,17 @@
|
|||||||
>
|
>
|
||||||
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
|
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
|
||||||
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
|
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
|
||||||
<Pane class="hide-scrollbar !overflow-auto">
|
<Pane
|
||||||
|
:size="COLUMN_LAYOUT ? 45 : 50"
|
||||||
|
class="hide-scrollbar !overflow-auto"
|
||||||
|
>
|
||||||
<GraphqlRequest :conn="gqlConn" />
|
<GraphqlRequest :conn="gqlConn" />
|
||||||
<GraphqlRequestOptions :conn="gqlConn" />
|
<GraphqlRequestOptions :conn="gqlConn" />
|
||||||
</Pane>
|
</Pane>
|
||||||
<Pane class="hide-scrollbar !overflow-auto">
|
<Pane
|
||||||
|
:size="COLUMN_LAYOUT ? 65 : 50"
|
||||||
|
class="hide-scrollbar !overflow-auto"
|
||||||
|
>
|
||||||
<GraphqlResponse :conn="gqlConn" />
|
<GraphqlResponse :conn="gqlConn" />
|
||||||
</Pane>
|
</Pane>
|
||||||
</Splitpanes>
|
</Splitpanes>
|
||||||
|
|||||||
@@ -9,7 +9,10 @@
|
|||||||
>
|
>
|
||||||
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
|
<Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
|
||||||
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
|
<Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
|
||||||
<Pane class="hide-scrollbar !overflow-auto">
|
<Pane
|
||||||
|
:size="COLUMN_LAYOUT ? 45 : 50"
|
||||||
|
class="hide-scrollbar !overflow-auto"
|
||||||
|
>
|
||||||
<HttpRequest />
|
<HttpRequest />
|
||||||
<SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
|
<SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
|
||||||
<SmartTab
|
<SmartTab
|
||||||
@@ -52,7 +55,10 @@
|
|||||||
</SmartTab>
|
</SmartTab>
|
||||||
</SmartTabs>
|
</SmartTabs>
|
||||||
</Pane>
|
</Pane>
|
||||||
<Pane class="hide-scrollbar !overflow-auto flex flex-col">
|
<Pane
|
||||||
|
:size="COLUMN_LAYOUT ? 65 : 50"
|
||||||
|
class="hide-scrollbar !overflow-auto flex flex-col"
|
||||||
|
>
|
||||||
<HttpResponse ref="response" />
|
<HttpResponse ref="response" />
|
||||||
</Pane>
|
</Pane>
|
||||||
</Splitpanes>
|
</Splitpanes>
|
||||||
|
|||||||
@@ -4,8 +4,8 @@
|
|||||||
v-if="invalidLink"
|
v-if="invalidLink"
|
||||||
class="flex flex-col items-center justify-center flex-1"
|
class="flex flex-col items-center justify-center flex-1"
|
||||||
>
|
>
|
||||||
<i class="pb-2 opacity-75 material-icons">error_outline</i>
|
<i class="material-icons pb-2 opacity-75">error_outline</i>
|
||||||
<h1 class="text-center heading">
|
<h1 class="heading text-center">
|
||||||
{{ $t("team.invalid_invite_link") }}
|
{{ $t("team.invalid_invite_link") }}
|
||||||
</h1>
|
</h1>
|
||||||
<p class="mt-2 text-center">
|
<p class="mt-2 text-center">
|
||||||
@@ -42,21 +42,12 @@
|
|||||||
v-if="!inviteDetails.loading && E.isLeft(inviteDetails.data)"
|
v-if="!inviteDetails.loading && E.isLeft(inviteDetails.data)"
|
||||||
class="flex flex-col items-center p-4"
|
class="flex flex-col items-center p-4"
|
||||||
>
|
>
|
||||||
<i class="mb-4 material-icons">error_outline</i>
|
<i class="material-icons mb-4">error_outline</i>
|
||||||
<p>
|
<p>
|
||||||
{{ getErrorMessage(inviteDetails.data.left) }}
|
{{ getErrorMessage(inviteDetails.data.left) }}
|
||||||
</p>
|
</p>
|
||||||
<p
|
<p
|
||||||
class="
|
class="border-dividerLight flex flex-col items-center p-4 mt-8 border rounded"
|
||||||
flex
|
|
||||||
border-dividerLight
|
|
||||||
flex-col
|
|
||||||
items-center
|
|
||||||
p-4
|
|
||||||
mt-8
|
|
||||||
border
|
|
||||||
rounded
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<span class="mb-4">
|
<span class="mb-4">
|
||||||
{{ $t("team.logout_and_try_again") }}
|
{{ $t("team.logout_and_try_again") }}
|
||||||
@@ -84,7 +75,7 @@
|
|||||||
})
|
})
|
||||||
}}
|
}}
|
||||||
</h1>
|
</h1>
|
||||||
<p class="mt-2 text-secondaryLight">
|
<p class="text-secondaryLight mt-2">
|
||||||
{{
|
{{
|
||||||
$t("team.invited_to_team", {
|
$t("team.invited_to_team", {
|
||||||
owner:
|
owner:
|
||||||
@@ -121,7 +112,7 @@
|
|||||||
})
|
})
|
||||||
}}
|
}}
|
||||||
</h1>
|
</h1>
|
||||||
<p class="mt-2 text-secondaryLight">
|
<p class="text-secondaryLight mt-2">
|
||||||
{{
|
{{
|
||||||
$t("team.joined_team_description", {
|
$t("team.joined_team_description", {
|
||||||
team: inviteDetails.data.right.teamInvitation.team.name,
|
team: inviteDetails.data.right.teamInvitation.team.name,
|
||||||
|
|||||||
@@ -9,18 +9,10 @@
|
|||||||
<img
|
<img
|
||||||
:src="`/images/states/${$colorMode.value}/login.svg`"
|
:src="`/images/states/${$colorMode.value}/login.svg`"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
class="
|
class="inline-flex flex-col object-contain object-center w-24 h-24 my-4"
|
||||||
object-contain
|
|
||||||
inline-flex
|
|
||||||
flex-col
|
|
||||||
object-center
|
|
||||||
w-24
|
|
||||||
h-24
|
|
||||||
my-4
|
|
||||||
"
|
|
||||||
:alt="`${t('empty.parameters')}`"
|
:alt="`${t('empty.parameters')}`"
|
||||||
/>
|
/>
|
||||||
<p class="pb-4 text-center text-secondaryLight">
|
<p class="text-secondaryLight pb-4 text-center">
|
||||||
{{ t("empty.profile") }}
|
{{ t("empty.profile") }}
|
||||||
</p>
|
</p>
|
||||||
<ButtonPrimary
|
<ButtonPrimary
|
||||||
@@ -31,15 +23,15 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-else class="space-y-8">
|
<div v-else class="space-y-8">
|
||||||
<div
|
<div
|
||||||
class="h-24 rounded bg-primaryLight md:h-32 -mb-11"
|
class="bg-primaryLight md:h-32 -mb-11 h-24 rounded"
|
||||||
style="background-image: url('/images/cover.svg')"
|
style="background-image: url('/images/cover.svg')"
|
||||||
></div>
|
></div>
|
||||||
<div class="flex flex-col justify-between px-4 md:flex-row space-y-8">
|
<div class="md:flex-row flex flex-col justify-between px-4 space-y-8">
|
||||||
<div class="flex items-end">
|
<div class="flex items-end">
|
||||||
<img
|
<img
|
||||||
v-if="currentUser.photoURL"
|
v-if="currentUser.photoURL"
|
||||||
:src="currentUser.photoURL"
|
:src="currentUser.photoURL"
|
||||||
class="w-16 h-16 rounded-lg ring-4 ring-primary"
|
class="ring-4 ring-primary w-16 h-16 rounded-lg"
|
||||||
:alt="currentUser.displayName"
|
:alt="currentUser.displayName"
|
||||||
/>
|
/>
|
||||||
<SmartIcon v-else name="user" class="svg-icons" />
|
<SmartIcon v-else name="user" class="svg-icons" />
|
||||||
@@ -47,12 +39,12 @@
|
|||||||
<label class="heading">
|
<label class="heading">
|
||||||
{{ currentUser.displayName || t("state.nothing_found") }}
|
{{ currentUser.displayName || t("state.nothing_found") }}
|
||||||
</label>
|
</label>
|
||||||
<p class="flex items-center text-secondaryLight">
|
<p class="text-secondaryLight flex items-center">
|
||||||
{{ currentUser.email }}
|
{{ currentUser.email }}
|
||||||
<SmartIcon
|
<SmartIcon
|
||||||
v-if="currentUser.emailVerified"
|
v-if="currentUser.emailVerified"
|
||||||
name="verified"
|
name="verified"
|
||||||
class="ml-2 text-green-500 svg-icons"
|
class="svg-icons ml-2 text-green-500"
|
||||||
/>
|
/>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -76,10 +68,10 @@
|
|||||||
:selected="true"
|
:selected="true"
|
||||||
>
|
>
|
||||||
<section class="p-4">
|
<section class="p-4">
|
||||||
<h4 class="font-semibold text-secondaryDark">
|
<h4 class="text-secondaryDark font-semibold">
|
||||||
{{ t("settings.profile") }}
|
{{ t("settings.profile") }}
|
||||||
</h4>
|
</h4>
|
||||||
<div class="mt-1 text-secondaryLight">
|
<div class="text-secondaryLight mt-1">
|
||||||
{{ t("settings.profile_description") }}
|
{{ t("settings.profile_description") }}
|
||||||
</div>
|
</div>
|
||||||
<div class="py-4">
|
<div class="py-4">
|
||||||
@@ -87,7 +79,7 @@
|
|||||||
{{ t("settings.profile_name") }}
|
{{ t("settings.profile_name") }}
|
||||||
</label>
|
</label>
|
||||||
<form
|
<form
|
||||||
class="flex mt-2 md:max-w-sm"
|
class="md:max-w-sm flex mt-2"
|
||||||
@submit.prevent="updateDisplayName"
|
@submit.prevent="updateDisplayName"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
@@ -101,7 +93,7 @@
|
|||||||
/>
|
/>
|
||||||
<ButtonPrimary
|
<ButtonPrimary
|
||||||
:label="t('action.save')"
|
:label="t('action.save')"
|
||||||
class="ml-2 min-w-16"
|
class="min-w-16 ml-2"
|
||||||
type="submit"
|
type="submit"
|
||||||
:loading="updatingDisplayName"
|
:loading="updatingDisplayName"
|
||||||
/>
|
/>
|
||||||
@@ -109,10 +101,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="p-4">
|
<section class="p-4">
|
||||||
<h4 class="font-semibold text-secondaryDark">
|
<h4 class="text-secondaryDark font-semibold">
|
||||||
{{ t("settings.sync") }}
|
{{ t("settings.sync") }}
|
||||||
</h4>
|
</h4>
|
||||||
<div class="mt-1 text-secondaryLight">
|
<div class="text-secondaryLight mt-1">
|
||||||
{{ t("settings.sync_description") }}
|
{{ t("settings.sync_description") }}
|
||||||
</div>
|
</div>
|
||||||
<div class="py-4 space-y-4">
|
<div class="py-4 space-y-4">
|
||||||
|
|||||||
Reference in New Issue
Block a user