marco/contexted-v3
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

skeleton loader

Browse Source
This commit is contained in:
Marco Crapts
2023-05-20 14:54:41 +02:00
parent 7e7bb41a27
commit f61be632a0
8 changed files with 143 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/TopBar.vue
View File

@@ -39,37 +39,39 @@ const authModalInitialStateOpen = ref(
/>
</div>
<div class="flex h-full flex-grow flex-row items-center gap-2 pl-5 pr-3">
<SearchBar />
<button
class="btn-outline btn-sm btn py-1 text-white"
@click="addNote('Untitled new note', '', true)"
>
<i class="fas fa-plus-circle text-[1.1rem]" />
</button>
<Modal v-if="initialized && !user" :open="authModalInitialStateOpen">
<template #activator="{ open }">
<button class="btn-outline btn-sm btn py-1 text-white" @click="open">Sign in</button>
</template>
<template #default="{ close }">
<Auth @signedIn="close" />
</template>
<template #actions="{ close }">
<button class="btn-sm btn" @click="close">Close</button>
</template>
</Modal>
<Modal v-else-if="user">
<template #activator="{ open }">
<button class="btn-outline btn-sm btn py-1 text-white" @click="open">
{{ user.displayName || user.email }}
</button>
</template>
<template #default>Are you sure want to signout?</template>
<template #actions="{ close }">
<button class="btn-sm btn" @click="close">Close</button>
<button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>
</template>
</Modal>
<template v-else>Loading...</template>
<template v-if="initialized">
<SearchBar />
<button
class="btn-outline btn-sm btn py-1 text-white"
@click="addNote('Untitled new note', '', true)"
>
<i class="fas fa-plus-circle text-[1.1rem]" />
</button>
<Modal v-if="initialized && !user" :open="authModalInitialStateOpen">
<template #activator="{ open }">
<button class="btn-outline btn-sm btn py-1 text-white" @click="open">Sign in</button>
</template>
<template #default="{ close }">
<Auth @signedIn="close" />
</template>
<template #actions="{ close }">
<button class="btn-sm btn" @click="close">Close</button>
</template>
</Modal>
<Modal v-else-if="user">
<template #activator="{ open }">
<button class="btn-outline btn-sm btn py-1 text-white" @click="open">
{{ user.displayName || user.email }}
</button>
</template>
<template #default>Are you sure want to signout?</template>
<template #actions="{ close }">
<button class="btn-sm btn" @click="close">Close</button>
<button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>
</template>
</Modal>
</template>
<SkeletonTopBar v-else />
</div>
</div>
</div>