Skip to content

Commit 5dace2d

Browse files
LasserichLasserich
committed
fix: on activate
1 parent fadf3ac commit 5dace2d

File tree

7 files changed

+237
-450
lines changed

7 files changed

+237
-450
lines changed

‎src/components/Hints/GenericHint.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react';
2-
import { Card, CardHeader, Button } from '@ui5/webcomponents-react';
2+
import { Card, CardHeader, MessageViewButton } from '@ui5/webcomponents-react';
33
import { useTranslation } from 'react-i18next';
44
import cx from 'clsx';
55
import { MultiPercentageBar } from './MultiPercentageBar';
@@ -97,7 +97,7 @@ export const GenericHint: React.FC<GenericHintProps> = ({
9797
config.renderHoverContent(allItems, enabled)}
9898

9999
{/* Activate button for disabled state */}
100-
{!enabled && onActivate && (
100+
{!enabled && (
101101
<div
102102
style={{
103103
position: 'absolute',
@@ -107,9 +107,11 @@ export const GenericHint: React.FC<GenericHintProps> = ({
107107
pointerEvents: 'auto',
108108
}}
109109
>
110-
<Button design="Emphasized" onClick={onActivate}>
111-
{t('Hints.common.activate')}
112-
</Button>
110+
<MessageViewButton
111+
type={"Information"}
112+
onClick={onActivate}
113+
style={{ cursor: onActivate ? 'pointer' : 'default' }}
114+
/>
113115
</div>
114116
)}
115117
</Card>

‎src/components/Hints/Hints.module.css‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,7 @@
1515
pointer-events: none;
1616
}
1717

18-
/* Chart and Legend Styles */
19-
.chartBackground {
20-
background-color: var(--sapBackgroundColor, #fafafa);
21-
}
22-
23-
.chartLabel {
24-
color: var(--sapTextColor, #374151);
25-
}
26-
18+
/* Legend Styles */
2719
.legendSection {
2820
background-color: var(--sapTile_Background, #ffffff);
2921
border: 1px solid var(--sapList_BorderColor, #e1e5e9);
@@ -75,16 +67,6 @@
7567
background: rgba(0, 0, 0, 0.4);
7668
}
7769

78-
[data-ui5-theme-root*="dark"] .chartBackground,
79-
[data-ui5-theme*="dark"] .chartBackground {
80-
background-color: #2a2a2a;
81-
}
82-
83-
[data-ui5-theme-root*="dark"] .chartLabel,
84-
[data-ui5-theme*="dark"] .chartLabel {
85-
color: #ffffff;
86-
}
87-
8870
[data-ui5-theme-root*="dark"] .legendSection,
8971
[data-ui5-theme*="dark"] .legendSection {
9072
background-color: #2a2a2a;

‎src/components/Hints/Hints.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ const Hints: React.FC<HintsProps> = ({ mcp }) => {
6262
<GenericHint
6363
enabled={!!mcp?.spec?.components?.crossplane}
6464
version={mcp?.spec?.components?.crossplane?.version}
65+
onActivate={!mcp?.spec?.components?.crossplane ? () => console.log('Activate Crossplane') : undefined} // TODO: replace with link to docs
6566
allItems={allItems}
6667
isLoading={managedResourcesLoading}
6768
error={managedResourcesError}
@@ -70,6 +71,7 @@ const Hints: React.FC<HintsProps> = ({ mcp }) => {
7071
<GenericHint
7172
enabled={!!mcp?.spec?.components?.flux}
7273
version={mcp?.spec?.components?.flux?.version}
74+
onActivate={!mcp?.spec?.components?.flux ? () => console.log('Activate Flux') : undefined} // TODO: replace with link to docs
7375
allItems={allItems}
7476
isLoading={managedResourcesLoading}
7577
error={managedResourcesError}
@@ -78,6 +80,7 @@ const Hints: React.FC<HintsProps> = ({ mcp }) => {
7880
<GenericHint
7981
enabled={!!mcp?.spec?.components?.externalSecretsOperator}
8082
version={mcp?.spec?.components?.externalSecretsOperator?.version}
83+
onActivate={!mcp?.spec?.components?.externalSecretsOperator ? () => console.log('Activate Vault') : undefined} // TODO: replace with link to docs
8184
allItems={allItems}
8285
isLoading={managedResourcesLoading}
8386
error={managedResourcesError}

‎src/components/Hints/MultiPercentageBar.module.css‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
/* CSS Variables for customization */
2+
.container {
3+
--animation-duration: 600ms;
4+
--bar-width: 80%;
5+
--bar-max-width: 400px;
6+
--bar-height: 8px;
7+
--gap: 2px;
8+
--border-radius: 6px;
9+
--label-font-size: 0.875rem;
10+
--background-color: var(--sapBackgroundColor, #fafafa);
11+
12+
display: flex;
13+
flex-direction: column;
14+
align-items: center;
15+
gap: 4px;
16+
width: 100%;
17+
padding-bottom: 8px;
18+
19+
/* Initial animation */
20+
animation: fadeInUp var(--animation-duration) ease-out;
21+
}
22+
23+
/* Respect user's motion preferences */
24+
@media (prefers-reduced-motion: reduce) {
25+
.container {
26+
animation: fadeIn var(--animation-duration) ease-out;
27+
}
28+
29+
.segment {
30+
transition: none !important;
31+
}
32+
33+
.waveOverlay {
34+
animation: none !important;
35+
}
36+
37+
.percentage {
38+
animation: none !important;
39+
}
40+
}
41+
42+
/* Label styling */
43+
.labelContainer {
44+
display: flex;
45+
gap: 6px;
46+
flex-wrap: wrap;
47+
justify-content: left;
48+
width: var(--bar-width);
49+
}
50+
51+
.labelGroup {
52+
display: flex;
53+
align-items: center;
54+
gap: 6px;
55+
}
56+
57+
.label,
58+
.percentage {
59+
font-size: var(--label-font-size);
60+
font-weight: 400;
61+
color: var(--sapTextColor, #374151);
62+
transition: color 0.3s ease, font-weight 0.3s ease;
63+
}
64+
65+
.label.healthy,
66+
.percentage.healthy {
67+
color: green;
68+
font-weight: 700;
69+
}
70+
71+
/* Bar container */
72+
.barContainer {
73+
display: flex;
74+
gap: var(--gap);
75+
width: var(--bar-width);
76+
max-width: var(--bar-max-width);
77+
background-color: var(--background-color);
78+
border-radius: var(--border-radius);
79+
padding: 2px;
80+
overflow: hidden;
81+
}
82+
83+
/* Individual segments */
84+
.segment {
85+
flex: var(--segment-percentage);
86+
min-width: 10px;
87+
background-color: var(--segment-color);
88+
border-radius: var(--border-radius);
89+
height: var(--bar-height);
90+
position: relative;
91+
overflow: hidden;
92+
93+
/* Smooth transitions for flex changes */
94+
transition: flex var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1);
95+
96+
/* Initial state for animation */
97+
transform: scaleX(0);
98+
transform-origin: left;
99+
animation: growWidth var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
100+
}
101+
102+
/* Stagger the segment animations */
103+
.segment:nth-child(1) { animation-delay: 0ms; }
104+
.segment:nth-child(2) { animation-delay: 100ms; }
105+
.segment:nth-child(3) { animation-delay: 200ms; }
106+
.segment:nth-child(4) { animation-delay: 300ms; }
107+
.segment:nth-child(5) { animation-delay: 400ms; }
108+
109+
/* Wave animation overlay */
110+
.waveOverlay {
111+
position: absolute;
112+
top: 0;
113+
left: -80%;
114+
width: 80%;
115+
height: 100%;
116+
background: linear-gradient(90deg,
117+
transparent 0%,
118+
rgba(255, 255, 255, 0.15) 25%,
119+
rgba(255, 255, 255, 0.25) 50%,
120+
rgba(255, 255, 255, 0.15) 75%,
121+
transparent 100%);
122+
border-radius: var(--border-radius);
123+
pointer-events: none;
124+
125+
/* Continuous wave animation */
126+
animation: wave 3s ease-in-out infinite;
127+
animation-delay: var(--animation-duration);
128+
}
129+
130+
/* Keyframe animations */
131+
@keyframes fadeInUp {
132+
from {
133+
opacity: 0;
134+
transform: translateY(20px);
135+
}
136+
to {
137+
opacity: 1;
138+
transform: translateY(0);
139+
}
140+
}
141+
142+
@keyframes fadeIn {
143+
from {
144+
opacity: 0;
145+
}
146+
to {
147+
opacity: 1;
148+
}
149+
}
150+
151+
@keyframes growWidth {
152+
from {
153+
transform: scaleX(0);
154+
}
155+
to {
156+
transform: scaleX(1);
157+
}
158+
}
159+
160+
@keyframes wave {
161+
0% {
162+
left: -80%;
163+
}
164+
50% {
165+
left: 100%;
166+
}
167+
100% {
168+
left: -80%;
169+
}
170+
}
171+
172+
/* Theme Support */
173+
[data-ui5-theme-root*="dark"] .container,
174+
[data-ui5-theme*="dark"] .container {
175+
--background-color: #2a2a2a;
176+
}
177+
178+
[data-ui5-theme-root*="dark"] .label,
179+
[data-ui5-theme*="dark"] .label,
180+
[data-ui5-theme-root*="dark"] .percentage,
181+
[data-ui5-theme*="dark"] .percentage {
182+
color: #ffffff;
183+
}

0 commit comments

Comments
 (0)