UniqAI/hexabot
1
0
Fork 0
mirror of https://github.com/hexastack/hexabot synced 2025-01-23 02:47:56 +00:00
Code Issues Actions 8 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 { .sc-message {
margin: auto; margin: auto;
padding: 0 0.5rem; padding: 0 0.5rem 0 0;
display: flex; display: flex;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
@ -38,14 +38,14 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
position: relative; position: relative;
max-width: calc(100% - 2rem); max-width: calc(100% - 40px); // same as avatar spacing
width: auto; width: auto;
.sc-message--avatar { .sc-message--avatar {
width: 32px; width: 32px;
height: 32px; height: 32px;
margin-right: 4px; margin-right: 4px;
margin-top: 2px; margin: 2px 4px;
background-position: 0 0; background-position: 0 0;
flex-shrink: 0; flex-shrink: 0;
background-size: cover; background-size: cover;
@ -55,7 +55,6 @@
.sc-message--wrapper { .sc-message--wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
.sc-message--text { .sc-message--text {
padding: 10px 20px; padding: 10px 20px;

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

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

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

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

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

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