Skip to content

Commit

Permalink
refactor(ui): Simplify button and progress bar components; enhance ta…
Browse files Browse the repository at this point in the history 
…sk modal layout

- Removed Tooltip from Button component and added tooltip as a button attribute for better accessibility.
- Updated ProgressBar component to improve structure and styling, including a new container for the progress track.
- Refactored TaskButton to use a wrapper class for better styling and layout.
- Enhanced TaskModal layout with improved error handling display and integrated CheckBox and Button components for better user interaction.
- Cleaned up CSS styles for consistency and removed unused styles.
  • Loading branch information
@Lasse-numerous
Lasse-numerous committed Dec 16, 2024
1 parent 06376e8 commit fa20dda
Show file tree
Hide file tree
Showing 6 changed files with 131 additions and 219 deletions.
8 changes: 1 addition & 7 deletions js/src/components/ui/Button.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import * as React from "react";
import { Tooltip } from './Tooltip';

interface ButtonProps {
label: string;
Expand All @@ -18,17 +17,12 @@ export function Button({
}: ButtonProps) {
return (
<div className="button-container">
{label && (
<label className="button-label">
<span>{label}</span>
{tooltip && <Tooltip tooltip={tooltip} />}
</label>
)}
<button
className="widget-button"
onClick={onClick}
disabled={disabled}
aria-pressed={value}
title={tooltip}
>
{label}
</button>
Expand Down
14 changes: 9 additions & 5 deletions js/src/components/ui/ProgressBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,21 @@ export function ProgressBar({ value, uiLabel, uiTooltip }: ProgressBarProps) {
{uiTooltip && <Tooltip tooltip={uiTooltip} />}
</div>
)}
<div className="progress-track">
<div className="progress-track-container">
<div
className="progress-fill"
style={{ width: `${clampedValue}%` }}
className="progress-track"
role="progressbar"
aria-valuenow={clampedValue}
aria-valuemin={0}
aria-valuemax={100}
/>
>
<div
className="progress-fill"
style={{ width: `${clampedValue}%` }}
/>
</div>
<div className="progress-value">{Math.round(clampedValue)}%</div>
</div>
<div className="progress-value">{Math.round(clampedValue)}%</div>
</div>
);
}
6 changes: 3 additions & 3 deletions js/src/components/ui/TaskButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export function TaskButton({
};

return (
<div className="task-button-container">
<div className="task-button-wrapper">
<button
className={`task-button ${getButtonState()} ${isHovering ? 'hovering' : ''}`}
onClick={handleClick}
Expand Down Expand Up @@ -151,8 +151,8 @@ export function TaskButton({
onClick={handleExpand}
disabled={isDisabled}
>
<svg viewBox="0 0 24 24" fill="currentColor" className="expand-icon" width="16" height="16">
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
<svg viewBox="0 0 24 24" fill="currentColor" className="expand-icon">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
</button>

Expand Down
112 changes: 57 additions & 55 deletions js/src/components/ui/TaskModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import * as React from 'react';
import { ProgressBar } from './ProgressBar';
import { Button } from './Button';
import { CheckBox } from './CheckBox';

interface LogEntry {
timestamp: string;
Expand Down Expand Up @@ -75,76 +77,76 @@ export function TaskDetailModal({
};

return (
<div className="modal-overlay fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
<div
className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
onClick={handleOverlayClick}
>
<div className="modal-container bg-white rounded-xl shadow-2xl w-1/2 min-w-[500px] max-w-2xl relative z-50">
<div className="task-detail-modal p-8 flex flex-col items-center space-y-6">
<div className="w-3/4 flex justify-center">
<div className="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] flex flex-col border-2 border-gray-300">
<div className="p-6 flex flex-col h-full">
<h2 className="text-xl font-semibold text-gray-900 mb-4 text-center">
{taskName}
</h2>

<div className="w-full mb-6">
<ProgressBar value={progress * 100} />
</div>

{error && error.message && (
<div className="w-full">
<div className="error-container bg-red-50 rounded-lg p-4 border border-red-200">
{error.timestamp && (
<p className="text-red-500 text-xs mb-2">
{formatTimestamp(error.timestamp)}
<div className="bg-red-50 rounded-lg p-4 border border-red-200 mb-6">
{error.timestamp && (
<p className="text-red-500 text-xs mb-2">
{formatTimestamp(error.timestamp)}
</p>
)}
<div className="flex items-start gap-3">
<svg className="w-6 h-6 text-red-600 mt-0.5" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clipRule="evenodd" />
</svg>
<div className="flex-1">
<p className="text-red-700 font-medium text-sm">
{typeof error.message === 'object'
? JSON.stringify(error.message)
: error.message}
</p>
)}
<div className="flex items-start gap-3">
<svg className="w-8 h-8 text-red-600 mt-0.5" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clipRule="evenodd" />
</svg>
<div className="flex-1">
<p className="text-red-700 font-bold text-xl">
{typeof error.message === 'object'
? JSON.stringify(error.message)
: error.message}
</p>
{error.traceback && (
<pre className="mt-2 text-red-600 text-sm font-mono whitespace-pre-wrap overflow-x-auto">
{error.traceback}
</pre>
)}
</div>
{error.traceback && (
<pre className="mt-2 text-red-600 text-xs font-mono whitespace-pre-wrap overflow-x-auto">
{error.traceback}
</pre>
)}
</div>
</div>
</div>
)}

<div className="w-full">
<div
ref={logsContainerRef}
className="logs-container bg-gray-50 rounded-lg p-4 max-h-[300px] overflow-y-auto border border-gray-100"
>
{logs.map(([timestamp, type, source, message], index) => (
<div key={index} className="log-entry py-1 font-mono text-sm flex gap-2">
<span className="text-gray-400">{formatTimestamp(timestamp)}</span>
<span className={`font-medium ${getLogTypeColor(type)}`}>[{type}]</span>
<span className="text-gray-500">{source}:</span>
<span className="text-gray-700">{message}</span>
</div>
))}
</div>
<div
ref={logsContainerRef}
className="bg-gray-50 rounded-lg p-4 overflow-y-auto border border-gray-200 mb-6"
style={{
height: '500px',
lineHeight: '25px'
}}
>
{logs.slice(-20).map(([timestamp, type, source, message], index) => (
<div key={index} className="py-1 font-mono text-xs flex gap-2 h-[25px] items-center">
<span className="text-gray-400">{formatTimestamp(timestamp)}</span>
<span className={`font-medium ${getLogTypeColor(type)}`}>[{type}]</span>
<span className="text-gray-500">{source}:</span>
<span className="text-gray-700">{message}</span>
</div>
))}
</div>

<div className="flex items-center space-x-6">
<label className="flex items-center space-x-2 text-sm text-gray-600">
<input
type="checkbox"
checked={isAutoScrollEnabled}
onChange={(e) => setIsAutoScrollEnabled(e.target.checked)}
className="rounded text-blue-500 focus:ring-blue-500"
/>
<span>Track updates</span>
</label>
<button
className="px-8 py-2.5 bg-blue-500 hover:bg-blue-600 rounded-lg transition-colors duration-200 font-medium text-white shadow-sm"
<div className="flex items-center justify-between mt-auto">
<CheckBox
value={isAutoScrollEnabled}
onChange={(checked) => setIsAutoScrollEnabled(checked)}
uiLabel="Auto-scroll"
/>
<Button
label="Close"
tooltip="Close the task details"
onClick={onClose}
>
Close
</button>
/>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit fa20dda

Please sign in to comment.