Elgato_dark/podman-desktop
1
0
Fork 0
mirror of https://github.com/podman-desktop/podman-desktop synced 2026-05-24 10:18:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: indeterminate progress bar (#4016)

Browse source 
* feat: indeterminate progress bar
Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>
This commit is contained in:
axel7083 2023-09-25 09:26:42 +02:00 committed by GitHub
parent e82916ba29
commit e1715db705
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 75 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
packages/renderer/src/lib/task-manager/ProgressBar.spec.ts Normal file
View file

@ -0,0 +1,38 @@
/**********************************************************************
* Copyright (C) 2023 Red Hat, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* SPDX-License-Identifier: Apache-2.0
***********************************************************************/
import '@testing-library/jest-dom/vitest';
import { test, expect } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import ProgressBar from '/@/lib/task-manager/ProgressBar.svelte';
test('Expect that the progress bar is indeterminate', async () => {
render(ProgressBar, { progress: undefined });
// expect the progress bar to have the indeterminate class
const progressBar = screen.getByRole('progressbar');
expect(progressBar).toHaveClass('progress-bar-indeterminate');
});
test('Expect that the progress bar is not indeterminate', async () => {
render(ProgressBar, { progress: 5 });
// expect the progress bar to not have the indeterminate class
const progressBar = screen.getByRole('progressbar');
expect(progressBar.classList.contains('progress-bar-indeterminate')).toBe(false);
});

35
packages/renderer/src/lib/task-manager/ProgressBar.svelte Normal file
View file

@ -0,0 +1,35 @@
<style>
.progress-bar-indeterminate {
background-color: rgb(109 72 191);
animation: indeterminateAnimation 1s infinite linear;
transform-origin: 0% 50%;
}
@keyframes indeterminateAnimation {
0% {
transform: translateX(0) scaleX(0);
}
40% {
transform: translateX(0) scaleX(0.4);
}
100% {
transform: translateX(100%) scaleX(0.5);
}
}
</style>
<script lang="ts">
export let progress: number | undefined;
</script>
<div class="w-32">
<div class="w-full h-4 mb-4 rounded-full bg-gray-900 progress-bar overflow-hidden">
{#if progress !== undefined}
<div class="h-4 bg-purple-500 rounded-full" role="progressbar" style="width {progress}%"></div>
{:else}
<div class="h-4 bg-purple-500 rounded-full progress-bar-indeterminate" role="progressbar"></div>
{/if}
</div>
</div>
{#if progress !== undefined}
<div class="ml-2 text-xs">{progress}%</div>
{/if}

8
packages/renderer/src/lib/task-manager/TaskManagerItem.svelte
View file

@ -11,6 +11,7 @@ import Fa from 'svelte-fa/src/fa.svelte';
import { TaskManager, type TaskUI } from './task-manager';
import { removeTask } from '/@/stores/tasks';
import type { Task } from '../../../../main/src/plugin/api/task';
import ProgressBar from '/@/lib/task-manager/ProgressBar.svelte';
export let task: Task;
@ -79,12 +80,7 @@ function gotoTask(taskUI: TaskUI) {
{#if taskUI.status === 'in-progress'}
<div class="flex flex-row w-full">
{#if (taskUI.progress || 0) >= 0}
<div class="w-32">
<div class="w-full h-4 mb-4 rounded-full bg-gray-900">
<div class="h-4 bg-purple-500 rounded-full" style="width: {taskUI.progress}%"></div>
</div>
</div>
<div class="ml-2 text-xs">{taskUI.progress}%</div>
<ProgressBar progress="{taskUI.progress}" />
{/if}
<div class="flex flex-1 flex-col w-full items-end text-purple-500 text-xs">
{#if taskUI.hasGotoTask}