[REF] website,web_editor: complete restyling

5 files changed, 139 insertions, 17 deletions

diff --git a/addons/website/static/src/js/website.contentMenu.js b/addons/website/static/src/js/website.contentMenu.js
index 54a7e041538..3cbcaefbb14 100644
--- a/addons/website/static/src/js/website.contentMenu.js
+++ b/addons/website/static/src/js/website.contentMenu.js
@@ -22,6 +22,24 @@ var TopBarContent = Widget.extend({
             var $content_item = $(this);
             self[$content_item.data('action')]();
         });
+
+        // Build 'ADD PAGE' modal
+        var $cont    = $('#website_addPage_modal .website_addPage_ul');
+        var $defIcon = $('<i class="fa fa-cube"></i>')
+
+        $("#website_addPage_list").nextAll().each(function(){
+            var $clone = $(this).clone().appendTo($cont).attr("data-dismiss","modal").addClass('animated')
+            var $a     = $clone.find('a')
+            var text   = $a.text()
+
+            if($clone.find('i').length < 1){ $defIcon.clone().prependTo($a)}
+            if($clone.find('p').length < 1){ $a.html($a.html().replace($a.text(),'')).append('<p>' + text + '</p>')}
+
+            $a.on('click', function(){
+                var $content_item = $(this);
+                self[$content_item.data('action')]();
+            })
+        })
         return this._super();
     },
     edit_menu: function() {
@@ -63,12 +81,16 @@ var TopBarContent = Widget.extend({
 
                 var $add = $(
                     '<div class="form-group mb0">'+
-                        '<label class="col-sm-offset-3 col-sm-9 text-left">'+
-                        '    <input type="checkbox" checked="checked" required="required"/> '+
-                        '</label>'+
+                        '<span class="col-sm-offset-3 col-sm-9 text-left">'+
+                            '<label class="switch checked" for="switch_addTo_menu">' +
+                              '<input type="checkbox" id="switch_addTo_menu" class="switch_input" checked="checked" />' +
+                              '<span class="switch_track"></span>' +
+                            '</label>' +
+                        '</span>'+
                     '</div>');
-                $add.find('label').append(_t("Add page in menu"));
+                $add.find('label').after(_t("Add page in menu"));
                 $group.after($add);
+                console.log(website)
             }
         }).then(function (val, field, $dialog) {
             if (val) {
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 9dca29619b7..a670f53bef1 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -38,16 +38,63 @@ website.TopBar.include({
             .attr("data-oe-placeholder", _t("Press The Top-Left Edit Button"));
 
         if (location.search.indexOf("enable_editor") >= 0 && $('html').attr('lang') === "en_US") {
-            this.$el.hide();
+            this.$el.addClass('editing_mode');
         }
 
+        self.init_components()
+
+        self.resize()
+        $(window).on("resize", function(){
+            self.resize()
+        })
+
         return this._super();
     },
+    init_components: function(){
+        $(".switch").each(function(){
+            var $el = $(this)
+            $el.on('click', function(){
+                var $i = $el.find('.switch_input')
+                $el.toggleClass('checked')
+                if($i.prop("checked")){
+                    $i.prop("checked", false);
+                } else {
+                    $i.prop("checked", true);
+                }
+                return false;
+            })
+        });
+    },
     edit: function () {
         this.$('button[data-action=edit]').prop('disabled', true);
-        this.$el.hide();
+        this.$el.addClass('editing_mode');
         editor.editor_bar = new editor.Class(this);
         editor.editor_bar.prependTo(document.body);
+    },
+    resize: function() {
+        var wW = $(window).width(),
+            $sys = $('#oe_systray'),
+            $nav = $('#website_main_menu_navbar');
+
+        // Adapt dropdown-menu orientation to fit screen size
+        $sys.find('> li.wb_dropdown, >li.dropdown').each(function(){
+          var $el = $(this),
+           offset = $el.offset(),
+            width = $el.width();
+          var centerX = offset.left + width / 2;
+          if(centerX > wW/2){
+            $el.addClass('right')
+          } else {
+            $el.removeClass('right')
+          }
+        })
+        // Resize oe_systray
+        var totalWidth = null;
+        $nav.find('>*').not($sys).each(function(index) {
+            totalWidth += parseInt($(this).outerWidth() , 10);
+        });
+        $sys.width((wW - totalWidth)-50).addClass('ready')
+
     }
 });
 
@@ -79,8 +126,18 @@ website.TopBarCustomize = Widget.extend({
                     if (item.header) {
                         self.$menu.append('<li class="dropdown-header">' + item.name + '</li>');
                     } else {
-                        self.$menu.append(_.str.sprintf('<li role="presentation"><a href="#" data-view-id="%s" role="menuitem"><strong class="fa fa%s-square-o"></strong> %s</a></li>',
-                            item.id, item.active ? '-check' : '', item.name));
+                         self.$menu.append(_.str.sprintf(
+                                                '<li role="presentation">'+
+                                                    '<a href="#" data-view-id="%s" role="menuitem">' +
+                                                        '<span class="toggle_container">' +
+                                                            '<label class="switch %s" for="switch-%s">' +
+                                                                '<input type="checkbox" id="switch-%s" class="switch_input" checked="%s">' +
+                                                                '<span class="switch_track"></span>' +
+                                                            '</label>' +
+                                                        '</span> %s'+
+                                                    '</a>' +
+                                                '</li>',
+                            item.id, item.active ? 'checked' : '', item.id, item.id, item.active ? 'true' : 'false', item.name));
                     }
                 });
                 self.loaded = true;
@@ -89,6 +146,7 @@ website.TopBarCustomize = Widget.extend({
     },
     do_customize: function (event) {
         var view_id = $(event.currentTarget).data('view-id');
+        $('#website_loading').addClass('active')
         return ajax.jsonRpc('/web/dataset/call_kw', 'call', {
             model: 'ir.ui.view',
             method: 'toggle',
@@ -117,7 +175,7 @@ widget.LinkDialog.include({
         var self = this;
         var href = this.data.url;
         var last;
-        
+
         this.$('#link-page').select2({
             minimumInputLength: 1,
             placeholder: _t("New or existing page"),
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 7c2ad6cc48c..e26ba130f52 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -177,7 +177,7 @@ ajax.loadXML('/web/static/src/xml/base_common.xml', qweb);
  
 base.ready().then(function () {
     data.topBar = new TopBar();
-    data.topBar.attachTo($("#oe_main_menu_navbar"));
+    data.topBar.attachTo($("#website_main_menu_navbar"));
 });
 
 /**
diff --git a/addons/website/static/src/js/website.snippets.animation.js b/addons/website/static/src/js/website.snippets.animation.js
index fa61feb7ec9..15311cb8dc8 100644
--- a/addons/website/static/src/js/website.snippets.animation.js
+++ b/addons/website/static/src/js/website.snippets.animation.js
@@ -26,6 +26,48 @@ function load_called_template () {
     }
 }
 
+
+// Ripple animation
+animation.registry.ripple = animation.Class.extend({
+  selector: ".wb_dropdown-toggle, #oe_systray .dropdown-toggle",
+
+  start: function(){
+
+    var timeout,
+        btn = this.$target;
+
+    btn
+    .css({ position: 'relative', overflow: 'hidden'})
+    .bind('mousedown', function(e) {
+      var ripple;
+      if (btn.find('.ripple').length === 0) {
+        ripple = $('<span class="ripple"/>');
+        btn.prepend(ripple);
+      } else {
+        ripple = btn.find('.ripple');
+      }
+      ripple.removeClass('animate');
+
+      if (!ripple.height() && !ripple.width()) {
+        var diameter = Math.max(btn.outerWidth(), btn.outerHeight());
+        ripple.css({ height: diameter, width: diameter });
+      }
+
+      var x = e.pageX - btn.offset().left - ripple.width() / 2;
+      var y = e.pageY - btn.offset().top - ripple.height() / 2;
+
+      ripple
+        .css({ top: y + 'px',left: x + 'px'})
+        .addClass('animate');
+
+      setTimeout(function() {
+        //ripple.removeClass('animate');
+      }, 700);
+    });
+  },
+}),
+
+
 /*-------------------------------------------------------------------------*/
 
 base.ready().then(function () {
@@ -150,10 +192,10 @@ animation.registry.ul = animation.Class.extend({
 });
 
 /* -------------------------------------------------------------------------
-Gallery Animation  
+Gallery Animation
 
-This ads a Modal window containing a slider when an image is clicked 
-inside a gallery 
+This ads a Modal window containing a slider when an image is clicked
+inside a gallery
 -------------------------------------------------------------------------*/
 animation.registry.gallery = animation.Class.extend({
     selector: ".o_gallery:not(.o_slideshow)",
@@ -165,7 +207,7 @@ animation.registry.gallery = animation.Class.extend({
         var self = this;
         var $cur = $(event.currentTarget);
         var edition_mode = ($cur.closest("[contenteditable='true']").size() !== 0);
-        
+
         // show it only if not in edition mode
         if (!edition_mode) {
             var urls = [],
@@ -213,7 +255,7 @@ animation.registry.gallery = animation.Class.extend({
 
             this.carousel = new animation.registry.gallery_slider($modal.find(".carousel").carousel());
         }
-    } // click_handler  
+    } // click_handler
 });
 animation.registry.gallery_slider = animation.Class.extend({
     selector: ".o_slideshow",
diff --git a/addons/website/static/src/js/website.translator.js b/addons/website/static/src/js/website.translator.js
index fe720622431..1c5d0252dbb 100644
--- a/addons/website/static/src/js/website.translator.js
+++ b/addons/website/static/src/js/website.translator.js
@@ -61,7 +61,7 @@ var Translate = translate.Class.include({
         this._super();
     },
     edit: function () {
-        $("#oe_main_menu_navbar").hide();
+        $("#website_main_menu_navbar").hide();
         if (!localStorage[nodialog]) {
             var dialog = new TranslatorDialog();
             dialog.appendTo($(document.body));
@@ -77,7 +77,7 @@ var Translate = translate.Class.include({
         return this._super();
     },
     cancel: function () {
-        $("#oe_main_menu_navbar").show();
+        $("#website_main_menu_navbar").show();
         return this._super();
     }
 });