[IMP] website, website_sale, crm, web_planner : add planner for website modules

This commit impact crm, website, website_sale and web_planner modules because it
- add planner for website and website_sale
- improve planner notebook by setting texterea and input size to 100% and using col-md-* class
- split js code into common part (used in backend and frontend) and backend part (only for backend)
- adapt some tour, since every page will have the planner modal in its DOM, the tour selectors msut be more accurate
- introduce some style fixes and adaptations
- ...

1 files changed, 637 insertions, 0 deletions

diff --git a/addons/web_planner/static/src/less/web_planner_common.less b/addons/web_planner/static/src/less/web_planner_common.less
new file mode 100644
index 00000000000..eaa5fd3a53a
--- /dev/null
+++ b/addons/web_planner/static/src/less/web_planner_common.less
@@ -0,0 +1,637 @@
+
+/**************** FONTS ****************/
+@font-face {
+    font-family: 'Simple-Line-Icons';
+    src:url('/web_planner/static/src/fonts/Simple-Line-Icons.eot');
+    src:url('/web_planner/static/src/fonts/Simple-Line-Icons.eot?#iefix') format('embedded-opentype'),
+        url('/web_planner/static/src/fonts/Simple-Line-Icons.woff') format('woff'),
+        url('/web_planner/static/src/fonts/Simple-Line-Icons.ttf') format('truetype'),
+        url('/web_planner/static/src/fonts/Simple-Line-Icons.svg#Simple-Line-Icons') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+/**************** ICON ****************/
+// use data attributes for inserting  icons
+// http://www.issme.net/india/assets/plugins/line-icons/
+[data-icon]:before {
+    font-family: 'Simple-Line-Icons';
+    content: attr(data-icon);
+    speak: none;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+/************** ANIMATIONS *************/
+// 'marked' effects
+@keyframes markAnim {
+    0% {
+        opacity: 0;
+        transform: scaleX(0.50) scaleY(0.50);
+    }
+    30% {
+        opacity: 1;
+        transform: scaleX(1.00) scaleY(1.00);
+    }
+    100% {
+        opacity: 0;
+        transform: scaleX(1.00) scaleY(1.00);
+    }
+}
+
+@-moz-keyframes markAnim {
+    0% {
+        opacity: 0;
+        -moz-transform: scaleX(0.50) scaleY(0.50);
+    }
+    30% {
+        opacity: 1;
+        -moz-transform: scaleX(1.00) scaleY(1.00);
+    }
+    100% {
+        opacity: 0;
+        -moz-transform: scaleX(1.00) scaleY(1.00);
+    }
+}
+
+@-webkit-keyframes markAnim {
+    0% {
+        opacity: 0;
+        -webkit-transform: scaleX(0.50) scaleY(0.50);
+    }
+    30% {
+        opacity: 1;
+        -webkit-transform: scaleX(1.00) scaleY(1.00);
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: scaleX(1.00) scaleY(1.00);
+    }
+}
+
+@-o-keyframes markAnim {
+    0% {
+        opacity: 0;
+        -o-transform: scaleX(0.50) scaleY(0.50);
+    }
+    30% {
+        opacity: 1;
+        -o-transform: scaleX(1.00) scaleY(1.00);
+    }
+    100% {
+        opacity: 0;
+        -o-transform: scaleX(1.00) scaleY(1.00);
+    }
+}
+
+@-ms-keyframes markAnim {
+    0% {
+        opacity: 0;
+        -ms-transform: scaleX(0.50) scaleY(0.50);
+    }
+    30% {
+        opacity: 1;
+        -ms-transform: scaleX(1.00) scaleY(1.00);
+    }
+    100% {
+        opacity: 0;
+        -ms-transform: scaleX(1.00) scaleY(1.00);
+    }
+}
+
+// 'bounce' effect
+@-webkit-keyframes bounceIn {
+  0%, 20%, 40%, 60%, 80%, 100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+            transform: scale3d(.3, .3, .3);
+  }
+  20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+            transform: scale3d(1.1, 1.1, 1.1);
+  }
+  40% {
+    -webkit-transform: scale3d(.9, .9, .9);
+            transform: scale3d(.9, .9, .9);
+  }
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+            transform: scale3d(1.03, 1.03, 1.03);
+  }
+  80% {
+    -webkit-transform: scale3d(.97, .97, .97);
+            transform: scale3d(.97, .97, .97);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes bounceIn {
+  0%, 20%, 40%, 60%, 80%, 100% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(.3, .3, .3);
+            transform: scale3d(.3, .3, .3);
+  }
+  20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+            transform: scale3d(1.1, 1.1, 1.1);
+  }
+  40% {
+    -webkit-transform: scale3d(.9, .9, .9);
+            transform: scale3d(.9, .9, .9);
+  }
+  60% {
+    opacity: 1;
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+            transform: scale3d(1.03, 1.03, 1.03);
+  }
+  80% {
+    -webkit-transform: scale3d(.97, .97, .97);
+            transform: scale3d(.97, .97, .97);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1);
+            transform: scale3d(1, 1, 1);
+  }
+}
+
+/**************** MENU PROGRESS BAR ****************/
+#oe_main_menu_navbar.navbar {
+    .o_planner_systray {
+        width: 100px;
+        height: 13px;
+        margin: 10px 0 0 0;
+        div.o_planner_progress {
+            cursor: pointer;
+        }
+        .o_planner_progress {
+            div.progress {
+                height: 13px;
+            }
+        }
+    }
+}
+
+/**************** PLANNER MODAL ****************/
+#PlannerModal {
+
+    font-family: "Lato", serif;
+
+    a {
+        color: #2E917D
+    }
+    .btn-default {
+        background-color: transparent;
+        color: #7C7C7C;
+        line-height: 19px;
+    }
+    .btn-default:hover {
+        color: #333;
+    }
+    .btn-primary {
+        background: #21b799;
+        border-color: #26A38A;
+        color: white;
+    }
+    .btn-primary:hover {
+        background-color: #2E917D;
+        color: white;
+    }
+    .odoo_purple, a.btn.odoo_purple {
+        background-color: #A24689;
+        color: white;
+    }
+    .odoo_purple.btn:hover{
+        background: #a24689;
+        color: #fff;
+    }
+
+    .o_planner_page{
+        display : none;
+    }
+    .o_planner_dialog {
+        width: 85%;
+        max-width: 1024px;
+        //overflow: hidden;
+        margin-left: auto;
+        margin-right: auto;
+
+        // button close
+        button.close {
+            line-height: 30px;
+            color: rgba(51, 51, 51, 0.54);
+            position: absolute;
+            right: 15px;
+            z-index:9999;
+        }
+        button.close:hover {
+            color:#222;
+        }
+
+        // modal core
+        .modal-content {
+            background: #f3f3f3;
+        }
+        .modal-body {
+            overflow-x: hidden;
+            max-height: inherit;
+            padding: 0;
+        }
+        .row.o_planner {
+            padding: 0 15px;
+        }
+        .o_planner_footer {
+            padding: 0;
+            height: auto;
+            overflow-y: visible;
+            overflow-x: initial;
+            display: block;
+            background: transparent;
+            position: fixed;
+            z-index: 99;
+            right: 0;
+            bottom: 0;
+            .shadow {
+                background: url("/web_planner/static/src/img/shadow.png") center center repeat-x;
+                height: 12px;
+                width: 100%;
+                display: block;
+                border-bottom: 1px solid #E5E5E5;
+                opacity: 0.3;
+            }
+            > div {
+                padding: 1em 15px;
+                background: #f7f7f7;
+                min-height: 60px;
+            }
+            .mark_as_done span{
+                font-family: Lato,serif;
+            }
+            // mark/uncheck button animation
+            button.fa-check-square-o {
+                left: 5em;
+                font-size: 2em;
+                border: none;
+                &:focus {outline:none}
+                &:hover:before{
+                    content: "\f096";
+                    color: #888;
+                    position: absolute;
+                    margin-left: 2px;
+                }
+                &:hover i:before{
+                    content: "\f00c";
+                    color: #CACACA;
+                }
+                span {display: none;}
+            }
+            button.fa-check-square-o:after {
+                color: #7C7C7C;
+                position: absolute;
+                font-size: .5em;
+                opacity: 0;
+                -webkit-transition: all 0.3s ease-in-out;
+                -moz-transition:    all 0.3s ease-in-out;
+                -ms-transition:     all 0.3s ease-in-out;
+                -o-transition:      all 0.3s ease-in-out;
+            }
+            button.fa-check-square-o:hover:after {
+                opacity: 1;
+                -webkit-transition: all 0.3s ease-in-out;
+                -moz-transition:    all 0.3s ease-in-out;
+                -ms-transition:     all 0.3s ease-in-out;
+                -o-transition:      all 0.3s ease-in-out;
+            }
+            .btn-next i {
+                margin-left: 10px;
+            }
+            .span-next {
+                position: absolute;
+                right: 9em;
+                top: 0.8em;
+                opacity: 0;
+                height: 1.3em;
+                font-size: 1em;
+                display: block;
+                -webkit-transition: all 0.3s ease-in-out;
+                -moz-transition: all 0.3s ease-in-out;
+                -ms-transition: all 0.3s ease-in-out;
+                -o-transition: all 0.3s ease-in-out;
+                transition: all 0.3s ease-in-out;
+            }
+            .next-block:hover .span-next {
+                right: 9.6em;
+                opacity: 1;
+            }
+        }
+        // PROGRESS
+        .o_planner_progress_container {
+            padding: 0;
+            .o_planner_progress_col {
+                border-right: 1px solid #E5E5E5;
+                background: #f7f7f7;
+                padding: 10px 12px 0 12px;
+                i.fa{
+                    font-size: 1.7em;
+                    padding-left: 0;
+                    margin-right: 0.2em;
+                    margin-top: 0.1em;
+                    color: #929292;
+                }
+                .o_planner_progress_counter {
+                    padding: 6px 0 0 8px;
+                    font-weight: bold;
+                    color: #727272;
+                }
+                .progress {
+                    background-color: #C4C4C4;
+                    height: 30px;
+                    padding: 3px;
+                }
+                .progress-bar {
+                    background: #A24689;
+                    border-radius: 4px;
+                    height: 95%;
+                    box-shadow: 0 1px 0 #7A3067;
+                }
+            }
+        }
+        // MARKED ANIMATION
+        .o_planner_page.marked:after {
+            position: absolute;
+            left: 0;
+            top: 0;
+            font-size: 20em;
+            font-family: "FontAwesome";
+            content: "\f00c";
+            color: #21b799;
+            vertical-align: middle;
+            padding: 0.3em 0.7em;
+            animation: markAnim ease-in-out 1s;
+            animation-iteration-count: 1;
+            transform-origin: 50% 50%;
+            animation-fill-mode:forwards; /*when the spec is finished*/
+            -webkit-animation: markAnim ease-in-out 1s;
+            -webkit-animation-iteration-count: 1;
+            -webkit-transform-origin: 50% 50%;
+            -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
+            -moz-animation: markAnim ease-in-out 1s;
+            -moz-animation-iteration-count: 1;
+            -moz-transform-origin: 50% 50%;
+            -moz-animation-fill-mode:forwards; /*FF 5+*/
+            -o-animation: markAnim ease-in-out 1s;
+            -o-animation-iteration-count: 1;
+            -o-transform-origin: 50% 50%;
+            -o-animation-fill-mode:forwards; /*Not implemented yet*/
+            -ms-animation: markAnim ease-in-out 1s;
+            -ms-animation-iteration-count: 1;
+            -ms-transform-origin: 50% 50%;
+            -ms-animation-fill-mode:forwards; /*IE 10+*/
+        }
+        // MENU MOBILE
+        .dropdown.mobile {
+            padding: 10px 12px 0 0px;
+            .dropdown-menu{
+                height: 250px;
+                overflow: auto;
+            }
+            .btn {
+                text-align: justify;
+            }
+            .dropdown-menu a {
+                color: #333;
+                padding: 3px;
+            }
+            .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
+                background-color: #F3F3F3;
+            }
+            .dropdown-menu h4 {
+                padding: 10px 15px 0;
+                border-top: 1px solid #EAEAEA;
+            }
+            .fa {
+                color: #21b799;
+                margin-right: 5px;
+            }
+        }
+        .o_planner_sidebar {
+            padding: 5px 5px 20px 10px;
+            border-right: 1px solid #E5E5E5;
+            background: #f7f7f7;
+            overflow-x: hidden;
+            overflow-y: auto;
+            .nav-stacked h4 {
+                font-size: 15px;
+                color: #444;
+                text-transform: uppercase;
+                font-weight: bold;
+                margin-top: 20px;
+            }
+            .nav-stacked h4 i {
+                margin-right: 8px;
+                color: #A24689;
+            }
+            .nav-stacked li a {
+                padding: 3px 0 3px 38px;
+                margin: auto -10px;
+                color: #444;
+                font-size: 13px;
+            }
+            .nav-stacked li a:hover, .nav-stacked li a:focus {
+                text-decoration: none;
+                background-color: transparent;
+                color: black;
+            }
+
+            .nav-stacked li.active a{
+                background-color: #EAEAEA;
+            }
+            .fa.fa-fw.fa-check {
+                color: #21b799;
+                margin-left: -5px;
+                margin-right: 5px;
+            }
+        }
+        //NOTEBOOK
+        .o_planner_notebook_container {
+            margin: 20px 0;
+
+            .o_planner_notebook {
+                color: #555;
+                padding: 0 !important;
+                font-family: courier, monospace;
+                border: 1px solid #faebcc;
+                color: #8a6d3b;
+                position: relative;
+                background-color: #fcf8e3;
+
+                textarea,input {
+                    background: #fcf8e3;
+                    border: none;
+                    width: 100%;
+                    max-width: 100%;
+                }
+                > li {
+                    list-style: none;
+                    border-bottom: 1px dashed #C1D6DA;
+                    padding: 10px 10px 5px 55px;
+                    text-transform: capitalize;
+                    margin: 0;
+                    span {
+                        position: absolute;
+                        left: 9px;
+                        color: rgb(199, 180, 146);
+                        font-size: 20px;
+                        font-weight: bold;
+                    }
+                }
+                > li:last-child { border-bottom: 0;}
+
+                .o_planner_notebook_header {
+                    div.dropdown { display: inline;float:right; }
+                    a {
+                        color: #C4A87A;
+                        position: absolute;
+                        top: 13px;
+                        right: 13px;
+                        &:hover {
+                            text-decoration: none;
+                            color: #9C855D;
+                        }
+                    }
+                    select {
+                        margin-bottom: 10px;
+                        font-family: sans-serif;
+                        font-size: 16px;
+                        border: none;
+                        background: #F5E7CF;
+                    }
+                }
+                > li:not(.o_planner_notebook_header):hover {
+                    background-color: #F5EFD0;
+                }
+                .o_planner_notebook_line_separator {
+                    border-left: 1px solid #ffaa9f;
+                    border-right: 1px solid #ffaa9f;
+                    background: transparent;
+                    position: absolute;
+                    width: 3px;
+                    height: 100%;
+                    top: 0;
+                    left: 42px;
+                    border-bottom: 0;
+                    border-top: 0;
+                }
+            }
+        }
+        .o_planner_trophy {
+            font-size: 11em;
+            color: #A24689;
+            margin-top: .5em;
+            -webkit-animation-name: bounceIn;
+            animation-name: bounceIn;
+            -webkit-animation-duration: 1.75s;
+            animation-duration: 1.75s;
+            -webkit-animation-fill-mode: both;
+            animation-fill-mode: both;
+        }
+        .info_icon {
+            position: relative;
+            padding-left: 5em;
+            min-height: 6em;
+            .fa {
+                position: absolute;
+                font-size: 5em;
+                left: 0.2em;
+                opacity: 0.6;
+            }
+        }
+    }
+    .o_planner_pages {
+        color: #444;
+        margin-top:-60px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        > div {
+            padding-top: 25px;
+            position: relative;
+            height: 100%;
+            > h1, > h2, > h3, > h4, > h5, > h6, > p, > strong, > i {
+                text-shadow:none;
+            }
+            h1 {
+                margin-top: 0;
+                font-size: 3.5em;
+                font-weight: 100;
+                margin-bottom: 0.5em;
+            }
+        }
+    }
+    // PARAGRAPHS
+    .o_planner_paragraphs .icon {
+        text-align: center;
+        font-size: 2em;
+        margin: 1em auto .5em;
+        color: #21b799;
+    }
+    // INSTALL APP
+    .o_planner_row_apps{
+        .col-md-4{
+            margin-top: 20px;
+        }
+    }
+}
+
+// XS size
+@media screen and (max-width: 768px) {
+    #PlannerModal .pages {
+        margin-top: 0px;
+    }
+    #PlannerModal .o_planner_progress_counter {
+        padding: 6px 0 0 5px;
+    }
+}
+// SM size
+@media screen and (min-width: 769px) {
+    #PlannerModal .o_planner_paragraphs {
+        div.col-md-10 {
+            margin-top:1em;
+        }
+        span {
+            transform: translateX(-8px);
+            position: relative;
+            display: block;
+        }
+    }
+}
+// MD size
+@media screen and (min-width: 992px) {
+    #PlannerModal .o_planner_paragraphs .icon {
+        font-size: 4em;
+        margin: 0.3em auto .5em;
+        span{
+            transform: translateX(0px);
+            position: relative;
+            display: block;
+        }
+    }
+}