pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web: property fields should take all width

Browse Source 
This commit restores the style we have for fields.
- Takes the full avalables space for the input value
- No limit for the label size
- Align property value to the top (only usefull in case of long label)
- Clean unnecessary css since we use grid

After this commit, the property field will be shown with the same
layout used for standard fields in groups.

closes odoo/odoo#108630

X-original-commit: a89c6763a7440822e839bdccc75d8a6177db7eec
Related: odoo/enterprise#35225
Signed-off-by: Romeo Fragomeli (rfr) <rfr@odoo.com>
This commit is contained in:
Adrien Dieudonné
2022-12-23 20:18:02 +01:00
committed by Adrien Dieudonne
parent a5c0889748
commit d816ef8939
4 changed files with 61 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/views/fields/properties/properties_field.js
+15
View File
@@ -82,6 +82,21 @@ export class PropertiesField extends Component {
return propertiesValues.filter((definition) => !definition.definition_deleted);
}
/**
* Return the current properties value splitted in multiple groups/columns.
*
* @returns {Array<Array>}
*/
get groupedPropertiesList() {
const columns = this.env.isSmall ? 1 : this.props.columns;
// If no properties, assure that the "Add Property" button is shown.
const res = [...Array(columns)].map(col => []);
this.propertiesList.forEach((val, index) => {
res[index % columns].push(val);
});
return res;
}
/**
* Return false if we should not close the popover containing the
* properties definition based on the event received.
addons/web/static/src/views/fields/properties/properties_field.scss
+1 -57
View File
@@ -1,9 +1,5 @@
.o_field_properties {
width: 100%;
.o_group {
gap: map-get($spacers, 2) $o-horizontal-padding * 2;
}
}
// The web client will add a "o_field_invalid" class when the field is considered
@@ -38,37 +34,11 @@
}
.o_property_field {
.o_property_field_value {
height: fit-content;
padding: 0 $o-innergroup-rpadding 0 0;
}
.o_field_property_dropdown input {
cursor: pointer;
}
.o_input_dropdown {
min-width: 100%;
}
.popover-body {
min-width: 500px;
}
.o_td_label {
min-width: 150px;
}
.o_field_property_label {
max-width: 150px;
width: fit-content;
margin-right: -25px !important;
b {
word-break: break-word;
max-height: 100px;
overflow-y: hidden;
}
&:hover .o_field_property_open_popover,
.o_field_property_open_popover:focus {
opacity: 1;
@@ -90,7 +60,7 @@
}
.o_property_field_highlight .o_field_property_empty_label,
.o_property_field_highlight b, {
.o_property_field_highlight b {
border: 1px solid $primary;
padding: 5px;
margin: -5px;
@@ -110,36 +80,10 @@
font-size: inherit;
box-shadow: 0 3rem 5rem rgba($black, .18) !important;
box-sizing: border-box;
.end-auto {
display: none;
}
.o_input_dropdown {
width: 100%;
}
}
.o_xxs_form_view .o_field_properties {
// mobile view
.o_property_field {
margin-bottom: 20px;
min-width: 100%;
flex-wrap: wrap;
padding: 0;
.o_td_label,
.o_property_field_value {
min-width: 100%;
padding: 0 !important;
&>* {
max-width: 100%;
}
.o_input_dropdown {
min-width: 0;
width: 100%;
}
}
}
.o_field_property_add,
.o_field_property_open_popover {
display: none;
addons/web/static/src/views/fields/properties/properties_field.xml
+44 -40
View File
@@ -1,24 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-name="web.PropertiesField" owl="1">
<div t-ref="properties" class="w-100">
<div class="o_group w-100 grid my-0">
<div
t-foreach="propertiesList"
t-as="propertyConfiguration"
t-key="propertyConfiguration.name"
class="o_property_field d-flex flex-row align-items-center justify-content-start"
t-att-property-name="propertyConfiguration.name"
t-attf-class="g-col-lg-{{12 / props.columns}} g-col-12">
<t t-set="domId" t-value="generateUniqueDomID()"/>
<div class="o_td_label">
<label t-attf-class="o_field_property_label o_form_label {{state.movedPropertyName === propertyConfiguration.name ? 'o_property_field_highlight' : ''}} d-flex flex-row align-items-center"
<div t-ref="properties" class="row align-items-start">
<t t-foreach="groupedPropertiesList" t-as="propertiesListGroup" t-key="propertiesListGroup_index">
<div class="o_inner_group grid col-lg-6">
<div
t-foreach="propertiesListGroup"
t-as="propertyConfiguration"
t-key="propertyConfiguration.name"
class="o_property_field d-sm-contents mb-3"
t-att-property-name="propertyConfiguration.name">
<t t-set="domId" t-value="generateUniqueDomID()"/>
<label
t-attf-class="o_field_property_label o_form_label text-break {{state.movedPropertyName === propertyConfiguration.name ? 'o_property_field_highlight' : ''}} d-flex align-items-center"
t-att-for="domId">
<b
t-if="propertyConfiguration.string &amp;&amp; propertyConfiguration.string.length"
t-out="propertyConfiguration.string"
class="text-900 d-inline-block mw-100"/>
<i t-else="" class="o_field_property_empty_label">
class="text-900"/>
<i
t-else="" class="o_field_property_empty_label">
New Property
</i>
<i
@@ -26,35 +27,38 @@
class="o_field_property_open_popover fa fa-pencil ms-2"
t-on-click="(event) => this.onPropertyEdit(event, propertyConfiguration.name)"/>
</label>
<div class="o_property_field_value">
<PropertyValue
id="domId"
canChangeDefinition="state.canChangeDefinition"
comodel="propertyConfiguration.comodel || ''"
context="context"
domain="propertyConfiguration.domain || '[]'"
readonly="props.readonly"
selection="propertyConfiguration.selection"
string="propertyConfiguration.string"
tags="propertyConfiguration.tags"
type="propertyConfiguration.type"
value="propertyConfiguration.value"
onChange.bind="(value) => this.onPropertyValueChange(propertyConfiguration.name, value)"
onTagsChange.bind="(newTags, newValue) => this.onTagsChange(propertyConfiguration.name, newTags, newValue)"
/>
</div>
</div>
<div class="o_property_field_value align-top w-100">
<PropertyValue
id="domId"
canChangeDefinition="state.canChangeDefinition"
comodel="propertyConfiguration.comodel || ''"
context="context"
domain="propertyConfiguration.domain || '[]'"
readonly="props.readonly"
selection="propertyConfiguration.selection"
string="propertyConfiguration.string"
tags="propertyConfiguration.tags"
type="propertyConfiguration.type"
value="propertyConfiguration.value"
onChange.bind="(value) => this.onPropertyValueChange(propertyConfiguration.name, value)"
onTagsChange.bind="(newTags, newValue) => this.onTagsChange(propertyConfiguration.name, newTags, newValue)"
/>
<div
t-if="propertiesList.length % props.columns === propertiesListGroup_index"
t-attf-class="o_field_property_add {{props.columns !== 1 ? 'g-col-2' : ''}}">
<button
t-if="!props.readonly &amp;&amp; state.canChangeDefinition"
class="btn btn-light text-muted text-break m-0"
t-on-click="onPropertyCreate">
<i class="fa fa-plus"/>
Add a Property
</button>
</div>
</div>
<div class="o_field_property_add" t-attf-class="g-col-lg-{{12 / props.columns}} g-col-12">
<button
t-if="!props.readonly &amp;&amp; state.canChangeDefinition"
class="btn btn-light text-muted m-0"
t-on-click="onPropertyCreate">
<i class="fa fa-plus"/>
Add a Property
</button>
</div>
</div>
</t>
</div>
</t>
</templates>
addons/web/static/src/views/fields/properties/property_tags.xml
+1 -1
View File
@@ -2,7 +2,7 @@
<templates xml:space="preserve">
<t t-name="web.PropertyTags" owl="1">
<!-- Copy many2many tags style without duplicating all the CSS -->
<div t-attf-class="o_field_property_tag o_field_widget o_field_many2many_tags py-1 d-flex flex-row align-items-center flex-wrap pt-2 w-100 {{props.readonly ? 'readonly' : ''}}">
<div t-attf-class="o_field_property_tag o_field_widget o_field_many2many_tags d-flex align-items-center {{props.readonly ? 'readonly' : ''}}">
<TagsList
tags="tagListItems"
displayBadge="displayBadge"