[IMP] web: add support for interval selection in groupbys

In this commit, we extend the search view to allow the selection
of some intervals for date or datetime fields in groupby menu.
The valid intervals are day, week, month, quarter, and year.

It is also possible to add a button 'Group By' in the control panel
owned by a graph view in case it is declared 'embedded' (e.g. in a
dashboard view).

Note that have three new generic reusable widgets have been introduced
in this commit: DropdownMenu, GroupByMenu, and FiltersMenu.

5 files changed, 139 insertions, 86 deletions

diff --git a/addons/web/static/src/scss/dropdown.scss b/addons/web/static/src/scss/dropdown.scss
index adffd21bde5..7db8b2fcb3c 100644
--- a/addons/web/static/src/scss/dropdown.scss
+++ b/addons/web/static/src/scss/dropdown.scss
@@ -45,7 +45,7 @@
             top: 0;
             left: 100%;
         }
-        &:hover > .dropdown-menu {
+        &:hover .dropdown-menu {
             display: block;
         }
     }
diff --git a/addons/web/static/src/scss/dropdown_menu.scss b/addons/web/static/src/scss/dropdown_menu.scss
new file mode 100644
index 00000000000..c32779271bc
--- /dev/null
+++ b/addons/web/static/src/scss/dropdown_menu.scss
@@ -0,0 +1,50 @@
+.o_dropdown_menu {
+
+    > li.divider:first-child {
+        display: none;
+    }
+
+    max-height: calc(100vh - 125px);
+    overflow: auto;
+    .o_submenu_switcher {
+    	float:right;
+        width: 25px;
+        text-align: center;
+    }
+    .o_trash_button {
+    	float:right;
+    	+ .o_submenu_switcher {
+    		margin-right: 6px;
+    	}
+    }
+    ul {
+    	list-style-type: none;
+        padding-left: 20px;
+    }
+
+    li.o_menu_item {
+        position: relative;
+        > a {
+            color: $o-main-text-color;
+            padding-right: 25px;
+            &:hover {
+                color: darken($o-main-text-color, 10%);
+            }
+        }
+        &.selected {
+            > a {
+                color: darken($o-main-text-color, 10%);
+                font-weight: bold;
+                &:before {
+                    font-family: FontAwesome;
+                    position: absolute;
+                    left: 4px;
+                    content: "\f00c";
+                }
+            }
+        }
+        .o_item_option {
+            padding-left: 20px;
+        }
+    }
+}
diff --git a/addons/web/static/src/scss/graph_view.scss b/addons/web/static/src/scss/graph_view.scss
index 4666d68ae61..adbf8e88dd1 100644
--- a/addons/web/static/src/scss/graph_view.scss
+++ b/addons/web/static/src/scss/graph_view.scss
@@ -15,6 +15,6 @@
 // ------------------------------------------------------------------
 // Control panel buttons
 // ------------------------------------------------------------------
-.o_graph_measures_list {
+.o_graph_measures_list, .o_graph_groupbys_list {
     @include o-selected-li;
 }
diff --git a/addons/web/static/src/scss/search_groupby_menu.scss b/addons/web/static/src/scss/search_groupby_menu.scss
new file mode 100644
index 00000000000..4092b4b5fb7
--- /dev/null
+++ b/addons/web/static/src/scss/search_groupby_menu.scss
@@ -0,0 +1,16 @@
+// Group By
+.o_group_by_menu {
+    @include o-selected-li;
+
+    max-height: calc(100vh - 125px);
+    overflow: auto;
+
+    .o_add_group { // add button
+        @include o-search-options-dropdown-custom-li;
+    }
+
+    .o_submenu_switcher {
+    	position: absolute;
+    	right: 0px;
+    }
+}
diff --git a/addons/web/static/src/scss/search_view.scss b/addons/web/static/src/scss/search_view.scss
index be6cb0b3f5b..03fe29916fc 100644
--- a/addons/web/static/src/scss/search_view.scss
+++ b/addons/web/static/src/scss/search_view.scss
@@ -122,105 +122,92 @@
     }
 }
 
