[IMP] website_version: ergonomic improvements of the modals.

4 files changed, 224 insertions, 60 deletions

diff --git a/addons/website_version/static/src/img/GA/GA_Save.png b/addons/website_version/static/src/img/GA/GA_save.png
index 1a3e8ff8231..1a3e8ff8231 100644
--- a/addons/website_version/static/src/img/GA/GA_Save.png
+++ b/addons/website_version/static/src/img/GA/GA_save.png
diff --git a/addons/website_version/static/src/js/edit_version.js b/addons/website_version/static/src/js/edit_version.js
index d5e49cf3ce9..f4efd964265 100644
--- a/addons/website_version/static/src/js/edit_version.js
+++ b/addons/website_version/static/src/js/edit_version.js
@@ -12,29 +12,33 @@
             var self = this;
             this.$el.on('click', '#save_as_new_version', function() {
                 
-                website.prompt({
-                    id: "editor_new_version",
-                    window_title: _t("New version"),
-                    input: "Version name" ,
-                    default :(moment().format('L')),
-                }).then(function (name) {
-                    var context = website.get_context();
-                    openerp.jsonRpc( '/website_version/create_version', 'call', { 'name': name, 'version_id': 0 }).then(function (result) {
-                        $('html').data('version_id', result);
-                        
-                        var wizard = $(openerp.qweb.render("website_version.message",{message:_.str.sprintf("You are actually working on %s version.", name)}));
-                        wizard.appendTo($('body')).modal({"keyboard" :true});
-                        wizard.on('click','.o_confirm', function(){
-                            self.save();
+                var wizardA = $(openerp.qweb.render("website_version.new_version",{'default_name': moment().format('L')}));
+                wizardA.appendTo($('body')).modal({"keyboard" :true});
+                wizardA.on('click','.o_create', function(){
+                    wizardA.find('.o_message').remove();
+                    var version_name = wizardA.find('.o_version_name').val();
+                    if(version_name.length == 0){
+                        wizardA.find(".o_version_name").after("<p class='o_message' style='color : red'> *"+_t("This field is required")+"</p>");
+                    }
+                    else{
+                        wizardA.modal("hide");
+                        openerp.jsonRpc( '/website_version/create_version', 'call', { 'name': version_name, 'version_id': 0}).then(function (result) {
+                            $('html').data('version_id', result);
+                            var wizard = $(openerp.qweb.render("website_version.dialogue",{message:_.str.sprintf("You are now working on version: %s.", version_name),
+                                                                                       dialogue:_.str.sprintf("If you edit this page or others, all changes will be recorded in the version. It will not be visible by visitors until you publish the version.")}));
+                            wizard.appendTo($('body')).modal({"keyboard" :true});
+                            wizard.on('click','.o_confirm', function(){
+                                self.save();
+                            });
+                            wizard.on('hidden.bs.modal', function () {$(this).remove();});
+                        }).fail(function(){
+                            var wizard = $(openerp.qweb.render("website_version.message",{message:_t("This name already exists.")}));
+                            wizard.appendTo($('body')).modal({"keyboard" :true});
+                            wizard.on('hidden.bs.modal', function () {$(this).remove();});
                         });
-                        wizard.on('hidden.bs.modal', function () {$(this).remove();});
-                    }).fail(function(){
-                        var wizard = $(openerp.qweb.render("website_version.message",{message:_t("This name already exists.")}));
-                        wizard.appendTo($('body')).modal({"keyboard" :true});
-                        wizard.on('hidden.bs.modal', function () {$(this).remove();});
-                    });
-
+                    }
                 });
+                wizardA.on('hidden.bs.modal', function () {$(this).remove();});
             
             });
             this.$el.on('click', '#save_and_publish', function() {
@@ -45,7 +49,7 @@
                 }
                 else
                 {
-                    var wizard = $(openerp.qweb.render("website_version.delete_message",{message:_t("Are you sure you want to publish your modifications.")}));
+                    var wizard = $(openerp.qweb.render("website_version.publish",{message:_t("Are you sure you want to publish your modifications.")}));
                     wizard.appendTo($('body')).modal({"keyboard" :true});
                     wizard.on('click','.o_confirm', function(){
                         self.save();
diff --git a/addons/website_version/static/src/js/menu_version.js b/addons/website_version/static/src/js/menu_version.js
index 2817f692c9b..9d30a393f58 100644
--- a/addons/website_version/static/src/js/menu_version.js
+++ b/addons/website_version/static/src/js/menu_version.js
@@ -41,27 +41,33 @@
         
         duplicate_version: function(event) {
             var version_id = $('html').data('version_id');
-            website.prompt({
-                id: "editor_new_version",
-                window_title: _t("New version"),
-                input: "Version name" ,
-                default :(moment().format('L')),
-            }).then(function (name) {
-                openerp.jsonRpc( '/website_version/create_version', 'call', { 'name': name, 'version_id': version_id}).then(function (result) {
+            var wizardA = $(openerp.qweb.render("website_version.new_version",{'default_name': moment().format('L')}));
+            wizardA.appendTo($('body')).modal({"keyboard" :true});
+            wizardA.on('click','.o_create', function(){
+                wizardA.find('.o_message').remove();
+                var version_name = wizardA.find('.o_version_name').val();
+                if(version_name.length == 0){
+                    wizardA.find(".o_version_name").after("<p class='o_message' style='color : red'> *"+_t("This field is required")+"</p>");
+                }
+                else{
+                    wizardA.modal("hide");
+                    openerp.jsonRpc( '/website_version/create_version', 'call', { 'name': version_name, 'version_id': version_id}).then(function (result) {
 
-                    var wizard = $(openerp.qweb.render("website_version.message",{message:_.str.sprintf("You are actually working on %s version.", name)}));
-                    wizard.appendTo($('body')).modal({"keyboard" :true});
-                    wizard.on('click','.o_confirm', function(){
-                        window.location.href = '\?enable_editor';
+                        var wizard = $(openerp.qweb.render("website_version.dialogue",{message:_.str.sprintf("You are now working on version: %s.", version_name),
+                                                                                       dialogue:_.str.sprintf("If you edit this page or others, all changes will be recorded in the version. It will not be visible by visitors until you publish the version.")}));
+                        wizard.appendTo($('body')).modal({"keyboard" :true});
+                        wizard.on('click','.o_confirm', function(){
+                            window.location.href = '\?enable_editor';
+                        });
+                        wizard.on('hidden.bs.modal', function () {$(this).remove();});
+                    }).fail(function(){
+                        var wizard = $(openerp.qweb.render("website_version.message",{message:_t("This name already exists.")}));
+                        wizard.appendTo($('body')).modal({"keyboard" :true});
+                        wizard.on('hidden.bs.modal', function () {$(this).remove();});
                     });
-                    wizard.on('hidden.bs.modal', function () {$(this).remove();});
-                }).fail(function(){
-                    var wizard = $(openerp.qweb.render("website_version.message",{message:_t("This name already exists.")}));
-                    wizard.appendTo($('body')).modal({"keyboard" :true});
-                    wizard.on('hidden.bs.modal', function () {$(this).remove();});
-
-                });
+                }
             });
+            wizardA.on('hidden.bs.modal', function () {$(this).remove();});
         },
         
         change_version: function(event) {
@@ -104,9 +110,10 @@
 
         publish_version: function(event) {
             var version_id = parseInt($('html').data('version_id'));
-            var name = $(event.currentTarget).parent().parent().parent().children().children(':first-child').text();
+            var name = $('#version-menu-button').attr('data-version_name');
             openerp.jsonRpc( '/website_version/diff_version', 'call', { 'version_id':version_id}).then(function (result) {
-                var wizardA = $(openerp.qweb.render("website_version.publish_message",{message:_.str.sprintf("Are you sure you want to publish the %s version ?", name), list:result}));
+                console.log(result);
+                var wizardA = $(openerp.qweb.render("website_version.publish_message",{message:_.str.sprintf("Publish Version %s", name), list:result}));
                 wizardA.appendTo($('body')).modal({"keyboard" :true});
                 wizardA.on('click','.o_confirm', function(){
                     wizardA.find('.o_message').remove();
diff --git a/addons/website_version/static/src/xml/version_templates.xml b/addons/website_version/static/src/xml/version_templates.xml
index d40b330be8e..03728f9f191 100644
--- a/addons/website_version/static/src/xml/version_templates.xml
+++ b/addons/website_version/static/src/xml/version_templates.xml
@@ -56,11 +56,12 @@
           <div class="modal-dialog">
             <div class="modal-content">
               <div class="modal-header">
-                <h4 class="modal-title">Launch A/B tests</h4>
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
+                <h4 class="modal-title">Launch A/B Tests</h4>
               </div>
                 <div class="modal-body">
                     <t t-if="versions.length != 0 and config == 1">  
-                        <form id="productForm" class="form-horizontal" role="form">              
+                        <form id="productForm" class="form-horizontal" role="form">
                             <div class="form-group form-group">
                                 <label class="col-sm-3 control-label">Experiment Name</label>
                                 <div class="col-sm-8">
@@ -110,7 +111,54 @@
                     </t>
 
                     <t t-if= "config == 0">
-                        <form id="productForm" class="form-horizontal" role="form">              
+                        <div class="o_configure_ab">
+                            <p>Odoo uses Google Analytics to track the performances of an A/B testing experiment comparing several versions.</p>
+                        </div>
+                        <form id="productForm" class="form-horizontal" role="form"> 
+                            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+                              <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="headingOne">
+                                  <h4 class="panel-title">
+                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
+                                      To get your GA Key and your View ID
+                                      <span class="fa fa-info-circle" />
+                                    </a>
+                                  </h4>
+                                </div>
+                                <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" style="overflow: hidden">
+                                    <div class="panel-body">
+                                        <ul>
+                                            <li> Go to <a href='https://www.google.com/analytics/' target='_blank'>https://www.google.com/analytics/</a>
+                                            and connect you.
+                                                <br/><br/><img src=
+                                                '/website_version/static/src/img/GA/GA_login.png'
+                                                class='analytics_img_tuto'/>
+                                            </li>
+                                            <li>
+                                                Click on <b>"Admin"</b>.
+                                                <br/><br/><img src='/website_version/static/src/img/GA/GA_admin.png' class='analytics_img_tuto'/>
+                                            </li>
+                                            <li>
+                                                Click on <b>"Tracking Code"</b>.
+                                                <br/><br/><img src='/website_version/static/src/img/GA/GA_tracking_code.png' class='analytics_img_tuto'/>   
+                                            </li>
+                                            <li>
+                                                Copy the <b>"Tracking ID"</b> and paste it in the field Google Analytics key.
+                                                <br/><br/><img src='/website_version/static/src/img/GA/GA_tracking_id.png' class='analytics_img_tuto'/>   
+                                            </li>
+                                            <li>
+                                                Click on <b>"Admin"</b> and click on <b>"View Settings"</b>.
+                                                <br/><br/><img src='/website_version/static/src/img/GA/GA_view_settings.png' class='analytics_img_tuto'/>  
+                                            </li>
+                                            <li>
+                                                Copy the <b>"View ID"</b> and paste it in the field View ID.
+                                                <br/><br/><img src='/website_version/static/src/img/GA/GA_view_id.png' class='analytics_img_tuto'/>  
+                                            </li>
+                                        </ul> 
+                                    </div>
+                                </div>
+                              </div>
+                            </div>
                             <div class="form-group form-group">
                                 <label class="col-sm-3 control-label">GA Key</label>
                                 <div class="col-sm-8">
@@ -123,6 +171,59 @@
                                     <input type="text" class="form-control form-field-label o_view_id o_required_field"/>
                                 </div>
                             </div>
+                            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+                              <div class="panel panel-default">
+                                <div class="panel-heading" role="tab" id="headingOne">
+                                  <h4 class="panel-title">
+                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                                      To get your Client ID and your Client Secret, follow these steps
+                                      <span class="fa fa-info-circle" />
+                                    </a>
+                                  </h4>
+                                </div>
+                                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" style="overflow: hidden">
+                                    <div class="panel-body">
+                                        <ul>
+                                            <li> Connect on your google account and go to <a href='https://console.developers.google.com' target='_blank'>https://console.developers.google.com</a> </li>
+                                            <li>
+                                                Click on <b>"Create Project"</b> and enter a project name.
+                                                <br/><br/><img src='/website_version/static/src/img/GC/GC_create_project.png' 
+                                                class='analytics_img_tuto'/>
+                                                <br/><br/><img src='/website_version/static/src/img/GC/GC_new_project.png' 
+                                                class='analytics_img_tuto'/> 
+                                            </li>
+                                            <li> In the menu on left side, select the sub menu APIs (from menu APIs and auth) and activate <b>"Analytics API"</b> by clicking on button "OFF".
+                                                <br/> When it's done, check that the button of <b>"Calendar API"</b> is well in green and with text "ON"
+                                                <br/><br/><img src='/website_version/static/src/img/GC/GC_API.png' 
+                                                class='analytics_img_tuto'/>
+                                                <br/><br/><img src='/website_version/static/src/img/GC/GC_off_api.png' 
+                                                class='analytics_img_tuto'/>
+                                                <br/><br/><img src='/website_version/static/src/img/GC/GC_on_api.png' 
+                                                class='analytics_img_tuto'/>
+                                            </li> 
+                                            <li>
+                                                In the menu on left side, select the sub menu <b>'Credentials'</b> (from menu APIs and auth) and click on button <b>'Create New Client ID'</b>
+                                                <br/><br/><img src='/website_version/static/src/img/GC/GC_credentials.png' 
+                                                class='analytics_img_tuto'/>
+                                                <br/><br/><img src='/website_version/static/src/img/GC/GC_create_new_client_id.png' 
+                                                class='analytics_img_tuto'/>
+                                            </li>
+                                            <li> Fill in the Name of application and check that the platform is well on <b>'Web Application'</b>.<br/>
+                                                <br/> You should now configure the allowed pages on which you will be redirected. To do it, you need to complete the field <b>"Redirect RI"</b>
+                                                and set as value  (your own domain followed by <i>"/google_account/authentication"</i>) :
+                                                <br/> You can now click on <b>'Create Client ID'</b>
+                                                <br/><br/><img src='/website_version/static/src/img/GC/GC_client_id.png' 
+                                                class='analytics_img_tuto'/>
+                                            </li> 
+                                            <li>Once done, you will have the both informations (<b>Client ID</b> and <b>Client Secret</b>) that you need to insert in the 2 fields below !
+                                                <br/><br/><img src='/website_version/static/src/img/GC/GC_copy.png' 
+                                                class='analytics_img_tuto'/>
+                                            </li>
+                                        </ul>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
                             <div class="form-group form-group">
                                 <label class="col-sm-3 control-label">Client ID</label>
                                 <div class="col-sm-8">
@@ -136,13 +237,12 @@
                                 </div>
                             </div>
                         </form>
-                        <div class="o_configure_ab">
-                            <p>You must configure your account.</p>
-                            <p>To configure your account, you must have a google analytics account.</p>
-                        </div>
                     </t>
 
                     <t t-if= "config == 2">
+                        <div class="o_configure_ab">
+                            <p>Odoo uses Google Analytics to track the performances of an A/B testing experiment comparing several versions.</p>
+                        </div>
                         <form id="productForm" class="form-horizontal" role="form">              
                             <div class="form-group form-group">
                                 <label class="col-sm-3 control-label">GA Key</label>
@@ -157,10 +257,6 @@
                                 </div>
                             </div>
                         </form>
-                        <div class="o_configure_ab">
-                            <p>You must configure your account.</p>
-                            <p>To configure your account, you must have a google analytics account.</p>
-                        </div>
                     </t>
 
                 </div>
@@ -199,6 +295,7 @@
           <div class="modal-dialog">
             <div class="modal-content">
               <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
                 <h4 class="modal-title"><t t-esc="message"></t></h4>
               </div>  
               <div class="modal-footer">
@@ -213,6 +310,7 @@
           <div class="modal-dialog">
             <div class="modal-content">
               <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
                 <h4 class="modal-title"><t t-esc="message"></t></h4>
               </div>  
                 <div class="modal-body">
@@ -231,7 +329,8 @@
           <div class="modal-dialog">
             <div class="modal-content">
               <div class="modal-header">
-                <h4 class="modal-title">Diff between Master and <t t-esc="version_name"></t></h4>
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
+                <h4 class="modal-title">Version: <t t-esc="version_name"></t></h4>
               </div>  
                 <div class="modal-body">
                     <t t-if="list.length != 0"> 
@@ -240,6 +339,9 @@
                                 <li><a t-att-href="item.url"> <b><t t-esc="item.name"></t></b> </a></li>
                             </t>
                         </ul>
+                        <p>List of pages that have been modified in version <t t-esc="version_name"></t> 
+                            compared to master. If you publish this version, all pages will be updated at once.
+                        </p>
                     </t>
                     <t t-if="list.length == 0"> 
                         <p>There is no difference with Master</p>
@@ -247,7 +349,7 @@
                 </div>
 
               <div class="modal-footer">
-                <button type="button" class="btn btn-primary o_confirm" data-dismiss="modal">Ok</button>
+                <button type="button" class="btn btn-primary o_confirm" data-dismiss="modal">Close</button>
               </div>
             </div><!-- /.modal-content -->
           </div><!-- /.modal-dialog -->
@@ -258,6 +360,7 @@
           <div class="modal-dialog">
             <div class="modal-content">
               <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
                 <h4 class="modal-title"><t t-esc="message"></t></h4>
               </div>  
               <div class="modal-footer">
@@ -269,19 +372,38 @@
           </div><!-- /.modal-dialog -->
         </div><!-- /.modal -->
     </t>
+
+    <t t-name="website_version.publish">
+        <div class="modal fade">
+          <div class="modal-dialog">
+            <div class="modal-content">
+              <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
+                <h4 class="modal-title"><t t-esc="message"></t></h4>
+              </div>  
+              <div class="modal-footer">
+                <button type="button" class="btn btn-primary o_confirm" data-dismiss="modal">Publish</button>
+                or
+                <a href="#" class="btn btn-link btn-xs cancel" data-dismiss="modal">Cancel</a>
+              </div>
+            </div><!-- /.modal-content -->
+          </div><!-- /.modal-dialog -->
+        </div><!-- /.modal -->
+    </t>
     <t t-name="website_version.publish_message">
         <div class="modal fade">
           <div class="modal-dialog">
             <div class="modal-content">
               <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
                 <h4 class="modal-title"><t t-esc="message"></t></h4>
               </div>
               <div class="modal-body">
-                <p>When you publish a version, you erase some views in master. If you want to save the views that will be erased, you can save these views in a new version. Here is the list of master views which will be erased:</p>
+                <p>By publishing this version, you will overwrite the following master pages:</p>
                 <t t-if="list.length != 0"> 
                     <ul>
                         <t t-foreach="list" t-as="item">      
-                            <li><t t-esc="item"></t> </li>            
+                            <li><t t-esc="item.name"></t> </li>            
                         </t>
                     </ul>
                 </t>
@@ -293,13 +415,13 @@
                     <div class="radio">
                         <label>
                             <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="checked"/>
-                            Don't save Master
+                            Publish version
                         </label>
                     </div>              
                     <div class="radio">
                         <label>
                           <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" class="o_check"/>
-                          Save Master
+                          Publish and copy the current version
                           <input type="text" class="form-control o_name o_required_field" style="display: none;"/>
                         </label>
                     </div>
@@ -312,5 +434,36 @@
             </div><!-- /.modal-content -->
           </div><!-- /.modal-dialog -->
         </div><!-- /.modal -->
-    </t> 
+    </t>
+    <t t-name="website_version.new_version">
+        <div class="modal fade">
+          <div class="modal-dialog">
+            <div class="modal-content">
+              <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
+                <h4 class="modal-title">New Version</h4>
+              </div>
+              <div class="modal-body">
+                <p class="text-muted">
+                    A version allows to modify several pages, without publishing the changes directly.
+                    You can also launch A/B tests to analyse the performance of different versions.
+                </p>
+                <form id="productForm" class="form-horizontal" role="form">
+                    <div class="form-group form-group">
+                        <label class="col-sm-3 control-label">New Version</label>
+                        <div class="col-sm-8">
+                            <input type="text" class="form-control form-field-label o_version_name o_required_field" t-attf-value="{{default_name}}"/>
+                        </div>
+                    </div>             
+
+                </form>
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-primary o_create">Create</button>
+                <a href="#" class="btn btn-link btn-xs" data-dismiss="modal">Cancel</a>
+              </div>
+            </div><!-- /.modal-content -->
+          </div><!-- /.modal-dialog -->
+        </div><!-- /.modal -->
+    </t>
 </templates>
\ No newline at end of file