From 66fb11290a21e821c6749c9a126408843c8dbb92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Loi=CC=88c=20Correnson?= <loic.correnson@cea.fr>
Date: Mon, 11 Sep 2023 16:01:33 +0200
Subject: [PATCH] [dom] icon kinds
---
ivette/src/dome/renderer/controls/icons.tsx | 7 ++++++-
ivette/src/dome/renderer/controls/labels.tsx | 22 +++++++++++++++-----
ivette/src/dome/renderer/controls/style.css | 11 +++++-----
3 files changed, 29 insertions(+), 11 deletions(-)
diff --git a/ivette/src/dome/renderer/controls/icons.tsx b/ivette/src/dome/renderer/controls/icons.tsx
index 024e708ffaf..5759f151e36 100644
--- a/ivette/src/dome/renderer/controls/icons.tsx
+++ b/ivette/src/dome/renderer/controls/icons.tsx
@@ -96,6 +96,8 @@ export function SVG(props: SVGprops): null | JSX.Element {
// --- Icon Component
// --------------------------------------------------------------------------
+export type IconKind = 'disabled' | 'warning' | 'positive' | 'negative';
+
/** Icon Component Properties */
export interface IconProps extends SVGprops {
/** Additional class name(s). */
@@ -108,6 +110,8 @@ export interface IconProps extends SVGprops {
style?: React.CSSProperties;
/** Fill style property. */
fill?: string;
+ /** Icon Kind. */
+ kind?: IconKind;
/** Click callback. */
onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
}
@@ -118,7 +122,7 @@ export interface IconProps extends SVGprops {
*/
export function Icon(props: IconProps): JSX.Element {
const {
- id, title, onClick, fill,
+ id, title, onClick, fill, kind,
size, className, offset, style,
visible = true, display = true,
} = props;
@@ -126,6 +130,7 @@ export function Icon(props: IconProps): JSX.Element {
'dome-xIcon',
!visible && 'dome-control-hidden',
!display && 'dome-control-erased',
+ kind && ('dome-xIcon-' + kind),
className
);
const divStyle = styles(fill && { fill }, style);
diff --git a/ivette/src/dome/renderer/controls/labels.tsx b/ivette/src/dome/renderer/controls/labels.tsx
index 9bf33338966..70e4e75c82b 100644
--- a/ivette/src/dome/renderer/controls/labels.tsx
+++ b/ivette/src/dome/renderer/controls/labels.tsx
@@ -38,6 +38,9 @@ import './style.css';
// --- Generic Label
// --------------------------------------------------------------------------
+export type IconKind =
+ 'default' | 'disabled' | 'warning' | 'positive' | 'negative';
+
/** Labels support fowarding refs to their inner [<label/>] element. */
export interface LabelProps {
/** Text of the label. Prepend to other children elements. */
@@ -46,8 +49,12 @@ export interface LabelProps {
icon?: string;
/** Tool-tip description. */
title?: string;
+ /** Icon kind. */
+ kind?: IconKind,
/** Additional class. */
className?: string;
+ /** Additional class for icon. */
+ iconClassName?: string;
/** Additional style. */
style?: React.CSSProperties;
/** If `false`, do not display the label. Default to `true`. */
@@ -64,15 +71,19 @@ export interface LabelProps {
const makeLabel = (className: string) =>
function Label(
- props: LabelProps,
- ref: LegacyRef<HTMLLabelElement> | undefined
- ): JSX.Element {
- const { display = true } = props;
+ props: LabelProps,
+ ref: LegacyRef<HTMLLabelElement> | undefined
+ ): JSX.Element {
+ const { display = true, kind = 'default' } = props;
const allClasses = classes(
className,
!display && 'dome-control-erased',
props.className,
);
+ const iconClass = classes(
+ 'dome-xIcon-' + kind,
+ props.iconClassName,
+ );
return (
<label
ref={ref}
@@ -83,7 +94,8 @@ const makeLabel = (className: string) =>
onDoubleClick={props.onDoubleClick}
onContextMenu={props.onContextMenu}
>
- {props.icon && <Icon title={props.title} id={props.icon} />}
+ {props.icon &&
+ <Icon title={props.title} id={props.icon} className={iconClass} />}
{props.label}
{props.children}
</label>
diff --git a/ivette/src/dome/renderer/controls/style.css b/ivette/src/dome/renderer/controls/style.css
index 4d04c9be879..a5cd05a7c0e 100644
--- a/ivette/src/dome/renderer/controls/style.css
+++ b/ivette/src/dome/renderer/controls/style.css
@@ -9,11 +9,6 @@
white-space: nowrap ;
}
-.dome-xLabel .dome-xIcon {
- margin-right: 4px ;
- fill: var(--info-text-discrete);
-}
-
.dome-xLabel.dome-text-descr {
overflow: auto ;
white-space: wrap ;
@@ -34,6 +29,12 @@
position:relative ;
}
+.dome-xIcon-default { fill: var(--var-info-text-discrete) ; }
+.dome-xIcon-positive { fill: var(--positive-button-color) ; }
+.dome-xIcon-negative { fill: var(--negative-button-color) ; }
+.dome-xIcon-warning { fill: var(--warning-button-color) ; }
+.dome-xIcon-disabled { fill: var(--background-intense) ; }
+
.dome-xBadge {
flex: 0 0 auto ;
display: inline ;
--
GitLab