[FIX] composer: fixed composer placeholder issues

5fa4053 In that commit there were multiple
issues which have been solved in the following commit.
1. Actual point behind this commit and the one mentioned above was to achieve a
placeholder value on composer when no content is in the focused cell. First
attempt was to go with a text placeholder, which then got replaced with an SVG
icon which was done by the mentioned commit. This commit aims to fix all the
newly introduced bugs from that commit.
2. When the SVG icon as placeholder was added, it had additional css attributes
along with content, which is removed in this commit, as it resulted in breaking
css of the entire composer in multiple scenarios.
(focus the top bar composer, then open the vertical align tool)
3. Minor changes on SVG’s viewbox, width, height are made to counter slight css
issues with the icon.

closes #2236

Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>

src/components/composer/composer/composer.ts

@@ -92,13 +92,6 @@ 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%;
-  }
 `;
 
 export interface AutocompleteValue {

src/components/composer/top_bar_composer/top_bar_composer.ts

@@ -19,6 +19,11 @@ css/* scss */ `
     margin-top: -1px;
     border: 1px solid;
     z-index: ${ComponentsImportance.TopBarComposer};
+
+    .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 -10 121.8 142.9' width='24' height='24' 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");
+    }
   }
 `;