feat(front): improve settings (colinlienard#90)

* feat(front): improve settings * changes * close on escape key
jimit-exe · Jun 11, 2023 · 6f9cebc · 6f9cebc
1 parent b632c86
commit 6f9cebc
Show file tree

Hide file tree

Showing 8 changed files with 358 additions and 126 deletions.
diff --git a/src/lib/components/common/Modal.svelte b/src/lib/components/common/Modal.svelte
@@ -80,6 +80,7 @@
 		position: fixed;
 		inset: 0;
 		backdrop-filter: blur(0.25rem);
+		-webkit-backdrop-filter: blur(0.25rem);
 		background-color: rgba(black, 0.5);
 		cursor: not-allowed;
 		z-index: 998;
@@ -90,10 +91,13 @@
 		top: 50%;
 		left: 50%;
 		translate: -50% -50%;
+		display: flex;
+		flex-direction: column;
 		background-color: variables.$grey-1;
 		border: 1px solid variables.$grey-2;
 		border-radius: variables.$radius;
-		width: 40rem;
+		width: min(50rem, calc(100vw - 4rem));
+		height: min(40rem, calc(100vh - 4rem));
 		box-shadow: 0 1rem 2rem rgba(black, 0.25);
 		z-index: 999;
 
@@ -133,6 +137,8 @@
 
 		.content {
 			padding: 2rem;
+			height: 100%;
+			overflow: hidden;
 		}
 	}
 </style>
diff --git a/src/lib/components/common/ScrollbarContainer.svelte b/src/lib/components/common/ScrollbarContainer.svelte
@@ -26,6 +26,7 @@
 
 <style lang="scss">
 	:global([data-overlayscrollbars]) {
+		width: 100%;
 		height: 100%;
 	}
 

diff --git a/src/lib/components/settings/Accounts.svelte b/src/lib/components/settings/Accounts.svelte
@@ -0,0 +1,94 @@
+<script>
+	import { page } from '$app/stores';
+	import { Github, Gitlab } from '~/lib/icons';
+	import { Button } from '~/lib/components';
+	import LogOutButton from './LogOutButton.svelte';
+
+	const user = $page.data.session?.user;
+</script>
+
+<ul class="accounts-wrapper">
+	<li class="account">
+		<div class="header">
+			<Github />
+			<h4 class="title">GitHub</h4>
+		</div>
+		<div class="content">
+			<figure class="user">
+				<img class="image" src={user?.avatar} alt="" />
+				<figcaption class="user-info">
+					<p class="sub">Logged in as</p>
+					<p class="name">{user?.name}</p>
+				</figcaption>
+			</figure>
+			<LogOutButton />
+		</div>
+	</li>
+	<li class="account">
+		<div class="header">
+			<Gitlab />
+			<h4 class="title">GitLab</h4>
+		</div>
+		<div class="content">
+			<p class="sub">Not logged in.</p>
+			<Button small disabled>Log in</Button>
+		</div>
+	</li>
+</ul>
+
+<style lang="scss">
+	.accounts-wrapper {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 1rem;
+	}
+
+	.account {
+		@include mixins.shiny(variables.$grey-2, false);
+		display: flex;
+		flex-direction: column;
+
+		.header {
+			padding: 1rem;
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+			border-bottom: 1px solid variables.$grey-3;
+
+			:global(svg) {
+				height: 1.25rem;
+			}
+		}
+
+		.content {
+			display: flex;
+			flex-direction: column;
+			gap: 1rem;
+			padding: 1rem;
+			justify-content: space-between;
+			height: 100%;
+		}
+
+		.user {
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+
+			.image {
+				width: 2rem;
+				height: 2rem;
+				border-radius: 50%;
+			}
+
+			.user-info {
+				display: flex;
+				flex-direction: column;
+				gap: 0.25rem;
+			}
+		}
+
+		.sub {
+			color: variables.$grey-4;
+		}
+	}
+</style>
diff --git a/src/lib/components/settings/GithubSettings.svelte b/src/lib/components/settings/GithubSettings.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { ExternalLink } from '~/lib/icons';
+	import { Button } from '~/lib/components';
+</script>
+
+<h3>Notification settings</h3>
+<p class="text">
+	In order to receive GitHub notifications in the app, you need to update some settings:
+</p>
+<Button href="https://github.com/settings/notifications" external small>
+	<ExternalLink />
+	Notification settings
+</Button>
+<p class="list-item">
+	<strong>Watching</strong> and <strong>Participating, @mentions and custom</strong> must be set to
+	<strong>Notify me: on GitHub</strong>.
+</p>
+<p class="list-item">
+	If you want to receive workflow related notifications, set <strong>Actions</strong> to
+	<strong>Notify me: on GitHub</strong>.
+</p>
+<p class="list-item">
+	If you want to receive Dependabot related notifications, set <strong
+		>Dependabot alerts: New vulnerabilities</strong
+	>
+	to <strong>Notify me: on GitHub</strong>.
+</p>
+<span />
+<h3>Organization access</h3>
+<p class="text">
+	For private repositories, the GitHub organization that owns these repositories must grant access
+	to GitLight:
+</p>
+<Button
+	href="https://github.com/settings/connections/applications/3db3813c5828d8bbe530"
+	external
+	small
+>
+	<ExternalLink />
+	Organization access
+</Button>
+
+<style lang="scss">
+	.text,
+	.list-item {
+		color: variables.$grey-4;
+		line-height: 1.3em;
+	}
+
+	.list-item {
+		list-style: disc;
+		padding-left: 1rem;
+		position: relative;
+
+		&::before {
+			content: '-';
+			position: absolute;
+			top: 0.5rem;
+			left: 0;
+		}
+
+		strong {
+			@include typography.bold;
+		}
+	}
+
+	:global(a) {
+		width: fit-content;
+	}
+</style>
diff --git a/src/lib/components/settings/Preferences.svelte b/src/lib/components/settings/Preferences.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { InlineSelect, Switch } from '~/lib/components';
+	import { settings } from '~/lib/stores';
+	import type { Settings } from '~/lib/types';
+
+	const options: Array<Settings['notificationAxis']> = ['Auto', 'Vertical', 'Horizontal'];
+</script>
+
+<h3>General</h3>
+<Switch
+	label="Activate push notifications (only on desktop app)"
+	bind:active={$settings.activateNotifications}
+/>
+<Switch
+	label="Mark an event as read when opening in the browser"
+	bind:active={$settings.readWhenOpenInBrowser}
+/>
+<Switch label="Mark an event as read when pinned" bind:active={$settings.readWhenPin} />
+<span />
+<h3>Interface</h3>
+<Switch label="Hide sidebar" bind:active={$settings.sidebarHidden} />
+<InlineSelect label="Notification axis" {options} bind:value={$settings.notificationAxis} />