mirror of
https://github.com/QwenLM/qwen-code.git
synced 2025-12-19 09:33:53 +00:00
7cd26f728d
Complete session message handling with JSONL support and UI enhancements - Add JSONL session file reading capability - Improve error handling and authentication flows - Update UI components for better user experience - Fix command identifier references - Enhance MarkdownRenderer with copy functionality - Update Tailwind configuration for better component coverage
85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2025 Qwen Team
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import type React from 'react';
|
|
|
|
export interface CheckboxDisplayProps {
|
|
checked?: boolean;
|
|
indeterminate?: boolean;
|
|
disabled?: boolean;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
title?: string;
|
|
}
|
|
|
|
/**
|
|
* Display-only checkbox styled via Tailwind classes.
|
|
* - Renders a custom-looking checkbox using appearance-none and pseudo-elements.
|
|
* - Supports indeterminate (middle) state using the DOM property and a data- attribute.
|
|
* - Intended for read-only display (disabled by default).
|
|
*/
|
|
export const CheckboxDisplay: React.FC<CheckboxDisplayProps> = ({
|
|
checked = false,
|
|
indeterminate = false,
|
|
disabled = true,
|
|
className = '',
|
|
style,
|
|
title,
|
|
}) => {
|
|
// Render as a span (not <input>) so we can draw a checkmark with CSS.
|
|
// Pseudo-elements do not reliably render on <input> in Chromium (VS Code webviews),
|
|
// which caused the missing icon. This version is font-free and uses borders.
|
|
const showCheck = !!checked && !indeterminate;
|
|
const showInProgress = !!indeterminate;
|
|
|
|
return (
|
|
<span
|
|
role="checkbox"
|
|
aria-checked={indeterminate ? 'mixed' : !!checked}
|
|
aria-disabled={disabled || undefined}
|
|
title={title}
|
|
style={style}
|
|
className={[
|
|
'q m-[2px] shrink-0 w-4 h-4 relative rounded-[2px] box-border',
|
|
'border border-[var(--app-input-border)] bg-[var(--app-input-background)]',
|
|
'inline-flex items-center justify-center',
|
|
showCheck ? 'opacity-70' : '',
|
|
className,
|
|
].join(' ')}
|
|
>
|
|
{showCheck ? (
|
|
<span
|
|
aria-hidden
|
|
className={[
|
|
'absolute block',
|
|
// Place the check slightly to the left/top so rotated arms stay inside the 16x16 box
|
|
'left-[3px] top-[3px]',
|
|
// 10x6 shape works well for a 16x16 checkbox
|
|
'w-2.5 h-1.5',
|
|
// Draw the L-corner and rotate to form a check
|
|
'border-l-2 border-b-2',
|
|
'border-[#74c991]',
|
|
'-rotate-45',
|
|
].join(' ')}
|
|
/>
|
|
) : null}
|
|
{showInProgress ? (
|
|
<span
|
|
aria-hidden
|
|
className={[
|
|
'absolute inline-block',
|
|
'left-1/2 top-[10px] -translate-x-1/2 -translate-y-1/2',
|
|
// Use a literal star; no icon font needed
|
|
'text-[16px] leading-none text-[#e1c08d] select-none',
|
|
].join(' ')}
|
|
>
|
|
*
|
|
</span>
|
|
) : null}
|
|
</span>
|
|
);
|
|
};
|