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

[IMP] website: review options UI for media list

Browse Source 
Reword custom controls for image position and content vertical
alignment. Use different icons set according to the selected image
position.

Part of https://github.com/odoo/odoo/pull/54913
task-2157252
This commit is contained in:
stefanorigano (SRI)
2020-07-30 11:12:03 +00:00
committed by qsm-odoo
parent fd743b104a
commit 3906bd33e8
12 changed files with 170 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/img/snippets_options/align_bottom_right.svg
+11
View File
@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
<g fill="none" fill-rule="evenodd" class="symbols">
<g class="3_buttons_copy_4" transform="translate(-203 -5)">
<g class="align_bottom_right" transform="translate(203 5)">
<rect width="8" height="12" fill="#B8B8B8" class="o_subdle"/>
<rect width="9" height="6" x="11" y="6" fill="#FFF" class="o_graphic"/>
<polygon fill="#B8B8B8" points="11 0 20 0 20 1 11 1" class="o_subdle"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 532 B

addons/website/static/src/img/snippets_options/align_middle_right.svg
+11
View File
@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
<g fill="none" fill-rule="evenodd" class="symbols">
<g class="3_buttons_copy_4" transform="translate(-173 -5)">
<g class="align_middle_right" transform="translate(173 5)">
<rect width="8" height="12" fill="#B8B8B8" class="o_subdle"/>
<path fill="#B8B8B8" d="M20 11v1h-9v-1h9zM11 0h9v1h-9V0z" class="o_subdle"/>
<rect width="9" height="6" x="11" y="3" fill="#FFF" class="o_graphic"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 537 B

addons/website/static/src/img/snippets_options/align_top_right.svg
+11
View File
@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12">
<g fill="none" fill-rule="evenodd" class="symbols">
<g class="3_buttons_copy_4" transform="translate(-139 -5)">
<g class="align_top_right" transform="translate(139 5)">
<rect width="8" height="12" fill="#B8B8B8" class="o_subdle"/>
<rect width="9" height="1" x="11" y="11" fill="#B8B8B8" class="o_subdle"/>
<rect width="9" height="6" x="11" fill="#FFF" class="o_graphic"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 526 B

addons/website/static/src/img/snippets_options/image_left.svg
+10
View File
@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="11" viewBox="0 0 24 11">
<g fill="none" fill-rule="evenodd" class="symbols">
<g class="3_buttons_copy_5" transform="translate(-137 -5)">
<g class="image_left" transform="translate(137 5)">
<rect width="8" height="11" x="16" fill="#B8B8B8" class="o_subdle"/>
<path fill="#FFF" d="M0 0h13v11H0V0zm1 1h11v9H1V1zm3.438 2.286c0 .357-.119.66-.356.91s-.525.375-.863.375c-.339 0-.627-.125-.864-.375A1.275 1.275 0 0 1 2 3.286c0-.357.118-.661.355-.911S2.88 2 3.22 2c.338 0 .626.125.863.375s.356.554.356.91zm6.5 2.571v3H2V7.571L4.031 5.43 5.047 6.5l3.25-3.429 2.64 2.786z" class="o_graphic"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 703 B

addons/website/static/src/img/snippets_options/image_right.svg
+10
View File
@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="11" viewBox="0 0 24 11">
<g fill="none" fill-rule="evenodd" class="symbols">
<g class="3_buttons_copy_5" transform="translate(-171 -5)">
<g class="image_right" transform="translate(171 5)">
<rect width="8" height="11" fill="#B8B8B8" class="o_subdle"/>
<path fill="#FFF" d="M11 0h13v11H11V0zm1 1h11v9H12V1zm3.438 2.286c0 .357-.119.66-.356.91s-.525.375-.863.375c-.339 0-.627-.125-.864-.375a1.275 1.275 0 0 1-.355-.91c0-.357.118-.661.355-.911S13.88 2 14.22 2c.338 0 .626.125.863.375s.355.554.355.91zm6.5 2.571v3H13V7.571l2.031-2.142L16.047 6.5l3.25-3.429 2.64 2.786z" class="o_graphic"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 706 B

addons/website/static/src/img/snippets_options/media_layout_1_2.svg
+10
View File
@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
<g fill="none" fill-rule="evenodd" class="symbols">
<g class="3_buttons_copy_3" transform="translate(-170 -7)">
<g class="media_layout_1_2" transform="translate(170 7)">
<rect width="10" height="8" x="13" fill="#B8B8B8" class="o_subdle"/>
<rect width="11" height="8" fill="#FFF" class="o_graphic"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 443 B

addons/website/static/src/img/snippets_options/media_layout_1_2_right.svg
+10
View File
@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
<g fill="none" fill-rule="evenodd" class="symbols">
<g class="3_buttons_copy_6" transform="translate(-171 -7)">
<g class="media_layout_1_2_right" transform="translate(171 7)">
<rect width="10" height="8" fill="#B8B8B8" class="o_subdle"/>
<rect width="11" height="8" x="12" fill="#FFF" class="o_graphic"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 449 B

addons/website/static/src/img/snippets_options/media_layout_1_3.svg
+10
View File
@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
<g fill="none" fill-rule="evenodd" class="symbols">
<g class="3_buttons_copy_3" transform="translate(-204 -7)">
<g class="media_layout_1_3" transform="translate(204 7)">
<rect width="14" height="8" x="9" fill="#B8B8B8" class="o_subdle"/>
<rect width="7" height="8" fill="#FFF" class="o_graphic"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 441 B

