diff --git a/addons/web_planner/static/src/js/web_planner_backend.js b/addons/web_planner/static/src/js/web_planner_backend.js index b66abf2b414..6a4e3a35825 100644 --- a/addons/web_planner/static/src/js/web_planner_backend.js +++ b/addons/web_planner/static/src/js/web_planner_backend.js @@ -1,10 +1,12 @@ odoo.define('web.planner', function (require) { "use strict"; +var core = require('web.core'); var Model = require('web.Model'); var SystrayMenu = require('web.SystrayMenu'); var Widget = require('web.Widget'); var planner = require('web.planner.common'); +var WebClient = require('web.WebClient'); var PlannerDialog = planner.PlannerDialog; @@ -52,26 +54,32 @@ var PlannerLauncher = Widget.extend({ this.setup(this.planner_apps[menu_id]); this.need_reflow = true; } else { - if (this.$el.is(":visible")) { - this.$el.hide(); - this.need_reflow = true; - } + this.$el.hide(); + this.hide_dialog(); + this.need_reflow = true; } if (this.need_reflow) { - this.webclient.menu.reflow(); + core.bus.trigger('resize'); this.need_reflow = false; } }, setup: function(planner){ var self = this; + var webclient = this.findAncestor(function (a) { + return a instanceof WebClient; + }); + this.planner = planner; - this.dialog && this.dialog.destroy(); + if (this.dialog) { + this.dialog.destroy(); + } this.dialog = new PlannerDialog(this, planner); + this.dialog.$el.remove(); + this.dialog.appendTo(webclient.$el); this.$(".o_planner_progress").tooltip({html: true, title: this.planner.tooltip_planner, placement: 'bottom', delay: {'show': 500}}); this.dialog.on("planner_progress_changed", this, function(percent){ self.update_parent_progress_bar(percent); }); - this.dialog.appendTo(document.body); }, // event update_parent_progress_bar: function(percent) { @@ -83,8 +91,13 @@ var PlannerLauncher = Widget.extend({ this.$el.show(); this.$(".progress-bar").css('width', percent+"%"); }, + hide_dialog: function() { + if (this.dialog) { + this.dialog.$el.hide(); + } + }, toggle_dialog: function() { - this.dialog.$('#PlannerModal').modal('toggle'); + this.dialog.$el.toggle(); } }); @@ -99,4 +112,3 @@ return { }; }); - diff --git a/addons/web_planner/static/src/js/web_planner_common.js b/addons/web_planner/static/src/js/web_planner_common.js index bed85e33ac9..02161f107fd 100644 --- a/addons/web_planner/static/src/js/web_planner_common.js +++ b/addons/web_planner/static/src/js/web_planner_common.js @@ -9,23 +9,51 @@ var utils = require('web.utils'); var QWeb = core.qweb; var bus = core.bus; +var Page = core.Class.extend({ + init: function (dom, page_index) { + var $dom = $(dom); + this.dom = dom; + this.hide_from_menu = $dom.attr('hide-from-menu'); + this.hide_mark_as_done = $dom.attr('hide-mark-as-done'); + this.done = false; + this.menu_item = null; + this.title = $dom.find('[data-menutitle]').data('menutitle'); + + var page_id = this.title.replace(/\s/g, '') + page_index; + this.set_page_id(page_id); + }, + set_page_id: function (id) { + this.id = id; + $(this.dom).attr('id', id); + }, + toggle_done: function () { + this.done = ! this.done; + }, + get_category_name: function (category_selector) { + var $page = $(this.dom); + + return $page.parents(category_selector).attr('menu-category-id'); + }, +}); + /* - Widget implementing the Modal of the planner (with all form, menu items, mark buttons, pages, ...). The content (the view_id) is fetched by - calling the 'render' method (server side), then footer are appended to every pages (client side). Data are saved when a 'mark button' is clicked. - Some element of the template MUST respect naming convention : - * Input elements (select, textarea, radio, ...) MUST HAVE an 'id' as 'input_element_#####', where ##### is a string. - * Page div MUST HAVE the class "o_planner_page" and an 'id' as 'planner_page#', where # is ideally a - number. !!! The declaration order of the page are important. The 'id' number is NOT the sequence order. - * Menu item MUST HAVE an href attribute containing the id of the page they are referencing. + Template rules: + Input elements (select, textarea, radio, ...) MUST HAVE an 'id' as 'input_element_#####', where ##### is a string. + Page div MUST HAVE the class "o_planner_page" and an 'id' as 'planner_page#', where # is ideally a + number. The declaration order of the page are important. The 'id' number is NOT the sequence order. + Menu item MUST HAVE an href attribute containing the id of the page they are referencing. */ var PlannerDialog = Widget.extend({ template: "PlannerDialog", + pages: [], + menu_items: [], + currently_shown_page: null, + currently_active_menu_item: null, + category_selector: 'div[menu-category-id]', events: { - 'click .o_planner div[id^="planner_page"] a[href^="#planner_page"]': 'change_page', - 'click .o_planner li a[href^="#planner_page"]': 'change_page', - 'click .o_planner div[id^="planner_page"] button[data-pageid^="planner_page"]': 'mark_as_done', - 'hidden.bs.modal': 'on_modal_hide', - 'shown.bs.modal': 'on_modal_show', + 'click li a[href^="#"]': 'change_page', + 'click button.mark_as_done': 'click_on_done', + 'click a.btn-next': 'change_to_next_page', }, init: function(parent, planner) { this._super(parent); @@ -33,11 +61,45 @@ var PlannerDialog = Widget.extend({ this.planner = planner; this.cookie_name = this.planner['planner_application'] + '_last_page'; this.set('progress', 0); + this.pages = []; + this.menu_items = []; }, start: function() { var self = this; this._super.apply(this, arguments); - this._setup_view().then(function(){ + self.$el.hide(); + return (new Model('web.planner')).call('render', [self.planner.view_id[0], self.planner.planner_application]).then(function(res) { + var $res = $(res); + $res.find('.o_planner_page').each(function(index, dom_page) { + var page = new Page(dom_page, index); + + self.pages.push(page); + }); + + var $menu = self.render_menu($res); + self.$('.o_planner_menu ul').html($menu); + self.menu_items = self.$('.o_planner_menu li'); + + self.pages.forEach(function(page) { + page.menu_item = self._find_menu_item_by_page_id(page.id); + }); + + self.$('.o_content_page').html($res); + + // update the planner_data with the new inputs of the view + var actual_vals = self._get_values(); + self.planner.data = _.defaults(self.planner.data, actual_vals); + // set the default value + self._set_values(self.planner.data); + // show last opened page + self._show_last_open_page(); + + self.$el.on('keyup', "textarea", function() { + if (this.scrollHeight != this.clientHeight) { + this.style.height = this.scrollHeight + "px"; + } + }); + }).then(function() { self.prepare_planner_event(); }); }, @@ -49,83 +111,185 @@ var PlannerDialog = Widget.extend({ }); this.on('planner_progress_changed', this, this.update_ui_progress_bar); this.set('progress', this.planner.progress); // init progress to trigger ui update - - $(window).on('resize', function() { - self.resize_dialog(); - }); }, - // ui - _setup_view: function(){ - var self = this; - return (new Model('web.planner')).call('render', [self.planner.view_id[0], self.planner.planner_application]).then(function(res) { - self.$('.content_page').html(res); - // add footer to each page - self.add_pages_footer(); - // update the planner_data with the new inputs of the view - var actual_vals = self._get_values(); - self.planner.data = _.defaults(self.planner.data, actual_vals); - // set the default value - self._set_values(self.planner.data); - // show last opened page - var last_open_page = (utils.get_cookie(self.cookie_name)) ? utils.get_cookie(self.cookie_name) : self.planner.data['last_open_page'] || false; - if (last_open_page) { - self._switch_page(last_open_page); - } - // Call resize function at the beginning - self.resize_dialog(); - self.$el.on('keyup', "textarea", function() { - if (this.scrollHeight != this.clientHeight) { - this.style.height = this.scrollHeight + "px"; - } - }); - }); + _render_done_page: function (page) { + var mark_as_done_button = this.$('.mark_as_done'); + var next_button = this.$('a.btn-next'); + var active_menu = $(page.menu_item).find('span'); + if (page.done) { + active_menu.addClass('fa-check'); + mark_as_done_button.removeClass('fa-square-o btn-primary'); + mark_as_done_button.addClass('fa-check-square-o btn-default'); + next_button.removeClass('btn-default'); + next_button.addClass('btn-primary'); + + // page checked animation + $(page.dom).addClass('marked'); + setTimeout(function() { + $(page.dom).removeClass('marked'); + }, 1000); + } else { + active_menu.removeClass('fa-check'); + mark_as_done_button.removeClass('fa-check-square-o btn-default'); + mark_as_done_button.addClass('fa-square-o btn-primary'); + next_button.removeClass('btn-primary'); + next_button.addClass('btn-default'); + } + }, + _show_last_open_page: function () { + var last_open_page = utils.get_cookie(this.cookie_name); + + if (! last_open_page) { + last_open_page = this.planner.data['last_open_page'] || false; + } + + if (last_open_page) { + this._display_page(last_open_page); + } else { + this._display_page(this.pages[0].id); + } }, update_ui_progress_bar: function(percent) { this.$(".progress-bar").css('width', percent+"%"); - this.$(".o_planner_progress_col").find('.o_planner_progress_counter').text(percent+"%"); }, - add_pages_footer: function() { + create_menu_item: function(page, menu_items, menu_item_page_map) { + var $page = $(page.dom); + var $menu_item_element = $page.find('h1[data-menutitle]'); + var menu_title = $menu_item_element.data('menutitle') || $menu_item_element.text(); + + menu_items.push(menu_title); + menu_item_page_map[menu_title] = page.id; + }, + render_menu: function($res) { var self = this; - //find all the pages and append footer to each pages - _.each(self.$('.o_planner div[id^="planner_page"]'), function(element) { - var $el = $(element); - var next_page_name = self.$(".o_planner .o_planner_sidebar li a[href='#"+$el.next().attr('id')+"']").text() || ' Finished!'; - var footer_template = QWeb.render("PlannerFooter", { - 'next_page_name': next_page_name, - 'next_page_id': $el.next().attr('id'), - 'current_page_id': $el.attr('id'), - 'start': $el.prev().length ? false: true, - 'end': $el.next().length ? false: true - }); - $el.append(footer_template); + var orphan_pages = []; + var menu_categories = []; + var menu_item_page_map = {}; + + // pages with no category + self.pages.forEach(function(page) { + var $page = $(page.dom); + if (! page.hide_from_menu && ! page.get_category_name(self.category_selector)) { + self.create_menu_item(page, orphan_pages, menu_item_page_map); + } }); + + // pages with a category + $res.find(self.category_selector).each(function(index, menu_category) { + var $menu_category = $(menu_category); + var menu_category_item = { + name: $menu_category.attr('menu-category-id'), + classes: $menu_category.attr('menu-classes'), + menu_items: [], + }; + + self.pages.forEach(function(page) { + if (! page.hide_from_menu && page.get_category_name(self.category_selector) === menu_category_item.name) { + self.create_menu_item(page, menu_category_item.menu_items, menu_item_page_map); + } + }); + + menu_categories.push(menu_category_item); + }); + + var menu = QWeb.render('PlannerMenu', { + 'orphan_pages': orphan_pages, + 'menu_categories': menu_categories, + 'menu_item_page_map': menu_item_page_map + }); + + return menu; }, - resize_dialog: function() { - var winH = $(window).height(); - var $modal = this.$('.o_planner_dialog'); - $modal.height(winH/1.1); - this.$('.o_planner_pages').height($modal.height() - 60); - this.$('.o_planner_sidebar').height($modal.height() - 75); + get_next_page_id: function() { + var self = this; + var current_page_found = false; + var next_page_id = null; + self.pages.every(function(page) { + if (current_page_found) { + next_page_id = page.id; + return false; + } + + if (page.id === self.currently_shown_page.id) { + current_page_found = true; + } + + return true; + }); + + return next_page_id; + }, + change_to_next_page: function(ev) { + var next_page_id = this.get_next_page_id(); + + ev.preventDefault(); + + if (next_page_id) { + this._display_page(next_page_id); + } }, - // page switching change_page: function(ev) { ev.preventDefault(); var page_id = $(ev.currentTarget).attr('href').replace('#', ''); - this._switch_page(page_id); + this._display_page(page_id); }, - _switch_page: function(page_id) { - this.$(".o_planner li a[href^='#planner_page']").parent().removeClass('active'); - this.$(".o_planner li a[href=#"+page_id+"]").parent().addClass('active'); - this.$(".o_planner div[id^='planner_page']").removeClass('show'); - this.$(".o_planner div[id="+page_id+"]").addClass('show'); - this.$(".o_planner .o_planner_pages").scrollTop("0"); + _find_page_by_id: function (id) { + var result = _.find(this.pages, function (page) { + return page.id === id; + }); + + return result; + }, + _find_menu_item_by_page_id: function (page_id) { + var result = _.find(this.menu_items, function (menu_item) { + var $menu_item = $(menu_item); + return $($menu_item.find('a')).attr('href') === '#' + page_id; + }); + + return result; + }, + _display_page: function(page_id) { + var mark_as_done_button = this.$('button.mark_as_done'); + var next_button = this.$('a.btn-next'); + var page = this._find_page_by_id(page_id); + if (this.currently_active_menu_item) { + $(this.currently_active_menu_item).removeClass('active'); + } + + var menu_item = this._find_menu_item_by_page_id(page_id); + $(menu_item).addClass('active'); + this.currently_active_menu_item = menu_item; + + if (this.currently_shown_page) { + $(this.currently_shown_page.dom).removeClass('show'); + } + + $(page.dom).addClass('show'); + this.currently_shown_page = page; + + if (! this.get_next_page_id()) { + next_button.hide(); + } else { + next_button.show(); + } + + if (page.hide_mark_as_done) { + mark_as_done_button.hide(); + } else { + mark_as_done_button.show(); + } + + this.$('.o_planner_title').text(this.currently_shown_page.title); + this._render_done_page(this.currently_shown_page); + this.planner.data['last_open_page'] = page_id; utils.set_cookie(this.cookie_name, page_id, 8*60*60); // create cookie for 8h + this.$(".o_content_page").scrollTop("0"); }, // planner data functions - _get_values: function(page_id){ + _get_values: function(page){ // if no page_id, take the complete planner - var base_elem = page_id ? this.$(".o_planner div[id="+page_id+"]") : this.$(".o_planner div[id^='planner_page']"); + var base_elem = page ? $(page.dom) : this.$(".o_planner_page"); var values = {}; // get the selector for all the input and mark_button // only INPUT (select, textearea, input, checkbox and radio), and BUTTON (.mark_button#) are observed @@ -152,16 +316,20 @@ var PlannerDialog = Widget.extend({ } } }); + + this.pages.forEach(function(page) { + values[page.id] = page.done; + }); return values; }, _set_values: function(values){ var self = this; _.each(values, function(val, id){ - var $elem = self.$('#'+id); + var $elem = self.$('[id="'+id+'"]'); if ($elem.prop("tagName") == 'BUTTON'){ if(val == 'marked'){ $elem.addClass('fa-check-square-o btn-default').removeClass('fa-square-o btn-primary'); - self.$(".o_planner li a[href=#"+$elem.data('pageid')+"] span").addClass('fa-check'); + self.$("li a[href=#"+$elem.data('pageid')+"] span").addClass('fa-check'); } } if ($elem.prop("tagName") == 'INPUT' || $elem.prop("tagName") == 'TEXTAREA'){ @@ -175,15 +343,31 @@ var PlannerDialog = Widget.extend({ } } }); + + this.pages.forEach(function(page) { + page.done = values[page.id]; + self._render_done_page(page); + }); }, - update_planner: function(page_id){ + update_planner: function(){ // update the planner.data with the inputs - var vals = this._get_values(page_id); + var vals = this._get_values(this.currently_shown_page); this.planner.data = _.extend(this.planner.data, vals); + // re compute the progress percentage - var mark_btn = this.$(".o_planner button[id^='mark_button']"); - var marked_btn = this.$(".o_planner button[id^='mark_button'].fa-check-square-o"); - var percent = parseInt((marked_btn.length+1) / (mark_btn.length+1) * 100); + var total_pages = 0; + var done_pages = 0; + + this.pages.forEach(function(page) { + if (! page.hide_mark_as_done) { + total_pages++; + } + if (page.done) { + done_pages++; + } + }); + + var percent = parseInt((done_pages / total_pages) * 100, 10); this.set('progress', percent); this.planner.progress = percent; // save data and progress in database @@ -193,39 +377,13 @@ var PlannerDialog = Widget.extend({ return (new Model('web.planner')).call('write', [this.planner.id, {'data': JSON.stringify(this.planner.data), 'progress': this.planner.progress}]); }, // user actions - mark_as_done: function(ev) { - var self = this; - var btn = $(ev.currentTarget); - var page_id = btn.attr('data-pageid'); - var active_menu = self.$(".o_planner li a[href=#"+page_id+"] span"); - var active_page = self.$(".o_planner div[id^='planner_page'].o_planner_page.show"); - - var next_button = self.$(".o_planner a[data-parent="+page_id+"]"); - if (!btn.hasClass('fa-check-square-o')) { - active_menu.addClass('fa-check'); - btn.addClass('fa-check-square-o btn-default').removeClass('fa-square-o btn-primary'); - next_button.addClass('btn-primary').removeClass('btn-default'); - // page checked animation - active_page.addClass('marked'); - setTimeout(function() { active_page.removeClass('marked'); }, 1000); - } else { - btn.removeClass('fa-check-square-o btn-default').addClass('fa-square-o btn-primary'); - next_button.addClass('btn-default').removeClass('btn-primary'); - active_menu.removeClass('fa-check'); - } - self.update_planner(page_id); - }, - on_modal_show : function(e) { - bus.on('action', this, _.bind(this.on_webclient_action, this)); - $(window).on("unload", this, _.bind(this.on_webclient_action, this)); // bind the action of quitting the window - }, - on_modal_hide : function(e) { - bus.off('action', this, _.bind(this.on_webclient_action, this)); - $(window).off("unload", this, _.bind(this.on_webclient_action, this)); // unbind the action of quitting the window - this.update_planner(); // explicit call to save data + click_on_done: function(ev) { + this.currently_shown_page.toggle_done(); + this._render_done_page(this.currently_shown_page); + this.update_planner(); }, on_webclient_action: function(e) { - this.$('#PlannerModal').modal('hide'); + this.$('#PlannerDialog').hide(); }, }); return { @@ -233,4 +391,3 @@ return { }; }); - diff --git a/addons/web_planner/static/src/less/web_planner_common.less b/addons/web_planner/static/src/less/web_planner_common.less index 90a7521d457..43d41300983 100644 --- a/addons/web_planner/static/src/less/web_planner_common.less +++ b/addons/web_planner/static/src/less/web_planner_common.less @@ -194,201 +194,52 @@ } } -/**************** PLANNER MODAL ****************/ -#PlannerModal { - +@o_planner_width: 480px; +#PlannerDialog { font-family: "Lato", serif; + position: absolute; + top: 35px; + right: 5px; // include box shadow + bottom: 5px; + width: @o_planner_width; + z-index: 1001; // z-index website + 1 + padding-bottom: 80px; - 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; + .row { // website adds negative margins + margin-left: 0px; + margin-right: 0px; } - .o_planner_page{ - display : none; + .box-shadow(@shadow) { + -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 + box-shadow: @shadow; } - .o_planner_dialog { - width: 85%; - max-width: 1024px; - //overflow: hidden; - margin-left: auto; - margin-right: auto; + .box-shadow(0 3px 9px #666666); + background-color: white; - // button close - button.close { - line-height: 30px; - color: rgba(51, 51, 51, 0.54); + .o_planner_header { + padding: 5px 5px 5px 5px; + } + + h1 { + font-size: 3.5em; + font-weight: 100; + } + + .o_content_page { + padding-left: 15px; + padding-right: 15px; + height: 100%; + overflow: auto; + + .marked:after { 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; + left: 105px; 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%; @@ -410,70 +261,6 @@ -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; @@ -581,26 +368,40 @@ } } } - .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; - } - } + + 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; + } + // PARAGRAPHS .o_planner_paragraphs .icon { text-align: center; @@ -614,39 +415,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; - } - } -} +} \ No newline at end of file diff --git a/addons/web_planner/static/src/xml/web_planner.xml b/addons/web_planner/static/src/xml/web_planner.xml index 11d06959a85..f426add4036 100644 --- a/addons/web_planner/static/src/xml/web_planner.xml +++ b/addons/web_planner/static/src/xml/web_planner.xml @@ -13,54 +13,41 @@ - -
- - -
- - - -
-
- - Next step +
+
+
+ + Next step + - - +
+
- -
- + +
  • + +
    • + +

    +
  • + +
    • +     diff --git a/addons/web_planner/views/web_planner_templates.xml b/addons/web_planner/views/web_planner_templates.xml index 7ebe0ce280c..fc9a231f02c 100644 --- a/addons/web_planner/views/web_planner_templates.xml +++ b/addons/web_planner/views/web_planner_templates.xml @@ -12,4 +12,23 @@ + + + + + + diff --git a/addons/website/static/src/js/web_planner_website.js b/addons/website/static/src/js/web_planner_website.js index 4a2abf1e3e8..69d385a9032 100644 --- a/addons/website/static/src/js/web_planner_website.js +++ b/addons/website/static/src/js/web_planner_website.js @@ -48,7 +48,7 @@ planner.WebsitePlannerLauncher = Widget.extend({ this.$(".progress-bar").css('width', percent+"%"); }, toggle_dialog: function() { - this.dialog.$('#PlannerModal').modal('toggle'); + this.dialog.$el.toggle(); }, });