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

package/dist/o-spreadsheet.cjs.js

@@ -110,6 +110,7 @@ const HEADER_BORDER_COLOR = "#C0C0C0";
 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";
@@ -14718,6 +14719,13 @@ css /* scss */ `
       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() {
@@ -15368,20 +15376,10 @@ const CSS$2 = css /* scss */ `
     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 {
@@ -15997,6 +15995,7 @@ const CSS = css /* scss */ `
     .o-search-icon {
       right: 5px;
       top: 4px;
+      opacity: 0.4;
 
       svg {
         height: 16px;
@@ -16575,7 +16574,7 @@ css /* scss */ `
       &:not(.disabled) {
         &:hover,
         &.o-menu-item-active {
-          background-color: #ebebeb;
+          background-color: ${BG_HOVER_COLOR};
         }
         .o-menu-item-description {
           color: grey;
@@ -39425,7 +39424,6 @@ function interactiveRenameSheet(env, sheetId, name, errorCallback) {
 
 css /* scss */ `
   .o-sheet {
-    color: #666;
     padding: 0 15px;
     padding-right: 10px;
     height: ${BOTTOMBAR_HEIGHT}px;
@@ -39813,6 +39811,7 @@ class DOMDndHelper {
 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;
@@ -40476,6 +40475,7 @@ TopBarComposer.props = {
 css /* scss */ `
   .o-font-size-editor {
     input.o-font-size {
+      outline-color: ${SELECTION_BORDER_COLOR};
       height: 20px;
       width: 23px;
     }
@@ -40588,52 +40588,53 @@ const FORMATS = [
 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 {
@@ -40642,13 +40643,9 @@ css /* scss */ `
 
     /* 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;
@@ -40656,11 +40653,6 @@ css /* scss */ `
 
       /* Toolbar */
       .o-toolbar-tools {
-        display: flex;
-        flex-shrink: 0;
-        margin-left: 16px;
-        cursor: default;
-
         .o-tool {
           display: flex;
           justify-content: center;
@@ -40668,40 +40660,13 @@ css /* scss */ `
           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;
         }
@@ -40727,10 +40692,6 @@ css /* scss */ `
             height: 30px;
           }
 
-          .o-text-icon {
-            line-height: 30px;
-          }
-
           .o-text-options > div {
             line-height: 26px;
             padding: 3px 12px;
@@ -40749,14 +40710,6 @@ css /* scss */ `
             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;
@@ -40765,11 +40718,6 @@ css /* scss */ `
                 padding: 4px;
                 width: 18px;
                 height: 18px;
-                cursor: pointer;
-
-                &:hover {
-                  background-color: rgba(0, 0, 0, 0.08);
-                }
               }
             }
 
@@ -40781,7 +40729,7 @@ css /* scss */ `
                 padding: 0 20px;
                 white-space: nowrap;
 
-                &.active:before {
+                &.o-dropdown-active:before {
                   content: "✓";
                   font-weight: bold;
                   position: absolute;
@@ -44976,6 +44924,6 @@ exports.setTranslationMethod = setTranslationMethod;
 exports.tokenize = tokenize;
 
 
-__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';

package/dist/o-spreadsheet.esm.js

@@ -106,6 +106,7 @@ const HEADER_BORDER_COLOR = "#C0C0C0";
 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";
@@ -14714,6 +14715,13 @@ css /* scss */ `
       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 Component {
     constructor() {
@@ -15364,20 +15372,10 @@ const CSS$2 = css /* scss */ `
     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 Component {
@@ -15993,6 +15991,7 @@ const CSS = css /* scss */ `
     .o-search-icon {
       right: 5px;
       top: 4px;
+      opacity: 0.4;
 
       svg {
         height: 16px;
@@ -16571,7 +16570,7 @@ css /* scss */ `
       &:not(.disabled) {
         &:hover,
         &.o-menu-item-active {
-          background-color: #ebebeb;
+          background-color: ${BG_HOVER_COLOR};
         }
         .o-menu-item-description {
           color: grey;
@@ -39421,7 +39420,6 @@ function interactiveRenameSheet(env, sheetId, name, errorCallback) {
 
 css /* scss */ `
   .o-sheet {
-    color: #666;
     padding: 0 15px;
     padding-right: 10px;
     height: ${BOTTOMBAR_HEIGHT}px;
@@ -39809,6 +39807,7 @@ class DOMDndHelper {
 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;
@@ -40472,6 +40471,7 @@ TopBarComposer.props = {
 css /* scss */ `
   .o-font-size-editor {
     input.o-font-size {
+      outline-color: ${SELECTION_BORDER_COLOR};
       height: 20px;
       width: 23px;
     }
@@ -40584,52 +40584,53 @@ const FORMATS = [
 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 {
@@ -40638,13 +40639,9 @@ css /* scss */ `
 
     /* 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;
@@ -40652,11 +40649,6 @@ css /* scss */ `
 
       /* Toolbar */
       .o-toolbar-tools {
-        display: flex;
-        flex-shrink: 0;
-        margin-left: 16px;
-        cursor: default;
-
         .o-tool {
           display: flex;
           justify-content: center;
@@ -40664,40 +40656,13 @@ css /* scss */ `
           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;
         }
@@ -40723,10 +40688,6 @@ css /* scss */ `
             height: 30px;
           }
 
-          .o-text-icon {
-            line-height: 30px;
-          }
-
           .o-text-options > div {
             line-height: 26px;
             padding: 3px 12px;
@@ -40745,14 +40706,6 @@ css /* scss */ `
             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;
@@ -40761,11 +40714,6 @@ css /* scss */ `
                 padding: 4px;
                 width: 18px;
                 height: 18px;
-                cursor: pointer;
-
-                &:hover {
-                  background-color: rgba(0, 0, 0, 0.08);
-                }
               }
             }
 
@@ -40777,7 +40725,7 @@ css /* scss */ `
                 padding: 0 20px;
                 white-space: nowrap;
 
-                &.active:before {
+                &.o-dropdown-active:before {
                   content: "✓";
                   font-weight: bold;
                   position: absolute;
@@ -44944,6 +44892,6 @@ function addFunction(functionName, functionDescription) {
 export { AbstractChart, CommandResult, CorePlugin, DATETIME_FORMAT, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, astToFormula, compile, components, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, invalidateEvaluationCommands, links, load, parse, readonlyAllowedCommands, registries, setTranslationMethod, tokenize };
 
 
-__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';