[MOV] base,web: move "base settings" mobile related code
This code is not useful since https://github.com/odoo/odoo/commit/9831ed08fe Note that this part of code will be refactored in web_enterprise. Task ID: 2085899 closes odoo/odoo#38499 Related: odoo/enterprise#6077 Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
This commit is contained in:
Romain Estievenart
committed by
Adrien Dieudonne
Adrien Dieudonne
parent
a077985123
commit
baf5ec854c
@@ -18,10 +18,6 @@
|
||||
.o_base_settings {
|
||||
height: 100%;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
.o_control_panel {
|
||||
flex: 0 0 auto;
|
||||
|
||||
@@ -77,10 +73,6 @@
|
||||
|
||||
overflow: auto;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
.settings_tab {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
@@ -89,14 +81,6 @@
|
||||
overflow: auto;
|
||||
padding-top: $o-horizontal-padding*0.5;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
flex: 0 0 $o-base-settings-mobile-tabs-height;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: gray('900');
|
||||
box-shadow: inset 3px 0 0 $o-brand-primary;
|
||||
@@ -121,55 +105,6 @@
|
||||
min-width: 23px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
// Mobile Tabs
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: block;
|
||||
@include o-position-absolute($left:100%);
|
||||
@include size(auto, $o-base-settings-mobile-tabs-height);
|
||||
padding: $o-base-settings-mobile-tabs-height*0.25 $o-base-settings-mobile-tabs-height*0.4;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: inherit;
|
||||
transition: 0.2s all ease 0s;
|
||||
transform: translate3d(0,0,0);
|
||||
|
||||
.app_name {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
background: $o-brand-primary;
|
||||
opacity: 0;
|
||||
@include o-position-absolute(auto, 0, 0, 0);
|
||||
@include size(100%, 3px);
|
||||
transition: 0.2s all ease 0s;
|
||||
}
|
||||
|
||||
&.previous, &.before {
|
||||
left: 0% - $o-base-settings-mobile-tabs-overflow-gap;
|
||||
}
|
||||
|
||||
&.current {
|
||||
left: 50%;
|
||||
color: white;
|
||||
|
||||
// Reset default style for 'selected' tabs
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.next, &.after {
|
||||
left: 100% + $o-base-settings-mobile-tabs-overflow-gap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -3,7 +3,6 @@ odoo.define('base.settings', function (require) {
|
||||
|
||||
var BasicModel = require('web.BasicModel');
|
||||
var core = require('web.core');
|
||||
var config = require('web.config');
|
||||
var FormView = require('web.FormView');
|
||||
var FormController = require('web.FormController');
|
||||
var FormRenderer = require('web.FormRenderer');
|
||||
@@ -24,16 +23,6 @@ var BaseSettingRenderer = FormRenderer.extend({
|
||||
this.activeTab = false;
|
||||
},
|
||||
|
||||
start: function () {
|
||||
var prom = this._super.apply(this, arguments);
|
||||
if (config.device.isMobile) {
|
||||
core.bus.on("DOM_updated", this, function () {
|
||||
this._moveToTab(this.currentIndex || this._currentAppIndex());
|
||||
});
|
||||
}
|
||||
return prom;
|
||||
},
|
||||
|
||||
/**
|
||||
* @override
|
||||
* overridden to show a message, informing user that there are changes
|
||||
@@ -102,49 +91,6 @@ var BaseSettingRenderer = FormRenderer.extend({
|
||||
this.searchText = "";
|
||||
}
|
||||
},
|
||||
/**
|
||||
* In mobile view behaviour is like swipe content left / right and apps tab will be shown on the top.
|
||||
* This method will set the required properties (styling and css).
|
||||
*
|
||||
* @private
|
||||
* @param {int} currentTab
|
||||
*/
|
||||
_activateSettingMobileTab: function (currentTab) {
|
||||
var self = this;
|
||||
var moveTo = currentTab;
|
||||
var next = moveTo + 1;
|
||||
var previous = moveTo - 1;
|
||||
|
||||
this.$(".settings .app_settings_block").removeClass("previous next current before after");
|
||||
this.$(".settings_tab .tab").removeClass("previous next current before after");
|
||||
_.each(this.modules, function (module, index) {
|
||||
var tab = self.$(".tab[data-key='" + module.key + "']");
|
||||
var view = module.settingView;
|
||||
|
||||
if (index === previous) {
|
||||
tab.addClass("previous");
|
||||
tab.css("margin-left", "0px");
|
||||
view.addClass("previous");
|
||||
} else if (index === next) {
|
||||
tab.addClass("next");
|
||||
tab.css("margin-left", "-" + tab.outerWidth() + "px");
|
||||
view.addClass("next");
|
||||
} else if (index < moveTo) {
|
||||
tab.addClass("before");
|
||||
tab.css("margin-left", "-" + tab.outerWidth() + "px");
|
||||
view.addClass("before");
|
||||
} else if (index === moveTo) {
|
||||
var marginLeft = tab.outerWidth() / 2;
|
||||
tab.css("margin-left", "-" + marginLeft + "px");
|
||||
tab.addClass("current");
|
||||
view.addClass("current");
|
||||
} else if (index > moveTo) {
|
||||
tab.addClass("after");
|
||||
tab.css("margin-left", "0");
|
||||
view.addClass("after");
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* find current app index in modules
|
||||
*
|
||||
@@ -156,22 +102,6 @@ var BaseSettingRenderer = FormRenderer.extend({
|
||||
});
|
||||
return index;
|
||||
},
|
||||
/**
|
||||
* Enables swipe navigation between settings pages
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_enableSwipe: function () {
|
||||
var self = this;
|
||||
this.$('.settings').swipe({
|
||||
swipeLeft: function () {
|
||||
self._moveToTab(self.currentIndex + 1);
|
||||
},
|
||||
swipeRight: function () {
|
||||
self._moveToTab(self.currentIndex - 1);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @private
|
||||
@@ -214,12 +144,7 @@ var BaseSettingRenderer = FormRenderer.extend({
|
||||
view.removeClass("o_hidden");
|
||||
this.activeView = view;
|
||||
this.activeTab = tab;
|
||||
|
||||
if (config.device.isMobile) {
|
||||
this._activateSettingMobileTab(this.currentIndex);
|
||||
} else {
|
||||
tab.addClass("selected");
|
||||
}
|
||||
tab.addClass("selected");
|
||||
}
|
||||
},
|
||||
|
||||
@@ -239,10 +164,6 @@ var BaseSettingRenderer = FormRenderer.extend({
|
||||
_onKeyUpSearch: function (event) {
|
||||
this.searchText = this.searchInput.val();
|
||||
this.activeTab.removeClass('selected');
|
||||
if (config.device.isMobile) {
|
||||
this.$('.settings_tab').addClass('o_hidden');
|
||||
this.$('.settings').addClass('d-block');
|
||||
}
|
||||
this._searchSetting();
|
||||
},
|
||||
/**
|
||||
@@ -261,10 +182,6 @@ var BaseSettingRenderer = FormRenderer.extend({
|
||||
});
|
||||
this.activeTab.removeClass('o_hidden').addClass('selected');
|
||||
this.activeView.removeClass('o_hidden');
|
||||
if (config.device.isMobile) {
|
||||
this.$('.settings_tab').removeClass('o_hidden');
|
||||
this.$('.settings').removeClass('d-block');
|
||||
}
|
||||
},
|
||||
|
||||
_render: function () {
|
||||
@@ -273,10 +190,6 @@ var BaseSettingRenderer = FormRenderer.extend({
|
||||
self._initModules();
|
||||
self._renderLeftPanel();
|
||||
self._initSearch();
|
||||
|
||||
if (config.device.isMobile) {
|
||||
self._enableSwipe();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
@@ -418,18 +331,6 @@ var BaseSettingView = FormView.extend({
|
||||
Renderer: BaseSettingRenderer,
|
||||
Controller: BaseSettingController,
|
||||
}),
|
||||
|
||||
/**
|
||||
* Overrides to lazy-load touchSwipe library in mobile.
|
||||
*
|
||||
* @override
|
||||
*/
|
||||
init: function () {
|
||||
if (config.device.isMobile) {
|
||||
this.jsLibs.push('/web/static/lib/jquery.touchSwipe/jquery.touchSwipe.js');
|
||||
}
|
||||
this._super.apply(this, arguments);
|
||||
},
|
||||
});
|
||||
|
||||
view_registry.add('base_settings', BaseSettingView);
|
||||
|
||||
@@ -1,99 +0,0 @@
|
||||
odoo.define('base.settings_mobile_tests', function (require) {
|
||||
"use strict";
|
||||
|
||||
var BaseSetting = require('base.settings');
|
||||
|
||||
var testUtils = require('web.test_utils');
|
||||
var view_registry = require('web.view_registry');
|
||||
|
||||
var BaseSettingsView = view_registry.get('base_settings');
|
||||
var createView = testUtils.createView;
|
||||
|
||||
// prevent the renderer from doing RPCs to fetch app icons
|
||||
BaseSetting.Renderer.include({
|
||||
_getAppIconUrl: function () {
|
||||
return '';
|
||||
},
|
||||
});
|
||||
|
||||
QUnit.module('mobile_base_settings_tests', {
|
||||
beforeEach: function () {
|
||||
this.data = {
|
||||
project: {
|
||||
fields: {
|
||||
foo: {string: 'Foo', type: 'boolean'},
|
||||
bar: {string: 'Bar', type: 'boolean'},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}, function () {
|
||||
|
||||
QUnit.module('BaseSettings Mobile');
|
||||
|
||||
QUnit.test('swipe settings in mobile', async function (assert) {
|
||||
assert.expect(2);
|
||||
|
||||
// mimic touchSwipe library's swipe method
|
||||
var oldSwipe = $.fn.swipe;
|
||||
var swipeLeft, swipeRight;
|
||||
$.fn.swipe = function (params) {
|
||||
swipeLeft = params.swipeLeft;
|
||||
swipeRight = params.swipeRight;
|
||||
};
|
||||
|
||||
var form = await createView({
|
||||
View: BaseSettingsView,
|
||||
model: 'project',
|
||||
data: this.data,
|
||||
arch: '<form string="Settings" class="oe_form_configuration o_base_settings">' +
|
||||
'<div class="o_setting_container">' +
|
||||
'<div class="settings_tab"/>'+
|
||||
'<div class="settings">' +
|
||||
'<div class="app_settings_block" data-string="CRM" data-key="crm">' +
|
||||
'<div class="row mt16 o_settings_container">'+
|
||||
'<div class="col-12 col-lg-6 o_setting_box">'+
|
||||
'<div class="o_setting_left_pane">' +
|
||||
'<field name="bar"/>'+
|
||||
'</div>'+
|
||||
'<div class="o_setting_right_pane">'+
|
||||
'<label for="bar"/>'+
|
||||
'<div class="text-muted">'+
|
||||
'this is bar'+
|
||||
'</div>'+
|
||||
'</div>' +
|
||||
'</div>'+
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="app_settings_block" data-string="Project" data-key="project">' +
|
||||
'<div class="row mt16 o_settings_container">'+
|
||||
'<div class="col-12 col-lg-6 o_setting_box">'+
|
||||
'<div class="o_setting_left_pane">' +
|
||||
'<field name="foo"/>'+
|
||||
'</div>'+
|
||||
'<div class="o_setting_right_pane">'+
|
||||
'<label for="foo"/>'+
|
||||
'<div class="text-muted">'+
|
||||
'this is foo'+
|
||||
'</div>'+
|
||||
'</div>' +
|
||||
'</div>'+
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</form>',
|
||||
});
|
||||
|
||||
swipeLeft();
|
||||
assert.strictEqual(form.$('.settings .current').data('key'), 'project', 'current setting should be project');
|
||||
|
||||
swipeRight();
|
||||
assert.strictEqual(form.$('.settings .current').data('key'), 'crm', 'current setting should be crm');
|
||||
|
||||
$.fn.swipe = oldSwipe;
|
||||
form.destroy();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user