From 82fee7dfe837f323b7db805aecd71d84ecc527ac Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@odoo.com>
Date: Tue, 10 Mar 2015 17:03:19 +0100
Subject: [PATCH] [FIX] web_calendar: incorrect style of quick_create dialog

Replace jquery-ui dialog by bootstrap modal
* fixes general styling (jquery-ui styled heading)
* fixes z-index stacking (jquery-ui dialog appeared on top of
  "slow-create" boostrap modal)
* fixes disappeared close button
---
 .../static/src/css/web_fullcalendar.css       | 312 ++++++++++++------
 .../static/src/css/web_fullcalendar.sass      |   7 +-
 .../static/src/js/web_calendar.js             |  59 ++--
 .../static/src/xml/web_fullcalendar.xml       |  10 +-
 4 files changed, 235 insertions(+), 153 deletions(-)

diff --git a/addons/web_calendar/static/src/css/web_fullcalendar.css b/addons/web_calendar/static/src/css/web_fullcalendar.css
index 188376f75cc..bce0e81c259 100644
--- a/addons/web_calendar/static/src/css/web_fullcalendar.css
+++ b/addons/web_calendar/static/src/css/web_fullcalendar.css
@@ -1,275 +1,377 @@
-@charset "utf-8";
+.openerp .oe_calendar_quick_create {
+  margin: 12px;
+}
 .openerp .oe_view_manager_view_calendar {
-  position: relative; }
+  position: relative;
+}
 .openerp .oe_calendar_table {
   margin-top: 10px;
-  margin-left: 5px; }
+  margin-left: 5px;
+}
 
 .openerp .oe_searchview.oe_searchview_open_drawer .oe_searchview_drawer {
-  z-index: 10; }
+  z-index: 10;
+}
 
 .openerp td.oe_calendar_sidebar_container {
-  padding: 10px; }
+  padding: 10px;
+}
 
 img.attendee_head {
   height: 18px;
-  width: 18px; }
+  width: 18px;
+}
 
 .openerp .oe_calendar_table .attendee_head {
   float: right;
   margin-left: 1px;
-  size: 18px !important; }
+  size: 18px !important;
+}
 .openerp .oe_calendar_table .cal_avatar {
   height: 24px;
-  width: 24px; }
+  width: 24px;
+}
 .openerp .oe_calendar_table .cal_opacity {
-  opacity: 0.6; }
+  opacity: 0.6;
+}
 .openerp .oe_calendar_table .event_color_1 {
   background-color: #a4bdfc;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .event_color_2 {
   background-color: #7ae7bf;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .event_color_3 {
   background-color: #dbadff;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .event_color_4 {
   background-color: #ff887c;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .event_color_5 {
   background-color: #fbd75b;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .event_color_6 {
   background-color: #ffb878;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .event_color_7 {
   background-color: #46d6db;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .event_color_8 {
   background-color: #e1e1e1;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .event_color_9 {
   background-color: #5484ed;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .event_color_10 {
   background-color: #51b749;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .event_color_11 {
   background-color: #dc2127;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_1 {
   border-color: #ac725e;
   background-color: #ac725e;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_2 {
   border-color: #d06b64;
   background-color: #d06b64;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_3 {
   border-color: #f83a22;
   background-color: #f83a22;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_4 {
   border-color: #fa573c;
   background-color: #fa573c;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_5 {
   border-color: #ff7537;
   background-color: #ff7537;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_6 {
   border-color: #ffad46;
   background-color: #ffad46;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_7 {
   border-color: #42d692;
   background-color: #42d692;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_8 {
   border-color: #16a765;
   background-color: #16a765;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_9 {
   border-color: #7bd148;
   background-color: #7bd148;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_10 {
   border-color: #b3dc6c;
   background-color: #b3dc6c;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_11 {
   border-color: #fbe983;
   background-color: #fbe983;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_12 {
   border-color: #fad165;
   background-color: #fad165;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_13 {
   border-color: #92e1c0;
   background-color: #92e1c0;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_14 {
   border-color: #9fe1e7;
   background-color: #9fe1e7;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_15 {
   border-color: #9fc6e7;
   background-color: #9fc6e7;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_16 {
   border-color: #4986e7;
   background-color: #4986e7;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_17 {
   border-color: #9a9cff;
   background-color: #9a9cff;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_18 {
   border-color: #b99aff;
   background-color: #b99aff;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_19 {
   border-color: #c2c2c2;
   background-color: #c2c2c2;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_20 {
   border-color: #cabdbf;
   background-color: #cabdbf;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_21 {
   border-color: #cca6ac;
   background-color: #cca6ac;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_22 {
   border-color: #f691b2;
   background-color: #f691b2;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_23 {
   border-color: #cd74e6;
   background-color: #cd74e6;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .calendar_color_24 {
   border-color: #a47ae2;
   background-color: #a47ae2;
-  color: #0d0d0d; }
+  color: #0d0d0d;
+}
 .openerp .oe_calendar_table .underline_ecolor_1 {
-  border-bottom: 4px solid #a4bdfc; }
+  border-bottom: 4px solid #a4bdfc;
+}
 .openerp .oe_calendar_table .underline_ecolor_2 {
-  border-bottom: 4px solid #7ae7bf; }
+  border-bottom: 4px solid #7ae7bf;
+}
 .openerp .oe_calendar_table .underline_ecolor_3 {
-  border-bottom: 4px solid #dbadff; }
+  border-bottom: 4px solid #dbadff;
+}
 .openerp .oe_calendar_table .underline_ecolor_4 {
-  border-bottom: 4px solid #ff887c; }
+  border-bottom: 4px solid #ff887c;
+}
 .openerp .oe_calendar_table .underline_ecolor_5 {
-  border-bottom: 4px solid #fbd75b; }
+  border-bottom: 4px solid #fbd75b;
+}
 .openerp .oe_calendar_table .underline_ecolor_6 {
-  border-bottom: 4px solid #ffb878; }
+  border-bottom: 4px solid #ffb878;
+}
 .openerp .oe_calendar_table .underline_ecolor_7 {
-  border-bottom: 4px solid #46d6db; }
+  border-bottom: 4px solid #46d6db;
+}
 .openerp .oe_calendar_table .underline_ecolor_8 {
-  border-bottom: 4px solid #e1e1e1; }
+  border-bottom: 4px solid #e1e1e1;
+}
 .openerp .oe_calendar_table .underline_ecolor_9 {
-  border-bottom: 4px solid #5484ed; }
+  border-bottom: 4px solid #5484ed;
+}
 .openerp .oe_calendar_table .underline_ecolor_10 {
-  border-bottom: 4px solid #51b749; }
+  border-bottom: 4px solid #51b749;
+}
 .openerp .oe_calendar_table .underline_ecolor_11 {
-  border-bottom: 4px solid #dc2127; }
+  border-bottom: 4px solid #dc2127;
+}
 .openerp .oe_calendar_table .underline_color_1 {
-  border-bottom: 4px solid #ac725e; }
+  border-bottom: 4px solid #ac725e;
+}
 .openerp .oe_calendar_table .underline_color_2 {
-  border-bottom: 4px solid #d06b64; }
+  border-bottom: 4px solid #d06b64;
+}
 .openerp .oe_calendar_table .underline_color_3 {
-  border-bottom: 4px solid #f83a22; }
+  border-bottom: 4px solid #f83a22;
+}
 .openerp .oe_calendar_table .underline_color_4 {
-  border-bottom: 4px solid #fa573c; }
+  border-bottom: 4px solid #fa573c;
+}
 .openerp .oe_calendar_table .underline_color_5 {
-  border-bottom: 4px solid #ff7537; }
+  border-bottom: 4px solid #ff7537;
+}
 .openerp .oe_calendar_table .underline_color_6 {
-  border-bottom: 4px solid #ffad46; }
+  border-bottom: 4px solid #ffad46;
+}
 .openerp .oe_calendar_table .underline_color_7 {
-  border-bottom: 4px solid #42d692; }
+  border-bottom: 4px solid #42d692;
+}
 .openerp .oe_calendar_table .underline_color_8 {
-  border-bottom: 4px solid #16a765; }
+  border-bottom: 4px solid #16a765;
+}
 .openerp .oe_calendar_table .underline_color_9 {
-  border-bottom: 4px solid #7bd148; }
+  border-bottom: 4px solid #7bd148;
+}
 .openerp .oe_calendar_table .underline_color_10 {
-  border-bottom: 4px solid #b3dc6c; }
+  border-bottom: 4px solid #b3dc6c;
+}
 .openerp .oe_calendar_table .underline_color_11 {
-  border-bottom: 4px solid #fbe983; }
+  border-bottom: 4px solid #fbe983;
+}
 .openerp .oe_calendar_table .underline_color_12 {
-  border-bottom: 4px solid #fad165; }
+  border-bottom: 4px solid #fad165;
+}
 .openerp .oe_calendar_table .underline_color_13 {
-  border-bottom: 4px solid #92e1c0; }
+  border-bottom: 4px solid #92e1c0;
+}
 .openerp .oe_calendar_table .underline_color_14 {
-  border-bottom: 4px solid #9fe1e7; }
+  border-bottom: 4px solid #9fe1e7;
+}
 .openerp .oe_calendar_table .underline_color_15 {
-  border-bottom: 4px solid #9fc6e7; }
+  border-bottom: 4px solid #9fc6e7;
+}
 .openerp .oe_calendar_table .underline_color_16 {
-  border-bottom: 4px solid #4986e7; }
+  border-bottom: 4px solid #4986e7;
+}
 .openerp .oe_calendar_table .underline_color_17 {
-  border-bottom: 4px solid #9a9cff; }
+  border-bottom: 4px solid #9a9cff;
+}
 .openerp .oe_calendar_table .underline_color_18 {
-  border-bottom: 4px solid #b99aff; }
+  border-bottom: 4px solid #b99aff;
+}
 .openerp .oe_calendar_table .underline_color_19 {
-  border-bottom: 4px solid #c2c2c2; }
+  border-bottom: 4px solid #c2c2c2;
+}
 .openerp .oe_calendar_table .underline_color_20 {
-  border-bottom: 4px solid #cabdbf; }
+  border-bottom: 4px solid #cabdbf;
+}
 .openerp .oe_calendar_table .underline_color_21 {
-  border-bottom: 4px solid #cca6ac; }
+  border-bottom: 4px solid #cca6ac;
+}
 .openerp .oe_calendar_table .underline_color_22 {
-  border-bottom: 4px solid #f691b2; }
+  border-bottom: 4px solid #f691b2;
+}
 .openerp .oe_calendar_table .underline_color_23 {
-  border-bottom: 4px solid #cd74e6; }
+  border-bottom: 4px solid #cd74e6;
+}
 .openerp .oe_calendar_table .underline_color_24 {
-  border-bottom: 4px solid #a47ae2; }
+  border-bottom: 4px solid #a47ae2;
+}
 .openerp .oe_calendar_table .color_1 {
-  color: #ac725e; }
+  color: #ac725e;
+}
 .openerp .oe_calendar_table .color_2 {
-  color: #d06b64; }
+  color: #d06b64;
+}
 .openerp .oe_calendar_table .color_3 {
-  color: #f83a22; }
+  color: #f83a22;
+}
 .openerp .oe_calendar_table .color_4 {
-  color: #fa573c; }
+  color: #fa573c;
+}
 .openerp .oe_calendar_table .color_5 {
-  color: #ff7537; }
+  color: #ff7537;
+}
 .openerp .oe_calendar_table .color_6 {
-  color: #ffad46; }
+  color: #ffad46;
+}
 .openerp .oe_calendar_table .color_7 {
-  color: #42d692; }
+  color: #42d692;
+}
 .openerp .oe_calendar_table .color_8 {
-  color: #16a765; }
+  color: #16a765;
+}
 .openerp .oe_calendar_table .color_9 {
-  color: #7bd148; }
+  color: #7bd148;
+}
 .openerp .oe_calendar_table .color_10 {
-  color: #b3dc6c; }
+  color: #b3dc6c;
+}
 .openerp .oe_calendar_table .color_11 {
-  color: #fbe983; }
+  color: #fbe983;
+}
 .openerp .oe_calendar_table .color_12 {
-  color: #fad165; }
+  color: #fad165;
+}
 .openerp .oe_calendar_table .color_13 {
-  color: #92e1c0; }
+  color: #92e1c0;
+}
 .openerp .oe_calendar_table .color_14 {
-  color: #9fe1e7; }
+  color: #9fe1e7;
+}
 .openerp .oe_calendar_table .color_15 {
-  color: #9fc6e7; }
+  color: #9fc6e7;
+}
 .openerp .oe_calendar_table .color_16 {
-  color: #4986e7; }
+  color: #4986e7;
+}
 .openerp .oe_calendar_table .color_17 {
-  color: #9a9cff; }
+  color: #9a9cff;
+}
 .openerp .oe_calendar_table .color_18 {
-  color: #b99aff; }
+  color: #b99aff;
+}
 .openerp .oe_calendar_table .color_19 {
-  color: #c2c2c2; }
+  color: #c2c2c2;
+}
 .openerp .oe_calendar_table .color_20 {
-  color: #cabdbf; }
+  color: #cabdbf;
+}
 .openerp .oe_calendar_table .color_21 {
-  color: #cca6ac; }
+  color: #cca6ac;
+}
 .openerp .oe_calendar_table .color_22 {
-  color: #f691b2; }
+  color: #f691b2;
+}
 .openerp .oe_calendar_table .color_23 {
-  color: #cd74e6; }
+  color: #cd74e6;
+}
 .openerp .oe_calendar_table .color_24 {
-  color: #a47ae2; }
-.openerp .oe_calendar_table .oe_calendar_buttons_add_contact .add_contacts_link_btn {
-  margin-top: 10px; }
+  color: #a47ae2;
+}
diff --git a/addons/web_calendar/static/src/css/web_fullcalendar.sass b/addons/web_calendar/static/src/css/web_fullcalendar.sass
index 0e2ce4bb49f..b4985ad50d3 100644
--- a/addons/web_calendar/static/src/css/web_fullcalendar.sass
+++ b/addons/web_calendar/static/src/css/web_fullcalendar.sass
@@ -39,6 +39,9 @@ $ecolor11: #dc2127
 $fontcolor: #0d0d0d 
 
 .openerp
