btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor(ui): better tabs

Browse Source
This commit is contained in:
liyasthomas
2021-08-22 00:39:05 +05:30
parent 08fe4ae71f
commit 0fb0ae1826
33 changed files with 394 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
components/app/Sidenav.vue
View File

@@ -17,7 +17,7 @@
<span>{{ navigation.title }}</span>
</NuxtLink>
</nav>
<nav
<!-- <nav
class="
flex flex-nowrap
p-4
@@ -25,7 +25,7 @@
justify-center
md:(flex-col
space-x-0 space-y-2)
"
"
>
<ButtonSecondary
v-tippy="{ theme: 'tooltip', placement: 'top' }"
@@ -48,41 +48,41 @@
class="rounded"
@click.native="showSupport = true"
/>
</nav>
<AppSearch :show="showSearch" @hide-modal="showSearch = false" />
</nav> -->
<!-- <AppSearch :show="showSearch" @hide-modal="showSearch = false" />
<AppSupport :show="showSupport" @hide-modal="showSupport = false" />
<AppShare :show="showShare" @hide-modal="showShare = false" />
<AppShare :show="showShare" @hide-modal="showShare = false" /> -->
</aside>
</template>
<script lang="ts">
import { defineComponent, ref } from "@nuxtjs/composition-api"
import { defineActionHandler } from "~/helpers/actions"
import { defineComponent } from "@nuxtjs/composition-api"
// import { defineActionHandler } from "~/helpers/actions"
export default defineComponent({
setup() {
const showSearch = ref(false)
const showSupport = ref(false)
const showShare = ref(false)
// setup() {
// const showSearch = ref(false)
// const showSupport = ref(false)
// const showShare = ref(false)
defineActionHandler("modals.search.toggle", () => {
showSearch.value = !showSearch.value
})
// defineActionHandler("modals.search.toggle", () => {
// showSearch.value = !showSearch.value
// })
defineActionHandler("modals.support.toggle", () => {
showSupport.value = !showSupport.value
})
// defineActionHandler("modals.support.toggle", () => {
// showSupport.value = !showSupport.value
// })
defineActionHandler("modals.share.toggle", () => {
showShare.value = !showShare.value
})
// defineActionHandler("modals.share.toggle", () => {
// showShare.value = !showShare.value
// })
return {
showSearch,
showSupport,
showShare,
}
},
// return {
// showSearch,
// showSupport,
// showShare,
// }
// },
data() {
return {
primaryNavigation: [
@@ -159,8 +159,9 @@ export default defineComponent({
}
&.exact-active-link {
@apply text-accent;
@apply hover:text-accent;
@apply text-secondaryDark;
@apply bg-primaryLight;
@apply hover:text-secondaryDark;
.material-icons,
.svg-icons {

3
components/collections/ChooseType.vue
View File

@@ -18,8 +18,7 @@
type="text"
autofocus
class="
bg-primaryLight
border-b border-dividerLight
bg-primary
cursor-pointer
flex
w-full

21
components/collections/graphql/index.vue
View File

@@ -4,7 +4,14 @@
:class="{ 'rounded border border-divider': savingMode }"
>
<div
class="flex flex-col top-sidebarPrimaryStickyFold z-10 sticky"
class="
divide-y divide-dividerLight
border-b border-dividerLight
flex flex-col
top-sidebarPrimaryStickyFold
z-10
sticky
"
:class="{ 'bg-primary': !savingMode }"
>
<div v-if="showCollActions" class="search-wrapper">
@@ -12,18 +19,10 @@
v-model="filterText"
type="search"
:placeholder="$t('action.search')"
class="
bg-primaryLight
border-b border-dividerLight
flex
w-full
py-2
pr-2
pl-9
"
class="bg-primary flex w-full py-2 pr-2 pl-10"
/>
</div>
<div class="border-b border-dividerLight flex flex-1 justify-between">
<div class="flex flex-1 justify-between">
<ButtonSecondary
icon="add"
:label="$t('action.new')"

23
components/collections/index.vue
View File

@@ -4,7 +4,16 @@
:class="{ 'rounded border border-divider': saveRequest }"
>
<div
class="bg-primary rounded-t flex flex-col top-0 z-10 sticky"
class="
divide-y divide-dividerLight
bg-primary
border-b border-dividerLight
rounded-t
flex flex-col
top-0
z-10
sticky
"
:class="{ '!top-sidebarPrimaryStickyFold': !saveRequest && !doc }"
>
<div v-if="!saveRequest" class="search-wrapper">
@@ -12,15 +21,7 @@
v-model="filterText"
type="search"
:placeholder="$t('action.search')"
class="
bg-primaryLight
border-b border-dividerLight
flex
w-full
py-2
pr-2
pl-9
"
class="bg-primary flex w-full py-2 pr-2 pl-10"
/>
</div>
<CollectionsChooseType
@@ -30,7 +31,7 @@
@update-collection-type="updateCollectionType"
@update-selected-team="updateSelectedTeam"
/>
<div class="border-b border-dividerLight flex flex-1 justify-between">
<div class="flex flex-1 justify-between">
<ButtonSecondary
v-if="
collectionsType.type == 'team-collections' &&

2
components/environments/index.vue
View File

@@ -16,7 +16,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('environment.select')"
class="
bg-primaryLight
bg-primary
border-b border-dividerLight
flex-1
select-wrapper

4
components/graphql/Field.vue
View File

@@ -86,4 +86,8 @@ export default {
.field-highlighted {
@apply border-b-2 border-accent;
}
.field-title {
@apply select-text;
}
</style>

9
components/graphql/Request.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex">
<div class="space-x-2 flex-1 inline-flex">
<input
id="url"
v-model="url"
@@ -10,12 +10,13 @@
class="
bg-primaryLight
border border-divider
rounded-l
rounded
text-secondaryDark
w-full
py-2
px-4
focus-visible:border-accent
hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
"
:placeholder="$t('request.url')"
@keyup.enter="onConnectClick"
@@ -24,7 +25,7 @@
id="get"
name="get"
:label="!connected ? $t('action.connect') : $t('action.disconnect')"
class="rounded-l-none w-28"
class="w-32"
@click.native="onConnectClick"
/>
</div>

4
components/graphql/RequestOptions.vue
View File

@@ -159,7 +159,7 @@
:value="header.key"
autofocus
styles="
bg-primaryLight
bg-primary
flex
flex-1
py-1
@@ -176,7 +176,7 @@
"
/>
<input
class="bg-primaryLight flex flex-1 py-2 px-4"
class="bg-primary flex flex-1 py-2 px-4"
:placeholder="$t('count.value', { count: index + 1 })"
:name="`value ${index}`"
:value="header.value"

8
components/graphql/Response.vue
View File

@@ -67,12 +67,12 @@
<span class="flex flex-1 items-center">
{{ $t("shortcut.general.show_all") }}
</span>
<span class="flex flex-1 items-center">
<!-- <span class="flex flex-1 items-center">
{{ $t("shortcut.general.command_menu") }}
</span>
<span class="flex flex-1 items-center">
{{ $t("shortcut.general.help_menu") }}
</span>
</span> -->
</div>
<div class="flex flex-col space-y-4">
<div class="flex">
@@ -83,12 +83,12 @@
<span class="shortcut-key">{{ getSpecialKey() }}</span>
<span class="shortcut-key">K</span>
</div>
<div class="flex">
<!-- <div class="flex">
<span class="shortcut-key">/</span>
</div>
<div class="flex">
<span class="shortcut-key">?</span>
</div>
</div> -->
</div>
</div>
<ButtonSecondary

13
components/graphql/Sidebar.vue
View File

@@ -3,21 +3,13 @@
<SmartTabs styles="sticky z-10 top-0">
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection label="docs">
<div
class="
bg-primaryLight
flex
top-sidebarPrimaryStickyFold
z-10
sticky
"
>
<div class="bg-primary flex top-sidebarPrimaryStickyFold z-10 sticky">
<div class="search-wrapper">
<input
v-model="graphqlFieldsFilterText"
type="search"
:placeholder="$t('action.search')"
class="bg-primaryLight flex w-full py-2 pr-2 pl-9"
class="bg-primary flex w-full py-2 pr-2 pl-10"
/>
</div>
<div class="flex">
@@ -138,7 +130,6 @@
v-if="schemaString"
class="
bg-primary
border-b border-dividerLight
flex flex-1
top-sidebarPrimaryStickyFold
pl-4

4
components/history/index.vue
View File

@@ -2,7 +2,7 @@
<AppSection label="history">
<div
class="
bg-primaryLight
bg-primary
border-b border-dividerLight
flex
top-sidebarPrimaryStickyFold
@@ -14,7 +14,7 @@
<input
v-model="filterText"
type="search"
class="bg-primaryLight flex w-full py-2 pr-2 pl-9"
class="bg-primary flex w-full py-2 pr-2 pl-10"
:placeholder="$t('action.search')"
/>
</div>

6
components/http/Headers.vue
View File

@@ -50,7 +50,7 @@
:value="header.key"
autofocus
styles="
bg-primaryLight
bg-primary
flex
flex-1
py-1
@@ -71,7 +71,7 @@
v-model="header.value"
:placeholder="$t('count.value', { count: index + 1 })"
styles="
bg-primaryLight
bg-primary
flex
flex-1
py-1
@@ -87,7 +87,7 @@
/>
<input
v-else
class="bg-primaryLight flex flex-1 py-2 px-4"
class="bg-primary flex flex-1 py-2 px-4"
:placeholder="$t('count.value', { count: index + 1 })"
:name="'value' + index"
:value="header.value"

8
components/http/Parameters.vue
View File

@@ -48,7 +48,7 @@
v-model="param.key"
:placeholder="$t('count.parameter', { count: index + 1 })"
styles="
bg-primaryLight
bg-primary
flex
flex-1
py-1
@@ -64,7 +64,7 @@
/>
<input
v-else
class="bg-primaryLight flex flex-1 py-2 px-4"
class="bg-primary flex flex-1 py-2 px-4"
:placeholder="$t('count.parameter', { count: index + 1 })"
:name="'param' + index"
:value="param.key"
@@ -82,7 +82,7 @@
v-model="param.value"
:placeholder="$t('count.value', { count: index + 1 })"
styles="
bg-primaryLight
bg-primary
flex
flex-1
py-1
@@ -98,7 +98,7 @@
/>
<input
v-else
class="bg-primaryLight flex flex-1 py-2 px-4"
class="bg-primary flex flex-1 py-2 px-4"
:placeholder="$t('count.value', { count: index + 1 })"
:name="'value' + index"
:value="param.value"

14
components/http/Request.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="bg-primary flex space-x-2 p-4 top-0 z-10 sticky">
<div class="flex flex-1">
<div class="flex relative">
<label for="method">
@@ -26,7 +26,7 @@
px-4
w-28
hover:border-dividerDark
focus-visible:border-accent
focus-visible:bg-primary focus-visible:border-dividerDark
"
:value="newMethod"
:readonly="!isCustomMethod"
@@ -54,11 +54,13 @@
border border-divider
flex
flex-1
rounded-r
text-secondaryDark
py-1
px-4
hover:border-dividerDark
focus-visible:border-accent
focus-visible:border-dividerDark
focus-visible:bg-primary
"
@enter="newSendRequest()"
/>
@@ -70,12 +72,14 @@
class="
bg-primaryLight
border border-divider
rounded-r
flex
text-secondaryDark
w-full
py-2
px-4
focus-visible:border-accent
hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
"
name="url"
type="text"
@@ -89,7 +93,7 @@
<div class="flex">
<ButtonPrimary
id="send"
class="rounded-none flex-1 min-w-24"
class="rounded-r-none flex-1 min-w-22"
:label="!loading ? $t('action.send') : $t('action.cancel')"
@click.native="!loading ? newSendRequest() : cancelRequest()"
/>

8
components/http/ResponseMeta.vue
View File

@@ -17,12 +17,12 @@
<span class="flex flex-1 items-center">
{{ $t("shortcut.general.show_all") }}
</span>
<span class="flex flex-1 items-center">
<!-- <span class="flex flex-1 items-center">
{{ $t("shortcut.general.command_menu") }}
</span>
<span class="flex flex-1 items-center">
{{ $t("shortcut.general.help_menu") }}
</span>
</span> -->
</div>
<div class="flex flex-col space-y-4">
<div class="flex">
@@ -33,12 +33,12 @@
<span class="shortcut-key">{{ getSpecialKey() }}</span>
<span class="shortcut-key">K</span>
</div>
<div class="flex">
<!-- <div class="flex">
<span class="shortcut-key">/</span>
</div>
<div class="flex">
<span class="shortcut-key">?</span>
</div>
</div> -->
</div>
</div>
<ButtonSecondary

44
components/lenses/HeadersRenderer.vue
View File

@@ -1,5 +1,32 @@
<template>
<div>
<div
class="
bg-primary
border-b border-dividerLight
flex flex-1
top-lowerSecondaryStickyFold
pl-4
z-10
sticky
items-center
justify-between
"
>
<label class="font-semibold text-secondaryLight">
{{ $t("request.header_list") }}
</label>
<div class="flex">
<ButtonSecondary
v-if="headers"
ref="copyHeaders"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.copy')"
:icon="copyIcon"
@click.native="copyHeaders"
/>
</div>
</div>
<div
v-for="(header, index) in headers"
:key="`header-${index}`"
@@ -43,9 +70,26 @@
</template>
<script>
import { copyToClipboard } from "~/helpers/utils/clipboard"
export default {
props: {
headers: { type: Array, default: () => [] },
},
data() {
return {
copyIcon: "content_copy",
}
},
methods: {
copyHeaders() {
copyToClipboard(JSON.stringify(this.headers))
this.copyIcon = "done"
this.$toast.success(this.$t("state.copied_to_clipboard"), {
icon: "content_paste",
})
setTimeout(() => (this.copyIcon = "content_copy"), 1000)
},
},
}
</script>

2
components/realtime/Log.vue
View File

@@ -59,7 +59,7 @@ export default {
<style scoped lang="scss">
.realtime-log {
@apply p-4;
@apply bg-primaryLight;
@apply bg-primary;
@apply text-secondary;
@apply overflow-auto;

13
components/realtime/Mqtt.vue
View File

@@ -1,11 +1,11 @@
<template>
<Splitpanes :dbl-click-splitter="false" vertical>
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
<Pane class="hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal>
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
<Pane class="hide-scrollbar !overflow-auto">
<AppSection label="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex">
<div class="space-x-2 flex-1 inline-flex">
<input
id="mqtt-url"
v-model="url"
@@ -15,19 +15,20 @@
class="
bg-primaryLight
border border-divider
rounded-l
rounded
text-secondaryDark
w-full
py-2
px-4
focus-visible:border-accent
hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
"
:placeholder="$t('mqtt.url')"
/>
<ButtonPrimary
id="connect"
:disabled="!validUrl"
class="rounded-l-none w-28"
class="w-32"
:label="
connectionState
? $t('action.disconnect')

88
components/realtime/Socketio.vue
View File

@@ -1,52 +1,57 @@
<template>
<Splitpanes :dbl-click-splitter="false" vertical>
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
<Pane class="hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal>
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
<Pane class="hide-scrollbar !overflow-auto">
<AppSection label="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex">
<input
id="socketio-url"
v-model="url"
v-focus
type="url"
spellcheck="false"
:class="{ error: !urlValid }"
class="
bg-primaryLight
border border-divider
rounded-l
flex flex-1
text-secondaryDark
w-full
py-2
px-4
focus-visible:border-accent
"
:placeholder="$t('socketio.url')"
@keyup.enter="urlValid ? toggleConnection() : null"
/>
<input
id="socketio-path"
v-model="path"
class="
bg-primaryLight
border border-divider
flex flex-1
text-secondaryDark
w-full
py-2
px-4
focus-visible:border-accent
"
spellcheck="false"
/>
<div class="space-x-2 flex-1 inline-flex">
<div class="flex flex-1">
<input
id="socketio-url"
v-model="url"
v-focus
type="url"
spellcheck="false"
:class="{ error: !urlValid }"
class="
bg-primaryLight
border border-divider
rounded-l
flex flex-1
text-secondaryDark
w-full
py-2
px-4
hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
"
:placeholder="$t('socketio.url')"
@keyup.enter="urlValid ? toggleConnection() : null"
/>
<input
id="socketio-path"
v-model="path"
class="
bg-primaryLight
border border-divider
rounded-r
flex flex-1
text-secondaryDark
w-full
py-2
px-4
hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
"
spellcheck="false"
/>
</div>
<ButtonPrimary
id="connect"
:disabled="!urlValid"
name="connect"
class="rounded-l-none w-28"
class="w-32"
:label="
!connectionState
? $t('action.connect')
@@ -99,6 +104,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('add.new')"
icon="add"
class="rounded"
@click.native="addCommunicationInput"
/>
</div>
@@ -123,7 +129,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
icon="remove_circle_outline"
class="rounded-l-none"
class="rounded-r"
color="red"
outline
@click.native="removeCommunicationInput({ index })"

109
components/realtime/Sse.vue
View File

@@ -1,62 +1,67 @@
<template>
<Splitpanes :dbl-click-splitter="false" horizontal>
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
<Pane class="hide-scrollbar !overflow-auto">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex">
<input
id="server"
v-model="server"
v-focus
type="url"
:class="{ error: !serverValid }"
class="
bg-primaryLight
border border-divider
rounded-l
flex flex-1
text-secondaryDark
w-full
py-2
px-4
focus-visible:border-accent
"
:placeholder="$t('sse.url')"
@keyup.enter="serverValid ? toggleSSEConnection() : null"
/>
<label
for="url"
class="
bg-primaryLight
border-t border-b border-divider
font-semibold
text-secondaryLight
py-2
px-4
truncate
"
>
{{ $t("sse.event_type") }}
</label>
<input
id="event-type"
v-model="eventType"
class="
bg-primaryLight
border border-divider
flex flex-1
text-secondaryDark
w-full
py-2
px-4
focus-visible:border-accent
"
spellcheck="false"
/>
<div class="space-x-2 flex-1 inline-flex">
<div class="flex flex-1">
<input
id="server"
v-model="server"
v-focus
type="url"
:class="{ error: !serverValid }"
class="
bg-primaryLight
border border-divider
rounded-l
flex flex-1
text-secondaryDark
w-full
py-2
px-4
hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
"
:placeholder="$t('sse.url')"
@keyup.enter="serverValid ? toggleSSEConnection() : null"
/>
<label
for="url"
class="
bg-primaryLight
border-t border-b border-divider
font-semibold
text-secondaryLight
py-2
px-4
truncate
"
>
{{ $t("sse.event_type") }}
</label>
<input
id="event-type"
v-model="eventType"
class="
bg-primaryLight
border border-divider
rounded-r
flex flex-1
text-secondaryDark
w-full
py-2
px-4
hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
"
spellcheck="false"
/>
</div>
<ButtonPrimary
id="start"
:disabled="!serverValid"
name="start"
class="rounded-l-none w-22"
class="w-32"
:label="
!connectionSSEState ? $t('action.start') : $t('action.stop')
"

15
components/realtime/Websocket.vue
View File

@@ -1,11 +1,11 @@
<template>
<Splitpanes :dbl-click-splitter="false" vertical>
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
<Pane class="hide-scrollbar !overflow-auto">
<Splitpanes :dbl-click-splitter="false" horizontal>
<Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
<Pane class="hide-scrollbar !overflow-auto">
<AppSection label="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex">
<div class="space-x-2 flex-1 inline-flex">
<input
id="websocket-url"
v-model="url"
@@ -13,12 +13,13 @@
class="
bg-primaryLight
border border-divider
rounded-l
rounded
text-secondaryDark
w-full
py-2
px-4
focus-visible:border-accent
hover:border-dividerDark
focus-visible:bg-primary focus-visible:border-dividerDark
"
type="url"
spellcheck="false"
@@ -29,7 +30,7 @@
<ButtonPrimary
id="connect"
:disabled="!urlValid"
class="rounded-l-none w-28"
class="w-32"
name="connect"
:label="
!connectionState
@@ -83,7 +84,7 @@
>
<input
v-model="protocol.value"
class="bg-primaryLight flex flex-1 py-2 px-4"
class="bg-primary flex flex-1 py-2 px-4"
:placeholder="$t('count.protocol', { count: index + 1 })"
name="message"
type="text"

69
components/smart/Tabs.vue
View File

@@ -1,25 +1,30 @@
<template>
<div class="flex flex-col flex-nowrap flex-1">
<div class="rounded-t tabs hide-scrollbar relative" :class="styles">
<div class="flex w-0">
<div class="inline-flex">
<button
v-for="(tab, index) in tabs"
:key="`tab-${index}`"
class="tab"
:class="{ active: tab.active }"
tabindex="0"
@keyup.enter="selectTab(tab)"
@click="selectTab(tab)"
>
<i v-if="tab.icon" class="material-icons">
{{ tab.icon }}
</i>
<span v-if="tab.label">{{ tab.label }}</span>
<span v-if="tab.info" class="tab-info">
{{ tab.info }}
</span>
</button>
<div class="flex flex-1">
<div class="flex flex-1 justify-between">
<div class="flex">
<button
v-for="(tab, index) in tabs"
:key="`tab-${index}`"
class="tab"
:class="{ active: tab.active }"
tabindex="0"
@keyup.enter="selectTab(tab)"
@click="selectTab(tab)"
>
<i v-if="tab.icon" class="material-icons">
{{ tab.icon }}
</i>
<span v-if="tab.label">{{ tab.label }}</span>
<span v-if="tab.info" class="tab-info">
{{ tab.info }}
</span>
</button>
</div>
<div class="flex">
<slot name="actions"></slot>
</div>
</div>
</div>
</div>
@@ -64,16 +69,16 @@ export default {
@apply overflow-auto;
@apply bg-primary;
&::after {
@apply absolute;
@apply inset-x-0;
@apply bottom-0;
@apply bg-dividerLight;
@apply z-1;
@apply h-0.5;
// &::after {
// @apply absolute;
// @apply inset-x-0;
// @apply bottom-0;
// @apply bg-dividerLight;
// @apply z-1;
// @apply h-0.5;
content: "";
}
// content: "";
// }
.tab {
@apply relative;
@@ -104,9 +109,10 @@ export default {
&::after {
@apply absolute;
@apply inset-x-0;
@apply left-4;
@apply right-4;
@apply bottom-0;
@apply bg-dividerLight;
@apply bg-primary;
@apply z-2;
@apply h-0.5;
@@ -122,8 +128,7 @@ export default {
}
&.active {
@apply text-accent;
@apply border-accent;
@apply text-secondaryDark;
.tab-info {
@apply text-secondary;

25
components/teams/Team.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-1 items-end">
<div class="border border-dividerLight rounded flex flex-1 items-end">
<div class="flex flex-1 items-start">
<div class="p-4">
<label
@@ -12,6 +12,8 @@
<img
v-for="(member, index) in team.members"
:key="`member-${index}`"
v-tippy="{ theme: 'tooltip' }"
:title="member.user.displayName"
:src="member.user.photoURL"
:alt="member.user.displayName"
class="rounded-full h-5 ring-primary ring-2 w-5 inline-block"
@@ -47,21 +49,24 @@
$refs.options.tippy().hide()
"
/>
<SmartItem
<span
v-tippy="{ theme: 'tooltip' }"
:title="
team.myRole === 'OWNER' && team.ownersCount == 1
? $t('team.exit_disabled')
: ''
"
:disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
icon="remove"
:label="$t('team.exit')"
@click.native="
exitTeam()
$refs.options.tippy().hide()
"
/>
>
<SmartItem
:disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
icon="remove"
:label="$t('team.exit')"
@click.native="
exitTeam()
$refs.options.tippy().hide()
"
/>
</span>
</tippy>
</span>
</div>

11
components/teams/index.vue
View File

@@ -24,16 +24,7 @@
<i class="mr-4 material-icons">help_outline</i>
{{ $t("empty.teams") }}
</div>
<div
v-else
class="
divide-y divide-dividerLight
border border-divider
rounded
flex flex-col flex-1
md:w-64
"
>
<div v-else class="grid gap-4 sm:grid-cols-2 md:grid-cols-3">
<TeamsTeam
v-for="(team, index) in myTeams"
:key="`team-${index}`"