refactor(ui): popovers
This commit is contained in:
Liyas Thomas
GitHub
@@ -10,7 +10,13 @@
|
||||
<li class="shrink">
|
||||
<label for="method">{{ $t("method") }}</label>
|
||||
<span class="select-wrapper">
|
||||
<tippy tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<tippy
|
||||
ref="options"
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<input
|
||||
id="method"
|
||||
@@ -20,19 +26,17 @@
|
||||
autofocus
|
||||
/>
|
||||
</template>
|
||||
<div
|
||||
<SmartItem
|
||||
v-for="(methodMenuItem, index) in methodMenuItems"
|
||||
:key="`method-${index}`"
|
||||
>
|
||||
<ButtonSecondary
|
||||
@click.native="
|
||||
customMethod =
|
||||
methodMenuItem == 'CUSTOM' ? true : false
|
||||
method = methodMenuItem
|
||||
"
|
||||
/>
|
||||
{{ methodMenuItem }}
|
||||
</div>
|
||||
@click.native="
|
||||
customMethod =
|
||||
methodMenuItem == 'CUSTOM' ? true : false
|
||||
method = methodMenuItem
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
:label="methodMenuItem"
|
||||
/>
|
||||
</tippy>
|
||||
</span>
|
||||
</li>
|
||||
@@ -101,6 +105,7 @@
|
||||
}}</label>
|
||||
<span class="select-wrapper">
|
||||
<tippy
|
||||
ref="contentTypeOptions"
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
@@ -114,17 +119,17 @@
|
||||
readonly
|
||||
/>
|
||||
</template>
|
||||
<div
|
||||
<SmartItem
|
||||
v-for="(
|
||||
contentTypeMenuItem, index
|
||||
) in validContentTypes"
|
||||
:key="`content-type-${index}`"
|
||||
>
|
||||
<ButtonSecondary
|
||||
@click.native="contentType = contentTypeMenuItem"
|
||||
/>
|
||||
{{ contentTypeMenuItem }}
|
||||
</div>
|
||||
@click.native="
|
||||
contentType = contentTypeMenuItem
|
||||
$refs.contentTypeOptions.tippy().hide()
|
||||
"
|
||||
:label="contentTypeMenuItem"
|
||||
/>
|
||||
</tippy>
|
||||
</span>
|
||||
<!-- <SmartAutoComplete
|
||||
@@ -600,33 +605,27 @@
|
||||
</Splitpanes>
|
||||
</Pane>
|
||||
<Pane max-size="40" class="bg-pink-100">
|
||||
<TranslateSlideLeft>
|
||||
<aside class="lg:max-w-md">
|
||||
<section>
|
||||
<SmartTabs>
|
||||
<SmartTab
|
||||
:id="'history'"
|
||||
:label="$t('history')"
|
||||
:selected="true"
|
||||
>
|
||||
<History
|
||||
:page="'rest'"
|
||||
@useHistory="handleUseHistory"
|
||||
ref="historyComponent"
|
||||
/>
|
||||
</SmartTab>
|
||||
<aside class="lg:max-w-md">
|
||||
<section>
|
||||
<SmartTabs>
|
||||
<SmartTab :id="'history'" :label="$t('history')" :selected="true">
|
||||
<History
|
||||
:page="'rest'"
|
||||
@useHistory="handleUseHistory"
|
||||
ref="historyComponent"
|
||||
/>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab :id="'collections'" :label="$t('collections')">
|
||||
<Collections />
|
||||
</SmartTab>
|
||||
<SmartTab :id="'collections'" :label="$t('collections')">
|
||||
<Collections />
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab :id="'env'" :label="$t('environments')">
|
||||
<Environments />
|
||||
</SmartTab>
|
||||
</SmartTabs>
|
||||
</section>
|
||||
</aside>
|
||||
</TranslateSlideLeft>
|
||||
<SmartTab :id="'env'" :label="$t('environments')">
|
||||
<Environments />
|
||||
</SmartTab>
|
||||
</SmartTabs>
|
||||
</section>
|
||||
</aside>
|
||||
</Pane>
|
||||
</Splitpanes>
|
||||
|
||||
|
||||
@@ -64,13 +64,13 @@
|
||||
<div v-else class="row-wrapper">
|
||||
<div
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: !currentUser
|
||||
:title="
|
||||
!currentUser
|
||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||
: currentUser.provider !== 'github.com'
|
||||
? $t('login_with_github_to') + $t('create_secret_gist')
|
||||
: null,
|
||||
}"
|
||||
: null
|
||||
"
|
||||
>
|
||||
<ButtonSecondary
|
||||
:disabled="
|
||||
|
||||
@@ -92,13 +92,13 @@
|
||||
<li>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: header.hasOwnProperty('active')
|
||||
:title="
|
||||
header.hasOwnProperty('active')
|
||||
? header.active
|
||||
? $t('turn_off')
|
||||
: $t('turn_on')
|
||||
: $t('turn_off'),
|
||||
}"
|
||||
: $t('turn_off')
|
||||
"
|
||||
@click.native="
|
||||
$store.commit('setActiveGQLHeader', {
|
||||
index,
|
||||
@@ -149,11 +149,11 @@
|
||||
<ButtonSecondary
|
||||
ref="ToggleExpandResponse"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: !expandResponse
|
||||
:title="
|
||||
!expandResponse
|
||||
? $t('expand_response')
|
||||
: $t('collapse_response'),
|
||||
}"
|
||||
: $t('collapse_response')
|
||||
"
|
||||
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
|
||||
@click.native="ToggleExpandResponse"
|
||||
/>
|
||||
@@ -323,122 +323,120 @@
|
||||
</AppSection>
|
||||
</div>
|
||||
|
||||
<TranslateSlideLeft>
|
||||
<aside class="lg:max-w-md">
|
||||
<SmartTabs>
|
||||
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
|
||||
<AppSection label="docs">
|
||||
<section class="flex-col">
|
||||
<input
|
||||
v-model="graphqlFieldsFilterText"
|
||||
type="text"
|
||||
:placeholder="$t('search')"
|
||||
class="input rounded-t-lg"
|
||||
/>
|
||||
<SmartTabs ref="gqlTabs" styles="m-4">
|
||||
<div class="gqlTabs">
|
||||
<SmartTab
|
||||
v-if="queryFields.length > 0"
|
||||
:id="'queries'"
|
||||
:label="$t('queries')"
|
||||
:selected="true"
|
||||
<aside class="lg:max-w-md">
|
||||
<SmartTabs>
|
||||
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
|
||||
<AppSection label="docs">
|
||||
<section class="flex-col">
|
||||
<input
|
||||
v-model="graphqlFieldsFilterText"
|
||||
type="text"
|
||||
:placeholder="$t('search')"
|
||||
class="input rounded-t-lg"
|
||||
/>
|
||||
<SmartTabs ref="gqlTabs" styles="m-4">
|
||||
<div class="gqlTabs">
|
||||
<SmartTab
|
||||
v-if="queryFields.length > 0"
|
||||
:id="'queries'"
|
||||
:label="$t('queries')"
|
||||
:selected="true"
|
||||
>
|
||||
<div
|
||||
v-for="field in filteredQueryFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<div
|
||||
v-for="field in filteredQueryFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<GraphqlField
|
||||
:gql-field="field"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
<GraphqlField
|
||||
:gql-field="field"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab
|
||||
v-if="mutationFields.length > 0"
|
||||
:id="'mutations'"
|
||||
:label="$t('mutations')"
|
||||
<SmartTab
|
||||
v-if="mutationFields.length > 0"
|
||||
:id="'mutations'"
|
||||
:label="$t('mutations')"
|
||||
>
|
||||
<div
|
||||
v-for="field in filteredMutationFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<div
|
||||
v-for="field in filteredMutationFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<GraphqlField
|
||||
:gql-field="field"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
<GraphqlField
|
||||
:gql-field="field"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab
|
||||
v-if="subscriptionFields.length > 0"
|
||||
:id="'subscriptions'"
|
||||
:label="$t('subscriptions')"
|
||||
<SmartTab
|
||||
v-if="subscriptionFields.length > 0"
|
||||
:id="'subscriptions'"
|
||||
:label="$t('subscriptions')"
|
||||
>
|
||||
<div
|
||||
v-for="field in filteredSubscriptionFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<div
|
||||
v-for="field in filteredSubscriptionFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<GraphqlField
|
||||
:gql-field="field"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
<GraphqlField
|
||||
:gql-field="field"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab
|
||||
v-if="graphqlTypes.length > 0"
|
||||
:id="'types'"
|
||||
ref="typesTab"
|
||||
:label="$t('types')"
|
||||
<SmartTab
|
||||
v-if="graphqlTypes.length > 0"
|
||||
:id="'types'"
|
||||
ref="typesTab"
|
||||
:label="$t('types')"
|
||||
>
|
||||
<div
|
||||
v-for="type in filteredGraphqlTypes"
|
||||
:key="type.name"
|
||||
>
|
||||
<div
|
||||
v-for="type in filteredGraphqlTypes"
|
||||
:key="type.name"
|
||||
>
|
||||
<GraphqlType
|
||||
:gql-type="type"
|
||||
:gql-types="graphqlTypes"
|
||||
:is-highlighted="
|
||||
isGqlTypeHighlighted({ gqlType: type })
|
||||
"
|
||||
:highlighted-fields="
|
||||
getGqlTypeHighlightedFields({ gqlType: type })
|
||||
"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
</div>
|
||||
</SmartTabs>
|
||||
</section>
|
||||
<p
|
||||
v-if="
|
||||
queryFields.length === 0 &&
|
||||
mutationFields.length === 0 &&
|
||||
subscriptionFields.length === 0 &&
|
||||
graphqlTypes.length === 0
|
||||
"
|
||||
>
|
||||
{{ $t("send_request_first") }}
|
||||
</p>
|
||||
</AppSection>
|
||||
</SmartTab>
|
||||
<GraphqlType
|
||||
:gql-type="type"
|
||||
:gql-types="graphqlTypes"
|
||||
:is-highlighted="
|
||||
isGqlTypeHighlighted({ gqlType: type })
|
||||
"
|
||||
:highlighted-fields="
|
||||
getGqlTypeHighlightedFields({ gqlType: type })
|
||||
"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
</div>
|
||||
</SmartTabs>
|
||||
</section>
|
||||
<p
|
||||
v-if="
|
||||
queryFields.length === 0 &&
|
||||
mutationFields.length === 0 &&
|
||||
subscriptionFields.length === 0 &&
|
||||
graphqlTypes.length === 0
|
||||
"
|
||||
>
|
||||
{{ $t("send_request_first") }}
|
||||
</p>
|
||||
</AppSection>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab :id="'history'" :label="$t('history')">
|
||||
<History
|
||||
ref="graphqlHistoryComponent"
|
||||
:page="'graphql'"
|
||||
@useHistory="handleUseHistory"
|
||||
/>
|
||||
</SmartTab>
|
||||
<SmartTab :id="'history'" :label="$t('history')">
|
||||
<History
|
||||
ref="graphqlHistoryComponent"
|
||||
:page="'graphql'"
|
||||
@useHistory="handleUseHistory"
|
||||
/>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab :id="'collections'" :label="$t('collections')">
|
||||
<CollectionsGraphql />
|
||||
</SmartTab>
|
||||
</SmartTabs>
|
||||
</aside>
|
||||
</TranslateSlideLeft>
|
||||
<SmartTab :id="'collections'" :label="$t('collections')">
|
||||
<CollectionsGraphql />
|
||||
</SmartTab>
|
||||
</SmartTabs>
|
||||
</aside>
|
||||
</div>
|
||||
<CollectionsSaveRequest
|
||||
mode="graphql"
|
||||
|
||||
Reference in New Issue
Block a user