feat(ui): loaders + time display

AxaFrance · Mar 2, 2021 · 29cb1d8 · 29cb1d8
1 parent 71315fd
commit 29cb1d8
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 23 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -119,4 +119,8 @@
 		flex: 1 1 auto;
 		overflow: auto;
 	}
+
+	:global(button:disabled) {
+		opacity: 0.5;
+	}
 </style>
diff --git a/src/components/Accounts/Accounts.svelte b/src/components/Accounts/Accounts.svelte
@@ -38,6 +38,8 @@
 <style>
 	.content {
 		position: relative;
+		display: flex;
+		flex-direction: column;
 		height: calc(100vh - 6rem);
 		flex: 1 0 auto;
 		padding: 1rem;

diff --git a/src/components/AzureDevOps/AzureDevOps.svelte b/src/components/AzureDevOps/AzureDevOps.svelte
@@ -37,16 +37,16 @@
 	<p class="loader">Chargement de l'application...</p>
 {:else if $clientAuthenticated.isAzureDevOpsAuthenticated}
 	{#await Service.getProfile(ProviderEnum.AzureDevOps)}
-		<p class="loader">Chargement du profile...</p>
+		<p class="loader">Chargement du profil...</p>
 	{:then profile}
-		{#await Service.getRepositories(ProviderEnum.AzureDevOps, { profile })}
+		<section>
+			<AccountTitle>Votre compte Azure DevOps</AccountTitle>
+			<AccountSummary {profile} />
+		</section>
+		<div class="content">
+			{#await Service.getRepositories(ProviderEnum.AzureDevOps, { profile })}
 			<p class="loader">Chargement de la liste des repositories...</p>
-		{:then repositories}
-			<section>
-				<AccountTitle>Votre compte Azure DevOps</AccountTitle>
-				<AccountSummary {profile} />
-			</section>
-			<div>
+			{:then repositories}
 				<section>
 					<AccountTitle>Suivre un nouveau repository</AccountTitle>
 					<p class="intro">
@@ -66,10 +66,10 @@
 				<section>
 					<FollowedRepositories {profile} />
 				</section>
-			</div>
-		{:catch}
-			<p class="error">Fetching profile failed.</p>
-		{/await}
+			{:catch}
+				<p class="error">Fetching profile failed.</p>
+			{/await}
+		</div>
 	{:catch}
 		<p class="error">Fetching profile failed.</p>
 	{/await}
@@ -108,4 +108,9 @@
 		font-size: 0.8rem;
 		color: #ddd;
 	}
+
+	.content {
+		position: relative;
+		flex: 1 0 auto;
+	}
 </style>
diff --git a/src/components/Github/Github.svelte b/src/components/Github/Github.svelte
@@ -54,7 +54,11 @@
 				/>
 
 				{#if search}
-					<SearchResults {search} repos={fetchedGithubRepositories} />
+					{#if $isFetchingData}
+						<p>Recherche en cours...</p>
+					{:else}
+						<SearchResults {search} repos={fetchedGithubRepositories} />
+					{/if}
 				{/if}
 			</section>
 			<FollowedRepositories {profile} />

diff --git a/src/components/Pullrequest/Pullrequest.svelte b/src/components/Pullrequest/Pullrequest.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { getDateStr } from 'shared/utils';
 	import type { PullRequestType } from 'models/skizzle';
 	import Labels from 'components/Labels';
 	import Modale from 'components/Modale';
@@ -23,7 +24,9 @@
 	<Avatar className="pr__avatar" {pullRequest} />
 	<div class="details">
 		<header>
-			<h2 class="author">{pullRequest.user.name} - {pullRequest.dateStr}</h2>
+			<h2 class="author">
+				{pullRequest.user.name} - {getDateStr(new Date(pullRequest.date))}
+			</h2>
 			{#if pullRequest.projectName}
 				<span class="project">{pullRequest.projectName}</span>
 			{/if}

diff --git a/src/components/Tabs/Tabs.svelte b/src/components/Tabs/Tabs.svelte
@@ -15,7 +15,8 @@
 			class="tab"
 			class:current={current === tab || Object.keys(data).length === 1}
 			on:click={() => onChange(tab)}
-			disabled={$isFetchingData}>
+			disabled={$isFetchingData}
+		>
 			{#if data[tab].icon}
 				<svelte:component this={data[tab].icon} />
 			{/if}
@@ -24,10 +25,9 @@
 		</button>
 	{/each}
 	{#if onCreation}
-		<button
-			on:click={onCreation}
-			title="Créer une nouvelle liste"
-			class="add"><Icons.Plus /></button>
+		<button on:click={onCreation} title="Créer une nouvelle liste" class="add">
+			<Icons.Plus />
+		</button>
 	{/if}
 </nav>
 

diff --git a/src/mappers/PullRequest.mapper.ts b/src/mappers/PullRequest.mapper.ts
@@ -5,7 +5,6 @@ import type {
 	GithubPullRequestApiType,
 } from 'models/api';
 import type { PullRequestType } from 'models/skizzle';
-import { getDateStr } from 'shared/utils';
 import { From, Mapper } from './Mapper';
 
 export type PullRequestMapperType = From<
@@ -45,7 +44,6 @@ export class PullRequestMapper extends Mapper<
 				title: value.title,
 				description: value.description || value.body,
 				date: value.creationDate || value.updated_at,
-				dateStr: getDateStr(date),
 				labels,
 				user: {
 					name: value.createdBy?.displayName || value.user?.login,

diff --git a/src/models/skizzle/PullRequestType.ts b/src/models/skizzle/PullRequestType.ts
@@ -15,7 +15,6 @@ type PullRequestType = {
 	title: string;
 	description: string;
 	date: string;
-	dateStr: string;
 	isDraft: boolean;
 	isConflict: boolean;
 	isAutoComplete: boolean;

diff --git a/src/shared/utils.ts b/src/shared/utils.ts
@@ -29,7 +29,7 @@ export const getDateStr = (date: Date): string => {
 
 	switch (diffDays) {
 		case 0:
-			return "Aujourd'hui";
+			return `Aujourd'hui à ${date.getHours()}:${date.getMinutes()}`;
 		case 1:
 			return 'Hier';
 		default: