@odoo/o-spreadsheet 16.2.0-alpha.4 → 16.3.0-alpha.0

package/dist/o-spreadsheet.iife.js

@@ -107,6 +107,7 @@
   const CELL_BORDER_COLOR = "#E2E3E3";
   const BACKGROUND_CHART_COLOR = "#FFFFFF";
   const MENU_ITEM_DISABLED_COLOR = "#CACACA";
+  const BG_HOVER_COLOR = "#EBEBEB";
   const DEFAULT_COLOR_SCALE_MIDPOINT_COLOR = 0xb6d7a8;
   const LINK_COLOR = "#01666b";
   const FILTERS_COLOR = "#188038";
@@ -14715,6 +14716,13 @@
       pointer-events: none;
     }
   }
+
+  .o-topbar-composer .o-composer:empty:not(:focus)::before {
+    /* svg free of use from https://uxwing.com/formula-fx-icon/ */
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 121.8 122.9' width='16' height='16' focusable='false'%3E%3Cpath d='m28 34-4 5v2h10l-6 40c-4 22-6 28-7 30-2 2-3 3-5 3-3 0-7-2-9-4H4c-2 2-4 4-4 7s4 6 8 6 9-2 15-8c8-7 13-17 18-39l7-35 13-1 3-6H49c4-23 7-27 11-27 2 0 5 2 8 6h4c1-1 4-4 4-7 0-2-3-6-9-6-5 0-13 4-20 10-6 7-9 14-11 24h-8zm41 16c4-5 7-7 8-7s2 1 5 9l3 12c-7 11-12 17-16 17l-3-1-2-1c-3 0-6 3-6 7s3 7 7 7c6 0 12-6 22-23l3 10c3 9 6 13 10 13 5 0 11-4 18-15l-3-4c-4 6-7 8-8 8-2 0-4-3-6-10l-5-15 8-10 6-4 3 1 3 2c2 0 6-3 6-7s-2-7-6-7c-6 0-11 5-21 20l-2-6c-3-9-5-14-9-14-5 0-12 6-18 15l3 3z' fill='%23BDBDBD' /%3E%3C/svg%3E");
+    position: relative;
+    top: 20%;
+  }
 `;
   class Composer extends owl.Component {
       constructor() {
@@ -15365,20 +15373,10 @@
     justify-content: center;
     width: ${FILTER_ICON_EDGE_LENGTH}px;
     height: ${FILTER_ICON_EDGE_LENGTH}px;
-
-    svg {
-      path {
-        fill: ${FILTERS_COLOR};
-      }
-    }
   }
   .o-filter-icon:hover {
     background: ${FILTERS_COLOR};
-    svg {
-      path {
-        fill: white;
-      }
-    }
+    color: #fff;
   }
 `;
   class FilterIcon extends owl.Component {
@@ -15994,6 +15992,7 @@
     .o-search-icon {
       right: 5px;
       top: 4px;
+      opacity: 0.4;
 
       svg {
         height: 16px;
@@ -16572,7 +16571,7 @@
       &:not(.disabled) {
         &:hover,
         &.o-menu-item-active {
-          background-color: #ebebeb;
+          background-color: ${BG_HOVER_COLOR};
         }
         .o-menu-item-description {
           color: grey;
@@ -39422,7 +39421,6 @@
 
   css /* scss */ `
   .o-sheet {
-    color: #666;
     padding: 0 15px;
     padding-right: 10px;
     height: ${BOTTOMBAR_HEIGHT}px;
@@ -39810,6 +39808,7 @@
   const MENU_MAX_HEIGHT = 250;
   css /* scss */ `
   .o-spreadsheet-bottom-bar {
+    color: ${TEXT_HEADER_COLOR};
     background-color: ${BACKGROUND_GRAY_COLOR};
     padding-left: ${HEADER_WIDTH}px;
     font-size: 15px;
@@ -40473,6 +40472,7 @@
   css /* scss */ `
   .o-font-size-editor {
     input.o-font-size {
+      outline-color: ${SELECTION_BORDER_COLOR};
       height: 20px;
       width: 23px;
     }
@@ -40585,52 +40585,53 @@
   const CUSTOM_FORMATS = [
       { name: "custom_currency", text: NumberFormatTerms.CustomCurrency, sidePanel: "CustomCurrency" },
   ];
-  const FONT_COLOR = "#4a4f59";
-  const ACTIVE_BG_COLOR = "#E6F4EA";
-  const ACTIVE_FG_COLOR = "#188038";
-  const HOVERED_BG_COLOR = "#f6f7fa";
-  const HOVERED_FG_COLOR = "#000000";
+  const ICONS_COLOR = "#4A4F59";
+  // If we ever change these colors, make sure the filter tool stays green to match the icon in the grid
+  const ACTIVE_BG_COLOR = BACKGROUND_HEADER_FILTER_COLOR;
+  const ACTIVE_FONT_COLOR = FILTERS_COLOR;
+  const HOVERED_BG_COLOR = BG_HOVER_COLOR;
+  const HOVERED_FONT_COLOR = "#000";
   // -----------------------------------------------------------------------------
   // TopBar
   // -----------------------------------------------------------------------------
   css /* scss */ `
   .o-spreadsheet-topbar {
-    background-color: white;
     line-height: 1.2;
-    display: flex;
-    flex-direction: column;
     font-size: 13px;
-    line-height: 1.2;
-    user-select: none;
     font-weight: 500;
-    color: ${FONT_COLOR};
+
+    .o-topbar-hoverable {
+      cursor: pointer;
+      .o-icon {
+        color: ${ICONS_COLOR};
+      }
+      &:not(.o-disabled):not(.active):hover {
+        background-color: ${HOVERED_BG_COLOR};
+        color: ${HOVERED_FONT_COLOR};
+        .o-icon {
+          color: ${HOVERED_FONT_COLOR};
+        }
+      }
+      &.active {
+        background-color: ${ACTIVE_BG_COLOR};
+        color: ${ACTIVE_FONT_COLOR};
+        .o-icon {
+          color: ${ACTIVE_FONT_COLOR};
+        }
+      }
+    }
 
     .o-topbar-top {
       border-bottom: 1px solid ${SEPARATOR_COLOR};
-      display: flex;
       padding: 2px 10px;
-      justify-content: space-between;
 
       /* Menus */
       .o-topbar-topleft {
-        display: flex;
         .o-topbar-menu {
           padding: 4px 6px;
           margin: 0 2px;
-          cursor: pointer;
-        }
-
-        .o-topbar-menu:hover,
-        .o-topbar-menu-active {
-          background-color: #f1f3f4;
-          border-radius: 2px;
         }
       }
-
-      .o-topbar-topright {
-        display: flex;
-        justify-content: flex-end;
-      }
     }
 
     .o-topbar-composer {
@@ -40639,13 +40640,9 @@
 
     /* Toolbar */
     .o-topbar-toolbar {
-      flex-shrink: 0;
-      display: flex;
       height: ${TOPBAR_TOOLBAR_HEIGHT}px;
 
       .o-readonly-toolbar {
-        display: flex;
-        align-items: center;
         background-color: ${BACKGROUND_HEADER_COLOR};
         padding-left: 18px;
         padding-right: 18px;
@@ -40653,11 +40650,6 @@
 
       /* Toolbar */
       .o-toolbar-tools {
-        display: flex;
-        flex-shrink: 0;
-        margin-left: 16px;
-        cursor: default;
-
         .o-tool {
           display: flex;
           justify-content: center;
@@ -40665,40 +40657,13 @@
           margin: 2px;
           padding: 0px 3px;
           border-radius: 2px;
-          cursor: pointer;
           min-width: 20px;
-          svg path,
-          polygon,
-          rect {
-            fill: ${FONT_COLOR};
-          }
-        }
-
-        .o-tool-outlined {
-          background-color: rgba(0, 0, 0, 0.08);
         }
 
         .o-filter-tool {
           margin-right: 8px;
         }
 
-        .o-tool.active {
-          background-color: ${ACTIVE_BG_COLOR};
-          svg path,
-          polygon,
-          rect {
-            fill: ${ACTIVE_FG_COLOR};
-          }
-        }
-        .o-tool:not(.o-disabled):hover {
-          background-color: ${HOVERED_BG_COLOR};
-          svg path,
-          polygon,
-          rect {
-            fill: ${HOVERED_FG_COLOR};
-          }
-        }
-
         .o-border-dropdown {
           padding: 4px;
         }
@@ -40724,10 +40689,6 @@
             height: 30px;
           }
 
-          .o-text-icon {
-            line-height: 30px;
-          }
-
           .o-text-options > div {
             line-height: 26px;
             padding: 3px 12px;
@@ -40746,14 +40707,6 @@
             box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
             background-color: white;
 
-            .o-dropdown-item {
-              cursor: pointer;
-            }
-
-            .o-dropdown-item:hover {
-              background-color: rgba(0, 0, 0, 0.08);
-            }
-
             .o-dropdown-line {
               display: flex;
               margin: 1px;
@@ -40762,11 +40715,6 @@
                 padding: 4px;
                 width: 18px;
                 height: 18px;
-                cursor: pointer;
-
-                &:hover {
-                  background-color: rgba(0, 0, 0, 0.08);
-                }
               }
             }
 
@@ -40778,7 +40726,7 @@
                 padding: 0 20px;
                 white-space: nowrap;
 
-                &.active:before {
+                &.o-dropdown-active:before {
                   content: "✓";
                   font-weight: bold;
                   position: absolute;
@@ -44975,9 +44923,9 @@
   Object.defineProperty(exports, '__esModule', { value: true });
 
 
-  __info__.version = '16.2.0-alpha.4';
-  __info__.date = '2023-03-14T09:24:38.219Z';
-  __info__.hash = '2c6fe88';
+  __info__.version = '16.3.0-alpha.0';
+  __info__.date = '2023-03-15T15:54:31.775Z';
+  __info__.hash = '1633f09';
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);