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

[FIX] mail: fix composer buttons style

Browse Source 
- emoji button was shifting right on click
- log/send button color was not correct

task-2274349

closes odoo/odoo#53724

X-original-commit: 41a7bb6e9b0c674ca3db5638d17e85f1b3b33f79
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Xavier Dubuc
2020-06-26 10:02:16 +00:00
committed by Sébastien Theys
parent 343c1c05d3
commit e01ad94c4b
2 changed files with 32 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/composer/composer.scss
+28 -49
View File
@@ -95,6 +95,11 @@
.o_Composer_primaryToolButtons {
display: flex;
align-items: center;
&.o-composer-is-compact {
padding-left: map-get($spacers, 2);
padding-right: map-get($spacers, 2);
}
}
.o_Composer_sidebarMain {
@@ -128,39 +133,41 @@
}
.o_Composer_toolButton {
margin: 0 2px;
&:not(.o-mobile) {
margin-top: 2px;
margin-bottom: 2px;
}
// keep a margin between the buttons to prevent their focus shadow from overlapping
margin-left: map-get($spacers, 1);
margin-right: map-get($spacers, 1);
}
.o_Composer_toolButtons {
display: flex;
padding-top: map-get($spacers, 1);
padding-bottom: map-get($spacers, 1);
&:not(.o-composer-is-compact) {
flex-direction: row;
justify-content: space-between;
flex: 100%;
}
&:not(:last-child) .o_Composer_toolButton:last-child {
margin-right: 5px;
}
}
.o_Composer_toolButtonSeparator {
flex: 0 0 auto;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
margin-top: map-get($spacers, 2);
margin-bottom: map-get($spacers, 2);
}
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
// TODO FIXME o-open on the button should be enough.
// Style of button when popover is "open" comes from web.Popover, and we can't
// define a modifier on .o_Composer_button due to not being aware of Popover's
// state in context of template. https://github.com/odoo/owl/issues/693
.o_is_open .o_Composer_toolButton {
background-color: gray('200');
}
.o_Composer {
background-color: lighten(gray('300'), 7%);
@@ -184,26 +191,14 @@
}
}
.o_Composer_button {
color: gray('600');
.o_Composer_button.o-composer-is-compact {
border-left: none; // overrides bootstrap button style
&.o-open{
background-color: gray('200');
}
&.o-composer-is-compact {
border-left: none;
:last-child {
border-radius: 0 3px 3px 0;
}
}
// TODO FIXME o-open on the button should be enough, https://github.com/odoo/owl/issues/693
.o_is_open {
.o_Composer_button {
background-color: gray('200');
}
}
.o_Composer_buttonDiscard {
border: 1px solid lighten(gray('400'), 5%);
}
@@ -212,23 +207,6 @@
border: 0;
}
.o_Composer_buttonSend {
border: 1px solid darken($o-brand-primary, 5%);
&:disabled {
// enforce this style (override jQuery style)
border: 1px solid darken($o-brand-primary, 5%);
&.o-composer-is-compact {
border-left: none;
}
}
&:not(:last-child) {
border-right: none;
}
}
.o_Composer_coreMain:not(.o-composer-is-compact) {
background: white;
border-radius: 5px;
@@ -250,11 +228,12 @@
}
.o_Composer_toolButton {
border: 0;
border: 0; // overrides bootstrap btn
background-color: white; // overrides bootstrap btn-light
color: gray('600'); // overrides bootstrap btn-light
&:hover {
// enforce this style (webclient btn-secondary)
border: 0;
&.o-open {
background-color: gray('200');
}
}
addons/mail/static/src/components/composer/composer.xml
+4 -4
View File
@@ -76,10 +76,10 @@
<t t-if="props.isCompact">
<div class="o_Composer_toolButtonSeparator"/>
</t>
<div class="o_Composer_primaryToolButtons">
<div class="o_Composer_primaryToolButtons" t-att-class="{ 'o-composer-is-compact': props.isCompact }">
<Popover position="'top'" t-on-o-emoji-selection="_onEmojiSelection" t-ref="emojisPopover">
<!-- TODO FIXME o-open not possible to code due to https://github.com/odoo/owl/issues/693 -->
<button class="o_Composer_button o_Composer_buttonEmojis o_Composer_toolButton btn btn-secondary"
<button class="o_Composer_button o_Composer_buttonEmojis o_Composer_toolButton btn btn-light"
t-att-class="{
'o-open': false and state.displayed,
'o-mobile': env.messaging.device.isMobile,
@@ -91,11 +91,11 @@
<EmojisPopover/>
</t>
</Popover>
<button class="o_Composer_button o_Composer_buttonAttachment o_Composer_toolButton btn btn-secondary fa fa-paperclip" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" title="Add attachment" type="button" t-on-click="_onClickAddAttachment"/>
<button class="o_Composer_button o_Composer_buttonAttachment o_Composer_toolButton btn btn-light fa fa-paperclip" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" title="Add attachment" type="button" t-on-click="_onClickAddAttachment"/>
</div>
<t t-if="props.isExpandable">
<div class="o_Composer_secondaryToolButtons">
<button class="btn btn-secondary fa fa-expand o_Composer_button o_Composer_buttonFullComposer o_Composer_toolButton" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" title="Full composer" type="button" t-on-click="_onClickFullComposer"/>
<button class="btn btn-light fa fa-expand o_Composer_button o_Composer_buttonFullComposer o_Composer_toolButton" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" title="Full composer" type="button" t-on-click="_onClickFullComposer"/>
</div>
</t>
</div>