pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3275d19415634c055ee3aa43be8f05541a72f459
odoo_source/addons/web_editor/views/editor.xml
T
stefanorigano (SRI) 27604376a9 [IMP] web_editor, website: improve "palettes-chooser" dropdown design 
This commit reviews the component design in order to match the
"Configurator" one.

As a result, 'color-4' and 'color-5' are hidden in the palette-chooser
while remaining visible/editable once the palette is active.

This commit will also reorder color fields in the sidebar and in the
colopicker in order to match both the palette-preview & CC-list colors
order.

Beside design consistency, another reason behind these changes goes back
to the initial stages of the color system introduced with v14.

At the very beginning the system was designed to handle 3 custom colors
+ "locked" black and white.
Being able to edit black and white sounded interesting at that time;
as a result 'color-4' and 'color-5' have been introduced in the
system.

Despite being a powerful tool for designers and pro-users, the edition
of these color has been proven to be tricky an potentially unsafe.

Together with new default palettes that standardize 'color-4' and
'color-5' to safe values, hiding these color from the list simplify
the palette selection process and aims, implicitly, to communicate to
"normal" users that these colors are "not part of the palette", while
somehow related.

task-2656337

closes odoo/odoo#77857

X-original-commit: 02aba326710523bf210644e9038198059db1672c
Related: odoo/design-themes#514
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2021-10-05 14:17:48 +00:00

173 lines
11 KiB
XML
Raw Blame History

