[IMP] web_editor: improve `LinkDialog` widget design and usability

Specification
=============

- no boxes around fields
- use regular form style for input fields
- don't split page/URL into two fields, just do one URL field, with autocomplete
- Add alpha, beta, gamma, delta and epsilon color in color selection because they are used in mass mailing and themes also.
- Add a selection option with label "L" inside circle for link.
- Add Color selector for choosing button color
- Remov select2 page selector and used jquery autocomplete on same input
- Fix issue of page search in ir.http

1 files changed, 50 insertions, 0 deletions

diff --git a/addons/web_editor/static/src/less/web_editor.ui.components.less b/addons/web_editor/static/src/less/web_editor.ui.components.less
index 2f8efdac468..9d40da2a9f3 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.components.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.components.less
@@ -436,4 +436,54 @@ body .modal {
             }
         }
     }
+
+    // LINK EDITOR DIALOG COLOR SELECTOR
+    .o-link-editor-dialog{
+        .o-link-color-selector{
+            .o-link-color{
+                position: relative;
+                display: inline-block;
+                height: 30px;
+                width: 30px;
+                border-radius: 15px;
+                border: 2px solid rgba(0, 0, 0, 0.25);
+                input.link-style{
+                    display: none;
+                }
+                &:first-child{
+                    span{
+                        color: #444;
+                    }
+                    &::before{
+                        content: 'L';
+                        display: inline-block;
+                        color: @link-color;
+                        font-weight: bold;
+                        font-size: 17px;
+                        text-decoration: underline;
+                        .o-position-absolute(@top: 0px, @left: 8px);
+                    }
+                }
+                input:checked + span{
+                    height: 0px;
+                    width: 0px;
+                    &::before {
+                        content: '\f00c';
+                        font: normal normal normal 14px/1 FontAwesome;
+                        display: inline-block;
+                        .o-position-absolute(@top: 6px, @left: 5px);
+                    }
+                }
+            }
+        }
+        .o-link-vr{
+            border-right: 1px solid @gray-lighter;
+        }
+    }
+
+}
+
+// FIXME bootstrap modal : 1050
+.ui-autocomplete {
+    z-index: 1051;
 }