[IMP] website: add s_alert snippet default layout options
Part of Inner Snippets review task. `s_alert` should have a list of preset layout. Part of https://github.com/odoo/odoo/pull/42937 task-2088157 task-2152191
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<odoo>
|
||||
|
||||
<template id="s_alert" name="Alert">
|
||||
<div class="s_alert s_alert_md alert-delta w-100 clearfix">
|
||||
<div class="s_alert s_alert_md alert-info w-100 clearfix">
|
||||
<i class="fa fa-2x fa-info-circle s_alert_icon"/>
|
||||
<div class="s_alert_content">
|
||||
<p>Explain the benefits you offer. <br/>Don't write about products or services here, write about solutions.</p>
|
||||
@@ -11,20 +11,30 @@
|
||||
</template>
|
||||
|
||||
<template id="s_alert_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="." position="inside">
|
||||
<div data-selector=".s_alert">
|
||||
<we-colorpicker string="Color"
|
||||
data-select-style="true"
|
||||
data-css-property="background-color"
|
||||
data-color-prefix="alert-"/>
|
||||
<xpath expr="//div[@id='so_width']" position="before">
|
||||
<div data-selector=".s_alert" data-js="Alert">
|
||||
<we-select string="Type" data-apply-to=".fa.s_alert_icon" data-trigger="alert_colorpicker_opt">
|
||||
<we-button data-select-class="fa-user-circle" data-trigger-value="primary">Primary</we-button>
|
||||
<we-button data-select-class="fa-user-circle-o" data-trigger-value="secondary">Secondary</we-button>
|
||||
<we-button data-select-class="fa-info-circle" data-trigger-value="info">Info</we-button>
|
||||
<we-button data-select-class="fa-check-circle" data-trigger-value="success">Success</we-button>
|
||||
<we-button data-select-class="fa-exclamation-triangle" data-trigger-value="warning">Warning</we-button>
|
||||
<we-button data-select-class="fa-exclamation-circle" data-trigger-value="danger">Danger</we-button>
|
||||
</we-select>
|
||||
</div>
|
||||
|
||||
</xpath>
|
||||
<!-- Keep those options in separate xpath for options order -->
|
||||
<xpath expr="//div[@id='so_width']" position="after">
|
||||
<div data-selector=".s_alert">
|
||||
<we-select string="Size">
|
||||
<we-button data-select-class="s_alert_sm">Small</we-button>
|
||||
<we-button data-select-class="s_alert_md">Medium</we-button>
|
||||
<we-button data-select-class="s_alert_lg">Large</we-button>
|
||||
</we-select>
|
||||
<we-colorpicker string="Color" data-name="alert_colorpicker_opt"
|
||||
data-select-style="true"
|
||||
data-css-property="background-color"
|
||||
data-color-prefix="alert-"/>
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user