ui: fixes

This commit is contained in:
Andras Bacsai
2022-08-10 08:54:26 +00:00
parent a19803e08a
commit 91d135bff8
43 changed files with 559 additions and 893 deletions

View File

@@ -93,7 +93,6 @@
bind:value={name}
required
placeholder="EXAMPLE_VARIABLE"
class=" border border-dashed border-coolgray-300"
readonly={!isNewSecret}
class:bg-transparent={!isNewSecret}
class:cursor-not-allowed={!isNewSecret}

View File

@@ -19,7 +19,7 @@
<div
class:tooltip={dataTooltip}
class:text-center={isCenter}
data-tooltip={dataTooltip}
data-tip={dataTooltip}
class="flex justify-center"
>
<div

View File

@@ -8,7 +8,6 @@
import { page } from '$app/stores';
import { createEventDispatcher } from 'svelte';
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations';
import { errorNotification } from '$lib/common';
import { addToast } from '$lib/store';
@@ -65,7 +64,6 @@
bind:value={storage.path}
required
placeholder="eg: /sqlite.db"
class=" border border-dashed border-coolgray-300"
/>
</td>
<td>

View File

@@ -57,7 +57,6 @@
import DeleteIcon from '$lib/components/DeleteIcon.svelte';
import { del, get, post } from '$lib/api';
import { goto } from '$app/navigation';
import { toast } from '@zerodevx/svelte-toast';
import { onDestroy, onMount } from 'svelte';
import { t } from '$lib/translations';
import { appSession, disabledButton, status, location, setLocation, addToast } from '$lib/store';
@@ -180,8 +179,8 @@
{#if $status.application.isExited}
<a
href={!$disabledButton ? `/applications/${id}/logs` : null}
class=" icons bg-transparent tooltip-bottom text-sm flex items-center text-red-500 tooltip-red-500"
data-tooltip="Application exited with an error!"
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center text-error"
data-tip="Application exited with an error!"
sveltekit:prefetch
>
<svg
@@ -232,8 +231,8 @@
title="Stop application"
type="submit"
disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
data-tooltip={$appSession.isAdmin
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-error"
data-tip={$appSession.isAdmin
? $t('application.stop_application')
: $t('application.permission_denied_stop_application')}
>
@@ -258,8 +257,8 @@
type="submit"
disabled={$disabledButton || !isQueueActive}
class:hover:text-green-500={isQueueActive}
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2"
data-tooltip={$appSession.isAdmin
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2"
data-tip={$appSession.isAdmin
? isQueueActive
? 'Rebuild application'
: 'Autoupdate inprogress. Cannot rebuild application.'
@@ -289,8 +288,8 @@
title="Build and start application"
type="submit"
disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
data-tooltip={$appSession.isAdmin
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-success"
data-tip={$appSession.isAdmin
? 'Build and start application'
: 'You do not have permission to Build and start application.'}
>
@@ -322,8 +321,8 @@
<button
title="Configurations"
disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm"
data-tooltip="Configurations"
class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tip="Configurations"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -358,8 +357,8 @@
<button
title="Secret"
disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm"
data-tooltip="Secret"
class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tip="Secret"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -390,8 +389,8 @@
<button
title="Persistent Storages"
disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm"
data-tooltip="Persistent Storages"
class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tip="Persistent Storages"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -420,8 +419,8 @@
<button
title="Previews"
disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm"
data-tooltip="Previews"
class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tip="Previews"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -453,8 +452,8 @@
<button
title={$t('application.logs')}
disabled={$disabledButton || !$status.application.isRunning}
class="icons bg-transparent tooltip-bottom text-sm"
data-tooltip={$t('application.logs')}
class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tip={$t('application.logs')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -485,8 +484,8 @@
<button
title="Build Logs"
disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm"
data-tooltip="Build Logs"
class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tip="Build Logs"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -518,8 +517,8 @@
type="submit"
disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent tooltip-bottom text-sm"
data-tooltip={$appSession.isAdmin
class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tip={$appSession.isAdmin
? $t('application.delete_application')
: $t('application.permission_denied_delete_application')}
>

View File

@@ -31,7 +31,6 @@
import Select from 'svelte-select';
import Explainer from '$lib/components/Explainer.svelte';
import { toast } from '@zerodevx/svelte-toast';
import { get, post } from '$lib/api';
import cuid from 'cuid';
import { browser } from '$app/env';
@@ -81,7 +80,7 @@
}
];
function containerClass() {
return 'text-white border border-dashed border-coolgray-300 bg-transparent font-thin px-0';
return 'text-white bg-transparent font-thin px-0';
}
async function getUsage() {

View File

@@ -109,8 +109,8 @@
<div class="flex justify-end sticky top-0 p-1 mx-1">
<button
on:click={followBuild}
class="bg-transparent hover:text-green-500 hover:bg-coolgray-500"
data-tooltip="Follow logs"
class="bg-transparent tooltip tooltip-bottom hover:text-green-500 hover:bg-coolgray-500"
data-tip="Follow logs"
class:text-green-500={followingBuild}
>
<svg
@@ -134,8 +134,8 @@
<button
on:click={cancelBuild}
class:animation-spin={cancelInprogress}
class="bg-transparent hover:text-red-500 hover:bg-coolgray-500"
data-tooltip="Cancel build"
class="bg-transparent hover:text-red-500 hover:bg-coolgray-500 tooltip tooltip-bottom"
data-tip="Cancel build"
>
{#if cancelInprogress}
Cancelling...

View File

@@ -137,13 +137,13 @@
<div class="top-4 md:sticky">
{#each builds as build, index (build.id)}
<div
data-tooltip={new Intl.DateTimeFormat('default', dateOptions).format(
data-tip={new Intl.DateTimeFormat('default', dateOptions).format(
new Date(build.createdAt)
) + `\n${build.status}`}
on:click={() => loadBuild(build.id)}
class:rounded-tr={index === 0}
class:rounded-br={index === builds.length - 1}
class="tooltip-top flex cursor-pointer items-center justify-center border-l-2 py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl "
class="tooltip tooltip-top flex cursor-pointer items-center justify-center border-l-2 py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl"
class:bg-coolgray-400={buildId === build.id}
class:border-red-500={build.status === 'failed'}
class:border-green-500={build.status === 'success'}

View File

@@ -147,8 +147,8 @@
<div class="flex justify-end sticky top-0 p-1 mx-1">
<button
on:click={followBuild}
class="bg-transparent"
data-tooltip="Follow logs"
class="bg-transparent tooltip tooltip-bottom"
data-tip="Follow logs"
class:text-green-500={followingLogs}
>
<svg

View File

@@ -22,13 +22,12 @@
import { get, post } from '$lib/api';
import { page } from '$app/stores';
import Explainer from '$lib/components/Explainer.svelte';
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations';
import { goto } from '$app/navigation';
import { errorNotification, getDomain } from '$lib/common';
import { onMount } from 'svelte';
import Loading from '$lib/components/Loading.svelte';
import { addToast } from '$lib/store';
import { addToast } from '$lib/store';
const { id } = $page.params;
@@ -61,9 +60,9 @@ import { addToast } from '$lib/store';
branch: container.branch
});
addToast({
message: 'Deployment queued',
type: 'success'
});
message: 'Deployment queued',
type: 'success'
});
if ($page.url.pathname.startsWith(`/applications/${id}/logs/build`)) {
return window.location.assign(`/applications/${id}/logs/build?buildId=${buildId}`);
} else {

View File

@@ -27,8 +27,7 @@
import { t } from '$lib/translations';
import { get } from '$lib/api';
import { saveSecret } from './utils';
import { toast } from '@zerodevx/svelte-toast';
import { addToast } from '$lib/store';
import { addToast } from '$lib/store';
const limit = pLimit(1);
const { id } = $page.params;
@@ -61,9 +60,9 @@ import { addToast } from '$lib/store';
batchSecrets = '';
await refreshSecrets();
addToast({
message: 'Secrets saved.',
type: 'success'
});
message: 'Secrets saved.',
type: 'success'
});
}
</script>
@@ -151,9 +150,6 @@ import { addToast } from '$lib/store';
<h2 class="title my-6 font-bold">Paste .env file</h2>
<form on:submit|preventDefault={getValues} class="mb-12 w-full">
<textarea bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" />
<button
class="btn btn-sm bg-applications"
type="submit">Batch add secrets</button
>
<button class="btn btn-sm bg-applications" type="submit">Batch add secrets</button>
</form>
</div>

View File

@@ -1,4 +1,3 @@
import { toast } from '@zerodevx/svelte-toast';
import { post } from '$lib/api';
import { t } from '$lib/translations';
import { errorNotification } from '$lib/common';