<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="wysiwyg_iframe_editor_assets" name="Editor assets for wysiwyg iframe content" groups="base.group_user">
<t t-call-assets="web.assets_common"/>
<t t-call-assets="web.assets_frontend" t-js="false"/>
<t t-call-assets="web_editor.assets_wysiwyg"/>
</template>
<template id="compiled_assets_wysiwyg" name="Wysiwyg Editor" groups="base.group_public,base.group_portal,base.group_user">
<t t-call-assets="web_editor.assets_wysiwyg"/>
</template>
<template id="assets_edit_html_field" name="Wysiwyg Editor Assets for html field (style-inline)" groups="base.group_user,base.group_portal">
<t t-call-assets="web.assets_common" t-js="false"/>
<t t-call-assets="web_editor.assets_wysiwyg" t-js="false"/>
</template>
<!--
The web_editor.colorpicker template regroups section of colorpicker menu for website customization
(text foreground/background but also snippet background color option).
As it is presentend below, the colorpicker tag regroups a set of .o_colorpicker_section with name,
icon-class and icon-content as data. These will be used to build the colorpicker dropdowns.
Redefinition can edit section content, add sections or even remove them. If no section is found when
building a colorpicker dropdown, the template content will be used without changes as the colorpicker
dropdown content.
Sections should contain a set of button with a data-color attribute. When selecting such a button to
edit style, the "bg-x" class or the "text-x" will be automatically added.
If a color is no longer used you need to add the d-none class to it and not remove it from this file !!
Else you will no longer be able to use them.
-->
<template id="web_editor.colorpicker" name="Color-Picker" groups="base.group_user">
<colorpicker>
<div class="o_colorpicker_section" data-name="theme">
<button data-color="o-color-1"/>
<button data-color="o-color-3"/>
<button data-color="o-color-2"/>
<button data-color="o-color-4" class="ml-2"/>
<button data-color="o-color-5"/>
</div>
<div class="o_colorpicker_section" data-name="common">
<button data-color="black"></button>
<button data-color="900"></button>
<button data-color="800"></button>
<button data-color="700" class="d-none"></button>
<button data-color="600"></button>
<button data-color="500" class="d-none"></button>
<button data-color="400"></button>
<button data-color="300" class="d-none"></button>
<button data-color="200"></button>
<button data-color="100"></button>
<button data-color="white"></button>
</div>
<div class="o_colorpicker_section" data-name="transparent_grayscale">
<button data-color="black-15"></button>
<button data-color="black-25"></button>
<button data-color="black-50"></button>
<button data-color="black-75"></button>
<button data-color="white-25"></button>
<button data-color="white-50"></button>
<button data-color="white-75"></button>
<button data-color="white-85"></button>
</div>
<div class="o_colorpicker_section" data-name="predefined_gradients">
<t t-set="gradients" t-value="[
'linear-gradient(135deg, rgb(255, 204, 51) 0%, rgb(226, 51, 255) 100%)',
'linear-gradient(135deg, rgb(102, 153, 255) 0%, rgb(255, 51, 102) 100%)',
'linear-gradient(135deg, rgb(47, 128, 237) 0%, rgb(178, 255, 218) 100%)',
'linear-gradient(135deg, rgb(203, 94, 238) 0%, rgb(75, 225, 236) 100%)',
'linear-gradient(135deg, rgb(214, 255, 127) 0%, rgb(0, 179, 204) 100%)',
'linear-gradient(135deg, rgb(255, 222, 69) 0%, rgb(69, 33, 0) 100%)',
'linear-gradient(135deg, rgb(222, 222, 222) 0%, rgb(69, 69, 69) 100%)',
'linear-gradient(135deg, rgb(255, 222, 202) 0%, rgb(202, 115, 69) 100%)'
]"/>
<t t-foreach="gradients" t-as="gradient">
<button class="w-50" t-attf-style="background-image: #{gradient};" t-att-data-color="gradient"/>
</t>
</div>
<div class="o_colorpicker_section o_custom_gradient_editor" data-name="custom_gradient">
<button class="w-50 o_custom_gradient_btn o_we_color_btn py-1 btn" title="Define a custom gradient">Custom</button>
<div class="o_color_picker_inputs mx-1">
<t t-set="input_classes" t-value="'p-0 border-0 text-center text-monospace bg-transparent text-white'" />
<div class="d-flex justify-content-between my-2 o_type_row">
<we-title>Type</we-title>
<span class="d-flex justify-content-between">
<we-button data-gradient-type="linear-gradient" class="d-flex align-items-baseline active">Linear</we-button>
<we-button data-gradient-type="radial-gradient" class="d-flex align-items-baseline">Radial</we-button>
</span>
</div>
<div class="d-flex justify-content-between my-2 o_angle_row">
<we-title>Angle</we-title>
<span class="o_custom_gradient_input bg-black-50 px-1 d-flex align-items-baseline">
<input data-name="angle" type="text" t-attf-class="{{input_classes}}" style="width: 5ch;" value="90"/>
<span class="flex-grow-0 ml-1 text-white-50">deg</span>
</span>
</div>
<div class="d-flex justify-content-between my-2 o_position_row">
<we-title>Position</we-title>
<span class="d-flex">
<span class="mr-2">X</span>
<span class="o_custom_gradient_input bg-black-50 px-1 d-flex">
<input data-name="positionX" type="text" t-attf-class="{{input_classes}}" style="width: 3ch;" value="25"/>
<span class="flex-grow-0 ml-1 text-white-50">%</span>
</span>
<span class="mr-2 ml-3">Y</span>
<span class="o_custom_gradient_input bg-black-50 px-1 d-flex">
<input data-name="positionY" type="text" t-attf-class="{{input_classes}}" style="width: 3ch;" value="25"/>
<span class="flex-grow-0 ml-1 text-white-50">%</span>
</span>
</span>
</div>
<div class="d-flex justify-content-between my-2 o_size_row">
<we-title>Size</we-title>
<span class="d-flex justify-content-between">
<we-button data-gradient-size="closest-side" class="d-flex align-items-baseline"
title="Extend to the closest side">
<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.5" y="3.5" width="13" height="13" stroke="#AAAAAD"/>
<path d="M3 4H9V8C9 8.55228 8.55228 9 8 9H4C3.44772 9 3 8.55228 3 8V4Z" fill="#8C8C92"/>
<path d="M6 11C7.65685 11 9 9.65685 9 8C9 6.34315 7.65685 5 6 5C4.34315 5 3 6.34315 3 8C3 9.65685 4.34315 11 6 11Z" fill="#74747B"/>
<path d="M6 10C7.10457 10 8 9.10457 8 8C8 6.89543 7.10457 6 6 6C4.89543 6 4 6.89543 4 8C4 9.10457 4.89543 10 6 10Z" fill="white"/>
<rect x="2" y="3" width="12" height="1" fill="white"/>
</svg>
</we-button>
<we-button data-gradient-size="closest-corner" class="d-flex align-items-baseline"
title="Extend to the closest corner">
<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.5" y="3.5" width="13" height="13" stroke="#AAAAAD"/>
<path d="M2 4H9V7C9 9.20914 7.20914 11 5 11H2V4Z" fill="#8C8C92"/>
<path d="M6 11C7.65685 11 9 9.65685 9 8C9 6.34315 7.65685 5 6 5C4.34315 5 3 6.34315 3 8C3 9.65685 4.34315 11 6 11Z" fill="#74747B"/>
<path d="M6 10C7.10457 10 8 9.10457 8 8C8 6.89543 7.10457 6 6 6C4.89543 6 4 6.89543 4 8C4 9.10457 4.89543 10 6 10Z" fill="white"/>
<rect x="1" y="3" width="8" height="1" fill="white"/>
<rect x="1" y="11" width="8" height="1" transform="rotate(-90 1 11)" fill="white"/>
</svg>
</we-button>
<we-button data-gradient-size="farthest-side" class="d-flex align-items-baseline active"
title="Extend to the farthest side">
<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.5" y="3.5" width="13" height="13" stroke="#AAAAAD"/>
<path d="M7 12C10.3137 12 14 10.2091 14 8C14 5.79086 10.3137 4 7 4C3.68629 4 2 5.79086 2 8C2 10.2091 3.68629 12 7 12Z" fill="#8C8C92"/>
<path d="M6 11C7.65685 11 9 9.65685 9 8C9 6.34315 7.65685 5 6 5C4.34315 5 3 6.34315 3 8C3 9.65685 4.34315 11 6 11Z" fill="#74747B"/>
<path d="M6 10C7.10457 10 8 9.10457 8 8C8 6.89543 7.10457 6 6 6C4.89543 6 4 6.89543 4 8C4 9.10457 4.89543 10 6 10Z" fill="white"/>
<rect x="14" y="4" width="1" height="12" fill="white"/>
</svg>
</we-button>
<we-button data-gradient-size="farthest-corner" class="d-flex align-items-baseline"
title="Extend to the farthest corner">
<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.5" y="3.5" width="13" height="13" stroke="#AAAAAD"/>
<path d="M2 4H14V10C14 13.3137 11.3137 16 8 16H2V4Z" fill="#8C8C92"/>
<path d="M6 11C7.65685 11 9 9.65685 9 8C9 6.34315 7.65685 5 6 5C4.34315 5 3 6.34315 3 8C3 9.65685 4.34315 11 6 11Z" fill="#74747B"/>
<path d="M6 10C7.10457 10 8 9.10457 8 8C8 6.89543 7.10457 6 6 6C4.89543 6 4 6.89543 4 8C4 9.10457 4.89543 10 6 10Z" fill="white"/>
<rect x="15" y="17" width="7" height="0.999999" transform="rotate(-180 15 17)" fill="white"/>
<rect x="15" y="10" width="7" height="1" transform="rotate(90 15 10)" fill="white"/>
</svg>
</we-button>
</span>
</div>
<div class="mx-1 o_custom_gradient_scale">
<div class="w-100"/>
</div>
<div class="w-100 o_slider_multi" role="group"/>
<we-button class="o_remove_color fa fa-fw fa-trash o_we_link o_we_hover_danger"
title="Remove Selected Color" aria-label="Remove Selected Color"/>
</div>
</div>
</colorpicker>
</template>
</odoo>
Reference in New Issue View Git Blame Copy Permalink