[REF] web,mail: command palette revamp

This commit simplifies the SCSS of the command palette component.

task-2748052

closes odoo/odoo#83938

Signed-off-by: Pierre Paridans (app) <app@odoo.com>

addons/mail/static/src/webclient/commands/mail_providers.js

@@ -7,9 +7,9 @@ const { Component, xml } = owl;
 
 class DialogCommand extends Component {}
 DialogCommand.template = xml`
-    <div class="o_command_default">
+    <div class="o_command_default d-flex align-items-center justify-content-between px-4 py-2 o_cursor_pointer">
         <t t-slot="name"/>
-        <span t-if="props.email" t-esc="props.email"/>
+        <span t-if="props.email" t-out="props.email"/>
     </div>
 `;
 

addons/web/static/src/core/commands/command_items.xml

@@ -2,17 +2,17 @@
 <templates xml:space="preserve">
 
   <t t-name="web.DefaultCommandItem" owl="1">
-    <div class="o_command_default">
+    <div class="o_command_default d-flex align-items-center justify-content-between px-4 py-2 o_cursor_pointer">
       <t t-slot="name"/>
     </div>
   </t>
 
   <t t-name="web.HotkeyCommandItem" owl="1">
-    <div class="o_command_hotkey">
+    <div class="o_command_hotkey d-flex align-items-center justify-content-between px-4 py-2 o_cursor_pointer">
       <t t-slot="name"/>
       <span>
         <t t-foreach="getKeysToPress(props)" t-as="key" t-key="key_index">
-          <kbd t-esc="key" />
+          <kbd t-out="key" class="d-inline-block px-3 py-1" />
           <span t-if="!key_last"> + </span>
         </t>
       </span>

addons/web/static/src/core/commands/command_palette.scss

