mirror of https://github.com/OCA/web.git
[IMP] big inputs on forms in edit mode
Sergey Shebanin
parent
a9daa2aea7
commit
7441e79dc9
|
|
@ -76,6 +76,8 @@ This module adds responsiveness to web backend.
|
|||
|
||||
.. image:: ../static/img/device_rotation.gif
|
||||
|
||||
* Big inputs on form in edit mode
|
||||
|
||||
**Features for desktop computers**:
|
||||
|
||||
* Keyboard shortcuts for easier navigation,
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ patch(LegacyControlPanel.prototype, "web_responsive.LegacyControlPanelMobile", {
|
|||
setup() {
|
||||
this._super();
|
||||
this.state = useState({
|
||||
mobileSearchMode: "",
|
||||
mobileSearchMode: this.props.withBreadcrumbs ? "" : "quick",
|
||||
});
|
||||
this.ui = useContext(deviceContext);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@
|
|||
.o_cp_bottom_left {
|
||||
float: left;
|
||||
margin: 5px 0;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.o_cp_bottom_right {
|
||||
|
|
@ -86,6 +87,10 @@
|
|||
.o_cp_pager {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.o_list_selection_box {
|
||||
padding-left: 5px !important;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.o_cp_action_menus {
|
||||
padding-right: 0;
|
||||
|
|
@ -165,6 +170,7 @@
|
|||
align-items: center;
|
||||
.o_searchview_input_container {
|
||||
flex: 1 1 auto;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.o_searchview {
|
||||
|
|
|
|||
|
|
@ -54,26 +54,29 @@
|
|||
/>
|
||||
<SearchBar fields="fields" />
|
||||
</t>
|
||||
<t t-if="ui.isSmall and state.mobileSearchMode == 'quick'">
|
||||
<button
|
||||
class="btn btn-link fa fa-arrow-left"
|
||||
t-on-click.stop="state.mobileSearchMode = ''"
|
||||
/>
|
||||
<SearchBar fields="fields" />
|
||||
<button
|
||||
class="btn fa fa-filter"
|
||||
t-on-click.stop="state.mobileSearchMode = 'full'"
|
||||
/>
|
||||
</t>
|
||||
<t
|
||||
t-if="ui.isSmall and state.mobileSearchMode == 'full'"
|
||||
t-call="web_responsive.LegacyMobileSearchView"
|
||||
/>
|
||||
<t t-if="ui.isSmall and state.mobileSearchMode == ''">
|
||||
<button
|
||||
class="btn btn-link fa fa-search"
|
||||
t-on-click.stop="state.mobileSearchMode = 'quick'"
|
||||
<t t-if="ui.isSmall">
|
||||
<t t-if="state.mobileSearchMode == 'quick'">
|
||||
<button
|
||||
t-if="props.withBreadcrumbs"
|
||||
class="btn btn-link fa fa-arrow-left"
|
||||
t-on-click.stop="state.mobileSearchMode = ''"
|
||||
/>
|
||||
<SearchBar fields="fields" />
|
||||
<button
|
||||
class="btn fa fa-filter"
|
||||
t-on-click.stop="state.mobileSearchMode = 'full'"
|
||||
/>
|
||||
</t>
|
||||
<t
|
||||
t-if="state.mobileSearchMode == 'full'"
|
||||
t-call="web_responsive.LegacyMobileSearchView"
|
||||
/>
|
||||
<t t-if="state.mobileSearchMode == ''">
|
||||
<button
|
||||
class="btn btn-link fa fa-search"
|
||||
t-on-click.stop="state.mobileSearchMode = 'quick'"
|
||||
/>
|
||||
</t>
|
||||
</t>
|
||||
</div>
|
||||
</xpath>
|
||||
|
|
@ -131,7 +134,7 @@
|
|||
</div>
|
||||
<div
|
||||
class="btn btn-primary o_mobile_search_show_result fixed-bottom"
|
||||
t-on-click.stop="state.mobileSearchMode = ''"
|
||||
t-on-click.stop="state.mobileSearchMode = (props.withBreadcrumbs ? '' : 'quick')"
|
||||
>
|
||||
<t>SEE RESULT</t>
|
||||
</div>
|
||||
|
|
@ -219,38 +222,41 @@
|
|||
<t t-name="web_responsive.SearchBar" owl="1">
|
||||
<div>
|
||||
<t t-if="!env.isSmall" t-call="web.SearchBar" />
|
||||
<t t-if="env.isSmall and props.mobileSearchMode == 'quick'">
|
||||
<div class="o_searchview o_searchview_quick">
|
||||
<button
|
||||
class="btn btn-link fa fa-arrow-left"
|
||||
t-on-click.stop="trigger('set-mobile-view', '')"
|
||||
/>
|
||||
<div class="o_searchview_input_container">
|
||||
<t t-call="web.SearchBar.Facets" />
|
||||
<t t-call="web.SearchBar.Input" />
|
||||
<t t-if="items.length">
|
||||
<t t-call="web.SearchBar.Items" />
|
||||
</t>
|
||||
<t t-if="env.isSmall">
|
||||
<t t-if="props.mobileSearchMode == 'quick'">
|
||||
<div class="o_searchview o_searchview_quick">
|
||||
<button
|
||||
t-if="props.withBreadcrumbs"
|
||||
class="btn btn-link fa fa-arrow-left"
|
||||
t-on-click.stop="trigger('set-mobile-view', '')"
|
||||
/>
|
||||
<div class="o_searchview_input_container">
|
||||
<t t-call="web.SearchBar.Facets" />
|
||||
<t t-call="web.SearchBar.Input" />
|
||||
<t t-if="items.length">
|
||||
<t t-call="web.SearchBar.Items" />
|
||||
</t>
|
||||
</div>
|
||||
<button
|
||||
class="btn fa fa-filter"
|
||||
t-on-click.stop="trigger('set-mobile-view', 'full')"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
class="btn fa fa-filter"
|
||||
t-on-click.stop="trigger('set-mobile-view', 'full')"
|
||||
/>
|
||||
</div>
|
||||
</t>
|
||||
<t
|
||||
t-if="env.isSmall and props.mobileSearchMode == 'full'"
|
||||
t-call="web_responsive.MobileSearchView"
|
||||
/>
|
||||
<t t-if="env.isSmall and props.mobileSearchMode == ''">
|
||||
<div
|
||||
class="o_searchview o_searchview_mobile"
|
||||
role="search"
|
||||
aria-autocomplete="list"
|
||||
t-on-click.stop="trigger('set-mobile-view', 'quick')"
|
||||
>
|
||||
<button class="btn btn-link fa fa-search" />
|
||||
</div>
|
||||
</t>
|
||||
<t
|
||||
t-if="props.mobileSearchMode == 'full'"
|
||||
t-call="web_responsive.MobileSearchView"
|
||||
/>
|
||||
<t t-if="props.mobileSearchMode == ''">
|
||||
<div
|
||||
class="o_searchview o_searchview_mobile"
|
||||
role="search"
|
||||
aria-autocomplete="list"
|
||||
t-on-click.stop="trigger('set-mobile-view', 'quick')"
|
||||
>
|
||||
<button class="btn btn-link fa fa-search" />
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
|
|
|
|||
|
|
@ -27,6 +27,10 @@ html .o_web_client .o_action_manager .o_action {
|
|||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.ui-menu .ui-menu-item {
|
||||
height: 35px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.o_calendar_view .o_calendar_widget {
|
||||
.fc-timeGridDay-view .fc-axis,
|
||||
.fc-timeGridWeek-view .fc-axis {
|
||||
|
|
@ -89,6 +93,52 @@ html .o_web_client .o_action_manager .o_action {
|
|||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.o_td_label .o_form_label:not(.o_status):not(.o_calendar_invitation) {
|
||||
min-height: 23px;
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.o_horizontal_separator {
|
||||
font-size: 14px;
|
||||
}
|
||||
// Some UX improvements for form in edit mode
|
||||
@include media-breakpoint-down(sm) {
|
||||
.o_field_widget {
|
||||
vertical-align: middle;
|
||||
}
|
||||
&.o_form_editable .o_field_widget {
|
||||
&:not(.o_stat_info):not(.o_readonly_modifier):not(.oe_form_field_html):not(.o_field_image) {
|
||||
min-height: 35px;
|
||||
}
|
||||
.o_x2m_control_panel {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&.o_field_float_percentage,
|
||||
&.o_field_monetary,
|
||||
&.o_field_many2manytags,
|
||||
.o_field_many2one_selection {
|
||||
align-items: center;
|
||||
}
|
||||
.o_field_many2one_selection .o_input_dropdown,
|
||||
&.o_datepicker,
|
||||
&.o_field_partner_autocomplete {
|
||||
input {
|
||||
min-height: 35px;
|
||||
}
|
||||
}
|
||||
.o_external_button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.o_dropdown_button,
|
||||
.o_datepicker_button {
|
||||
top: 8px;
|
||||
right: 6px;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_FormRenderer_chatterContainer {
|
||||
padding-top: 0;
|
||||
.o_Activity_info {
|
||||
|
|
@ -335,13 +385,15 @@ html .o_web_client .o_action_manager .o_action {
|
|||
}
|
||||
|
||||
// Big checkboxes
|
||||
.o_list_view {
|
||||
.o_list_view,
|
||||
.o_settings_container .o_setting_box {
|
||||
.o_setting_right_pane {
|
||||
margin-left: 34px;
|
||||
}
|
||||
.custom-checkbox:not(.o_boolean_toggle) {
|
||||
margin-right: 10px;
|
||||
|
||||
.custom-control-label {
|
||||
top: -6px;
|
||||
|
||||
&::after {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
|
@ -355,3 +407,18 @@ html .o_web_client .o_action_manager .o_action {
|
|||
}
|
||||
}
|
||||
}
|
||||
.o_list_view {
|
||||
.custom-checkbox:not(.o_boolean_toggle) {
|
||||
top: -6px;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
.o_base_settings
|
||||
.o_setting_container
|
||||
.settings
|
||||
> .app_settings_block
|
||||
.o_settings_container {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,9 +8,12 @@ odoo.define("web_responsive", function (require) {
|
|||
const core = require("web.core");
|
||||
const FormRenderer = require("web.FormRenderer");
|
||||
const RelationalFields = require("web.relational_fields");
|
||||
const ViewDialogs = require("web.view_dialogs");
|
||||
const ListRenderer = require("web.ListRenderer");
|
||||
const CalendarRenderer = require("web.CalendarRenderer");
|
||||
|
||||
const _t = core._t;
|
||||
|
||||
// Fix for iOS Safari to set correct viewport height
|
||||
// https://github.com/Faisal-Manzer/postcss-viewport-height-correction
|
||||
function setViewportProperty(doc) {
|
||||
|
|
@ -110,6 +113,86 @@ odoo.define("web_responsive", function (require) {
|
|||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Directly open popup dialog in mobile for search.
|
||||
*/
|
||||
RelationalFields.FieldMany2One.include({
|
||||
start: function () {
|
||||
var superRes = this._super.apply(this, arguments);
|
||||
if (config.device.isMobile) {
|
||||
this.$input.prop("readonly", true);
|
||||
}
|
||||
return superRes;
|
||||
},
|
||||
// --------------------------------------------------------------------------
|
||||
// Private
|
||||
// --------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @override
|
||||
*/
|
||||
_bindAutoComplete: function () {
|
||||
if (!config.device.isMobile) {
|
||||
return this._super.apply(this, arguments);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @override
|
||||
*/
|
||||
_getSearchCreatePopupOptions: function () {
|
||||
const options = this._super.apply(this, arguments);
|
||||
_.extend(options, {
|
||||
on_clear: () => this.reinitialize(false),
|
||||
});
|
||||
return options;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @override
|
||||
*/
|
||||
_toggleAutoComplete: function () {
|
||||
if (config.device.isMobile) {
|
||||
this._searchCreatePopup("search");
|
||||
} else {
|
||||
return this._super.apply(this, arguments);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Support for Clear button in search popup.
|
||||
*/
|
||||
ViewDialogs.SelectCreateDialog.include({
|
||||
init: function () {
|
||||
this._super.apply(this, arguments);
|
||||
this.on_clear =
|
||||
this.options.on_clear ||
|
||||
function () {
|
||||
return undefined;
|
||||
};
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
_prepareButtons: function () {
|
||||
this._super.apply(this, arguments);
|
||||
if (config.device.isMobile && this.options.disable_multiple_selection) {
|
||||
this.__buttons.push({
|
||||
text: _t("Clear"),
|
||||
classes: "btn-secondary o_clear_button",
|
||||
close: true,
|
||||
click: function () {
|
||||
this.on_clear();
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
CalendarRenderer.include({
|
||||
/**
|
||||
* @override
|
||||
|
|
|
|||
Loading…
Reference in New Issue