+    .oe_calendar_quick_create
+        margin: 12px
+
     .oe_view_manager_view_calendar
         position: relative
         
@@ -415,7 +418,3 @@ img.attendee_head
     
     .color_24
         color: $color24
-        
-    .oe_calendar_buttons_add_contact
-        .add_contacts_link_btn
-            margin-top: 10px    
\ No newline at end of file
diff --git a/addons/web_calendar/static/src/js/web_calendar.js b/addons/web_calendar/static/src/js/web_calendar.js
index f78717e4e22..3b1ae6f3398 100644
--- a/addons/web_calendar/static/src/js/web_calendar.js
+++ b/addons/web_calendar/static/src/js/web_calendar.js
@@ -952,8 +952,6 @@ openerp.web_calendar = function(instance) {
      * @type {*}
      */
     instance.web_calendar.QuickCreate = instance.web.Widget.extend({
-        template: 'CalendarView.quick_create',
-        
         init: function(parent, dataset, buttons, options, data_template) {
             this._super(parent);
             this.dataset = dataset;
@@ -977,53 +975,44 @@ openerp.web_calendar = function(instance) {
             var self = this;
 
             if (this.options.disable_quick_create) {
-                this.$el.hide();
                 this.slow_create();
                 return;
             }
+            self.on('added', self, function() {
+                self.trigger('close');
+            });
 
-            self.$input = this.$el.find('input');
-            self.$input.keyup(function enterHandler (event) {
+            this.$dialog = new instance.web.Dialog(this, {
+                title: this.get_title(),
+                size: 'small',
+                buttons: this._buttons ? [
+                    {text: _t("Create event"), oe_link_class: 'oe_highlight', click: function (e) {
+                        if (!self.quick_add()) {
+                            self.focus();
+                        }
+                    }},
+                    {text: _t("Edit event"), oe_link_class: 'oe_link', click: function (e) {
+                        self.slow_add();
+                    }}
+                ] : []
+            }, QWeb.render('CalendarView.quick_create', {widged: this}))
+            .on('closed', self, function() {
+                self.trigger('close');
+            })
+            .open();
+            this.$input = this.$dialog.$('input').keyup(function enterHandler (e) {
                 if(event.keyCode == 13){
                     self.$input.off('keyup', enterHandler);
                     if (!self.quick_add()){
                         self.$input.on('keyup', enterHandler);
                     }
-                }
-            });
-            
-            var submit = this.$el.find(".oe_calendar_quick_create_add");
-            submit.click(function clickHandler() {
-                submit.off('click', clickHandler);
-                if (!self.quick_add()){
-                   submit.on('click', clickHandler);                }
-                self.focus();
-            });
-            this.$el.find(".oe_calendar_quick_create_edit").click(function () {
-                self.slow_add();
-                self.focus();
-            });
-            this.$el.find(".oe_calendar_quick_create_close").click(function (ev) {
-                ev.preventDefault();
-                self.trigger('close');
-            });
-            self.$input.keyup(function enterHandler (e) {
-                if (e.keyCode == 27 && self._buttons) {
+                } else if (e.keyCode == 27 && self._buttons) {
                     self.trigger('close');
                 }
             });
-            self.$el.dialog({ title: this.get_title()});
-            self.on('added', self, function() {
-                self.trigger('close');
-            });
-            
-            self.$el.on('dialogclose', self, function() {
-                self.trigger('close');
-            });
-
         },
         focus: function() {
-            this.$el.find('input').focus();
+            this.$input.focus();
         },
 
         /**
diff --git a/addons/web_calendar/static/src/xml/web_fullcalendar.xml b/addons/web_calendar/static/src/xml/web_fullcalendar.xml
index 2350111988a..6fde2017461 100644
--- a/addons/web_calendar/static/src/xml/web_fullcalendar.xml
+++ b/addons/web_calendar/static/src/xml/web_fullcalendar.xml
@@ -54,19 +54,11 @@
     </t>
   </div>
 
-  <div t-name="CalendarView.quick_create" class="oe_calendar_quick_create openerp">
-    
+  <div t-name="CalendarView.quick_create" class="oe_calendar_quick_create">
     <div class="form-group">
         <label for='name' class='control-label'>Event summary:</label>
         <input name='name' class="form-control"/>
     </div>     
-    
-    <t t-if="widget._buttons">
-      <div class="oe_calendar_quick_create_buttons">
-        <button class="openerp oe_button oe_highlight oe_calendar_quick_create_add ">Create event</button>
-        <button class="oe_button oe_form_button oe_link oe_calendar_quick_create_edit" ><span>Edit Event <![CDATA[]]></span></button>
-      </div>
-    </t>
   </div>