[IMP] website: improve UX for logo/font size changing

This removes the 'V' box and it now validates the entered value when the
user clicks outside the box.

task-1952964

closes odoo/odoo#32291

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/website/static/src/js/widgets/theme.js

@@ -18,8 +18,8 @@ var QuickEdit = Widget.extend({
     template: 'website.theme_customize_active_input',
     events: {
         'keydown input': '_onInputKeydown',
-        'click .btn-primary': '_onSaveClick',
         'click .btn-secondary': '_onResetClick',
+        'focusout': '_onFocusOut',
     },
 
     /**
@@ -29,6 +29,7 @@ var QuickEdit = Widget.extend({
         this._super.apply(this, arguments);
         this.value = value;
         this.unit = unit;
+        this._onFocusOut = _.debounce(this._onFocusOut, 100);
     },
     /**
      * @override
@@ -92,8 +93,10 @@ var QuickEdit = Widget.extend({
     /**
      * @private
      */
-    _onSaveClick: function () {
-        this._save();
+    _onFocusOut: function () {
+        if (!this.$el.has(document.activeElement).length) {
+            this._save();
+        }
     },
     /**
      * @private

addons/website/static/src/xml/website.editor.xml

@@ -66,7 +66,6 @@
             <input type="text" class="form-control" t-att-value="widget.value"/>
             <div class="input-group-append">
                 <div t-if="widget.unit" class="input-group-text"><t t-esc="widget.unit"/></div>
-                <button type="button" class="btn btn-primary fa fa-check" title="Save"/>
                 <button type="button" class="btn btn-secondary fa fa-undo" title="Reset"/>
             </div>
         </div>