-// Searchview dropdowns
-.o_search_options {
-    // Open and closed carets in dropdowns
-    .o_closed_menu {
-        position: relative;
-        a:before {
-            @include o-caret-right;
-            @include o-position-absolute($top: 50%, $left: 10px);
-            margin-top: (-$caret-width-base);
-        }
+
+
+// Open and closed carets in dropdowns
+.o_closed_menu {
+    position: relative;
+    a:before {
+        @include o-caret-right;
+        @include o-position-absolute($top: 50%, $left: 10px);
+        margin-top: (-$caret-width-base);
     }
-    .o_open_menu {
-        position: relative;
-        a:before {
-            @include o-caret-down;
-            @include o-position-absolute($top: 50%, $left: 10px);
-            margin-top: (-$caret-width-base);
-        }
+}
+.o_open_menu {
+    position: relative;
+    a:before {
+        @include o-caret-down;
+        @include o-position-absolute($top: 50%, $left: 10px);
+        margin-top: (-$caret-width-base);
     }
+}
 
-    // Filters
-    .o_filters_menu {
-        @include o-selected-li;
+// Filters
+.o_filters_menu {
+    @include o-selected-li;
 
-        max-height: calc(100vh - 125px);
-        overflow: auto;
+    max-height: calc(100vh - 125px);
+    overflow: auto;
 
-        .o_filter_condition {
-            @include o-search-options-dropdown-custom-li;
-            margin-bottom: 8px;
-            .o_or_filter { // or between conditions
-                display: none;  // hidden for the first condition
-                @include o-position-absolute($top: 7px, $left: -18px);
-            }
-        }
-        .o_filter_condition + .o_filter_condition {
-            .o_or_filter {
-                display: block; // displayed from second condition
-            }
-        }
-        .o_searchview_extended_prop_op {
-            margin: 3px 0px; // vertical gap between selects
+    .o_filter_condition {
+        @include o-search-options-dropdown-custom-li;
+        margin-bottom: 8px;
+        .o_or_filter { // or between conditions
+            display: none;  // hidden for the first condition
+            @include o-position-absolute($top: 7px, $left: -18px);
         }
-        .o_searchview_extended_prop_value { // date fields: datepicker position
-            .datepickerbutton {
-                @include o-position-absolute(3px, -20px);
-                cursor: pointer;
-            }
+    }
+    .o_filter_condition + .o_filter_condition {
+        .o_or_filter {
+            display: block; // displayed from second condition
         }
-        .o_searchview_extended_delete_prop { // delete condition button position
-            @include o-position-absolute(3px, -18px);
+    }
+    .o_searchview_extended_prop_op {
+        margin: 3px 0px; // vertical gap between selects
+    }
+    .o_searchview_extended_prop_value { // date fields: datepicker position
+        .datepickerbutton {
+            @include o-position-absolute(3px, -20px);
             cursor: pointer;
         }
-        .o_add_filter_menu { // apply and add buttons
-            display: none;  // Needed by the webclient
-            @include o-search-options-dropdown-custom-li;
-        }
     }
+    .o_searchview_extended_delete_prop { // delete condition button position
+        @include o-position-absolute(3px, -18px);
+        cursor: pointer;
+    }
+    .o_add_filter_menu { // apply and add buttons
+        display: none;  // Needed by the webclient
+        @include o-search-options-dropdown-custom-li;
+    }
+}
 
-    // Group By
-    .o_group_by_menu {
-        @include o-selected-li;
-
-        max-height: calc(100vh - 125px);
-        overflow: auto;
 
-        .divider {display: none;} // hide the divider by default (no group)
-        .o_add_group { // add button
-            display: none;  // Needed by the webclient
-            @include o-search-options-dropdown-custom-li;
-        }
-    }
 
-    // Favorites
-    .o_favorites_menu {
-        max-height: 75vh;
-        overflow-y: auto;
-        @include o-selected-li;
+// Favorites
+.o_favorites_menu {
+    max-height: 75vh;
+    overflow-y: auto;
+    @include o-selected-li;
 
-        max-height: calc(100vh - 125px);
-        overflow: auto;
+    max-height: calc(100vh - 125px);
+    overflow: auto;
 
-        .divider {display: none;} // hide the divider by default (no favorite)
-        .o-searchview-custom-private, .o-searchview-custom-public {
-            .o-remove-filter {
-                @include o-position-absolute(50%, 12px);
-                margin-top: -6px;
-                cursor: pointer;
-            }
-        }
-        .o-searchview-custom-public a:after {
-            font-family: FontAwesome;
-            content: "\f0c0";
-            margin-left: 5px;
-            font-weight: normal;
-        }
-        .o_save_name { // save button
-            display: none; // hidden by default
-            @include o-search-options-dropdown-custom-li;
+    .divider {display: none;} // hide the divider by default (no favorite)
+    .o-searchview-custom-private, .o-searchview-custom-public {
+        .o-remove-filter {
+            @include o-position-absolute(50%, 12px);
+            margin-top: -6px;
+            cursor: pointer;
         }
     }
+    .o-searchview-custom-public a:after {
+        font-family: FontAwesome;
+        content: "\f0c0";
+        margin-left: 5px;
+        font-weight: normal;
+    }
+    .o_save_name { // save button
+        display: none; // hidden by default
+        @include o-search-options-dropdown-custom-li;
+    }
 }