pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2cc8af737ab02ab10b268787092739c1908fe5fe
odoo_source/addons/web_editor/views/snippets.xml
T
qsm-odoo bbe117e107 [IMP] web_editor, website: introduce foldable zones in the editor UI 
Now any set of widgets and rows can be placed in a we-collapse element
so that those elements can be foldable. The first element inside (or
the mentioned "string" on the we-collapse element itself) is used as the
always shown element (with a toggler on its left to toggle the
visibility of the other items).

we-collapse inside other we-collapse is supported as well.

Limitations / Other infos:

- The use of '⌙' and   characters is not automatic (yet?).
  Sometimes it actually make sense to use them without a we-collapse or
  to not use them in a we-collapse.

- The use of we-collapse is limited to widgets inside the same option.
  So unfortunately, there is no current way to add all bg image options
  in a folable section as those contain many different options. Maybe
  in the future.

Part of https://github.com/odoo/odoo/pull/56350

closes odoo/odoo#56352

X-original-commit: d9c450ac97de40c71aebd487cff725bfda6a577b
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2020-08-22 17:51:32 +00:00

377 lines
22 KiB
XML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="snippets" groups="base.group_user">
<div id="snippets_menu">
<button type="button" tabindex="1" class="o_we_add_snippet_btn active text-uppercase" accesskey="1">
<span>Blocks</span>
</button>
<t t-set="customize_title">Click in the page to customize</t>
<button type="button" tabindex="2" class="o_we_customize_snippet_btn text-uppercase"
t-att-data-title="customize_title"
disabled="disabled">
<span>Style</span>
</button>
</div>
<div class="o_snippet_search_filter">
<input type="text" class="o_snippet_search_filter_input" placeholder="Search..."/>
<i role="button" class="fa fa-times o_snippet_search_filter_reset d-none"/>
</div>
<div id="o_scroll">
<div id="snippet_custom" class="o_panel d-none">
<div class="o_panel_header">Custom</div>
<div id="snippet_custom_body" class="o_panel_body"/>
</div>
<t id="default_snippets">
<div id="snippet_structure" class="o_panel">
<div class="o_panel_header">First Panel</div>
<div class="o_panel_body">
<t t-snippet="web_editor.s_hr" t-thumbnail="/website/static/src/img/snippets_thumbs/s_separator.png"/>
</div>
</div>
</t>
</div>
<div id="snippet_options" class="d-none">
<t t-call="web_editor.snippet_options"/>
</div>
</template>
<template id="snippet_options_image_optimization_widgets">
<div class="o_we_external_warning d-none">
<we-title title="Quality options are unavailable for external images. If you want to change this image's quality, please first download it from the original source and upload it in Odoo.">
<i class="fa fa-warning" /> External Image
</we-title>
</div>
<we-collapse>
<t t-set="filter_label">Filter</t>
<we-select t-att-string="indent and (' ⌙ %s' % filter_label) or filter_label">
<we-button data-gl-filter="">None</we-button>
<we-button data-gl-filter="blur">Blur</we-button>
<we-button data-gl-filter="1977">1977</we-button>
<we-button data-gl-filter="aden">Aden</we-button>
<we-button data-gl-filter="brannan">Brannan</we-button>
<we-button data-gl-filter="earlybird">EarlyBird</we-button>
<we-button data-gl-filter="inkwell">Inkwell</we-button>
<we-button data-gl-filter="maven">Maven</we-button>
<we-button data-gl-filter="toaster">Toaster</we-button>
<we-button data-gl-filter="walden">Walden</we-button>
<we-button data-gl-filter="valencia">Valencia</we-button>
<we-button data-gl-filter="xpro">Xpro</we-button>
<we-button data-gl-filter="custom" data-name="custom_glfilter_opt">Custom</we-button>
</we-select>
<t t-set="color_label">Color</t>
<t t-set="saturation_label">Saturation</t>
<t t-set="contrast_label">Contrast</t>
<t t-set="brightness_label">Brightness</t>
<t t-set="sepia_label">Sepia</t>
<t t-set="blur_label">Blur</t>
<we-row t-att-string="indent and ('  ⌙ %s' % color_label) or ('⌙ %s' % color_label)">
<we-select data-filter-property="blend" data-dependencies="custom_glfilter_opt">
<we-button data-custom-filter="normal">Normal</we-button>
<we-button data-custom-filter="overlay">overlay</we-button>
<we-button data-custom-filter="screen">screen</we-button>
<we-button data-custom-filter="multiply">multiply</we-button>
<we-button data-custom-filter="lighter">add</we-button>
<we-button data-custom-filter="exclusion">exclusion</we-button>
<we-button data-custom-filter="darken">darken</we-button>
<we-button data-custom-filter="lighten">lighten</we-button>
</we-select>
<we-colorpicker data-dependencies="custom_glfilter_opt" data-custom-filter="" data-filter-property="filterColor" data-excluded="common, theme"/>
</we-row>
<we-range t-att-string="indent and ('  ⌙ %s' % saturation_label) or ('⌙ %s' % saturation_label)"
data-dependencies="custom_glfilter_opt"
data-custom-filter=""
data-filter-property="saturation"
data-min="-100"
data-step="10"/>
<we-range t-att-string="indent and ('  ⌙ %s' % contrast_label) or ('⌙ %s' % contrast_label)"
data-dependencies="custom_glfilter_opt"
data-custom-filter=""
data-filter-property="contrast"
data-min="-100"
data-step="10"/>
<we-range t-att-string="indent and ('  ⌙ %s' % brightness_label) or ('⌙ %s' % brightness_label)"
data-dependencies="custom_glfilter_opt"
data-custom-filter=""
data-filter-property="brightness"
data-min="-100"
data-step="10"/>
<we-range t-att-string="indent and ('  ⌙ %s' % sepia_label) or ('⌙ %s' % sepia_label)"
data-dependencies="custom_glfilter_opt"
data-custom-filter=""
data-filter-property="sepia"
data-step="5"/>
<we-range t-att-string="indent and ('  ⌙ %s' % blur_label) or ('⌙ %s' % blur_label)"
data-dependencies="custom_glfilter_opt"
data-custom-filter=""
data-filter-property="blur"
data-max="2000"
data-step="100"/>
</we-collapse>
<we-collapse>
<t t-set="width_label">Width</t>
<we-select t-att-string="indent and (' ⌙ %s' % width_label) or width_label" data-name="width_select_opt"/>
<t t-set="quality_label">Quality</t>
<we-range t-att-string="indent and (' ⌙ %s' % quality_label) or quality_label" data-set-quality=""/>
</we-collapse>
<div class="o_we_image_weight d-none"><small/><b/></div>
</template>
<template id="snippet_options_background_color_widget">
<we-colorpicker title="Color"
data-name="bg_color_opt"
data-select-style=""
data-css-property="background-color"
data-color-prefix="bg-"
t-att-data-with-combinations="with_color_combinations and 'true' or None"
t-att-data-css-compatible="css_compatible and 'true' or None"/>
</template>
<template id="snippet_options_background_options">
<div t-att-data-js="with_colors and with_color_combinations and 'ColoredLevelBackground' or 'BackgroundToggler'"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<we-row t-if="with_colors or with_images" string="Background" class="o_we_full_row">
<t t-if="with_colors" t-call="web_editor.snippet_options_background_color_widget"/>
<t t-if="with_images">
<we-button title="Image" class="ml-auto"
data-name="bg_image_toggle_opt"
t-att-data-dependencies="images_dependencies"
data-toggle-bg-image="true"
data-no-preview="true">
<i class="fa fa-fw fa-camera"/>
</we-button>
<we-button title="Filter"
data-name="bg_filter_toggle_opt"
data-dependencies="bg_image_toggle_opt"
data-toggle-bg-filter="true"
data-no-preview="true">
<i class="fa fa-fw fa-paint-brush"/>
</we-button>
<we-button title="Shape"
data-toggle-bg-shape="true"
t-att-data-dependencies="images_dependencies"
data-no-preview="true"
data-img="/web_editor/static/src/img/snippets_options/bg_shape.svg"/>
</t>
</we-row>
</div>
<t t-if="with_images">
<div data-js="BackgroundImage"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<we-row string="⌙ Image">
<we-imagepicker title="Edit image"
data-background=""
data-name="bg_image_opt"
data-dependencies="bg_image_opt"/>
</we-row>
</div>
<div data-js="BackgroundPosition"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<we-collapse>
<we-row string=" ⌙ Position"><!-- &emsp; -->
<we-select data-no-preview="true">
<we-button data-background-type="cover">Cover</we-button>
<we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
</we-select>
<we-button title="Background Position" data-background-position-overlay="true" data-no-preview="true">
<i class="fa fa-fw fa-crosshairs"/>
</we-button>
</we-row>
<we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
<!-- &emsp; -->
<we-input string="  ⌙ Width" data-select-style="auto" placeholder="auto" data-unit="px"/>
<we-input string="  ⌙ Height" data-select-style="auto" placeholder="auto" data-unit="px"/>
</we-multi>
</we-collapse>
</div>
<div data-js="BackgroundOptimize"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<t t-call="web_editor.snippet_options_image_optimization_widgets">
<t t-set="indent" t-value="True"/>
</t>
</div>
<!-- Color filter -->
<div t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<we-colorpicker string="⌙ Color filter"
data-select-style="true"
data-css-property="background-color"
data-color-prefix="bg-"
data-apply-to=".o_we_bg_filter"/>
</div>
<div data-js="BackgroundShape" string="Shape"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<we-collapse>
<we-select-pager class="o_we_shape_menu" string="⌙ Shape" data-dependencies="!shape_none_opt" data-name="bg_shape_opt">
<!-- Invisible None button to be used for select's placeholder text -->
<we-button data-shape="" data-name="shape_none_opt"/>
<we-select-page>
<we-button data-shape="web_editor/Airy/01" data-select-label="Airy 01"/>
<we-button data-shape="web_editor/Airy/02" data-select-label="Airy 02"/>
<we-button data-shape="web_editor/Airy/03" data-select-label="Airy 03"/>
<we-button data-shape="web_editor/Airy/04" data-select-label="Airy 04"/>
<we-button data-shape="web_editor/Airy/05" data-select-label="Airy 05"/>
<we-button data-shape="web_editor/Airy/06" data-select-label="Airy 06"/>
<we-button data-shape="web_editor/Airy/07" data-select-label="Airy 07"/>
<we-button data-shape="web_editor/Airy/08" data-select-label="Airy 08"/>
<we-button data-shape="web_editor/Airy/09" data-select-label="Airy 09"/>
<we-button data-shape="web_editor/Airy/10" data-select-label="Airy 10"/>
<we-button data-shape="web_editor/Airy/11" data-select-label="Airy 11"/>
<we-button data-shape="web_editor/Airy/12" data-select-label="Airy 12"/>
<we-button data-shape="web_editor/Airy/13" data-select-label="Airy 13"/>
<we-button data-shape="web_editor/Airy/14" data-select-label="Airy 14"/>
</we-select-page>
<we-select-page>
<we-button data-shape="web_editor/Blobs/01" data-select-label="Blobs 01"/>
<we-button data-shape="web_editor/Blobs/02" data-select-label="Blobs 02"/>
<we-button data-shape="web_editor/Blobs/03" data-select-label="Blobs 03"/>
<we-button data-shape="web_editor/Blobs/04" data-select-label="Blobs 04"/>
<we-button data-shape="web_editor/Blobs/05" data-select-label="Blobs 05"/>
<we-button data-shape="web_editor/Blobs/06" data-select-label="Blobs 06"/>
<we-button data-shape="web_editor/Blobs/07" data-select-label="Blobs 07"/>
<we-button data-shape="web_editor/Blobs/08" data-select-label="Blobs 08"/>
<we-button data-shape="web_editor/Blobs/09" data-select-label="Blobs 09"/>
<we-button data-shape="web_editor/Blobs/10" data-select-label="Blobs 10"/>
<we-button data-shape="web_editor/Blobs/11" data-select-label="Blobs 11"/>
<we-button data-shape="web_editor/Blobs/12" data-select-label="Blobs 12"/>
</we-select-page>
<we-select-page>
<we-button data-shape="web_editor/Blocks/01" data-select-label="Blocks 01"/>
<we-button data-shape="web_editor/Blocks/02" data-select-label="Blocks 02"/>
<we-button data-shape="web_editor/Blocks/03" data-select-label="Blocks 03"/>
<we-button data-shape="web_editor/Blocks/04" data-select-label="Blocks 04"/>
</we-select-page>
<we-select-page>
<we-button data-shape="web_editor/Bold/01" data-select-label="Bold 01"/>
<we-button data-shape="web_editor/Bold/02" data-select-label="Bold 02"/>
<we-button data-shape="web_editor/Bold/03" data-select-label="Bold 03"/>
<we-button data-shape="web_editor/Bold/04" data-select-label="Bold 04"/>
<we-button data-shape="web_editor/Bold/05" data-select-label="Bold 05"/>
<we-button data-shape="web_editor/Bold/06" data-select-label="Bold 06"/>
<we-button data-shape="web_editor/Bold/07" data-select-label="Bold 07"/>
<we-button data-shape="web_editor/Bold/08" data-select-label="Bold 08"/>
<we-button data-shape="web_editor/Bold/09" data-select-label="Bold 09"/>
<we-button data-shape="web_editor/Bold/10" data-select-label="Bold 10"/>
<we-button data-shape="web_editor/Bold/11" data-select-label="Bold 11"/>
<we-button data-shape="web_editor/Bold/12" data-select-label="Bold 12"/>
</we-select-page>
<we-select-page>
<we-button data-shape="web_editor/Origins/01" data-select-label="Origins 01"/>
<we-button data-shape="web_editor/Origins/02" data-select-label="Origins 02"/>
<we-button data-shape="web_editor/Origins/03" data-select-label="Origins 03"/>
<we-button data-shape="web_editor/Origins/04" data-select-label="Origins 04"/>
<we-button data-shape="web_editor/Origins/05" data-select-label="Origins 05"/>
<we-button data-shape="web_editor/Origins/06" data-select-label="Origins 06"/>
<we-button data-shape="web_editor/Origins/07" data-select-label="Origins 07"/>
<we-button data-shape="web_editor/Origins/08" data-select-label="Origins 08"/>
<we-button data-shape="web_editor/Origins/09" data-select-label="Origins 09"/>
<we-button data-shape="web_editor/Origins/10" data-select-label="Origins 10"/>
<we-button data-shape="web_editor/Origins/11" data-select-label="Origins 11"/>
<we-button data-shape="web_editor/Origins/12" data-select-label="Origins 12"/>
<we-button data-shape="web_editor/Origins/13" data-select-label="Origins 13"/>
<we-button data-shape="web_editor/Origins/14" data-select-label="Origins 14"/>
<we-button data-shape="web_editor/Origins/15" data-select-label="Origins 15"/>
</we-select-page>
<we-select-page>
<we-button data-shape="web_editor/Rainy/01" data-select-label="Rainy 01"/>
<we-button data-shape="web_editor/Rainy/02" data-select-label="Rainy 02"/>
<we-button data-shape="web_editor/Rainy/03" data-select-label="Rainy 03"/>
<we-button data-shape="web_editor/Rainy/04" data-select-label="Rainy 04"/>
<we-button data-shape="web_editor/Rainy/05" data-select-label="Rainy 05"/>
<we-button data-shape="web_editor/Rainy/06" data-select-label="Rainy 06"/>
<we-button data-shape="web_editor/Rainy/07" data-select-label="Rainy 07"/>
<we-button data-shape="web_editor/Rainy/08" data-select-label="Rainy 08"/>
<we-button data-shape="web_editor/Rainy/09" data-select-label="Rainy 09"/>
</we-select-page>
<we-select-page>
<we-button data-shape="web_editor/Wavy/01" data-select-label="Wavy 01"/>
<we-button data-shape="web_editor/Wavy/02" data-select-label="Wavy 02"/>
<we-button data-shape="web_editor/Wavy/03" data-select-label="Wavy 03"/>
<we-button data-shape="web_editor/Wavy/04" data-select-label="Wavy 04"/>
<we-button data-shape="web_editor/Wavy/05" data-select-label="Wavy 05"/>
<we-button data-shape="web_editor/Wavy/06" data-select-label="Wavy 06"/>
<we-button data-shape="web_editor/Wavy/07" data-select-label="Wavy 07"/>
<we-button data-shape="web_editor/Wavy/08" data-select-label="Wavy 08"/>
<we-button data-shape="web_editor/Wavy/09" data-select-label="Wavy 09"/>
<we-button data-shape="web_editor/Wavy/10" data-select-label="Wavy 10"/>
<we-button data-shape="web_editor/Wavy/11" data-select-label="Wavy 11"/>
<we-button data-shape="web_editor/Wavy/12" data-select-label="Wavy 12"/>
<we-button data-shape="web_editor/Wavy/13" data-select-label="Wavy 13"/>
<we-button data-shape="web_editor/Wavy/14" data-select-label="Wavy 14"/>
<we-button data-shape="web_editor/Wavy/15" data-select-label="Wavy 15"/>
<we-button data-shape="web_editor/Wavy/16" data-select-label="Wavy 16"/>
<we-button data-shape="web_editor/Wavy/17" data-select-label="Wavy 17"/>
<we-button data-shape="web_editor/Wavy/18" data-select-label="Wavy 18"/>
<we-button data-shape="web_editor/Wavy/19" data-select-label="Wavy 19"/>
<we-button data-shape="web_editor/Wavy/20" data-select-label="Wavy 20"/>
<we-button data-shape="web_editor/Wavy/21" data-select-label="Wavy 21"/>
<we-button data-shape="web_editor/Wavy/22" data-select-label="Wavy 22"/>
<we-button data-shape="web_editor/Wavy/23" data-select-label="Wavy 23"/>
</we-select-page>
<we-select-page>
<we-button data-shape="web_editor/Zigs/01" data-select-label="Zigs 01"/>
<we-button data-shape="web_editor/Zigs/02" data-select-label="Zigs 02"/>
<we-button data-shape="web_editor/Zigs/03" data-select-label="Zigs 03"/>
<we-button data-shape="web_editor/Zigs/04" data-select-label="Zigs 04"/>
<we-button data-shape="web_editor/Zigs/05" data-select-label="Zigs 05"/>
</we-select-page>
</we-select-pager>
<we-row string=" ⌙ Flip"><!-- &emsp; -->
<we-button data-flip-x="true" data-no-preview="true" data-dependencies="!shape_none_opt"><i class="fa fa-fw fa-arrows-h"/></we-button>
<we-button data-flip-y="true" data-no-preview="true" data-dependencies="!shape_none_opt"><i class="fa fa-fw fa-arrows-v"/></we-button>
</we-row>
<we-row string=" ⌙ Colors" data-name="colors"/>
</we-collapse>
</div>
</t>
</template>
<!-- options (data-selector, data-drop-in, data-drop-near, data-js to link js object ) -->
<template id="snippet_options">
<!-- t-field -->
<div data-js='many2one'
data-selector="[data-oe-many2one-model]:not([data-oe-readonly])"
data-no-check="true"/>
<div data-selector=".s_hr"
data-drop-near="p, h1, h2, h3, blockquote, .s_hr"/>
<div data-js="VersionControl"
data-selector="[data-snippet]"/>
<div data-js="ImageOptimize"
data-selector="img">
<t t-call="web_editor.snippet_options_image_optimization_widgets"/>
</div>
</template>
<!-- default block -->
<template id="s_hr" name="Separator">
<div class="s_hr pt32 pb32">
<hr class="s_hr_1px s_hr_solid w-100 mx-auto"/>
</div>
</template>
</odoo>
Reference in New Issue View Git Blame Copy Permalink