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

[FIX] website: remove outerText and fix design flaw in configurator

Browse Source 
- outerText is a non-standard feature. It is not
  supported by firefox and should not be used. This
  commit replaced it by value.

- The design of the industry selection screen had
  a misalignment flaw on firefox. This commit fixed
  it.

- The industry selection used a <i/> element instead
  of an <input/>.

closes odoo/odoo#70694

X-original-commit: 2dbbb4e38d603cbb5956fa61040a9497f60c3349
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Stefano Rigano <sri@odoo.com>
This commit is contained in:
Sébastien Mottet (oms)
2021-05-11 15:18:23 +00:00
co-authored by Stefano Rigano
parent c6f1e4f0d7
commit 5a2f7a46cf
3 changed files with 48 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/components/configurator/configurator.js
+5 -3
View File
@@ -128,22 +128,24 @@ class DescriptionScreen extends Component {
}
selectIndustry(_, ui) {
this.industrySelection.el.parentNode.dataset.value = ui.item.label;
this.dispatch('selectIndustry', this.labelToId[ui.item.label]);
this.checkDescriptionCompletion();
}
blurIndustrySelection(ev) {
const id = this.labelToId[ev.target.outerText];
const id = this.labelToId[ev.target.value];
this.dispatch('selectIndustry', id);
if (id === undefined) {
this.industrySelection.el.textContent = '';
this.industrySelection.el.value = '';
this.industrySelection.el.parentNode.dataset.value = '';
} else {
this.checkDescriptionCompletion();
}
}
inputIndustrySelection(ev) {
this.dispatch('selectIndustry', this.labelToId[ev.target.outerText]);
this.industrySelection.el.parentNode.dataset.value = ev.target.value;
}
selectWebsiteType(ev) {
addons/website/static/src/components/configurator/configurator.xml
+7 -7
View File
@@ -44,7 +44,7 @@
<i class="fa fa-angle-down text-black-50 ml-auto pl-2" title="dropdown_angle_down" role="img"/>
</a>
</div>
<div t-attf-class="dropdown-menu w-100 border-0 shadow-lg {{state.selectedType ? 'o_step_completed' : 'o_step_todo show'}}" role="menu">
<div t-attf-class="dropdown-menu border-0 shadow-lg {{state.selectedType ? 'o_step_completed' : 'o_step_todo show'}}" role="menu">
<t t-foreach="getters.getWebsiteTypes()" t-as="type" t-key="type.name">
<a t-att-title="type.name" t-att-data-id="type.id" t-on-click="selectWebsiteType" class="dropdown-item o_change_website_type">
<t t-esc="type.label"/>
@@ -52,12 +52,12 @@
</t>
</div>
</div>
<span t-att-class="!state.selectedType ? 'o_configurator_hide' : 'o_configurator_show'"> for my</span>
<span t-attf-class="mr-2 {{!state.selectedType ? 'o_configurator_hide' : 'o_configurator_show'}}"> for my</span>
</div>
<div t-attf-class="o_configurator_typing_text d-inline d-md-block o_configurator_industry mb-md-2 mb-lg-4 {{!state.selectedType ? 'o_configurator_hide' : 'o_configurator_show'}}">
<div class="o_configurator_industry_wrapper position-relative d-inline">
<i t-attf-class="industry_selection d-inline d-md-inline-block rounded bg-100 px-2 px-md-3 mx-2 mx-md-0 {{state.selectedIndustry ? 'o_step_completed' : 'o_step_todo show'}}" contenteditable="True" t-on-blur="blurIndustrySelection" t-on-input="inputIndustrySelection" t-ref="industrySelection"/>
</div>
<div t-attf-class="o_configurator_typing_text d-inline d-md-flex align-items-center o_configurator_industry mb-md-2 mb-lg-4 {{!state.selectedType ? 'o_configurator_hide' : 'o_configurator_show'}}">
<label class="o_configurator_industry_wrapper mr-2">
<input t-on-blur="blurIndustrySelection" t-on-input="inputIndustrySelection" t-ref="industrySelection"/>
</label>
<span> business</span>
<span t-att-class="!state.selectedIndustry ? 'o_configurator_hide' : 'o_configurator_show'">,</span>
</div>
@@ -72,7 +72,7 @@
<i class="fa fa-angle-down text-black-50 ml-auto pl-2" title="dropdown_angle_down" role="img"/>
</a>
</div>
<div class="dropdown-menu w-100 border-0 shadow-lg" role="menu">
<div class="dropdown-menu border-0 shadow-lg" role="menu">
<t t-foreach="getters.getWebsitePurpose()" t-as="type" t-key="type.name">
<a t-att-title="type.name" t-att-data-id="type.id" t-on-click="selectWebsitePurpose" class="dropdown-item o_change_website_purpose">
<t t-esc="type.label"/>
addons/website/static/src/scss/configurator.scss
+36 -15
View File
@@ -84,14 +84,45 @@
min-width: 13ch;
}
.industry_selection.o_step_todo {
min-width: 17ch;
}
.o_configurator_purpose_dd.o_step_todo {
min-width: 12ch;
}
.o_configurator_industry_wrapper {
position: relative;
display: inline-block;
height: $line-height-base * 1em;
min-width: 17ch;
cursor: pointer;
input, &::after {
height: $line-height-base * 1em;
font-weight: 500;
font-style: italic;
text-indent: 5px;
padding: 0;
}
input {
position: absolute;
width: 100%;
border: none;
border-bottom: 3px solid theme-color(primary);
color: theme-color(primary);
&:focus {
color: inherit;
outline: none;
}
}
&::after {
content: attr(data-value) '|';
display: inline-block;
overflow: hidden;
}
}
.dropdown {
box-shadow: inset 0 -3px 0 theme-color(primary);
@@ -121,6 +152,7 @@
.dropdown-menu, .custom-ui-autocomplete {
@include border-bottom-radius($border-radius);
font-size: inherit;
min-width: 100%;
}
.dropdown-item, .fa-angle-down, .ui-menu-item a, .ui-menu-item a.ui-state-active {
@@ -128,17 +160,6 @@
font-weight: inherit;
}
.industry_selection {
border: 1px solid $border-color;
color: theme-color(primary);
&:focus {
border-color: theme-color(primary);
color: inherit;
outline: none;
}
}
.custom-ui-autocomplete {
max-height: 300px; // <- Fallback
max-height: 35vh;