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

[FIX] web_editor, website: scroll effect dropdown

Browse Source 
Fix the design. Trig animations hovering any part of the button rather
than its inner image only.

task-2335267

Part-of: #57942
X-original-commit: 55424d41b355ae1303f040bdd953e357365289f3
This commit is contained in:
stefanorigano (SRI)
2020-09-22 18:51:17 +00:00
committed by qsm-odoo
parent e1b15e3768
commit 5a6dc7b596
3 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.options.js
+3 -3
View File
@@ -234,12 +234,12 @@ const UserValueWidget = Widget.extend({
const buildImgExtensionSwitcher = (from, to) => {
const regex = new RegExp(`${from}$`, 'i');
return ev => {
const img = ev.currentTarget;
const img = ev.currentTarget.getElementsByTagName("img")[0];
img.src = img.src.replace(regex, to);
};
};
this.$el.on('mouseenter.img_animate', 'img', buildImgExtensionSwitcher('png', 'gif'));
this.$el.on('mouseleave.img_animate', 'img', buildImgExtensionSwitcher('gif', 'png'));
this.$el.on('mouseenter.img_animate', buildImgExtensionSwitcher('png', 'gif'));
this.$el.on('mouseleave.img_animate', buildImgExtensionSwitcher('gif', 'png'));
}
},
/**
addons/website/static/src/scss/website.wysiwyg.scss
+12
View File
@@ -120,6 +120,18 @@ $i: 1;
}
}
we-select.o_scroll_effects_selector we-button {
padding-top: $o-we-item-spacing;
padding-bottom: $o-we-item-spacing;
img {
max-height: 80px;
width: auto;
margin-right: $o-we-item-spacing;
margin-left: $o-we-item-spacing * .5;
}
}
//----------------------------------------------------------------------
// 'Options' Tab Specific Components
//----------------------------------------------------------------------
addons/website/views/snippets/snippets.xml
+6 -6
View File
@@ -633,7 +633,7 @@
data-no-check="true"
groups="website.group_website_designer">
<we-select string="Scroll Effect" data-dependencies="!header_sidebar_opt">
<we-select string="Scroll Effect" data-dependencies="!header_sidebar_opt" class="o_scroll_effects_selector">
<t t-set="header_effect_standard_label">Standard</t>
<t t-set="header_effect_scroll_label">Scroll</t>
<t t-set="header_effect_fixed_label">Fixed</t>
@@ -646,7 +646,7 @@
data-select-class="o_header_standard"
data-customize-website-views="website.header_visibility_standard"
data-img="/website/static/src/img/snippets_options/header_effect_standard.png">
<small t-esc='header_effect_standard_label'/>
<span t-esc='header_effect_standard_label'/>
</we-button>
<we-button id="option_header_effect_scroll"
t-att-data-select-label="header_effect_scroll_label"
@@ -655,7 +655,7 @@
data-select-class=""
data-customize-website-views=""
data-img="/website/static/src/img/snippets_options/header_effect_scroll.png">
<small t-esc='header_effect_scroll_label'/>
<span t-esc='header_effect_scroll_label'/>
</we-button>
<we-button id="option_header_effect_fixed"
t-att-data-select-label="header_effect_fixed_label"
@@ -664,7 +664,7 @@
data-select-class="o_header_fixed"
data-customize-website-views="website.header_visibility_fixed"
data-img="/website/static/src/img/snippets_options/header_effect_fixed.png">
<small t-esc='header_effect_fixed_label'/>
<span t-esc='header_effect_fixed_label'/>
</we-button>
<we-button id="option_header_effect_disappears"
t-att-data-select-label="header_effect_disappears_label"
@@ -673,7 +673,7 @@
data-select-class="o_header_disappears"
data-customize-website-views="website.header_visibility_disappears"
data-img="/website/static/src/img/snippets_options/header_effect_disappears.png">
<small t-esc="header_effect_disappears_label" />
<span t-esc="header_effect_disappears_label" />
</we-button>
<we-button id="option_header_effect_fade_out"
t-att-data-select-label="header_effect_fadeout_label"
@@ -682,7 +682,7 @@
data-select-class="o_header_fade_out"
data-customize-website-views="website.header_visibility_fade_out"
data-img="/website/static/src/img/snippets_options/header_effect_fade_out.png">
<small t-esc='header_effect_fadeout_label'/>
<span t-esc='header_effect_fadeout_label'/>
</we-button>
</we-select>
</div>