UniqAI/hexabot
1
0
Fork 0
mirror of https://github.com/hexastack/hexabot synced 2025-01-22 18:45:57 +00:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity

Merge pull request #386 from Hexastack/fix/carousel-navigation-styling

Browse Source 
Fix/carousel navigation styling
This commit is contained in:
Med Marrouchi 2024-12-06 14:51:44 +01:00 committed by GitHub
commit e6f52073d0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 33 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
widget/src/components/Message.scss
View File

@ -1,6 +1,6 @@
.sc-message {
margin: auto;
padding: 0 0.5rem;
padding: 0 0.5rem 0 0;
display: flex;
margin-bottom: 0.25rem;
@ -38,14 +38,14 @@
display: flex;
flex-direction: row;
position: relative;
max-width: calc(100% - 2rem);
max-width: calc(100% - 40px); // same as avatar spacing
width: auto;
.sc-message--avatar {
width: 32px;
height: 32px;
margin-right: 4px;
margin-top: 2px;
margin: 2px 4px;
background-position: 0 0;
flex-shrink: 0;
background-size: cover;
@ -55,7 +55,6 @@
.sc-message--wrapper {
display: flex;
flex-direction: column;
width: 100%;
.sc-message--text {
padding: 10px 20px;

1
widget/src/components/messages/ButtonMessage.scss
View File

@ -50,6 +50,7 @@
.sc-message--carousel-element {
.sc-message--buttons-content {
padding: 0.5rem;
margin-bottom: 16px;
}
.sc-message--buttons {
margin: 0;

20
widget/src/components/messages/CarouselMessage.scss
View File

@ -1,7 +1,7 @@
.sc-message--carousel {
border-radius: 0.5rem;
position: relative;
width: 100%;
width: 275px;
overflow: hidden;
.sc-message--carousel-inner {
@ -17,11 +17,8 @@
justify-content: center;
.sc-message--carousel-element {
padding: 1rem;
width: 100%;
.sc-message--carousel-element-image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
@ -35,9 +32,10 @@
padding: 0.5rem 0;
margin-top: 8px;
}
.sc-message--carousel-element-description {
width: 100%;
padding: 0 2rem;
box-sizing: border-box;
}
}
}
@ -51,15 +49,21 @@
color: white;
border: none;
cursor: pointer;
padding: 10px;
z-index: 2;
font-size: 0.75rem;
&.prev {
left: 10px;
left: 0px;
top: calc(50% - 14px);
width: 1.5rem;
height: 2rem;
}
&.next {
right: 10px;
top: calc(50% - 14px);
right: 0px;
width: 1.5rem;
height: 2rem;
}
}
}

10
widget/src/components/messages/CarouselMessage.tsx
View File

@ -81,6 +81,7 @@ const CarouselMessage: React.FC<CarouselMessageProps> = ({
setActiveIndex((prevIndex) => (prevIndex + 1) % items.length);
};
const colors = allColors[messageCarousel.direction || "received"];
const shouldDisplayNavigationButtons = items.length > 1;
return (
<div
@ -98,15 +99,22 @@ const CarouselMessage: React.FC<CarouselMessageProps> = ({
<CarouselItem key={idx} message={message} idx={idx} />
))}
</div>
{shouldDisplayNavigationButtons && (
<>
<button
className="sc-message--carousel-control prev"
onClick={goToPrevious}
>
&#10094;
</button>
<button className="sc-message--carousel-control next" onClick={goToNext}>
<button
className="sc-message--carousel-control next"
onClick={goToNext}
>
&#10095;
</button>
</>
)}
</div>
);
};