pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] im_livechat: chatbot step answer style in external lib

Browse Source 
Before this commit, when using chatbot on an external website,
the answers were not styled like buttons.

This happens because styling is using bootstrap classnames, which
are not available in the external lib.

This commit fixes the issue by putting SCSS equivalent style rules,
so that the answers are properly styled.

opw-3234872

closes odoo/odoo#118264

X-original-commit: c2c5eee10aa917852c942e1092c026746387e11a
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Alexandre Kühn
2023-04-12 12:26:23 +02:00
parent 5190870a7c
commit 5ffd9c15cf
2 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/im_livechat/static/src/legacy/public_livechat_chatbot.xml
+1 -1
View File
@@ -41,7 +41,7 @@
<t t-foreach="message.getChatbotStepAnswers()" t-as="stepAnswer">
<li t-att-data-chatbot-step-answer-id="stepAnswer.id"
t-att-data-chatbot-step-redirect-link="stepAnswer.redirect_link"
class="d-inline-block border border-primary rounded p-2 me-3 mb-1 fw-bold">
class="o_livechat_chatbot_stepAnswer d-inline-block border border-primary rounded p-2 me-3 mb-1 fw-bold">
<t t-out="stepAnswer.label"/>
</li>
<br/>
addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss
+24
View File
@@ -34,3 +34,27 @@
content: " \27A4";
}
}
// Bootstrap classnames are not available in external lib
// These are equivalent scss rules so visually it still works.
.o_livechat_chatbot_end {
// @extend .bg-200;
font-style: italic !important; // @extend .fst-italic;
text-align: center !important; // @extend .text-center;
border: 1px solid #dee2e6 !important; // @extend .border;
}
.o_livechat_chatbot_stepAnswer {
display: inline-block !important; // @extend .d-inline-block;
border: 1px solid #dee2e6 !important; // @extend .border;
border-color: #017e84 !important; // @extend .border-primary;
border-radius: 0.25rem !important; // @extend .rounded;
padding: 0.5rem !important; // @extend .p-2;
margin-right: 1rem !important; // @extend .me-3;
margin-bottom: 0.25rem !important; // @extend .mb-1;
font-weight: 700 !important; // @extend .fw-bold;
}
.o_livechat_chatbot_options li:not(.disabled):hover {
background-color: #017e84 !important;
}