Skip to content

Commit f3ac34e

Browse files
Fr4nc3Fr4nc3
committed
Merge branch 'ui-ux-refresh_eunsoo' into feature/ui-ux-refresh
2 parents 2f13a87 + ca9f046 commit f3ac34e

File tree

8 files changed

+359
-243
lines changed

8 files changed

+359
-243
lines changed

‎src/frontend_react/src/components/content/HomeInput.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ const HomeInput: React.FC<HomeInputProps> = ({
131131
icon={task.icon}
132132
description={task.description}
133133
onClick={() => handleQuickTaskClick(task)}
134+
disabled
134135
/>
135136
))}
136137
</div>

‎src/frontend_react/src/components/content/PlanPanelLeft.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({ onNewTaskButton }) => {
101101
return (
102102
<div style={{ flexShrink: 0, display: "flex", overflow: "hidden" }}>
103103
<PanelLeft panelWidth={280} panelResize={true}>
104-
<PanelLeftToolbar panelTitle="Contoso" panelIcon={<ContosoLogo />}>
104+
<PanelLeftToolbar linkTo="/" panelTitle="Contoso" panelIcon={<ContosoLogo />}>
105105
<Tooltip content="New task" relationship={"label"} />
106106
</PanelLeftToolbar>
107107

‎src/frontend_react/src/components/toast/InlineToaster.tsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,24 @@ export const useInlineToaster = () => {
2828
const showToast = (
2929
content: React.ReactNode,
3030
intent: ToastIntent = "info",
31-
options?: { dismissible?: boolean }
31+
options?: {
32+
dismissible?: boolean;
33+
timeoutMs?: number | null;
34+
}
3235
) => {
3336
const id = Date.now();
37+
const timeout = options?.timeoutMs ?? (intent === "progress" ? null : 3000);
38+
3439
if (_setToasts) {
3540
_setToasts((prev) => [
3641
...prev,
37-
{ id, content, intent, visible: false, dismissible: options?.dismissible },
42+
{
43+
id,
44+
content,
45+
intent,
46+
visible: false,
47+
dismissible: options?.dismissible,
48+
},
3849
]);
3950

4051
setTimeout(() => {
@@ -43,18 +54,19 @@ export const useInlineToaster = () => {
4354
);
4455
}, 10);
4556

46-
if (intent !== "progress") {
57+
if (timeout !== null) {
4758
setTimeout(() => {
4859
_setToasts?.((prev) =>
4960
prev.map((t) => (t.id === id ? { ...t, visible: false } : t))
5061
);
51-
}, 3000);
62+
}, timeout);
5263

5364
setTimeout(() => {
5465
_setToasts?.((prev) => prev.filter((t) => t.id !== id));
55-
}, 3500);
66+
}, timeout + 500);
5667
}
5768
}
69+
5870
return id;
5971
};
6072

