From 2453eda9263e5d1508a4b72e753f1fd4e7ee01d1 Mon Sep 17 00:00:00 2001
From: xlu-odoo <xlu@odoo.com>
Date: Tue, 17 May 2022 11:48:23 +0000
Subject: [PATCH] [REF] mail: `callOptionMenu`, review and simplify scss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Part of the overall v16 SCSS optimization/restyle, task-2704984

task-2855813

closes odoo/odoo#91563

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../call_option_menu/call_option_menu.scss    | 49 ++-----------------
 .../call_option_menu/call_option_menu.xml     | 36 +++++++-------
 2 files changed, 22 insertions(+), 63 deletions(-)

diff --git a/addons/mail/static/src/components/call_option_menu/call_option_menu.scss b/addons/mail/static/src/components/call_option_menu/call_option_menu.scss
index 144b1efaf62..eca5fa86d2a 100644
--- a/addons/mail/static/src/components/call_option_menu/call_option_menu.scss
+++ b/addons/mail/static/src/components/call_option_menu/call_option_menu.scss
@@ -1,55 +1,14 @@
-// ------------------------------------------------------------------
-// Layout
-// ------------------------------------------------------------------
-
-.o_CallOptionMenu {
-    display: flex;
-    flex-direction: column;
-}
-
-.o_CallOptionMenu_button {
-    display: flex;
-    margin: map-get($spacers, 1);
-    align-items: center;
-    color: gray('800');
-}
-
-.o_CallOptionMenu_buttonIcon {
-    margin: map-get($spacers, 1);
-    padding: map-get($spacers, 1);
-}
-
-.o_CallOptionMenu_buttonText {
-    @include text-truncate();
-}
-
-// ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
 
 .o_CallOptionMenu_button {
-    background: none;
-    border: none;
-    outline: none;
-    cursor: pointer;
-    border-radius: 5px;
-    color: gray('800');
-
     &:hover {
-        background-color: gray('100');
-        box-shadow: 0px 0px 1px 1px gray('300') inset;
+        background-color: $gray-100;
+        box-shadow: 0px 0px 1px 1px $gray-300 inset;
     }
 
     &:active {
-        background-color: gray('200');
-        box-shadow: 0px 0px 1px 1px gray('400') inset;
-    }
-
-    @include hover-focus () {
-        outline: none;
+        background-color: $gray-200;
+        box-shadow: 0px 0px 1px 1px $gray-400 inset;
     }
 }
-
-.o_CallOptionMenu_separator {
-    background-color: $border-color;
-}
diff --git a/addons/mail/static/src/components/call_option_menu/call_option_menu.xml b/addons/mail/static/src/components/call_option_menu/call_option_menu.xml
index c5f3c67b4dc..ea77fd4a78c 100644
--- a/addons/mail/static/src/components/call_option_menu/call_option_menu.xml
+++ b/addons/mail/static/src/components/call_option_menu/call_option_menu.xml
@@ -3,36 +3,36 @@
 
     <t t-name="mail.CallOptionMenu" owl="1">
         <t t-if="callOptionMenu">
-            <div class="o_CallOptionMenu" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_CallOptionMenu d-flex flex-column" t-attf-class="{{ className }}" t-ref="root">
                 <t t-if="callOptionMenu.callActionListView.callView.threadView.thread.videoCount > 0">
-                    <div class="o_CallOptionMenu_button">
-                        <label class="o_CallOptionMenu_checkBoxLabel o_cursor_pointer d-flex align-items-center p-1 mb-0">
-                            <input class="o_CallOptionMenu_checkBox p-1 ml-2 mr-2" type="checkbox" t-on-change="callOptionMenu.onChangeVideoFilterCheckbox" t-att-checked="callOptionMenu.callActionListView.callView.filterVideoGrid"/>
-                            <span class="o_CallOptionMenu_buttonText">Video only</span>
+                    <div class="o_CallOptionMenu_button btn d-flex align-items-center border-0 rounded">
+                        <label class="o_CallOptionMenu_checkBoxLabel o_cursor_pointer d-flex align-items-center mb-0 text-800 font-weight-normal">
+                            <input class="o_CallOptionMenu_checkBox mx-2 p-1" type="checkbox" t-on-change="callOptionMenu.onChangeVideoFilterCheckbox" t-att-checked="callOptionMenu.callActionListView.callView.filterVideoGrid"/>
+                            <span class="o_CallOptionMenu_buttonText py-1 pl-1 text-truncate">Video only</span>
                         </label>
                     </div>
-                    <hr class="o_CallOptionMenu_separator w-100"/>
+                    <hr class="o_CallOptionMenu_separator w-100 my-1 bg-300"/>
                 </t>
                 <t t-if="callOptionMenu.callActionListView.callView.isFullScreen">
-                    <button class="o_CallOptionMenu_button" t-on-click="callOptionMenu.onClickDeactivateFullScreen">
-                        <i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-compress"/>
-                        <span class="o_CallOptionMenu_buttonText">Exit full screen</span>
+                    <button class="o_CallOptionMenu_button btn d-flex align-items-center border-0 rounded text-800 font-weight-normal" t-on-click="callOptionMenu.onClickDeactivateFullScreen">
+                        <i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-compress m-1 p-1"/>
+                        <span class="o_CallOptionMenu_buttonText text-truncate">Exit full screen</span>
                     </button>
                 </t>
                 <t t-else="">
-                    <button class="o_CallOptionMenu_button" t-on-click="callOptionMenu.onClickActivateFullScreen">
-                        <i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-arrows-alt"/>
-                        <span class="o_CallOptionMenu_buttonText">Full screen</span>
+                    <button class="o_CallOptionMenu_button btn d-flex align-items-center border-0 rounded text-800 font-weight-normal" t-on-click="callOptionMenu.onClickActivateFullScreen">
+                        <i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-arrows-alt m-1 p-1"/>
+                        <span class="o_CallOptionMenu_buttonText text-truncate">Full screen</span>
                     </button>
                 </t>
-                <button class="o_CallOptionMenu_button" t-on-click="callOptionMenu.onClickOptions">
-                    <i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-cog"/>
-                    <span class="o_CallOptionMenu_buttonText">Settings</span>
+                <button class="o_CallOptionMenu_button btn d-flex align-items-center border-0 rounded text-800 font-weight-normal" t-on-click="callOptionMenu.onClickOptions">
+                    <i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-cog m-1 p-1"/>
+                    <span class="o_CallOptionMenu_buttonText text-truncate">Settings</span>
                 </button>
                 <t t-if="messaging.modelManager.isDebug">
-                    <button class="o_CallOptionMenu_button" t-on-click="callOptionMenu.onClickDownloadLogs">
-                        <i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-file-text-o"/>
-                        <span class="o_CallOptionMenu_buttonText">Download logs</span>
+                    <button class="o_CallOptionMenu_button btn d-flex align-items-center border-0 rounded text-800 font-weight-normal" t-on-click="callOptionMenu.onClickDownloadLogs">
+                        <i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-file-text-o m-1 p-1"/>
+                        <span class="o_CallOptionMenu_buttonText text-truncate">Download logs</span>
                     </button>
                 </t>
             </div>