Files
odoo_source/addons/website/views/snippets/s_timeline.xml
T
qsm-odoo 7736cde22c [IMP] web_editor, website, *: use new color names
*: mass_mailing, website_blog, website_forum, website_hr_recruitment

Deprecate alpha, beta, gamma, delta and espilon color names and now use
a new color system: o-color-x, with x from 1 to 5.

This will allow to review the colors of all themes to have nice visuals
for the new color combinations classes, without breaking the current
uses of bg-alpha, alert-delta, etc in current websites of customers
(by keeping the old color and classes for compatibility).

This will also allow to uniformize all themes under the same conventions
to enforce BS color override:
- o-color-1 used as primary (as before, for alpha)
- o-color-2 used as secondary (as before, for beta)

Before, some themes were not following the 2 guidelines. The users
using those themes will simply have the possibility to choose o-color-1
and o-color-2 colors accordingly to restore their website without
breaking the new system features.

Another change is that those colors are defined through color palettes
and not theme color palettes. This will avoid them to generate automatic
bootstrap classes which we don't want (alert, btn) and generate the one
we want by ourself.

Note: for mass mailing, the colors and classes also have been renamed
but the system stays unchanged.

Part of https://github.com/odoo/odoo/pull/45856
task-2197038
2020-06-02 09:42:19 +00:00

74 lines
3.9 KiB
XML

<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template name="Timeline" id="s_timeline">
<section class="s_timeline pt24 pb48">
<div class="container s_timeline_line">
<div class="s_timeline_row d-block d-md-flex flex-row" data-name="Row">
<div class="s_timeline_date"><span class="bg-white"><b>2019</b></span></div>
<div class="s_timeline_content d-flex">
<div class="s_timeline_card s_card card bg-white w-100" data-name="Card" data-snippet="s_card">
<div class="card-body">
<h5 class="card-title">Your title</h5>
<p class="card-text">A timeline is a graphical representation on which important events are marked.</p>
</div>
</div>
<i class="fa fa-1x fa-child bg-secondary rounded-circle s_timeline_icon"/>
</div>
<div class="s_timeline_content"/>
</div>
<div class="s_timeline_row d-block d-md-flex flex-row" data-name="Row">
<div class="s_timeline_date"><span class="bg-white"><b>2018</b></span></div>
<div class="s_timeline_content d-flex">
<div class="s_timeline_card s_card card bg-white w-100" data-name="Card" data-snippet="s_card">
<div class="card-body">
<p class="card-text">You can edit, duplicate...</p>
</div>
</div>
<i class="fa fa-1x fa-graduation-cap bg-secondary rounded-circle s_timeline_icon"/>
</div>
<div class="s_timeline_content d-flex">
<i class="fa fa-1x fa-asterisk bg-secondary rounded-circle s_timeline_icon"/>
<div class="s_timeline_card s_card card bg-white w-100" data-name="Card" data-snippet="s_card">
<div class="card-body">
<p class="card-text">...and switch the timeline contents to fit your needs.</p>
</div>
</div>
</div>
</div>
<div class="s_timeline_row d-block d-md-flex flex-row-reverse" data-name="Row">
<div class="s_timeline_date"><span class="bg-white"><b>2015</b></span></div>
<div class="s_timeline_content d-flex">
<div class="s_timeline_card s_card card bg-white w-100" data-name="Card" data-snippet="s_card">
<div class="card-body">
<p class="card-text">Use this timeline as a part of your resume, to show your visitors what you've done in the past.</p>
</div>
</div>
<i class="fa fa-1x fa-bolt bg-secondary rounded-circle s_timeline_icon"/>
</div>
<div class="s_timeline_content"/>
</div>
</div>
</section>
</template>
<template id="s_timeline_options" inherit_id="website.snippet_options">
<xpath expr="." position="inside">
<div data-selector=".s_timeline_row" data-drop-near=".s_timeline_row"/>
<div data-js="Timeline" data-selector=".s_timeline_card">
<we-button data-timeline-card="" data-no-preview="true"><i class="fa fa-fw fa-angle-left"/><i class="fa fa-fw fa-angle-right"/></we-button>
</div>
</xpath>
<xpath expr="//div[@data-js='SnippetMove'][contains(@data-selector,'section')]" position="attributes">
<attribute name="data-selector" add=".s_timeline_row" separator=","/>
</xpath>
</template>
<template id="assets_snippet_s_timeline_css_000" inherit_id="website.assets_frontend">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_timeline/000.scss"/>
</xpath>
</template>
</odoo>