addons/website/static/src/img/snippets_options/media_layout_1_3_right.svg
+10
View File
@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
<g fill="none" fill-rule="evenodd" class="symbols">
<g class="3_buttons_copy_6" transform="translate(-204 -7)">
<g class="media_layout_1_3_right" transform="translate(204 7)">
<rect width="14" height="8" fill="#B8B8B8" class="o_subdle"/>
<rect width="7" height="8" x="16" fill="#FFF" class="o_graphic"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 448 B

addons/website/static/src/img/snippets_options/media_layout_1_4.svg
+10
View File
@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
<g fill="none" fill-rule="evenodd" class="symbols">
<g class="3_buttons_copy_3" transform="translate(-137 -7)">
<g class="media_layout_1_4" transform="translate(137 7)">
<rect width="18" height="8" x="5" fill="#B8B8B8" class="o_subdle"/>
<rect width="3" height="8" fill="#FFF" class="o_graphic"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 441 B

addons/website/static/src/img/snippets_options/media_layout_1_4_right.svg
+10
View File
@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
<g fill="none" fill-rule="evenodd" class="symbols">
<g class="3_buttons_copy_6" transform="translate(-137 -7)">
<g class="media_layout_1_4_right" transform="translate(137 7)">
<rect width="18" height="8" fill="#B8B8B8" class="o_subdle"/>
<rect width="3" height="8" x="20" fill="#FFF" class="o_graphic"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 448 B

addons/website/views/snippets/s_media_list.xml
+57 -15
View File
@@ -59,24 +59,66 @@
<t t-call="website.snippet_options_shadow_widgets"/>
</div>
<div data-selector=".s_media_list_item" data-target="> .row">
<we-button-group string="Image Position">
<we-button title="Left" data-select-class=""><i class="fa fa-fw fa-align-left"/></we-button>
<we-button title="Right" data-select-class="flex-row-reverse"><i class="fa fa-fw fa-align-right"/></we-button>
</we-button-group>
<!-- Don't use the standard Vert. Alignement option to not suggest
Equal Height, which is useless for this snippet -->
<we-button-group string="Vert. Alignment" title="Vertical Alignment">
<we-button title="Top" data-select-class="align-items-start"><i class="fa fa-fw fa-long-arrow-up"/></we-button>
<we-button title="Middle" data-select-class="align-items-center"><i class="fa fa-fw fa-circle"/></we-button>
<we-button title="Bottom" data-select-class="align-items-end"><i class="fa fa-fw fa-long-arrow-down"/></we-button>
<we-button-group string="Layout">
<we-button title="Left"
data-name="media_left_opt"
data-select-class=""
data-img="/website/static/src/img/snippets_options/image_left.svg"/>
<we-button title="Right"
data-select-class="flex-row-reverse"
data-img="/website/static/src/img/snippets_options/image_right.svg"/>
</we-button-group>
</div>
<div data-js="MediaItemLayout" data-selector=".s_media_list_item">
<we-select string="Layout">
<we-button data-layout="6">1/2 - 1/2</we-button>
<we-button data-layout="4">1/3 - 2/3</we-button>
<we-button data-layout="3">1/4 - 3/4</we-button>
</we-select>
<we-button-group string="Image Size" data-dependencies="media_left_opt">
<we-button data-layout="3"
data-img="/website/static/src/img/snippets_options/media_layout_1_4.svg"
title="1/4 - 3/4"/>
<we-button data-layout="4"
data-img="/website/static/src/img/snippets_options/media_layout_1_3.svg"
title="1/3 - 2/3"/>
<we-button data-layout="6"
data-img="/website/static/src/img/snippets_options/media_layout_1_2.svg"
title="1/2 - 1/2"/>
</we-button-group>
<we-button-group string="Image Size" data-dependencies="!media_left_opt">
<we-button data-layout="3"
data-img="/website/static/src/img/snippets_options/media_layout_1_4_right.svg"
title="1/4 - 3/4"/>
<we-button data-layout="4"
data-img="/website/static/src/img/snippets_options/media_layout_1_3_right.svg"
title="1/3 - 2/3"/>
<we-button data-layout="6"
data-img="/website/static/src/img/snippets_options/media_layout_1_2_right.svg"
title="1/2 - 1/2"/>
</we-button-group>
</div>
<div data-selector=".s_media_list_item" data-target="> .row">
<!-- Don't use the standard Vert. Alignement option to not suggest
Equal Height, which is useless for this snippet. -->
<we-button-group string="Text Position" title="Text Position" data-dependencies="media_left_opt">
<we-button title="Align Top"
data-select-class="align-items-start"
data-img="/website/static/src/img/snippets_options/align_top_right.svg"/>
<we-button title="Align Middle"
data-select-class="align-items-center"
data-img="/website/static/src/img/snippets_options/align_middle_right.svg"/>
<we-button title="Align Bottom"
data-select-class="align-items-end"
data-img="/website/static/src/img/snippets_options/align_bottom_right.svg"/>
</we-button-group>
<we-button-group string="Text Position" title="Text Position" data-dependencies="!media_left_opt">
<we-button title="Align Top"
data-select-class="align-items-start"
data-img="/website/static/src/img/snippets_options/align_top.svg"/>
<we-button title="Align Middle"
data-select-class="align-items-center"
data-img="/website/static/src/img/snippets_options/align_middle.svg"/>
<we-button title="Align Bottom"
data-select-class="align-items-end"
data-img="/website/static/src/img/snippets_options/align_bottom.svg"/>
</we-button-group>
</div>
</xpath>
</template>