sandvich
/
availabili.tf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add default loader colors

master
John Montagu, the 4th Earl of Sandvich 2024-12-20 01:51:52 -08:00
parent 88969111ad
commit 95efd01eef
Signed by: sandvich
GPG Key ID: 9A39BE37E602B22D
5 changed files with 50 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
availabili.tf/src/components/LoaderContainer.vue
View File

@ -1,11 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import Loader from './Loader.vue'; import { ContentLoader } from "vue-content-loader";
const props = defineProps<{
width?: string;
height?: string;
speed?: number;
}>();
// get primary color from var(--overlay-0) and secondary from var(--overlay-1)
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue("--surface-0");
const secondaryColor = getComputedStyle(document.documentElement).getPropertyValue("--overlay-0");
</script> </script>
<template> <template>
<div class="loader-container"> <!--ContentLoader :width="width" :height="height" :speed="speed">
<Loader /> </ContentLoader-->
</div> <component :is="ContentLoader" v-bind="{ ...props, primaryColor, secondaryColor }">
<slot></slot>
</component>
</template> </template>
<style scoped> <style scoped>

19
availabili.tf/src/components/TeamsListSidebar.vue
View File

@ -5,6 +5,7 @@ import { RouterLink } from "vue-router";
import { useAuthStore } from "@/stores/auth"; import { useAuthStore } from "@/stores/auth";
import InviteKeyDialog from "./InviteKeyDialog.vue"; import InviteKeyDialog from "./InviteKeyDialog.vue";
import { ContentLoader } from "vue-content-loader"; import { ContentLoader } from "vue-content-loader";
import LoaderContainer from "./LoaderContainer.vue";
const teams = useTeamsStore(); const teams = useTeamsStore();
const isLoading = ref(false); const isLoading = ref(false);
@ -43,17 +44,13 @@ onMounted(() => {
<div v-if="!authStore.isLoggedIn"> <div v-if="!authStore.isLoggedIn">
Log in to view your teams. Log in to view your teams.
</div> </div>
<div v-else-if="isLoading || true"> <div v-else-if="isLoading">
<ContentLoader :speed="1"> <LoaderContainer>
<circle cx="10" cy="20" r="8" /> <rect x="0" y="15" rx="5" ry="5" width="220" height="10" />
<rect x="25" y="15" rx="5" ry="5" width="220" height="10" /> <rect x="0" y="45" rx="5" ry="5" width="220" height="10" />
<circle cx="10" cy="50" r="8" /> <rect x="0" y="75" rx="5" ry="5" width="220" height="10" />
<rect x="25" y="45" rx="5" ry="5" width="220" height="10" /> <rect x="0" y="105" rx="5" ry="5" width="220" height="10" />
<circle cx="10" cy="80" r="8" /> </LoaderContainer>
<rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
<circle cx="10" cy="110" r="8" />
<rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
</ContentLoader>
</div> </div>
<div <div
v-else-if="teams.teamsWithRole" v-else-if="teams.teamsWithRole"

7
availabili.tf/src/views/TeamDetailsView.vue
View File

@ -11,6 +11,7 @@ import { useTeamsEventsStore } from "@/stores/teams/events";
import MatchCard from "@/components/MatchCard.vue"; import MatchCard from "@/components/MatchCard.vue";
import { useMatchesStore } from "@/stores/matches"; import { useMatchesStore } from "@/stores/matches";
import { ContentLoader } from "vue-content-loader"; import { ContentLoader } from "vue-content-loader";
import LoaderContainer from "@/components/LoaderContainer.vue";
const route = useRoute(); const route = useRoute();
const teamsStore = useTeamsStore(); const teamsStore = useTeamsStore();
@ -59,10 +60,10 @@ onMounted(() => {
<div class="left"> <div class="left">
<center class="margin"> <center class="margin">
<h1> <h1>
<template v-if="isLoading || true"> <template v-if="isLoading">
<content-loader view-box="0 0 250 10"> <LoaderContainer view-box="0 0 250 10">
<rect x="0" y="0" rx="3" ry="3" width="250" height="10" /> <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
</content-loader> </LoaderContainer>
</template> </template>
<template v-else> <template v-else>
{{ team.teamName }} {{ team.teamName }}

17
availabili.tf/src/views/TeamSettings/GeneralView.vue
View File

@ -5,6 +5,7 @@ import { onMounted, ref } from "vue";
import { useTeamsStore } from "@/stores/teams"; import { useTeamsStore } from "@/stores/teams";
import { useTeamDetails } from "@/composables/team-details"; import { useTeamDetails } from "@/composables/team-details";
import { computed } from "@vue/reactivity"; import { computed } from "@vue/reactivity";
import LoaderContainer from "@/components/LoaderContainer.vue";
const { const {
teamName, teamName,
@ -51,20 +52,20 @@ const hasChangedTimeDetails = computed(() => {
); );
}); });
const isLoaded = ref(false); const isLoading = ref(false);
const teamsStore = useTeamsStore(); const teamsStore = useTeamsStore();
const team = computed(() => teamsStore.teams[teamId.value]); const team = computed(() => teamsStore.teams[teamId.value]);
onMounted(() => { onMounted(() => {
isLoaded.value = true; isLoading.value = true;
teamsStore.fetchTeam(teamId.value) teamsStore.fetchTeam(teamId.value)
.then((response) => { .then((response) => {
teamName.value = response.team.teamName; teamName.value = response.team.teamName;
timezone.value = response.team.tzTimezone; timezone.value = response.team.tzTimezone;
minuteOffset.value = response.team.minuteOffset; minuteOffset.value = response.team.minuteOffset;
isLoaded.value = false; isLoading.value = false;
}); });
}) })
</script> </script>
@ -72,7 +73,15 @@ onMounted(() => {
<template> <template>
<div class="team-general-settings"> <div class="team-general-settings">
<h2>Overview</h2> <h2>Overview</h2>
<div> <LoaderContainer v-if="isLoading">
<rect x="0" y="10" rx="5" width="40" height="10" />
<rect x="0" y="30" rx="5" width="100%" height="10" />
<rect x="0" y="50" rx="5" width="80" height="10" />
<rect x="250" y="50" rx="5" width="40" height="10" />
<rect x="0" y="70" rx="5" width="240" height="10" />
<rect x="250" y="70" rx="5" width="100" height="10" />
</LoaderContainer>
<div v-else>
<div class="form-group margin"> <div class="form-group margin">
<h3 class="closer">Team Name</h3> <h3 class="closer">Team Name</h3>
<input v-model="teamName" /> <input v-model="teamName" />

17
availabili.tf/src/views/TeamSettings/IntegrationsView.vue
View File

@ -6,7 +6,6 @@ import { useTeamDetails } from "@/composables/team-details";
import { useTeamsStore } from "@/stores/teams"; import { useTeamsStore } from "@/stores/teams";
import { useIntegrationsStore } from "@/stores/teams/integrations"; import { useIntegrationsStore } from "@/stores/teams/integrations";
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import { ContentLoader } from "vue-content-loader";
const teamsStore = useTeamsStore(); const teamsStore = useTeamsStore();
const integrationsStore = useIntegrationsStore(); const integrationsStore = useIntegrationsStore();
@ -33,14 +32,14 @@ onMounted(() => {
<template> <template>
<div class="team-integrations"> <div class="team-integrations">
<div v-if="isLoading"> <div v-if="isLoading">
<ContentLoader> <LoaderContainer>
<rect x="0" y="0" rx="3" ry="3" width="250" height="10" /> <rect x="0" y="0" rx="5" ry="5" width="250" height="10" />
<rect x="20" y="20" rx="3" ry="3" width="220" height="10" /> <rect x="20" y="20" rx="5" ry="5" width="220" height="10" />
<rect x="20" y="40" rx="3" ry="3" width="170" height="10" /> <rect x="20" y="40" rx="5" ry="5" width="170" height="10" />
<rect x="0" y="60" rx="3" ry="3" width="250" height="10" /> <rect x="0" y="60" rx="5" ry="5" width="250" height="10" />
<rect x="20" y="80" rx="3" ry="3" width="200" height="10" /> <rect x="20" y="80" rx="5" ry="5" width="200" height="10" />
<rect x="20" y="100" rx="3" ry="3" width="80" height="10" /> <rect x="20" y="100" rx="5" ry="5" width="80" height="10" />
</ContentLoader> </LoaderContainer>
</div> </div>
<template v-else> <template v-else>
<DiscordIntegrationForm v-model="integrationsStore.discordIntegration" /> <DiscordIntegrationForm v-model="integrationsStore.discordIntegration" />