Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 15:59:41 +02:00
Code Issues Releases Activity

fix(be-overlay): consistency overlay with variants [EE-6742] (#11774)
Some checks are pending
ci / build_images (map[arch:amd64 platform:linux version:]) (push) Waiting to run
ci / build_images (map[arch:amd64 platform:windows version:1809]) (push) Waiting to run
ci / build_images (map[arch:amd64 platform:windows version:ltsc2022]) (push) Waiting to run
ci / build_images (map[arch:arm platform:linux version:]) (push) Waiting to run
ci / build_images (map[arch:arm64 platform:linux version:]) (push) Waiting to run
ci / build_images (map[arch:ppc64le platform:linux version:]) (push) Waiting to run
ci / build_images (map[arch:s390x platform:linux version:]) (push) Waiting to run
ci / build_manifests (push) Blocked by required conditions
/ triage (push) Waiting to run
Lint / Run linters (push) Waiting to run
Test / test-client (push) Waiting to run
Test / test-server (map[arch:amd64 platform:linux]) (push) Waiting to run
Test / test-server (map[arch:amd64 platform:windows version:1809]) (push) Waiting to run
Test / test-server (map[arch:amd64 platform:windows version:ltsc2022]) (push) Waiting to run
Test / test-server (map[arch:arm64 platform:linux]) (push) Waiting to run

Browse source 
Co-authored-by: testa113 <testa113>
This commit is contained in:
Ali 2024-05-07 16:16:49 +12:00 • committed by GitHub
parent 46c6a0700f
commit 6d17d8bc64
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 76 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

44
app/react/components/BEFeatureIndicator/BEOverlay.tsx
View file

@ -5,14 +5,38 @@ import { isLimitedToBE } from '@/react/portainer/feature-flags/feature-flags.ser
import { BEFeatureIndicator } from './BEFeatureIndicator';
type Variants = 'form-section' | 'widget' | 'multi-widget';
type OverlayClasses = {
beLinkContainerClassName: string;
contentClassName: string;
};
const variantClassNames: Record<Variants, OverlayClasses> = {
'form-section': {
beLinkContainerClassName: '',
contentClassName: '',
},
widget: {
beLinkContainerClassName: '',
// no padding so that the border overlaps the widget border
contentClassName: '!p-0',
},
'multi-widget': {
beLinkContainerClassName: 'm-4',
// widgets have a mx of 15px and mb of 15px - match this at the top with padding
contentClassName: '!p-0 !pt-[15px]',
},
};
export function BEOverlay({
featureId,
children,
className,
variant = 'form-section',
}: {
featureId: FeatureId;
children: React.ReactNode;
className?: string;
variant?: 'form-section' | 'widget' | 'multi-widget';
}) {
const isLimited = isLimitedToBE(featureId);
if (!isLimited) {
@ -21,10 +45,22 @@ export function BEOverlay({
return (
<div className="be-indicator-container limited-be">
<div className="limited-be-link vertical-center">
<div
className={clsx(
'limited-be-link vertical-center',
variantClassNames[variant].beLinkContainerClassName
)}
>
<BEFeatureIndicator featureId={featureId} />
</div>
<div className={clsx('limited-be-content', className)}>{children}</div>
<div
className={clsx(
'limited-be-content',
variantClassNames[variant].contentClassName
)}
>
{children}
</div>
</div>
);
}