dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

ui: redesign a lot

Browse Source
This commit is contained in:
Andras Bacsai
2022-08-09 15:28:26 +00:00
parent 839e8179fe
commit 4049af6220
46 changed files with 625 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/ui/src/routes/sources/[id]/_Github.svelte
View File

@@ -7,7 +7,7 @@
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations';
import { dashify, errorNotification, getDomain } from '$lib/common';
import { appSession } from '$lib/store';
import { addToast, appSession } from '$lib/store';
import { dev } from '$app/env';
const { id } = $page.params;
@@ -24,7 +24,10 @@
htmlUrl: source.htmlUrl.replace(/\/$/, ''),
apiUrl: source.apiUrl.replace(/\/$/, '')
});
toast.push('Configuration saved.');
return addToast({
message:'Configuration saved.',
type: 'success'
});
} catch (error) {
return errorNotification(error);
} finally {
@@ -115,7 +118,7 @@
<div class="flex space-x-1 pb-7">
<div class="title">General</div>
{#if !source.githubAppId}
<button class="bg-orange-600 font-normal" type="submit">Save</button>
<button class="btn btn-sm bg-sources" type="submit">Save & Redirect to GitHub</button>
{/if}
</div>
<div class="grid grid-flow-row gap-2 px-10">
@@ -171,13 +174,12 @@
<div class="title">{$t('general')}</div>
{#if $appSession.isAdmin}
<button
class="btn btn-sm bg-sources"
type="submit"
class:bg-orange-600={!loading}
class:hover:bg-orange-500={!loading}
disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
>
<a
class="no-underline button justify-center flex items-center"
class="btn btn-sm"
href={`${source.htmlUrl}/apps/${source.githubApp.name}/installations/new`}
>{$t('source.change_app_settings', { name: 'GitHub' })}</a
>
@@ -250,7 +252,7 @@
{:else}
<div class="text-center">
<a href={`${source.htmlUrl}/apps/${source.githubApp.name}/installations/new`}>
<button class="box-selection bg-orange-600 hover:bg-orange-500 text-xl"
<button class="box-selection bg-sources text-xl"
>Install Repositories</button
></a
>

44
apps/ui/src/routes/sources/[id]/_Gitlab.svelte
View File

@@ -11,7 +11,7 @@
import { t } from '$lib/translations';
import { errorNotification } from '$lib/common';
import { appSession } from '$lib/store';
import { addToast, appSession } from '$lib/store';
const { id } = $page.params;
let url = settings.fqdn ? settings.fqdn : window.location.origin;
@@ -73,7 +73,10 @@
apiUrl: source.apiUrl.replace(/\/$/, ''),
customPort: source.customPort
});
toast.push('Configuration saved.');
return addToast({
message: 'Configuration saved.',
type: 'success'
});
} catch (error) {
return errorNotification(error);
} finally {
@@ -124,8 +127,10 @@
break;
case 'group':
if (!source.gitlabApp.groupName) {
toast.push('Please enter a group name first.');
return;
return addToast({
message: 'Please enter a group name first.',
type: 'error'
});
}
window.open(
`${source.htmlUrl}/groups/${source.gitlabApp.groupName}/-/settings/applications`
@@ -146,21 +151,32 @@
{#if $appSession.isAdmin}
<button
type="submit"
class:bg-orange-600={!loading}
class:hover:bg-orange-500={!loading}
class="btn btn-sm bg-sources"
disabled={loading}>{loading ? $t('forms.saving') : $t('forms.save')}</button
>
{#if source.gitlabAppId}
<button on:click|preventDefault={changeSettings}
<button class="btn btn-sm" on:click|preventDefault={changeSettings}
>{$t('source.change_app_settings', { name: 'GitLab' })}</button
>
{:else}
<button on:click|preventDefault|stopPropagation={newApp}>Create new GitLab App</button>
<button class="btn btn-sm" on:click|preventDefault|stopPropagation={newApp}
>Create new GitLab App manually</button
>
{/if}
{/if}
</div>
<div class="grid grid-flow-row gap-2 px-10">
{#if !source.gitlabAppId}
<Explainer
customClass="w-full"
text="<span class='font-bold text-base text-white'>Scopes required:</span>
<br>- <span class='text-sources font-bold'>api</span> (Access the authenticated user's API)
<br>- <span class='text-sources font-bold'>read_repository</span> (Allows read-only access to the repository)
<br>- <span class='text-sources font-bold'>email</span> (Allows read-only access to the user's primary email address using OpenID Connect)
<br>
<br>For extra security, you can set <span class='text-sources font-bold'>Expire Access Tokens</span>
<br><br>Webhook URL: <span class='text-sources font-bold'>{url}/webhooks/gitlab</span>"
/>
<div class="grid grid-cols-2 items-center">
<label for="type" class="text-base font-bold text-stone-100">Application Type</label>
<select name="type" id="type" class="w-96" bind:value={applicationType}>
@@ -295,16 +311,4 @@
</div>
</div>
</form>
{#if !source.gitlabAppId}
<Explainer
customClass="w-full"
text="<span class='font-bold text-base text-white'>Scopes required:</span>
<br>- <span class='text-orange-500 font-bold'>api</span> (Access the authenticated user's API)
<br>- <span class='text-orange-500 font-bold'>read_repository</span> (Allows read-only access to the repository)
<br>- <span class='text-orange-500 font-bold'>email</span> (Allows read-only access to the user's primary email address using OpenID Connect)
<br>
<br>For extra security, you can set <span class='text-orange-500 font-bold'>Expire Access Tokens</span>
<br><br>Webhook URL: <span class='text-orange-500 font-bold'>{url}/webhooks/gitlab</span>"
/>
{/if}
</div>

6
apps/ui/src/routes/sources/[id]/_New.svelte
View File

@@ -44,10 +44,10 @@
</div>
<div class="flex flex-col justify-center">
<div class="flex-col space-y-2 pb-10 text-center">
<div class="text-xl font-bold text-white">Select a provider</div>
<div class="text-xl font-bold text-white">Select a git type</div>
<div class="flex justify-center space-x-2">
<button class="w-32" on:click={() => setPredefined('github')}>GitHub.com</button>
<button class="w-32" on:click={() => setPredefined('gitlab')}>GitLab.com</button>
<button class="btn btn-sm" on:click={() => setPredefined('github')}>GitHub</button>
<button class="btn btn-sm" on:click={() => setPredefined('gitlab')}>GitLab</button>
</div>
</div>
{#if source?.type}

4
apps/ui/src/routes/sources/index.svelte
View File

@@ -39,9 +39,9 @@
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">{$t('index.git_sources')}</div>
{#if $appSession.isAdmin}
<a href="/sources/new" class="add-icon bg-orange-600 hover:bg-orange-500">
<a href="/sources/new" class="btn btn-square btn-sm bg-sources">
<svg
class="w-6"
class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"