hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Add rounded corners to welcome banners

Browse Source 
Signed-off-by: Juho Heikka <juho.heikka@gmail.com>
This commit is contained in:
Juho Heikka 2021-09-16 14:32:34 +03:00
parent 64fb590377
commit bcf66b1967
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer/components/+welcome/welcome.scss
View File

@ -71,4 +71,10 @@
text-decoration: underline; text-decoration: underline;
} }
} }
.BannerCarouselWrapper {
border-radius: var(--border-radius);
display: inline-block;
overflow: hidden;
}
} }

12
src/renderer/components/+welcome/welcome.tsx
View File

@ -33,10 +33,10 @@ export const defaultWidth = 320;
@observer @observer
export class Welcome extends React.Component { export class Welcome extends React.Component {
render() { render() {
const welcomeBanner = WelcomeBannerRegistry.getInstance().getItems(); const welcomeBanners = WelcomeBannerRegistry.getInstance().getItems();
// if there is banner with specified width, use it to calculate the width of the container // if there is banner with specified width, use it to calculate the width of the container
const maxWidth = welcomeBanner.reduce((acc, curr) => { const maxWidth = welcomeBanners.reduce((acc, curr) => {
const currWidth = curr.width ?? 0; const currWidth = curr.width ?? 0;
if (acc > currWidth) { if (acc > currWidth) {
@ -49,10 +49,10 @@ export class Welcome extends React.Component {
return ( return (
<div className="flex justify-center Welcome align-center"> <div className="flex justify-center Welcome align-center">
<div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container"> <div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container">
{welcomeBanner.length > 0 ? ( {welcomeBanners.length > 0 ? (
<Carousel <Carousel
stopAutoPlayOnHover={true} stopAutoPlayOnHover={true}
indicators={welcomeBanner.length > 1} indicators={welcomeBanners.length > 1}
autoPlay={true} autoPlay={true}
navButtonsAlwaysInvisible={true} navButtonsAlwaysInvisible={true}
indicatorIconButtonProps={{ indicatorIconButtonProps={{
@ -67,8 +67,8 @@ export class Welcome extends React.Component {
}} }}
interval={8000} interval={8000}
> >
{welcomeBanner.map((item, index) => {welcomeBanners.map((item, index) =>
<item.Banner key={index} /> <div key={index} className="BannerCarouselWrapper"><item.Banner/></div>
)} )}
</Carousel> </Carousel>
) : <Icon svg="logo-lens" className="logo" />} ) : <Icon svg="logo-lens" className="logo" />}