mirror of
https://github.com/podman-desktop/podman-desktop
synced 2026-05-24 10:18:53 +00:00
feat: update styles for preferences
Change-Id: I6f485bc5e0d8d174b401b03e8feadd7c50ff1309 Signed-off-by: Florent Benoit <fbenoit@redhat.com>
This commit is contained in:
Florent Benoit
Florent BENOIT
parent
8ab603a47d
commit
8b8cacfeb2
10 changed files with 51 additions and 49 deletions
|
|
@ -38,7 +38,7 @@ function deleteContribution(extensionName: string) {
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col h-min">
|
||||
<div class="flex flex-col h-min bg-zinc-800">
|
||||
<div class="flex flex-1 flex-col p-2 ">
|
||||
<p class="capitalize text-xl">Docker Desktop Extensions</p>
|
||||
<p class="text-xs">There is an ongoing support of Docker Desktop UI extensions from Podman Desktop.</p>
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ async function stopReceivingLogs(provider: ProviderInfo): Promise<void> {
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-1 flex-col">
|
||||
<div class="flex flex-1 flex-col bg-zinc-800 px-2">
|
||||
<div class="flex flex-row align-middle my-4">
|
||||
<div class="capitalize text-xl">{connectionName} settings</div>
|
||||
{#if providerInfo?.containerProviderConnectionCreation}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ async function startExtension() {
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-1 flex-col">
|
||||
<div class="flex flex-1 flex-col bg-zinc-800 px-2">
|
||||
{#if extensionInfo}
|
||||
<div class="pl-1 py-2">
|
||||
<h1 class="capitalize text-xl">{extensionInfo.name} Extension</h1>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import PreferencesExtensionRendering from './PreferencesExtensionRendering.svelt
|
|||
import PreferencesRegistriesRendering from './PreferencesRegistriesRendering.svelte';
|
||||
import PreferencesPageDockerExtensions from '../docker-extension/PreferencesPageDockerExtensions.svelte';
|
||||
import PreferencesProxiesRendering from './PreferencesProxiesRendering.svelte';
|
||||
import NavPage from '../ui/NavPage.svelte';
|
||||
|
||||
let properties: IConfigurationPropertyRecordedSchema[];
|
||||
let defaultPrefPageId: string;
|
||||
|
|
@ -30,38 +31,40 @@ onMount(async () => {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div class="flex h-full">
|
||||
<Route path="/">
|
||||
{#if defaultPrefPageId !== undefined}
|
||||
<PreferencesRendering key="{defaultPrefPageId}" properties="{properties}" />
|
||||
{:else}
|
||||
empty
|
||||
{/if}
|
||||
</Route>
|
||||
<Route path="/default/:key" let:meta>
|
||||
<PreferencesRendering key="{meta.params.key}" properties="{properties}" />
|
||||
</Route>
|
||||
<Route path="/ddExtensions" let:meta>
|
||||
<PreferencesPageDockerExtensions />
|
||||
</Route>
|
||||
<Route path="/extensions" let:meta />
|
||||
<Route path="/extension/:extensionId" let:meta>
|
||||
<PreferencesExtensionRendering extensionId="{meta.params.extensionId}" />
|
||||
</Route>
|
||||
<Route path="/provider/:providerInternalId" let:meta>
|
||||
<PreferencesProviderRendering providerInternalId="{meta.params.providerInternalId}" properties="{properties}" />
|
||||
</Route>
|
||||
<Route path="/registries">
|
||||
<PreferencesRegistriesRendering />
|
||||
</Route>
|
||||
<Route path="/proxies">
|
||||
<PreferencesProxiesRendering />
|
||||
</Route>
|
||||
<Route path="/container-connection/" let:meta />
|
||||
<Route path="/container-connection/:provider/:connection" let:meta>
|
||||
<PreferencesContainerConnectionRendering
|
||||
providerInternalId="{meta.params.provider}"
|
||||
connection="{meta.params.connection}"
|
||||
properties="{properties}" />
|
||||
</Route>
|
||||
</div>
|
||||
<NavPage searchEnabled="{false}" title="Preferences" subtitle=" ">
|
||||
<div slot="empty" class="flex h-full px-3 py-3 bg-zinc-700">
|
||||
<Route path="/">
|
||||
{#if defaultPrefPageId !== undefined}
|
||||
<PreferencesRendering key="{defaultPrefPageId}" properties="{properties}" />
|
||||
{:else}
|
||||
empty
|
||||
{/if}
|
||||
</Route>
|
||||
<Route path="/default/:key" let:meta>
|
||||
<PreferencesRendering key="{meta.params.key}" properties="{properties}" />
|
||||
</Route>
|
||||
<Route path="/ddExtensions" let:meta>
|
||||
<PreferencesPageDockerExtensions />
|
||||
</Route>
|
||||
<Route path="/extensions" let:meta />
|
||||
<Route path="/extension/:extensionId" let:meta>
|
||||
<PreferencesExtensionRendering extensionId="{meta.params.extensionId}" />
|
||||
</Route>
|
||||
<Route path="/provider/:providerInternalId" let:meta>
|
||||
<PreferencesProviderRendering providerInternalId="{meta.params.providerInternalId}" properties="{properties}" />
|
||||
</Route>
|
||||
<Route path="/registries">
|
||||
<PreferencesRegistriesRendering />
|
||||
</Route>
|
||||
<Route path="/proxies">
|
||||
<PreferencesProxiesRendering />
|
||||
</Route>
|
||||
<Route path="/container-connection/" let:meta />
|
||||
<Route path="/container-connection/:provider/:connection" let:meta>
|
||||
<PreferencesContainerConnectionRendering
|
||||
providerInternalId="{meta.params.provider}"
|
||||
connection="{meta.params.connection}"
|
||||
properties="{properties}" />
|
||||
</Route>
|
||||
</div>
|
||||
</NavPage>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ async function stopReceivingLogs(provider: ProviderInfo): Promise<void> {
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-1 flex-col">
|
||||
<div class="flex flex-1 flex-col bg-zinc-800 px-2 py-1">
|
||||
<h1 class="capitalize text-xl">{providerInfo?.name} Provider</h1>
|
||||
|
||||
<!-- Manage lifecycle-->
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ function updateProvider(provider: ProviderInfo) {
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-1 flex-col p-2">
|
||||
<div class="flex flex-1 flex-col p-2 bg-zinc-800">
|
||||
<h1 class="capitalize text-xl">Proxy settings</h1>
|
||||
|
||||
<div class="container mx-auto">
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ function toggleRegistryModal(): void {
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-1 flex-col p-2">
|
||||
<div class="flex flex-1 flex-col p-2 bg-zinc-800">
|
||||
<h1 class="capitalize text-xl">Registries</h1>
|
||||
|
||||
<div class="container mx-auto pt-4">
|
||||
|
|
|
|||
|
|
@ -12,9 +12,8 @@ $: matchingRecords = properties.filter(property => property.parentId.startsWith(
|
|||
</script>
|
||||
|
||||
<div class="flex flex-1 flex-col">
|
||||
<h1 class="capitalize text-xl">{title}</h1>
|
||||
<table class="divide-y divide-gray-800 mt-2 min-w-full">
|
||||
<tbody class="bg-gray-800 divide-y divide-gray-200 ">
|
||||
<tbody class="bg-zinc-800 divide-y-8 divide-zinc-700 ">
|
||||
{#each matchingRecords as record}
|
||||
<tr>
|
||||
<td>
|
||||
|
|
|
|||
|
|
@ -45,11 +45,11 @@ $: {
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col px-2">
|
||||
<div class="flex flex-col px-2 pt-2">
|
||||
<div class="flex">
|
||||
<div>{recordUI.breadCrumb}</div>
|
||||
<div class="ml-2">{recordUI.title}</div>
|
||||
<div class="capitalize">{recordUI.breadCrumb}</div>
|
||||
<div class="pl-2 text-violet-400">{recordUI.title}</div>
|
||||
</div>
|
||||
<div class="mb-1">{recordUI.description}</div>
|
||||
<div class="pt-2 text-gray-400">{recordUI.description}</div>
|
||||
<PreferencesRenderingItemFormat showUpdate="{true}" record="{recordUI.original}" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -95,8 +95,8 @@ function update(record: IConfigurationPropertyRecordedSchema) {
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-row mb-2 px-4">
|
||||
<div class="flex flex-col mx-2 flex-1 pf-c-form__group-control">
|
||||
<div class="flex flex-row mb-2 pt-2">
|
||||
<div class="flex flex-col mx-2 w-full text-start justify-center items-start pf-c-form__group-control">
|
||||
{#if record.type === 'boolean'}
|
||||
<input
|
||||
on:input="{event => checkValue(record, event)}"
|
||||
|
|
|
|||
Loading…
Reference in a new issue