Files
odoo_source/addons/web_editor/views/editor.xml
T
qsm-odoo 6e4db7d13a [REF] *: review scss variables handling
Unlike LESS, SCSS variables are not lazy loaded. Our system has thus
to be updated. This commit creates new templates which are t-called
in assets bundles (to replace the old less_helpers template):

- web._assets_utils: regroups the mixins and functions which *can*
  (and so should) be available in every asset bundle

- web._assets_primary_variables: regroups the variables (or mixins
  used as variables) which *can* (and so should) be available in
  every asset bundle

- web._assets_secondary_variables: same as above but provides an
  environnement where all the 'primary' ones are accessible. This is
  for example useful to handle the community/enterprise split:

  // Community primary variables
  $o-pink-color: pink; // enterprise color
  $o-brand-primary: blue;

  // Enterprise primary variables
  $o-brand-primary: $o-pink-color;

  // Community secondary variables
  $o-my-darker-primary: darken($o-brand-primary, 5%);

  => If there was only one variable template, enterprise edition would
     have been able to define its primary color at the end but the
     darker primary would not have been updated. Using the "!default"
     system and putting enterprise definition above would not have
     solved the problem as the $o-pink-color would not have been
     accessible.

- web._assets_backend_helpers: regroups the variables, mixins and
  functions which *can* (and so should) be available in the backend
  asset bundle only. This is especially (only?) useful for bootstrap
  variables overriddes.

- web._assets_frontend_helpers: regroups the variables, mixins and
  functions which *can* (and so should) be available in the frontend
  asset bundle only. This is especially (only?) useful for bootstrap
  variables overriddes.

Note: bootstrap variables are not accessible in any of those anymore.
If you have variables that should depend on bootstrap, you have 3
solutions:

- Find another way: your variable is probably useless, use bootstrap
  variables directly or create a variable that will influence the
  value of bootstrap variables. E.g. instead of declaring:
  `$myvar: $bootstrapvar * 3`
  and using $myvar alone, declare:
  `$myvar: 3` and use `$myvar * $bootstrapvar` where needed.

- Declare a copy of the bootstrap variable and use that one. In that
  case, you should also force-set the real bootstrap one to be sure
  they match (this should be done in appropriate templates mentioned
  above). E.g.
  ```
  $o-boostrapvar: 5;
  ...
  $boostrapvar: $o-bootstrapvar;
  ```

- Set your variable to null and set it to your bootstrap expression
  in the file you will need it (where bootstrap variables are accessible)
  without forgetting to add the !default flag to allow overriddes.
  ```
  $myvar: null;
  ...
  $myvar: $bootstrapvar * 5 !default;
  ```

This commit also partly changes the variable names to follow the
convention:
$o-<app_id>-<name> where 'app_id' is the current's app name or a
meaningful unique identifier ("theme" for all themes for example, as
no multiple themes can be installed).
2018-04-18 15:59:19 +02:00

178 lines
9.3 KiB
XML

