refactor: minor ui improvements
This commit is contained in:
liyasthomas
@@ -5,7 +5,7 @@
|
||||
>
|
||||
<div class="space-x-2 inline-flex items-center">
|
||||
<ButtonSecondary
|
||||
class="tracking-wide !font-bold !text-secondaryDark"
|
||||
class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
|
||||
label="HOPPSCOTCH"
|
||||
to="/"
|
||||
/>
|
||||
@@ -17,21 +17,21 @@
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('header.install_pwa')"
|
||||
svg="download"
|
||||
class="rounded"
|
||||
class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
|
||||
@click.native="showInstallPrompt()"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="`${t('app.search')} <kbd>/</kbd>`"
|
||||
svg="search"
|
||||
class="rounded"
|
||||
class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
|
||||
@click.native="showSearch = true"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="`${t('support.title')} <kbd>?</kbd>`"
|
||||
svg="life-buoy"
|
||||
class="rounded"
|
||||
class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
|
||||
@click.native="showSupport = true"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
@@ -74,7 +74,7 @@
|
||||
v-else
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('header.account')"
|
||||
class="rounded"
|
||||
class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
|
||||
svg="user"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
>
|
||||
<h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
|
||||
<div class="flex">
|
||||
<ButtonSecondary svg="x" class="rounded" @click.native="close()" />
|
||||
<ButtonSecondary svg="x" @click.native="close()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-primary border-b border-dividerLight">
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
:to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
|
||||
:exact="exact"
|
||||
:blank="blank"
|
||||
class="font-semibold py-2 transition inline-flex items-center justify-center whitespace-nowrap hover:bg-primaryDark focus:outline-none focus-visible:bg-primaryDark"
|
||||
class="font-semibold py-2 transition inline-flex items-center justify-center whitespace-nowrap focus:outline-none"
|
||||
:class="[
|
||||
color
|
||||
? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)`
|
||||
? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
|
||||
: 'text-secondary hover:text-secondaryDark focus-visible:text-secondaryDark',
|
||||
label ? 'rounded px-4' : 'px-2',
|
||||
{ 'rounded-full': rounded },
|
||||
@@ -18,7 +18,7 @@
|
||||
outline,
|
||||
},
|
||||
{
|
||||
'!bg-primaryLight !hover:bg-primaryDark !focus-visible:bg-primaryDark':
|
||||
'bg-primaryLight hover:bg-primaryDark focus-visible:bg-primaryDark':
|
||||
filled,
|
||||
},
|
||||
]"
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
v-if="mode == 'import_from_my_collections'"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('action.go_back')"
|
||||
class="rounded"
|
||||
svg="arrow-left"
|
||||
@click.native="
|
||||
() => {
|
||||
@@ -34,7 +33,6 @@
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('action.more')"
|
||||
class="rounded"
|
||||
svg="more-vertical"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -191,7 +191,7 @@ export default defineComponent({
|
||||
getCollectionIcon() {
|
||||
if (this.isSelected) return "check-circle"
|
||||
else if (!this.showChildren && !this.isFiltered) return "folder"
|
||||
else if (this.showChildren || this.isFiltered) return "folder-minus"
|
||||
else if (this.showChildren || this.isFiltered) return "folder-open"
|
||||
else return "folder"
|
||||
},
|
||||
},
|
||||
|
||||
@@ -189,7 +189,7 @@ export default defineComponent({
|
||||
getCollectionIcon() {
|
||||
if (this.isSelected) return "check-circle"
|
||||
else if (!this.showChildren && !this.isFiltered) return "folder"
|
||||
else if (this.showChildren || this.isFiltered) return "folder-minus"
|
||||
else if (this.showChildren || this.isFiltered) return "folder-open"
|
||||
else return "folder"
|
||||
},
|
||||
},
|
||||
|
||||
@@ -12,7 +12,6 @@
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('action.more')"
|
||||
class="rounded"
|
||||
svg="more-vertical"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -218,7 +218,7 @@ export default defineComponent({
|
||||
getCollectionIcon() {
|
||||
if (this.isSelected) return "check-circle"
|
||||
else if (!this.showChildren && !this.isFiltered) return "folder"
|
||||
else if (this.showChildren || this.isFiltered) return "folder-minus"
|
||||
else if (this.showChildren || this.isFiltered) return "folder-open"
|
||||
else return "folder"
|
||||
},
|
||||
},
|
||||
|
||||
@@ -204,7 +204,7 @@ export default defineComponent({
|
||||
getCollectionIcon() {
|
||||
if (this.isSelected) return "check-circle"
|
||||
else if (!this.showChildren && !this.isFiltered) return "folder"
|
||||
else if (this.showChildren || this.isFiltered) return "folder-minus"
|
||||
else if (this.showChildren || this.isFiltered) return "folder-open"
|
||||
else return "folder"
|
||||
},
|
||||
},
|
||||
|
||||
@@ -210,7 +210,7 @@ export default defineComponent({
|
||||
getCollectionIcon() {
|
||||
if (this.isSelected) return "check-circle"
|
||||
else if (!this.showChildren && !this.isFiltered) return "folder"
|
||||
else if (this.showChildren || this.isFiltered) return "folder-minus"
|
||||
else if (this.showChildren || this.isFiltered) return "folder-open"
|
||||
else return "folder"
|
||||
},
|
||||
},
|
||||
|
||||
@@ -192,7 +192,7 @@ export default defineComponent({
|
||||
getCollectionIcon() {
|
||||
if (this.isSelected) return "check-circle"
|
||||
else if (!this.showChildren && !this.isFiltered) return "folder"
|
||||
else if (this.showChildren || this.isFiltered) return "folder-minus"
|
||||
else if (this.showChildren || this.isFiltered) return "folder-open"
|
||||
else return "folder"
|
||||
},
|
||||
},
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="folder">
|
||||
<h3 class="heading">
|
||||
<SmartIcon name="folder-minus" class="svg-icons" />
|
||||
<SmartIcon name="folder-open" class="svg-icons" />
|
||||
{{ folder.name || $t("state.none") }}
|
||||
</h3>
|
||||
<div
|
||||
|
||||
@@ -31,14 +31,12 @@
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('action.clear_all')"
|
||||
:svg="clearIcon"
|
||||
class="rounded"
|
||||
@click.native="clearContent()"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
svg="plus"
|
||||
:title="$t('add.new')"
|
||||
class="rounded"
|
||||
@click.native="addEnvironmentVariable"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex items-center group">
|
||||
<div class="flex items-stretch items-center group">
|
||||
<span
|
||||
class="cursor-pointer flex px-4 items-center justify-center"
|
||||
@click="$emit('edit-environment')"
|
||||
|
||||
@@ -12,7 +12,6 @@
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('action.more')"
|
||||
class="rounded"
|
||||
svg="more-vertical"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -1,21 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
|
||||
<template #actions>
|
||||
<ButtonSecondary
|
||||
:label="`${t('request.run')}`"
|
||||
svg="play"
|
||||
class="rounded-none !text-accent"
|
||||
@click.native="runQuery()"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
ref="saveRequest"
|
||||
:label="`${t('request.save')}`"
|
||||
class="rounded-none"
|
||||
@click.native="saveRequest"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<SmartTab :id="'query'" :label="`${t('tab.query')}`" :selected="true">
|
||||
<AppSection label="query">
|
||||
<div
|
||||
@@ -25,9 +10,22 @@
|
||||
{{ t("request.query") }}
|
||||
</label>
|
||||
<div class="flex">
|
||||
<ButtonSecondary
|
||||
:label="`${t('request.run')}`"
|
||||
svg="play"
|
||||
class="rounded-none !text-accent !hover:text-accentDark"
|
||||
@click.native="runQuery()"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
ref="saveRequest"
|
||||
:label="`${t('request.save')}`"
|
||||
svg="save"
|
||||
class="rounded-none"
|
||||
@click.native="saveRequest"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
to="https://docs.hoppscotch.io/graphql/#queries"
|
||||
to="https://docs.hoppscotch.io/graphql"
|
||||
blank
|
||||
:title="t('app.wiki')"
|
||||
svg="help-circle"
|
||||
@@ -61,7 +59,7 @@
|
||||
<div class="flex">
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
to="https://docs.hoppscotch.io/graphql/#queries"
|
||||
to="https://docs.hoppscotch.io/graphql"
|
||||
blank
|
||||
:title="t('app.wiki')"
|
||||
svg="help-circle"
|
||||
@@ -89,7 +87,7 @@
|
||||
<div class="flex">
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
to="https://docs.hoppscotch.io/graphql/#headers"
|
||||
to="https://docs.hoppscotch.io/graphql"
|
||||
blank
|
||||
:title="t('app.wiki')"
|
||||
svg="help-circle"
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('state.linewrap')"
|
||||
:class="{ '!text-accent': linewrapEnabled }"
|
||||
svg="corner-down-left"
|
||||
svg="wrap-text"
|
||||
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
|
||||
@@ -157,7 +157,7 @@
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('state.linewrap')"
|
||||
:class="{ '!text-accent': linewrapEnabled }"
|
||||
svg="corner-down-left"
|
||||
svg="wrap-text"
|
||||
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
<span
|
||||
v-for="(line, index) in query"
|
||||
:key="`line-${index}`"
|
||||
class="cursor-pointer text-secondaryLight px-4 truncate whitespace-pre"
|
||||
class="cursor-pointer font-mono text-secondaryLight px-4 truncate whitespace-pre"
|
||||
data-testid="restore_history_entry"
|
||||
@click="useEntry"
|
||||
>{{ line }}</span
|
||||
|
||||
@@ -24,6 +24,11 @@
|
||||
</template>
|
||||
<SmartItem
|
||||
label="None"
|
||||
:icon="
|
||||
authName === 'None'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
@click.native="
|
||||
authType = 'none'
|
||||
$refs.authTypeOptions.tippy().hide()
|
||||
@@ -31,6 +36,11 @@
|
||||
/>
|
||||
<SmartItem
|
||||
label="Basic Auth"
|
||||
:icon="
|
||||
authName === 'Basic Auth'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
@click.native="
|
||||
authType = 'basic'
|
||||
$refs.authTypeOptions.tippy().hide()
|
||||
@@ -38,6 +48,11 @@
|
||||
/>
|
||||
<SmartItem
|
||||
label="Bearer Token"
|
||||
:icon="
|
||||
authName === 'Bearer'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
@click.native="
|
||||
authType = 'bearer'
|
||||
$refs.authTypeOptions.tippy().hide()
|
||||
@@ -45,6 +60,11 @@
|
||||
/>
|
||||
<SmartItem
|
||||
label="OAuth 2.0"
|
||||
:icon="
|
||||
authName === 'OAuth 2.0'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
@click.native="
|
||||
authType = 'oauth-2'
|
||||
$refs.authTypeOptions.tippy().hide()
|
||||
|
||||
@@ -124,6 +124,7 @@ export default {
|
||||
clientID,
|
||||
scope,
|
||||
handleAccessTokenRequest,
|
||||
t,
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('state.linewrap')"
|
||||
:class="{ '!text-accent': linewrapEnabled }"
|
||||
svg="corner-down-left"
|
||||
svg="wrap-text"
|
||||
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('state.linewrap')"
|
||||
:class="{ '!text-accent': linewrapEnabled }"
|
||||
svg="corner-down-left"
|
||||
svg="wrap-text"
|
||||
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('state.linewrap')"
|
||||
:class="{ '!text-accent': linewrapEnabled }"
|
||||
svg="corner-down-left"
|
||||
svg="wrap-text"
|
||||
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('state.linewrap')"
|
||||
:class="{ '!text-accent': linewrapEnabled }"
|
||||
svg="corner-down-left"
|
||||
svg="wrap-text"
|
||||
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('state.linewrap')"
|
||||
:class="{ '!text-accent': linewrapEnabled }"
|
||||
svg="corner-down-left"
|
||||
svg="wrap-text"
|
||||
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('state.linewrap')"
|
||||
:class="{ '!text-accent': linewrapEnabled }"
|
||||
svg="corner-down-left"
|
||||
svg="wrap-text"
|
||||
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('state.linewrap')"
|
||||
:class="{ '!text-accent': linewrapEnabled }"
|
||||
svg="corner-down-left"
|
||||
svg="wrap-text"
|
||||
@click.native.prevent="linewrapEnabled = !linewrapEnabled"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
|
||||
@@ -127,7 +127,6 @@
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('add.new')"
|
||||
svg="plus"
|
||||
class="rounded"
|
||||
@click.native="addCommunicationInput"
|
||||
/>
|
||||
</div>
|
||||
@@ -153,7 +152,6 @@
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('action.remove')"
|
||||
svg="trash"
|
||||
class="rounded"
|
||||
color="red"
|
||||
outline
|
||||
@click.native="removeCommunicationInput({ index })"
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
/>
|
||||
<ul
|
||||
v-if="suggestions.length > 0 && suggestionsVisible"
|
||||
class="suggestions"
|
||||
class="suggestions hide-scrollbar"
|
||||
:style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }"
|
||||
>
|
||||
<li
|
||||
@@ -101,8 +101,8 @@ export default defineComponent({
|
||||
)
|
||||
// Cut off the part that's already been typed.
|
||||
.map((entry) => entry.substring(this.selectionStart))
|
||||
// We only want the top 6 suggestions.
|
||||
.slice(0, 6)
|
||||
// We only want the top 10 suggestions.
|
||||
.slice(0, 10)
|
||||
)
|
||||
},
|
||||
},
|
||||
@@ -215,6 +215,8 @@ export default defineComponent({
|
||||
@apply left-0;
|
||||
@apply z-50;
|
||||
@apply shadow-lg;
|
||||
@apply max-h-46;
|
||||
@apply overflow-y-auto;
|
||||
|
||||
top: calc(100% - 4px);
|
||||
border-radius: 0 0 8px 8px;
|
||||
|
||||
@@ -19,8 +19,9 @@
|
||||
v-for="(size, index) in fontSizes"
|
||||
:key="`size-${index}`"
|
||||
:label="`${getFontSizeName(size)}`"
|
||||
:info-icon="size === active ? 'done' : ''"
|
||||
:active-info-icon="size === active"
|
||||
:icon="
|
||||
size === active ? 'radio_button_checked' : 'radio_button_unchecked'
|
||||
"
|
||||
@click.native="
|
||||
() => {
|
||||
setActiveFont(size)
|
||||
|
||||
@@ -48,7 +48,6 @@
|
||||
<slot name="actions"></slot>
|
||||
<ButtonSecondary
|
||||
v-if="dimissible"
|
||||
class="rounded"
|
||||
svg="x"
|
||||
@click.native="close"
|
||||
/>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="cursor-pointer flex-nowrap inline-flex items-center justify-center"
|
||||
class="cursor-pointer flex-nowrap transition inline-flex items-center justify-center group hover:text-secondaryDark"
|
||||
@click="$emit('change')"
|
||||
>
|
||||
<label ref="toggle" class="toggle" :class="{ on: on }">
|
||||
@@ -28,7 +28,7 @@ export default defineComponent({
|
||||
<style scoped lang="scss">
|
||||
$useBorder: true;
|
||||
$borderColor: var(--divider-color);
|
||||
$activeColor: var(--divider-color);
|
||||
$activeColor: var(--divider-dark-color);
|
||||
$inactiveColor: var(--divider-color);
|
||||
$inactiveHandleColor: var(--secondary-light-color);
|
||||
$activeHandleColor: var(--accent-color);
|
||||
@@ -49,6 +49,8 @@ $transition: all 0.2s ease-in-out;
|
||||
@apply mr-4;
|
||||
@apply cursor-pointer;
|
||||
@apply flex-shrink-0;
|
||||
@apply group-hover:border-accentDark;
|
||||
@apply transition;
|
||||
|
||||
width: $width;
|
||||
height: $height;
|
||||
|
||||
@@ -99,17 +99,18 @@
|
||||
class="bg-transparent cursor-pointer flex flex-1 py-2 px-4"
|
||||
:placeholder="`${t('team.permissions')}`"
|
||||
:name="'value' + index"
|
||||
:value="
|
||||
typeof member.role === 'string'
|
||||
? member.role
|
||||
: JSON.stringify(member.role)
|
||||
"
|
||||
:value="member.role"
|
||||
readonly
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<SmartItem
|
||||
label="OWNER"
|
||||
:icon="
|
||||
member.role === 'OWNER'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
@click.native="
|
||||
() => {
|
||||
updateMemberRole(member.userID, 'OWNER')
|
||||
@@ -119,6 +120,11 @@
|
||||
/>
|
||||
<SmartItem
|
||||
label="EDITOR"
|
||||
:icon="
|
||||
member.role === 'EDITOR'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
@click.native="
|
||||
() => {
|
||||
updateMemberRole(member.userID, 'EDITOR')
|
||||
@@ -128,6 +134,11 @@
|
||||
/>
|
||||
<SmartItem
|
||||
label="VIEWER"
|
||||
:icon="
|
||||
member.role === 'VIEWER'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
@click.native="
|
||||
() => {
|
||||
updateMemberRole(member.userID, 'VIEWER')
|
||||
|
||||
@@ -80,11 +80,7 @@
|
||||
class="bg-transparent flex flex-1 text-secondaryLight py-2 px-4"
|
||||
:placeholder="`${t('team.permissions')}`"
|
||||
:name="'value' + index"
|
||||
:value="
|
||||
typeof invitee.inviteeRole === 'string'
|
||||
? invitee.inviteeRole
|
||||
: JSON.stringify(invitee.inviteeRole)
|
||||
"
|
||||
:value="invitee.inviteeRole"
|
||||
readonly
|
||||
/>
|
||||
<div class="flex">
|
||||
@@ -158,17 +154,18 @@
|
||||
class="bg-transparent cursor-pointer flex flex-1 py-2 px-4"
|
||||
:placeholder="`${t('team.permissions')}`"
|
||||
:name="'value' + index"
|
||||
:value="
|
||||
typeof invitee.value === 'string'
|
||||
? invitee.value
|
||||
: JSON.stringify(invitee.value)
|
||||
"
|
||||
:value="invitee.value"
|
||||
readonly
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<SmartItem
|
||||
label="OWNER"
|
||||
:icon="
|
||||
invitee.value === 'OWNER'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
@click.native="
|
||||
() => {
|
||||
updateNewInviteeRole(index, 'OWNER')
|
||||
@@ -178,6 +175,11 @@
|
||||
/>
|
||||
<SmartItem
|
||||
label="EDITOR"
|
||||
:icon="
|
||||
invitee.value === 'EDITOR'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
@click.native="
|
||||
() => {
|
||||
updateNewInviteeRole(index, 'EDITOR')
|
||||
@@ -187,6 +189,11 @@
|
||||
/>
|
||||
<SmartItem
|
||||
label="VIEWER"
|
||||
:icon="
|
||||
invitee.value === 'VIEWER'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
@click.native="
|
||||
() => {
|
||||
updateNewInviteeRole(index, 'VIEWER')
|
||||
|
||||
Reference in New Issue
Block a user