187 lines
12 KiB
XML
187 lines
12 KiB
XML
|
<?xml version="1.0" encoding="utf-8"?>
|
||
|
|
<odoo>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
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,base.group_portal">
|
||
|
|
<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="ms-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 font-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 ms-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="me-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 ms-1 text-white-50">%</span>
|
||
|
|
</span>
|
||
|
|
<span class="me-2 ms-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 ms-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>
|
||
|
|
<template id="web_editor.tests">
|
||
|
|
<t t-call="web.layout">
|
||
|
|
<t t-set="title">Odoo Editor Tests</t>
|
||
|
|
<t t-set="head">
|
||
|
|
<t t-call-assets="web_editor.assets_tests_styles" t-js="false"/>
|
||
|
|
<link rel="stylesheet" href="/web_editor/static/src/js/editor/odoo-editor/test/lib/mocha.css"/>
|
||
|
|
<style type="text/css">
|
||
|
|
#mocha-report b.zws, #mocha-report b.tab {
|
||
|
|
background-color: #833112;
|
||
|
|
color: white;
|
||
|
|
border-radius: 3px;
|
||
|
|
padding: 1px 3px;
|
||
|
|
font-size: 8px;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
#mocha-report b.tab {
|
||
|
|
background-color: #14386e;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script src="/web_editor/static/lib/DOMPurify.js"></script>
|
||
|
|
<script src="/web_editor/static/src/js/editor/odoo-editor/test/lib/mocha.js"></script>
|
||
|
|
<script src="/web_editor/static/src/js/editor/odoo-editor/test/lib/chai.js"></script>
|
||
|
|
<script>mocha.setup('bdd').fullTrace()</script>
|
||
|
|
<t t-call-assets="web_editor.mocha_tests"/>
|
||
|
|
</t>
|
||
|
|
<div id="mocha"></div>
|
||
|
|
<div id="editor-test-container"></div>
|
||
|
|
</t>
|
||
|
|
</template>
|
||
|
|
</odoo>
|