<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="summernote" name="Summernote">
<script type="text/javascript">
(function () {
"use strict";
odoo.define('jquery', function () {return $;});
var uniqId = 0;
odoo.__define__ = window.define;
window.define = function (id) {
var args = Array.prototype.slice.call(arguments);
var factorie = args.pop();
var id = args[0];
if (id instanceof Array) {
var name = "summernote_factorie_" + (++uniqId);
odoo[name] = factorie;
var head = '';
var fn = 'var fn = odoo.'+name+';\ndelete odoo.'+name+';\n';
fn += 'return fn(';
for (var k=0; k&lt;id.length; k++) {
head += 'var a'+(++uniqId)+' = require("'+id[k]+'");\n';
fn += 'a'+uniqId+', ';
}
fn += 'null);';
odoo.define(odoo.website_next_define, new Function('require', head + fn));
} else {
odoo.define(id, factorie);
}
};
})();
</script>
<t t-set="summer_js_files" t-value="['core/async', 'core/func', 'core/agent', 'core/list',
'core/dom', 'core/key', 'core/range', 'editing/Bullet', 'editing/History', 'editing/Style',
'editing/Table', 'editing/Typing', 'module/Editor', 'module/Button', 'module/Clipboard',
'module/Codeview', 'module/DragAndDrop', 'module/Fullscreen', 'module/Handle',
'module/HelpDialog', 'module/ImageDialog', 'module/LinkDialog', 'module/Popover',
'module/Statusbar', 'module/Toolbar', 'Renderer', 'EventHandler', 'defaults', 'summernote']" />
<t t-foreach="summer_js_files" t-as="file">
<script>odoo.website_next_define = 'summernote/<t t-esc="file" />';</script>
<script type="text/javascript" t-attf-src="/web_editor/static/lib/summernote/src/js/{{ file }}.js"></script>
</t>
<script type="text/javascript" src="/web_editor/static/src/js/editor/summernote.js" />
<script type="text/javascript">
window.define = odoo.__define__;
delete odoo.__define__;
delete odoo.website_next_define;
</script>
<link rel="stylesheet" type="text/css" href="/web_editor/static/lib/summernote/src/css/summernote.css"/>
</template>
<template id="_assets_primary_variables" inherit_id="web._assets_primary_variables">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.variables.scss"/>
</xpath>
</template>
<template id="assets_common" inherit_id="web.assets_common" name="Web Editor Common Assets (used in backend interface and website)">
<xpath expr="script[last()]" position="after">
<script type="text/javascript" src="/web_editor/static/lib/vkbeautify/vkbeautify.0.99.00.beta.js"></script>
<script type="text/javascript" src="/web_editor/static/src/js/base.js"/>
<script type="text/javascript" src="/web_editor/static/src/js/widgets/ace.js"/>
</xpath>
</template>
<template id="assets_backend" inherit_id="web.assets_backend" name="Web Editor Backend Assets (used in backend interface)">
<xpath expr="link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.scss"/> <!-- not in common because compiled differently with context -->
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.backend.scss"/>
</xpath>
<xpath expr="script[last()]" position="after">
<script type="text/javascript" src="/web_editor/static/src/js/backend/fields.js" />
</xpath>
</template>
<template id="assets_frontend" inherit_id="web.assets_frontend" name="Web Editor Frontend Assets (used in public odoo)" priority="15">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.scss"/> <!-- not in common because compiled differently with context -->
</xpath>
<xpath expr="//script[last()]" position="after">
<script type="text/javascript" src="/web_editor/static/src/js/content/body_manager.js"/>
<script type="text/javascript" src="/web_editor/static/src/js/root_widget.js"/>
</xpath>
</template>
<template id="assets_editor" name="Web Editor Assets (used in private and public editor)">
<t t-call="web._assets_helpers"/>
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.ui.scss"/>
<script type="text/javascript" src="/web_editor/static/lib/nearest/jquery.nearest.js"/>
<script type="text/javascript" src="/web_editor/static/src/js/editor/editor.js"/>
<script type="text/javascript" src="/web_editor/static/src/js/editor/rte.js"/>
<script type="text/javascript" src="/web_editor/static/src/js/editor/rte.summernote.js"/>
<script type="text/javascript" src="/web_editor/static/src/js/editor/snippets.editor.js"/>
<script type="text/javascript" src="/web_editor/static/src/js/editor/snippets.options.js"/>
<script type="text/javascript" src="/web_editor/static/src/js/editor/transcoder.js"/>
<script type="text/javascript" src="/web_editor/static/src/js/editor/translator.js"/>
<script type="text/javascript" src="/web_editor/static/src/js/tours/rte.js"/>
<script type="text/javascript" src="/web_editor/static/src/js/widgets/widgets.js"/>
</template>
<template id="webclient_bootstrap" inherit_id="web.webclient_bootstrap">
<xpath expr="//t[@t-call-assets='web.assets_backend'][@t-js='false']" position="after">
<t t-call-assets="web_editor.summernote" t-js="false"/>
<t t-call-assets="web_editor.assets_editor" t-js="false"/>
</xpath>
<xpath expr="//t[@t-call-assets='web.assets_backend'][@t-css='false']" position="after">
<t t-call-assets="web_editor.summernote" t-css="false"/>
<t t-call-assets="web_editor.assets_editor" t-css="false"/>
</xpath>
</template>
<template id="js_tests_assets" inherit_id="web.js_tests_assets">
<xpath expr="." position="inside">
<t t-call-assets="web_editor.summernote" t-css="false"/>
<t t-call-assets="web_editor.assets_editor" t-css="false"/>
</xpath>
</template>
<template id="qunit_suite" inherit_id="web.qunit_suite">
<xpath expr="." position="inside">
<script type="text/javascript" src="/web_editor/static/tests/web_editor_tests.js"></script>
</xpath>
</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.
-->
<template id="web_editor.colorpicker" name="Color-Picker">
<colorpicker>
<div class="o_colorpicker_section" data-name="theme" data-icon-class="fa fa-flask">
<button data-color="alpha">Alpha</button>
<button data-color="beta">Beta</button>
<button data-color="gamma">Gamma</button>
<button data-color="delta">Delta</button>
<button data-color="epsilon">Epsilon</button>
</div>
<div class="o_colorpicker_section" data-name="grayscale" data-icon-class="fa fa-database">
<button data-color="white">White</button>
<button data-color="gray-lighter">Gray Lighter</button>
<button data-color="gray-light">Gray Light</button>
<button data-color="gray">Gray</button>
<button data-color="gray-dark">Gray Dark</button>
<button data-color="gray-darker">Gray Darker</button>
<button data-color="black">Black</button>
</div>
<div class="o_colorpicker_section" data-name="ui" data-icon-class="fa fa-paint-brush">
<button data-color="primary">Primary</button>
<button data-color="success">Success</button>
<button data-color="info">Info</button>
<button data-color="warning">Warning</button>
<button data-color="danger">Danger</button>
</div>
<div class="o_colorpicker_section" data-name="transparent_grayscale" data-icon-class="fa fa-eye-slash">
<button class="o_btn_transparent">Transparent</button>
<button data-color="black-25">25% Black</button>
<button data-color="black-50">50% Black</button>
<button data-color="black-75">75% Black</button>
<button data-color="white-25">25% White</button>
<button data-color="white-50">50% White</button>
<button data-color="white-75">75% White</button>
</div>
</colorpicker>
</template>
</odoo>