@@ -142,7 +154,9 @@ const InlineToaster: React.FC = () => {
142154
<Body1>{toast.content}</Body1>
143155
{(toast.dismissible || toast.intent === "progress") && (
144156
<button
145-
onClick={() => _setToasts?.((prev) => prev.filter((t) => t.id !== toast.id))}
157+
onClick={() =>
158+
_setToasts?.((prev) => prev.filter((t) => t.id !== toast.id))
159+
}
146160
style={{
147161
position: "absolute",
148162
top: "50%",

‎src/frontend_react/src/coral/components/Panels/PanelLeftToolbar.tsx‎

Lines changed: 60 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,95 @@
11
import React, { ReactNode } from "react";
2-
import { Body1Strong, Subtitle2 } from "@fluentui/react-components";
2+
import { Subtitle2 } from "@fluentui/react-components";
3+
import { Link } from "react-router-dom";
34

45
interface PanelLeftToolbarProps {
56
panelIcon?: ReactNode;
67
panelTitle?: string | null;
8+
linkTo?: string;
79
children?: ReactNode;
810
}
911

1012
const PanelLeftToolbar: React.FC<PanelLeftToolbarProps> = ({
1113
panelIcon,
1214
panelTitle,
15+
linkTo,
1316
children,
1417
}) => {
15-
return (
18+
const TitleContent = (
1619
<div
17-
className="panelToolbar"
20+
className="panelTitle"
1821
style={{
1922
display: "flex",
2023
alignItems: "center",
21-
gap: "8px",
22-
padding: "16px",
23-
boxSizing: "border-box",
24-
height: "56px",
24+
gap: "6px",
25+
flexShrink: 1,
26+
overflow: "hidden",
27+
minWidth: 0,
2528
}}
2629
>
27-
{(panelIcon || panelTitle) && (
30+
{panelIcon && (
2831
<div
29-
className="panelTitle"
3032
style={{
33+
flexShrink: 0,
3134
display: "flex",
3235
alignItems: "center",
33-
gap: "6px",
34-
flexShrink: 1, // Allow shrinking when needed
35-
overflow: "hidden",
36-
minWidth: 0, // Prevents breaking layout when shrinking
3736
}}
3837
>
39-
{panelIcon && (
40-
<div
41-
style={{
42-
flexShrink: 0, // Prevents icon from shrinking
43-
display: "flex",
44-
alignItems: "center",
45-
}}
46-
>
47-
{panelIcon}
48-
</div>
49-
)}
50-
{panelTitle && (
51-
<Subtitle2
52-
style={{
53-
whiteSpace: "nowrap",
54-
overflow: "hidden",
55-
textOverflow: "ellipsis",
56-
}}
57-
>
58-
{panelTitle}
59-
</Subtitle2>
60-
)}
38+
{panelIcon}
6139
</div>
6240
)}
41+
{panelTitle && (
42+
<Subtitle2
43+
style={{
44+
whiteSpace: "nowrap",
45+
overflow: "hidden",
46+
textOverflow: "ellipsis",
47+
}}
48+
>
49+
{panelTitle}
50+
</Subtitle2>
51+
)}
52+
</div>
53+
);
54+
55+
return (
56+
<div
57+
className="panelToolbar"
58+
style={{
59+
display: "flex",
60+
alignItems: "center",
61+
gap: "8px",
62+
padding: "16px",
63+
boxSizing: "border-box",
64+
height: "56px",
65+
}}
66+
>
67+
{(panelIcon || panelTitle) &&
68+
(linkTo ? (
69+
<Link
70+
to={linkTo}
71+
style={{
72+
textDecoration: "none",
73+
color: "inherit",
74+
display: "flex",
75+
alignItems: "center",
76+
minWidth: 0,
77+
flexShrink: 1,
78+
}}
79+
>
80+
{TitleContent}
81+
</Link>
82+
) : (
83+
TitleContent
84+
))}
6385
<div
6486
className="panelTools"
6587
style={{
6688
display: "flex",
6789
alignItems: "center",
68-
69-
flexGrow: 1, // Allows `panelTools` to take the remaining space
70-
justifyContent: "flex-end", // Makes sure buttons hug their content
71-
minWidth: 0, // Prevents layout breaking when content shrinks
90+
flexGrow: 1,
91+
justifyContent: "flex-end",
92+
minWidth: 0,
7293
}}
7394
>
7495
{children}

‎src/frontend_react/src/coral/components/PromptCard.tsx‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,37 +8,47 @@ type PromptCardProps = {
88
description: string;
99
icon?: React.ReactNode;
1010
onClick?: () => void;
11+
disabled?: boolean; // ✅ New prop for disabling the card
1112
};
1213

1314
const PromptCard: React.FC<PromptCardProps> = ({
1415
title,
1516
description,
1617
icon,
1718
onClick,
19+
disabled = false, // 🔧 Default is false (enabled)
1820
}) => {
1921
return (
2022
<Card
21-
onClick={onClick}
23+
onClick={!disabled ? onClick : undefined} // 🚫 Block click if disabled
2224
style={{
2325
flex: "1",
2426
display: "flex",
2527
flexDirection: "column",
2628
padding: "16px",
27-
backgroundColor: "var(--colorNeutralBackground3)",
29+
backgroundColor: disabled
30+
? "var(--colorNeutralBackgroundDisabled)"
31+
: "var(--colorNeutralBackground3)",
2832
border: "1px solid var(--colorNeutralStroke2)",
2933
borderRadius: "8px",
30-
cursor: "pointer",
34+
cursor: disabled ? "not-allowed" : "pointer",
3135
boxShadow: "none",
36+
opacity: disabled ? 0.4 : 1, // 🧼 Matches Fluent disabled visual
3237
transition: "background-color 0.2s ease-in-out",
3338
}}
34-
onMouseOver={(e) =>
35-
(e.currentTarget.style.backgroundColor =
36-
"var(--colorNeutralBackground4Hover)")
37-
}
38-
onMouseOut={(e) =>
39-
(e.currentTarget.style.backgroundColor =
40-
"var(--colorNeutralBackground3)")
41-
}
39+
// 🧠 Only apply hover if not disabled
40+
onMouseOver={(e) => {
41+
if (!disabled) {
42+
e.currentTarget.style.backgroundColor =
43+
"var(--colorNeutralBackground4Hover)";
44+
}
45+
}}
46+
onMouseOut={(e) => {
47+
if (!disabled) {
48+
e.currentTarget.style.backgroundColor =
49+
"var(--colorNeutralBackground3)";
50+
}
51+
}}
4252
>
4353
<div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
4454
{icon && (

0 commit comments

Comments
 (0)