[IMP] board,google_spreadsheet,web,web_calendar: Favorites menu

Adapt the Favorites menu so that addons appending stuff in it are compliant with
the enterprise edition.

Mainly, creation of dashboard.less from of dashboard.sass so that we can use mixins
defined in the web addon.

Some changes as well in the dashboard view to make it compliant with the enterprise
edition.

Use correct naming convention: classnames with underscores, less mixins with hyphens.

5 files changed, 160 insertions, 290 deletions

diff --git a/addons/board/static/src/css/dashboard.css b/addons/board/static/src/css/dashboard.css
deleted file mode 100644
index 2d6a7c8e43c..00000000000
--- a/addons/board/static/src/css/dashboard.css
+++ /dev/null
@@ -1,148 +0,0 @@
-@charset "UTF-8";
-.openerp .oe_dashboard_layout_1 .oe_dashboard_column.index_0 {
-  width: 100%;
-}
-.openerp .oe_dashboard_layout_1 .oe_dashboard_column.index_1, .openerp .oe_dashboard_layout_1 .oe_dashboard_column.index_2 {
-  display: none;
-}
-.openerp .oe_dashboard_layout_1-1 .oe_dashboard_column {
-  width: 50%;
-}
-.openerp .oe_dashboard_layout_1-1 .oe_dashboard_column.index_2 {
-  display: none;
-}
-.openerp .oe_dashboard_layout_1-1-1 .oe_dashboard_column {
-  width: 33%;
-}
-.openerp .oe_dashboard_layout_2-1 .oe_dashboard_column.index_0 {
-  width: 70%;
-}
-.openerp .oe_dashboard_layout_2-1 .oe_dashboard_column.index_1 {
-  width: 30%;
-}
-.openerp .oe_dashboard_layout_2-1 .oe_dashboard_column.index_2 {
-  display: none;
-}
-.openerp .oe_dashboard_layout_1-2 .oe_dashboard_column.index_0 {
-  width: 30%;
-}
-.openerp .oe_dashboard_layout_1-2 .oe_dashboard_column.index_1 {
-  width: 70%;
-}
-.openerp .oe_dashboard_layout_1-2 .oe_dashboard_column.index_2 {
-  display: none;
-}
-.openerp .oe_dashboard_layout_selector ul {
-  white-space: nowrap;
-}
-.openerp .oe_dashboard_layout_selector li {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-  float: left;
-}
-.openerp .oe_dashboard_layout_selector li .oe_dashboard_selected_layout {
-  margin-left: -30px;
-  vertical-align: bottom;
-  margin-bottom: 10px;
-}
-.openerp .oe_dashboard_links {
-  text-align: right;
-  margin: 0 4px 6px 0;
-}
-.openerp .oe_dashboard {
-  width: 100%;
-}
-.openerp .oe_dashboard .oe_action {
-  margin: 0 8px 8px 0;
-  background-color: white;
-  border: 1px solid;
-  border-color: #e5e5e5 #dbdbdb #d2d2d2;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
-}
-.oe_dashboard .oe_action input:focus{
-  outline: none;
-  border: 1px solid #21b799;
-}
-.openerp .oe_dashboard .oe_action .oe_header {
-  font-size: 16px;
-  vertical-align: middle;
-  margin: 0;
-  padding: 12px;
-  -moz-border-radius: 3px 3px 0 0;
-  -webkit-border-radius: 3px 3px 0 0;
-  border-radius: 3px 3px 0 0;
-}
-.openerp .oe_dashboard .oe_action .oe_header:hover {
-  cursor: move;
-}
-.openerp .oe_dashboard .oe_action .oe_header .oe_icon {
-  float: right;
-  cursor: pointer;
-  color: #b3b3b3;
-}
-.openerp .oe_dashboard .oe_action .oe_header .oe_icon:hover {
-  color: #666;
-  text-decoration: none;
-}
-.openerp .oe_dashboard .oe_action .oe_header .oe_close:after {
-  content: "×";
-  margin-left: 4px;
-}
-.openerp .oe_dashboard .oe_action .oe_header .oe_minimize:after {
-  content: "-";
-  margin-left: 4px;
-}
-.openerp .oe_dashboard .oe_action .oe_header .oe_maximize:after {
-  content: "+";
-  margin-left: 4px;
-}
-.openerp .oe_dashboard .oe_action .oe_header .oe_header_text {
-  visibility: hidden;
-  cursor: text;
-}
-.openerp .oe_dashboard .oe_action .oe_header span {
-  cursor: pointer;
-}
-.openerp .oe_dashboard .oe_action .oe_header_empty {
-  padding-top: 0;
-  padding-bottom: 2px;
-}
-.openerp .oe_dashboard .oe_action .oe_button_create {
-  margin-left: 4px;
-  padding: 0 4px 0 4px;
-  height: 16px !important;
-}
-.openerp .oe_dashboard .oe_action .oe_content {
-  padding: 0 12px 12px 12px;
-}
-.openerp .oe_dashboard .oe_action .oe_content .oe-view-manager {
-  display: block;
-}
-.openerp .oe_dashboard .oe_action .oe_content .oe-view-manager-content {
-  display: block;
-  position: static;
-}
-.openerp .oe_dashboard .oe_action .oe_content .oe-view-manager-view-kanban {
-  position: static;
-}
-.openerp .oe_dashboard .oe_action .oe_content .oe_list_content > thead {
-  border-bottom: 1px;
-}
-.openerp .oe_dashboard .oe_action .oe_content .oe_list_content > tbody tr:nth-child(odd) {
-  background: transparent;
-}
-.openerp .oe-search-options .add-to-dashboard button {
-  margin: 3px 25px;
-  display: none;
-}
-.openerp .oe-search-options .add-to-dashboard input {
-  width: calc(100% - 50px);
-  margin: 3px 25px;
-  display: none;
-}
diff --git a/addons/board/static/src/css/dashboard.sass b/addons/board/static/src/css/dashboard.sass
deleted file mode 100644
index e0abfd28b38..00000000000
--- a/addons/board/static/src/css/dashboard.sass
+++ /dev/null
@@ -1,128 +0,0 @@
-@charset "utf-8"
-
-@mixin radius($radius: 5px)
-  -moz-border-radius: $radius
-  -webkit-border-radius: $radius
-  border-radius: $radius
-
-@mixin box-shadow($bsval: 0px 1px 4px #777)
-  -moz-box-shadow: $bsval
-  -webkit-box-shadow: $bsval
-  box-shadow: $bsval
-
-.openerp
-  .oe_dashboard_layout_1 .oe_dashboard_column
-    &.index_0
-      width: 100%
-    &.index_1, &.index_2
-      display: none
-  .oe_dashboard_layout_1-1 .oe_dashboard_column
-    width: 50% 
-    &.index_2
-      display: none
-  .oe_dashboard_layout_1-1-1 .oe_dashboard_column
-    width: 33% 
-  .oe_dashboard_layout_2-1 .oe_dashboard_column
-    &.index_0
-      width: 70%
-    &.index_1
-      width: 30%
-    &.index_2
-      display: none
-  .oe_dashboard_layout_1-2 .oe_dashboard_column
-    &.index_0
-      width: 30%
-    &.index_1
-      width: 70%
-    &.index_2
-      display: none
-  .oe_dashboard_layout_selector
-    ul
-      white-space: nowrap
-    li
-      margin: 0
-      padding: 0
-      list-style-type: none
-      float: left
-      .oe_dashboard_selected_layout
-        margin-left: -30px
-        vertical-align: bottom
-        margin-bottom: 10px
-  .oe_dashboard_links
-    text-align: right
-    margin: 0 4px 6px 0
-  .oe_dashboard
-    width: 100%
-    .oe_action
-      margin: 0 8px 8px 0
-      background-color: white
-      border: 1px solid
-      border-color: #e5e5e5 #dbdbdb #d2d2d2
-      @include radius(3px)
-      @include box-shadow(0 0 2px rgba(0,0,0,0.2))
-      .oe_header
-        font-size: 16px
-        vertical-align: middle
-        margin: 0
-        padding: 12px
-        @include radius(3px 3px 0 0)
-
-        //border-bottom: 1px dotted #dbdbdb
-        //@include radius(2px 2px 0 0)
-        //@include vertical-gradient(#FCFCFC, #DEDEDE)
-        &:hover
-          cursor: move
-        .oe_icon
-          float: right
-          cursor: pointer
-          color: #b3b3b3
-          &:hover
-            color: #666
-            text-decoration: none
-        .oe_close:after
-          content: "×"
-          margin-left: 4px
-        .oe_minimize:after
-          content: "-"
-          margin-left: 4px
-        .oe_maximize:after
-          content: "+"
-          margin-left: 4px
-        .oe_header_text
-          visibility: hidden
-          cursor: text
-        span
-          cursor: pointer
-      .oe_header_empty
-        padding-top: 0
-        padding-bottom: 2px
-      .oe_button_create
-        margin-left: 4px
-        padding: 0 4px 0 4px
-        height: 16px !important
-      .oe_content
-        padding: 0 12px 12px 12px
-        .oe-view-manager
-          display: block
-        .oe-view-manager-content
-          display: block
-          position: static
-        .oe-view-manager-view-kanban
-          position: static
-        .oe_list_content
-          > thead
-            border-bottom: 1px
-          > tbody
-            tr:nth-child(odd)
-              background: transparent
-
-
-  .oe-search-options
-    .add-to-dashboard
-      button
-        margin: 3px 25px
-        display: none
-      input
-        width: calc(100% - 50px)
-        margin: 3px 25px
-        display: none
diff --git a/addons/board/static/src/js/dashboard.js b/addons/board/static/src/js/dashboard.js
index 5320893b15e..f77e43e89ef 100644
--- a/addons/board/static/src/js/dashboard.js
+++ b/addons/board/static/src/js/dashboard.js
@@ -33,7 +33,7 @@ var DashBoard = form_common.FormWidget.extend({
     start: function() {
         var self = this;
         this._super.apply(this, arguments);
-        this.$el.addClass('o-dashboard');
+        this.$el.addClass('o_dashboard');
 
         this.$('.oe_dashboard_column').sortable({
             connectWith: '.oe_dashboard_column',
@@ -341,14 +341,15 @@ FavoriteMenu.include({
         if (am && am.get_inner_widget() instanceof ViewManager) {
             this.view_manager = am.get_inner_widget();
             this.add_to_dashboard_available = true;
-            this.$('.favorites-menu').append(QWeb.render('SearchView.addtodashboard'));
-            var $add_to_dashboard = this.$('.add-to-dashboard');
-            this.$add_dashboard_btn = $add_to_dashboard.eq(2).find('button');
-            this.$add_dashboard_input = $add_to_dashboard.eq(1).find('input');
-            this.$add_dashboard_link = $add_to_dashboard.first();
+            this.$('.o_favorites_menu').append(QWeb.render('SearchView.addtodashboard'));
+            this.$add_to_dashboard = this.$('.o_add_to_dashboard');
+            this.$add_dashboard_btn = this.$add_to_dashboard.eq(1).find('button');
+            this.$add_dashboard_input = this.$add_to_dashboard.eq(0).find('input');
+            this.$add_dashboard_link = this.$('.o_add_to_dashboard_link');
             var title = this.searchview.get_title();
             this.$add_dashboard_input.val(title);
             this.$add_dashboard_link.click(function () {
+                event.preventDefault();
                 self.toggle_dashboard_menu();
             });
             this.$add_dashboard_btn.click(this.proxy('add_dashboard'));
@@ -356,11 +357,10 @@ FavoriteMenu.include({
     },
     toggle_dashboard_menu: function (is_open) {
         this.$add_dashboard_link
-            .toggleClass('closed-menu', !(_.isUndefined(is_open)) ? !is_open : undefined)
-            .toggleClass('open-menu', is_open);
-        this.$add_dashboard_btn.toggle(is_open);
-        this.$add_dashboard_input.toggle(is_open);
-        if (this.$add_dashboard_link.hasClass('open-menu')) {
+             .toggleClass('o-closed-menu', !(_.isUndefined(is_open)) ? !is_open : undefined)
+            .toggleClass('o_open_menu', is_open);
+        this.$add_to_dashboard.toggle(is_open);
+        if (this.$add_dashboard_link.hasClass('o_open_menu')) {
             this.$add_dashboard_input.focus();
         }
     },
diff --git a/addons/board/static/src/less/dashboard.less b/addons/board/static/src/less/dashboard.less
new file mode 100644
index 00000000000..af427036a9d
--- /dev/null
+++ b/addons/board/static/src/less/dashboard.less
@@ -0,0 +1,140 @@
+.o_dashboard {
+    // Dashboard layout
+    .oe_dashboard_layout_1 .oe_dashboard_column {
+        &.index_0 {
+            width: 100%;
+        }
+        &.index_1, &.index_2 {
+            display: none;
+        }
+    }
+    .oe_dashboard_layout_1-1 .oe_dashboard_column {
+        width: 50%;
+        &.index_2 {
+            display: none;
+        }
+    }
+    .oe_dashboard_layout_1-1-1 .oe_dashboard_column {
+        width: 33%;
+    }
+    .oe_dashboard_layout_2-1 .oe_dashboard_column {
+        &.index_0 {
+            width: 70%;
+        }
+        &.index_1 {
+            width: 30%;
+        }
+        &.index_2 {
+            display: none;
+        }
+    }
+    .oe_dashboard_layout_1-2 .oe_dashboard_column {
+        &.index_0 {
+            width: 30%;
+        }
+        &.index_1 {
+            width: 70%;
+        }
+        &.index_2 {
+            display: none;
+        }
+    }
+
+    // Layout selector
+    .oe_dashboard_links {
+        text-align: right;
+        margin: 0 4px 6px 0;
+    }
+
+    // Dashboard content
+    .oe_dashboard {
+        width: 100%;
+        .oe_action {
+            margin: 0 8px 8px 0;
+            background-color: white;
+            border: 1px solid;
+            border-color: #e5e5e5 #dbdbdb #d2d2d2;
+            margin: 0 8px 8px 0;
+           .oe_header {
+                font-size: 16px;
+                vertical-align: middle;
+                margin: 0;
+                padding: 12px;
+                &:hover {
+                    cursor: move;
+                }
+                .oe_icon {
+                    float: right;
+                    cursor: pointer;
+                    color: #b3b3b3;
+                    &:hover {
+                        color: #666;
+                        text-decoration: none;
+                    }
+                }
+                .oe_close:after {
+                    content: "×";
+                    margin-left: 4px;
+                }
+                .oe_minimize:after {
+                    content: "-";
+                    margin-left: 4px;
+                }
+                .oe_maximize:after {
+                    content: "+";
+                    margin-left: 4px;
+                }
+                .oe_header_text {
+                    width: auto;
+                    visibility: hidden;
+                    display: inline-block;
+                    cursor: text;
+                }
+                span {
+                    cursor: pointer;
+                }
+            }
+            .oe_header_empty {
+                padding-top: 0;
+                padding-bottom: 2px;
+            }
+            .oe_button_create {
+                margin-left: 4px;
+                padding: 0 4px 0 4px;
+                height: 16px !important;
+            }
+            .oe_content {
+                padding: 0 12px 12px 12px;
+            }
+
+            // Override border of many2manytags defined for form_views
+            .o_kanban_view .o_kanban_record .oe_kanban_list_many2many .o_form_field_many2manytags {
+                border: none;
+            }
+        }
+    }
+}
+
+// Layout selector modal
+.oe_dashboard_layout_selector {
+    ul {
+        white-space: nowrap;
+    }
+    li {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        float: left;
+    }
+    .oe_dashboard_selected_layout {
+        margin-left: -30px;
+        vertical-align: bottom;
+        margin-bottom: 10px;
+    }
+}
+
+// Favorites menu in control panel
+.o_add_to_dashboard {
+    display: none; // hidden by default
+    .o-search-options-dropdown-custom-li;
+}
diff --git a/addons/board/static/src/xml/board.xml b/addons/board/static/src/xml/board.xml
index 0c22f273b9a..f0830b83974 100644
--- a/addons/board/static/src/xml/board.xml
+++ b/addons/board/static/src/xml/board.xml
@@ -60,8 +60,14 @@
 </t>
 
 <t t-name="SearchView.addtodashboard">
-    <li class="add-to-dashboard closed-menu"><a>Add to my Dashboard</a></li>
-    <li class="add-to-dashboard"><input class="form-control" type="text"/></li>
-    <li class="add-to-dashboard"><button type="button" class="btn btn-default">Add</button></li>
+    <li class="o_add_to_dashboard_link o_closed_menu">
+        <a href="#">Add to my Dashboard</a>
+    </li>
+    <li class="o_add_to_dashboard">
+        <input class="o_add_to_dashboard_input" type="text"/>
+    </li>
+    <li class="o_add_to_dashboard">
+        <button type="button" class="btn btn-primary btn-sm o_add_to_dashboard_button">Add</button>
+    </li>
 </t>
 </template>