From b4cfe36b05ebcc11bb49eaf1e72277ec8ec49954 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Fri, 12 Aug 2016 15:34:00 +0200
Subject: [PATCH] [IMP] *: replace snippet sections menu by a title *
 web_editor, website, mass_mailing

This menu allowed to scroll to the snippets sections by clicking on
their corresponding icons. It was useless as the sections are not
taking a lot of height. This also appeared buggy as clicking on the
last icon highlighted only the second one as this second one was still
the first section visible on the screen when the last section was
fully visible.

This also added fours buttons to the interface which contains already a
lot of them. Now this is replaced by a title "Add blocks" which makes
the editor cleaner and also improved the performance to enter the edit
mode.
---
 addons/mass_mailing/views/snippets_themes.xml | 49 ++-----------------
 .../static/src/js/snippets.editor.js          | 34 -------------
 .../static/src/less/web_editor.ui.less        | 38 ++------------
 addons/web_editor/views/snippets.xml          | 10 +---
 addons/website/views/snippets.xml             | 25 ----------
 5 files changed, 10 insertions(+), 146 deletions(-)

diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml
index c718d5d2955..6ffac3a2648 100644
--- a/addons/mass_mailing/views/snippets_themes.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -1,45 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 <template id="email_designer_snippets" inherit_id="web_editor.snippets" primary="True">
-    <xpath expr="//ul[@id='snippets_menu']" position="replace">
-        <ul id="snippets_menu">
-            <li class="active">
-                <a href="#email_designer_default_headers" class="scroll-link">
-                    <span class="fa-stack fa-lg">
-                        <i class="fa fa-square fa-stack-2x fa-inverse"></i>
-                        <i class="fa fa-align-justify fa-stack-1x" style="margin-top: -0.15em; height: 0.9em; display: inline-block; overflow: hidden;"></i>
-                        <i class="fa fa-arrow-up fa-stack-1x text-muted" style="margin-top: 0.25em; display: inline-block; font-size: 0.6em;"></i>
-                    </span>
-                </a>
-            </li>
-            <li>
-                <a href="#email_designer_default_body" class="scroll-link">
-                    <span class="fa-stack fa-lg">
-                        <i class="fa fa-square fa-stack-2x fa-inverse"></i>
-                        <i class="fa fa-align-left fa-stack-1x" style="margin-top: 0.05em;"></i>
-                    </span>
-                </a>
-            </li>
-            <li>
-                <a href="#email_designer_default_extra" class="scroll-link">
-                    <span class="fa-stack fa-lg">
-                        <i class="fa fa-square fa-stack-2x fa-inverse"></i>
-                        <i class="fa fa-align-left fa-stack-1x" style="display: inline-block; height: 0.93em; margin-top: 0.3em; overflow: hidden;"></i>
-                    </span>
-                </a>
-            </li>
-            <li>
-                <a href="#email_designer_default_footer" class="scroll-link">
-                    <span class="fa-stack fa-lg">
-                        <i class="fa fa-square fa-stack-2x fa-inverse"></i>
-                        <i class="fa fa-align-justify fa-stack-1x" style=" margin-top: 0.7em; height: 0.9em; display: inline-block; overflow: hidden;"></i>
-                        <i class="fa fa-arrow-down fa-stack-1x text-muted" style="display: inline-block; font-size: 0.6em; margin-top: -0.15em;"></i>
-                    </span>
-                </a>
-            </li>
-        </ul>
-    </xpath>
-
     <xpath expr="//div[@id='o_scroll']" position="replace">
         <div id="o_scroll">
             <div id="email_designer_default_headers" class="o_panel">
@@ -311,7 +272,7 @@
                                             <span class="fa fa-check fa-3x"></span>
                                             &amp;nbsp;
                                             <p style="margin:0;font-size:24px;font-weight:bold">Step 1</p>
-                                            <p style="margin:0">    
+                                            <p style="margin:0">
                                                 We need you to update your account information. If there is ever a problem with your account, this information will make it easier for you to log back in.
                                             </p>
                                         </td>
@@ -484,10 +445,10 @@
                                             <td valign="middle" align="right" style="font-size:12px;padding:20px;text-align:center">
                                                 &amp;nbsp;
                                                 <t t-if="website">
-                                                    <a style="color:inherit" href="/page/contactus">Contact Us</a> | 
-                                                    <a style="color:inherit" t-att-href="(website.social_facebook) or '#'">Facebook</a> | 
-                                                    <a style="color:inherit" t-att-href="(website.social_twitter) or '#'">Twitter</a> | 
-                                                    <a style="color:inherit" href="#">Support</a> | 
+                                                    <a style="color:inherit" href="/page/contactus">Contact Us</a> |
+                                                    <a style="color:inherit" t-att-href="(website.social_facebook) or '#'">Facebook</a> |
+                                                    <a style="color:inherit" t-att-href="(website.social_twitter) or '#'">Twitter</a> |
+                                                    <a style="color:inherit" href="#">Support</a> |
                                                 </t>
                                                 <a href="/unsubscribe_from_list" style="color:inherit">Unsubscribe</a>
                                                 &amp;nbsp;
