audrius/web
1
0
Fork 1
mirror of https://github.com/OCA/web.git synced 2025-02-22 13:21:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

[MIG] web_responsive: Migration to 13.0

Browse Source
This commit is contained in:
Alexandre Díaz
2019-09-30 17:32:35 +02:00
committed by Sergey Shebanin
parent aa3695bfcc
commit 466df9465a
9 changed files with 131 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
web_responsive/static/src/css/web_responsive.scss
View File

@@ -207,12 +207,12 @@
}
// Scroll all but top bar
html .o_web_client .o_main .o_main_content {
html .o_web_client .o_action_manager .o_action {
@include media-breakpoint-down(sm) {
overflow: auto;
.o_content {
overflow: initial;
overflow: visible;
}
}
@@ -330,13 +330,10 @@ html .o_web_client .o_main .o_main_content {
.o_form_sheet {
max-width: calc(100% - 32px);
overflow-x: auto;
}
.oe_button_box {
.o_dropdown_more {
padding: 0.1em;
width: min-content;
}
}
.oe_chatter {
padding-top: 0;
}
// Sticky statusbar
@@ -365,8 +362,16 @@ html .o_web_client .o_main .o_main_content {
@include media-breakpoint-down(sm) {
min-width: auto;
// More buttons border
.oe_button_box {
.o_dropdown_more {
button:last-child {
border-right: 1px solid gray('400');
}
}
}
// Avoid overflow on forms with title and/or button box
.oe_button_box,
.oe_title,
{
max-width: 100%;
@@ -432,6 +437,8 @@ html .o_web_client .o_main .o_main_content {
}
.o_chatter {
padding-top: initial;
// Display send button on small screens
.o_thread_composer {
padding-left: $o-mail-thread-avatar-size*0.5;
@@ -497,22 +504,7 @@ html .o_web_client .o_main .o_main_content {
position: sticky;
background-color: $o-view-background-color;
z-index: 1;
.o_chatter_topbar {
margin-top: 0;
flex-wrap: wrap;
height: auto;
button:last-of-type {
flex: 1 0 auto;
text-align: left;
}
.o_topbar_right_area {
order: -10;
flex: 0 1 100%;
border-bottom-color: transparent;
}
}
overflow-x: auto;
.o_attachments_previews {
overflow: auto;
@@ -526,25 +518,25 @@ html .o_web_client .o_main .o_main_content {
}
// Sticky Header & Footer in List View
.table-responsive {
overflow-x: initial;
.o_list_view {
// th & td are here for compatibility with chrome
thead, thead tr:nth-child(1) th {
position: sticky;
top: 0;
z-index: 1;
}
thead tr:nth-child(1) th {
background-color: $o-list-footer-bg-color;
}
tfoot, tfoot tr:nth-child(1) td {
position: sticky;
bottom: 0;
}
tfoot tr:nth-child(1) td {
background-color: $o-list-footer-bg-color;
.o_list_view {
.table-responsive {
.o_list_table {
// th & td are here for compatibility with chrome
thead, thead tr:nth-child(1) th {
position: sticky;
top: 0;
z-index: 1;
}
thead tr:nth-child(1) th {
background-color: $o-list-footer-bg-color;
}
tfoot, tfoot tr:nth-child(1) td {
position: sticky;
bottom: 0;
}
tfoot tr:nth-child(1) td {
background-color: $o-list-footer-bg-color;
}
}
}
}

104
web_responsive/static/src/js/web_responsive.js
View File

@@ -4,16 +4,17 @@
odoo.define('web_responsive', function (require) {
'use strict';
var ActionManager = require('web.ActionManager');
var AbstractWebClient = require("web.AbstractWebClient");
var AppsMenu = require("web.AppsMenu");
var BasicController = require('web.BasicController');
var config = require("web.config");
var core = require("web.core");
var FormRenderer = require('web.FormRenderer');
var Menu = require("web.Menu");
var RelationalFields = require('web.relational_fields');
var Chatter = require('mail.Chatter');
const ActionManager = require('web.ActionManager');
const AbstractWebClient = require("web.AbstractWebClient");
const AppsMenu = require("web.AppsMenu");
const BasicController = require('web.BasicController');
const config = require("web.config");
const core = require("web.core");
const FormRenderer = require('web.FormRenderer');
const Menu = require("web.Menu");
const RelationalFields = require('web.relational_fields');
const Chatter = require('mail.Chatter');
const ListRenderer = require('web.ListRenderer');
/*
* Helper function to know if are waiting
@@ -97,7 +98,7 @@ odoo.define('web_responsive', function (require) {
init: function (parent, menuData) {
this._super.apply(this, arguments);
// Keep base64 icon for main menus
for (var n in this._apps) {
for (let n in this._apps) {
this._apps[n].web_icon_data =
menuData.children[n].web_icon_data;
}
@@ -108,7 +109,7 @@ odoo.define('web_responsive', function (require) {
{}
);
// Search only after timeout, for fast typers
this._search_def = $.Deferred();
this._search_def = false;
},
/**
@@ -141,7 +142,7 @@ odoo.define('web_responsive', function (require) {
* Menu definition, plus extra needed keys.
*/
_menuInfo: function (key) {
var original = this._searchableMenus[key];
const original = this._searchableMenus[key];
return _.extend({
action_id: parseInt(original.action.split(',')[1], 10),
}, original);
@@ -169,17 +170,17 @@ odoo.define('web_responsive', function (require) {
* Schedule a search on current menu items.
*/
_searchMenusSchedule: function () {
this._search_def.reject();
this._search_def = $.Deferred();
setTimeout(this._search_def.resolve.bind(this._search_def), 50);
this._search_def.done(this._searchMenus.bind(this));
this._search_def = new Promise((resolve) => {
setTimeout(resolve, 50);
});
this._search_def.then(this._searchMenus.bind(this));
},
/**
* Search among available menu items, and render that search.
*/
_searchMenus: function () {
var query = this.$search_input.val();
const query = this.$search_input.val();
if (query === "") {
this.$search_container.removeClass("has-results");
this.$search_results.empty();
@@ -216,7 +217,7 @@ odoo.define('web_responsive', function (require) {
_searchResultChosen: function (event) {
event.preventDefault();
event.stopPropagation();
var $result = $(event.currentTarget),
const $result = $(event.currentTarget),
text = $result.text().trim(),
data = $result.data(),
suffix = ~text.indexOf("/") ? "/" : "";
@@ -227,7 +228,7 @@ odoo.define('web_responsive', function (require) {
previous_menu_id: data.parentId,
});
// Find app that owns the chosen menu
var app = _.find(this._apps, function (_app) {
const app = _.find(this._apps, function (_app) {
return text.indexOf(_app.name + suffix) === 0;
});
// Update navbar menus
@@ -241,9 +242,9 @@ odoo.define('web_responsive', function (require) {
*/
_searchResultsNavigate: function (event) {
// Find current results and active element (1st by default)
var all = this.$search_results.find(".o-menu-search-result"),
pre_focused = all.filter(".active") || $(all[0]),
offset = all.index(pre_focused),
const all = this.$search_results.find(".o-menu-search-result"),
pre_focused = all.filter(".active") || $(all[0]);
let offset = all.index(pre_focused),
key = event.key;
// Keyboard navigation only supports search results
if (!all.length) {
@@ -277,7 +278,7 @@ odoo.define('web_responsive', function (require) {
offset -= all.length;
}
// Switch active element
var new_focused = $(all[offset]);
const new_focused = $(all[offset]);
pre_focused.removeClass("active");
new_focused.addClass("active");
this.$search_results.scrollTo(new_focused, {
@@ -298,14 +299,17 @@ odoo.define('web_responsive', function (require) {
BasicController.include({
/**
* Close the AppDrawer if the data set is dirty and a discard dialog is opened
* Close the AppDrawer if the data set is dirty and a discard dialog
* is opened
*
* @override
*/
canBeDiscarded: function (recordID) {
if (this.model.isDirty(recordID || this.handle)) {
$('.o_menu_apps .dropdown:has(.dropdown-menu.show) > a').dropdown('toggle');
$('.o_menu_sections li.show .dropdown-toggle').dropdown('toggle');
$('.o_menu_apps .dropdown:has(.dropdown-menu.show) > a')
.dropdown('toggle');
$('.o_menu_sections li.show .dropdown-toggle')
.dropdown('toggle');
}
return this._super.apply(this, arguments);
},
@@ -382,13 +386,38 @@ odoo.define('web_responsive', function (require) {
_setState: function () {
this._super.apply(this, arguments);
if (config.device.isMobile) {
_.map(this.status_information, function (value) {
_.map(this.status_information, (value) => {
value.fold = true;
});
}
},
});
// Sticky Column Selector
ListRenderer.include({
_renderView: function () {
const self = this;
return this._super.apply(this, arguments).then(() => {
const $col_selector = self.$el.find(
'.o_optional_columns_dropdown_toggle');
if ($col_selector.length !== 0) {
const $th = self.$el.find('thead>tr:first>th:last');
$col_selector.appendTo($th);
}
});
},
_onToggleOptionalColumnDropdown: function (ev) {
// FIXME: For some strange reason the 'stopPropagation' call
// in the main method don't work. Invoking here the same method
// does the expected behavior... O_O!
// This prevents the action of sorting the column from being
// launched.
ev.stopPropagation();
this._super.apply(this, arguments);
},
});
// Responsive view "action" buttons
FormRenderer.include({
@@ -398,7 +427,7 @@ odoo.define('web_responsive', function (require) {
* @override
*/
_renderHeaderButtons: function () {
var $buttons = this._super.apply(this, arguments);
const $buttons = this._super.apply(this, arguments);
if (
!config.device.isMobile ||
!$buttons.is(":has(>:not(.o_invisible_modifier))")
@@ -408,7 +437,7 @@ odoo.define('web_responsive', function (require) {
// $buttons must be appended by JS because all events are bound
$buttons.addClass("dropdown-menu");
var $dropdown = $(core.qweb.render(
const $dropdown = $(core.qweb.render(
'web_responsive.MenuStatusbarButtons'
));
$buttons.addClass("dropdown-menu").appendTo($dropdown);
@@ -442,26 +471,25 @@ odoo.define('web_responsive', function (require) {
* The executed action
*/
_hideMenusByAction: function (action) {
var uniq_sel = '[data-action-id='+action.id+']';
const uniq_sel = '[data-action-id='+action.id+']';
// Need close AppDrawer?
var menu_apps_dropdown = document.querySelector(
const menu_apps_dropdown = document.querySelector(
'.o_menu_apps .dropdown');
$(menu_apps_dropdown).has('.dropdown-menu.show')
.has(uniq_sel).find('> a').dropdown('toggle');
// Need close Sections Menu?
// TODO: Change to 'hide' in modern Bootstrap >4.1
var menu_sections = document.querySelector(
const menu_sections = document.querySelector(
'.o_menu_sections li.show');
$(menu_sections).has(uniq_sel).find('.dropdown-toggle')
.dropdown('toggle');
// Need close Mobile?
var menu_sections_mobile = document.querySelector(
const menu_sections_mobile = document.querySelector(
'.o_menu_sections.show');
$(menu_sections_mobile).has(uniq_sel).collapse('hide');
$(menu_sections_mobile).has(uniq_sel).hide();
},
_handleAction: function (action) {
return this._super.apply(this, arguments).always(
return this._super.apply(this, arguments).finally(
$.proxy(this, '_hideMenusByAction', action));
},
});
@@ -498,7 +526,7 @@ odoo.define('web_responsive', function (require) {
* Altered event object
*/
_shiftPressed: function (keyEvent) {
var alt = keyEvent.altKey || keyEvent.key === "Alt",
const alt = keyEvent.altKey || keyEvent.key === "Alt",
newEvent = _.extend({}, keyEvent),
shift = keyEvent.shiftKey || keyEvent.key === "Shift";
// Mock event to make it seem like Alt is not pressed