@@ -1,141 +1,22 @@
 .o_command_palette {
-  margin-top: 10vh;
-
-  &.modal-content {
-    border: none;
-    border-radius: 3px !important;
-    overflow: hidden;
-  }
-
-  > .modal-body {
-    padding: 0;
-    overflow: hidden;
-  }
-
-  &_search {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: white;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    padding: 0.8rem 1em;
-    font-size: 1.5rem;
-
-    .fa-search {
-      color:#C7C7C7;
+    $-app-icon-size: 1.8rem;
+    
+    > .modal-body {
+        padding: 0;
     }
 
-    .o_namespace {
-      line-height: 1.8em;
-      min-width: 1em;
-      text-align: center;
-    }
+    &_listbox {
+        max-height: 50vh;   
 
-    input {
-      border: none;
-      padding: 0;
-      line-height: 1.8em;
-    }
-  }
-
-  &_listbox {
-    max-height: 50vh;
-    overflow-y: auto;
-    position: relative;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    &_empty {
-      padding: 1rem 1.3em;
-      line-height: 1.8em;
-      font-style: italic;
-    }
-
-    .o_command_category {
-      padding: 0.5rem 0;
-    }
-
-    hr {
-      margin: 0;
-    }
-
-    .o_command {
-      position: relative;
-      line-height: 1.8em;
-      height: 2.8em;
-
-      &.focused {
-        background: rgba($o-brand-primary, 0.15);
-      }
-
-      &_default, &_hotkey {
-        background-color: inherit;
-        padding: 0.5rem 1.3em;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-
-      &_hotkey {
-        kbd {
-          background-color: #f4f7f8;
-          border-radius: 3px;
-          border: 1px solid #e5e5e5;
-          $shadowvalue: 0px 1px 1px rgba(0, 0, 0, 0.2),
-            inset 0px -1px 1px 1px rgba(230, 230, 230, 0.8),
-            inset 0px 2px 0px 0px rgba(255, 255, 255, 0.8);
-          color: #4c4c4c;
-          display: inline-block;
-          font-family: Consolas, "Liberation Mono", Courier, monospace;
-          font-size: 0.85em;
-          padding: 0 0.65rem;
+        .o_command {
+            &.focused {
+                background: rgba($o-brand-primary, 0.25);
+            }
         }
-      }
-
-      .o_command_name {
-        > b {
-          color: $o-brand-primary;
-        }
-      }
-
-      .o_app_icon {
-        position: relative;
-        border-radius: 4%;
-        height: 1.8em;
-        width: 1.8em;
-
-        &> i.fa {
-          text-align: center;
-          position: absolute;
-          top: 25%;
-          left: 0;
-          bottom: auto;
-          right: 0;
-        }
-      }
-    }
-  }
-
-  &_footer {
-    color: #707070;
-    background-color: #f6f7fa;
-    font-size: 1rem;
-    padding: 0.6rem 1.3em;
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-
-    .o_namespace:hover {
-      color: $o-brand-primary;
-      cursor: pointer;
-      text-decoration: underline dotted;
     }
 
-    .o_promote {
-      color: $o-brand-primary;
-      font-weight: 900;
+    .o_app_icon {
+        height: $-app-icon-size;
+        width: $-app-icon-size;
     }
-  }
 }

addons/web/static/src/core/commands/command_palette.xml

@@ -3,41 +3,42 @@
 
   <t t-name="web.CommandPalette" owl="1">
     <div>
-      <div class="o_command_palette_search">
-        <span t-if="state.namespace !== 'default'" class="o_namespace" t-esc="state.namespace"/>
-        <input type="text" t-att-value="state.searchValue"  t-ref="autofocus" t-att-placeholder="state.placeholder" t-on-input="onSearchInput" t-on-keydown="onKeyDown"/>
-        <i  t-att-title="state.placeholder" role="img"  t-att-aria-label="state.placeholder" class="fa fa-search"></i>
+      <div class="o_command_palette_search input-group mb-2 px-4 py-3 border-bottom">
+        <span t-if="state.namespace !== 'default'" class="o_namespace d-flex align-items-center mr-1" t-out="state.namespace"/>
+        <input class="form-control border-0 p-0" type="text" t-att-value="state.searchValue" t-ref="autofocus" t-att-placeholder="state.placeholder" t-on-input="onSearchInput" t-on-keydown="onKeyDown"/>
+        <span class="input-group-append">
+          <div class="input-group-text border-0 bg-transparent">
+              <i t-att-title="state.placeholder" role="img"  t-att-aria-label="state.placeholder" class="oi oi-search"/>
+          </div>
+        </span>
       </div>
 
-      <div t-ref="listbox" class="o_command_palette_listbox o_cursor_default">
-        <div t-if="!state.commands.length" class="o_command_palette_listbox_empty" t-esc="state.emptyMessage"/>
-        <t t-if="!isFuzzySearch">
-          <t t-foreach="commandsByCategory" t-as="category" t-key="category.keyId">
-            <div class="o_command_category">
-              <t t-foreach="category.commands" t-as="command"  t-key="command.keyId">
-                <t t-set="commandIndex" t-value="state.commands.indexOf(command)" />
-                <div t-attf-id="o_command_{{commandIndex}}" class="o_command" t-att-class="{ focused: state.selectedCommand === command }" t-on-click="() => this.onCommandClicked(commandIndex)" t-on-mouseenter="() => this.onCommandMouseEnter(commandIndex)" t-on-close="() => this.props.closeMe()">
-                  <t t-component="command.Component || DefaultCommandItem" name="command.name" searchValue="state.searchValue" t-props="command.props" executeCommand="() => this.executeCommand(command)">
-                    <t t-set-slot="name">
-                        <span class="o_command_name">
-                          <t t-foreach="command.splitName" t-as="name" t-key="name_index">
-                            <b t-if="name_index % 2" t-esc="name"/>
-                            <t t-else="" t-esc="name"/>
-                          </t>
-                        </span>
-                    </t>
+      <div t-ref="listbox" class="o_command_palette_listbox position-relative overflow-auto">
+        <div t-if="!state.commands.length" class="o_command_palette_listbox_empty px-4 py-3 font-italic" t-out="state.emptyMessage"/>
+        <t t-if="!isFuzzySearch" t-foreach="commandsByCategory" t-as="category" t-key="category.keyId">
+          <div class="o_command_category px-0">
+            <t t-foreach="category.commands" t-as="command" t-key="command.keyId">
+              <t t-set="commandIndex" t-value="state.commands.indexOf(command)"/>
+              <div t-attf-id="o_command_{{commandIndex}}" class="o_command" t-att-class="{ focused: state.selectedCommand === command }" t-on-click="() => this.onCommandClicked(commandIndex)" t-on-mouseenter="() => this.onCommandMouseEnter(commandIndex)" t-on-close="() => this.props.closeMe()">
+                <t t-component="command.Component || DefaultCommandItem" name="command.name" searchValue="state.searchValue" t-props="command.props" executeCommand="() => this.executeCommand(command)">
+                  <t t-set-slot="name">
+                    <span class="o_command_name">
+                      <t t-foreach="command.splitName" t-as="name" t-key="name_index">
+                        <b t-if="name_index % 2" t-out="name" class="text-primary"/>
+                        <t t-else="" t-out="name"/>
+                      </t>
+                    </span>
                   </t>
-                </div>
-              </t>
-            </div>
+                </t>
+              </div>
+            </t>
+          </div>
 
-            <hr t-if="!category_last" />
-
-          </t>
+          <hr class="my-2 mx-0" t-if="!category_last" />
         </t>
       </div>
 
-      <div t-if="state.FooterComponent" class="o_command_palette_footer">
+      <div t-if="state.FooterComponent" class="o_command_palette_footer mt-2 px-4 py-2 border-top bg-100 text-muted">
         <t t-component="state.FooterComponent" switchNamespace="(namespace) => this.debounceSearch(namespace.concat(this.state.searchValue))"/>
       </div>
 

addons/web/static/src/core/commands/command_palette_dialog.js

@@ -29,6 +29,6 @@ export class CommandPaletteDialog extends Dialog {
 CommandPaletteDialog.renderHeader = false;
 CommandPaletteDialog.renderFooter = false;
 CommandPaletteDialog.size = "modal-md";
-CommandPaletteDialog.contentClass = "o_command_palette";
+CommandPaletteDialog.contentClass = "o_command_palette mt-5";
 CommandPaletteDialog.bodyTemplate = "web.CommandPaletteDialogBody";
 CommandPaletteDialog.components = Object.assign({}, Dialog.components, { CommandPalette });

addons/web/static/src/core/commands/command_service.js

@@ -50,12 +50,12 @@ class DefaultFooter extends Component {
 }
 DefaultFooter.template = xml`
 <span>
-    <span class='o_promote'>TIP</span> — search for
+    <span class="o_promote font-weight-bolder text-primary">TIP</span> — search for
     <t t-foreach="elements" t-as="element" t-key="element.namespace">
         <t t-if="!(element_first || element_last)">, </t>
         <t t-if="element_last and !element_first"> and </t>
-        <span class="o_namespace" t-on-click="() => this.onClick(element.namespace)">
-            <span t-esc="element.namespace" class='o_promote'/><t t-esc="element.name"/>
+        <span class="o_namespace btn-link text-primary o_cursor_pointer" t-on-click="() => this.onClick(element.namespace)">
+            <span t-out="element.namespace" class="o_promote font-weight-bolder text-primary"/><t t-out="element.name"/>
         </span>
     </t>
 </span>

addons/web/static/src/webclient/menus/menu_command_item.xml

@@ -2,12 +2,12 @@
 <templates xml:space="preserve">
 
   <t t-name="web.AppIconCommand" owl="1">
-    <div class="o_command_default">
-        <t t-slot="name"/>
-        <img t-if="props.webIconData" class="o_app_icon" t-attf-src="{{props.webIconData}}"/>
-        <div t-else="" class="o_app_icon" t-attf-style="background-color:{{props.webIcon.backgroundColor}}" >
-          <i t-att-class="props.webIcon.iconClass" t-attf-style="color:{{props.webIcon.color}}"></i>
-        </div>
+    <div class="o_command_default position-relative d-flex align-items-center justify-content-between px-4 py-2 o_cursor_pointer">
+      <t t-slot="name"/>
+      <img t-if="props.webIconData" class="o_app_icon position-relative rounded-sm" t-attf-src="{{props.webIconData}}"/>
+      <div t-else="" class="o_app_icon d-flex align-items-center justify-content-center" t-attf-style="background-color:{{props.webIcon.backgroundColor}}" >
+        <i t-att-class="props.webIcon.iconClass" t-attf-style="color:{{props.webIcon.color}}"></i>
+      </div>
     </div>
   </t>