diff --git a/addons/web_editor/static/src/js/snippets.editor.js b/addons/web_editor/static/src/js/snippets.editor.js
index 3e01f825b48..1549db18689 100644
--- a/addons/web_editor/static/src/js/snippets.editor.js
+++ b/addons/web_editor/static/src/js/snippets.editor.js
@@ -158,23 +158,12 @@ data.Class = Widget.extend({
     compute_snippet_templates: function (html) {
         var self = this;
         var $html = $(html);
-        var $ul = $html.siblings("ul");
         var $scroll = $html.siblings("#o_scroll");
 
         if (!$scroll.length) {
             throw new Error("Wrong snippets xml definition");
         }
 
-        $ul.children().tooltip({
-            delay: { "show": 500, "hide": 100 },
-            container: 'body',
-            title: function () {
-                return (navigator.appVersion.indexOf('Mac') > -1 ? 'CMD' : 'CTRL')+'+SHIFT+'+($(this).index()+1);
-            },
-            trigger: 'hover',
-            placement: 'top'
-        }).on('click', function () {$(this).tooltip('hide');});
-
         // t-snippet
         $html.find('[data-oe-type="snippet"]').each(function () {
             $(this).children().attr('data-oe-type', "snippet").attr('data-oe-thumbnail', $(this).data('oe-thumbnail'));
@@ -296,29 +285,6 @@ data.Class = Widget.extend({
 
         this.$el.html($html);
 
-        // animate for list of snippet blocks
-        this.$el.on('click', '.scroll-link', function (event) {
-            event.preventDefault();
-            var targetOffset =  $($(this).attr("href")).position().top - $ul.outerHeight() + $scroll[0].scrollTop;
-            $scroll.animate({'scrollTop': targetOffset}, 750);
-        });
-        $scroll.on('scroll', function () {
-            var middle = $scroll.height()/4;
-            var $li = $ul.find("a").parent().removeClass('active');
-            var last;
-            for (var k=0; k<$li.length; k++) {
-                var li = $($li[k]);
-                if (!li.data('target')) {
-                    li.data('target', $($("a", li).attr("href")));
-                }
-                if (li.data('target').position().top > middle) {
-                    break;
-                }
-                last = $li[k];
-            }
-            $(last).addClass("active");
-        });
-
         self.make_snippet_draggable(self.$snippets);
         this.associate_snippet_names(this.$snippets);
     },
diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less
index f3b91123d78..caea484cbd5 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.less
@@ -87,43 +87,13 @@ html[lang] > body.editor_enable{
     #snippets_menu {
         .o-flex(0, 0, auto);
         height: @odoo-navbar-height;
+        line-height: @odoo-navbar-height;
         margin: 0;
         padding: 0;
         background: @o-we-color-dark;
-        list-style-type: none;
-        li {
-            display: block;
-            float: left;
-            width: 25%;
-            height: 100%;
-
-            a {
-                display: block;
-                width: 100%;
-                height: 100%;
-                .o-flex-display();
-                .o-align-items(center);
-                .o-justify-content(center);
-                text-decoration: none!important;
-
-                i {
-                    font-size: 20px;
-                    color: #999999;
-                    + i {
-                        color: white;
-                    }
-                }
-            }
-
-            &.active, &:hover {
-                a i {
-                    color: white;
-                    + i {
-                        color: @odoo-brand-primary;
-                    }
-                }
-            }
-        }
+        text-align: center;
+        font-size: 20px;
+        color: white;
     }
 
     #o_scroll {
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index f177f1149fd..096ea58a2ce 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -1,15 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 <template id="snippets">
-    <ul id="snippets_menu">
-        <li class="active">
-            <a href="#snippet_structure" class="scroll-link">
-                <span class="fa-stack fa-lg">
-                    <i class="fa fa-square fa-stack-2x fa-inverse"></i>
-                </span>
-            </a>
-        </li>
-    </ul>
+    <h2 id="snippets_menu">Add blocks</h2>
 
     <div id="o_scroll">
         <div id="snippet_structure" class="o_panel">
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index e987acad8cb..664faa1a716 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -623,31 +623,6 @@
 
 <!-- Snippets menu -->
 <template id="snippets" inherit_id="web_editor.snippets" primary="True">
-    <xpath expr="//ul[@id='snippets_menu']" position="replace">
-        <ul id="snippets_menu">
-            <li class="active structure">
-                <a href="#snippet_structure" class="scroll-link">
-                    <i class="fa fa-th-large"/>
-                </a>
-            </li>
-            <li class="content">
-                <a href="#snippet_content" class="scroll-link">
-                    <i class="fa fa-indent"/>
-                </a>
-            </li>
-            <li class="feature">
-                <a href="#snippet_feature" class="scroll-link">
-                    <i class="fa fa-check-square"/>
-                </a>
-            </li>
-            <li class="effect">
-                <a href="#snippet_effect" class="scroll-link">
-                    <i class="fa fa-magic icon-fix"/>
-                </a>
-            </li>
-        </ul>
-    </xpath>
-
     <xpath expr="//div[@id='o_scroll']" position="replace">
         <div id="o_scroll">
             <div id="snippet_structure" class="o_panel">