[IMP] *: make customize dialog generic and improve options
* web, web_editor, website, website_theme_install, portal, theme_default, theme_bootswatch The purpose of this task is to make the customize dialog as generic as possible, that is theme-independant: 1) The design is now totally generic (Odoo visuals) 2) The XML definition is form-view like. This allows themes to extend the dialog without any risk of breaking the style and also allows to not care about lots of technical details. 3) New options have been included. Those were themes options that are now generic and which themes can simply adapt without touching the customize modal (navbar colors, footer color, navbar layout, fonts, body background, ...). The color palette can now also be customized with user colors. Using sass functionnalities, color palettes and fonts integration is now a lot better. Thanks to @qha-odoo for the original design. task-31677
This commit is contained in:
qsm-odoo
@@ -42,13 +42,12 @@ header {
|
||||
}
|
||||
.navbar {
|
||||
margin-bottom: 0;
|
||||
|
||||
ul.nav > li {
|
||||
&.divider {
|
||||
display: none;
|
||||
@include o-w-fill-navbar;
|
||||
border-right: 1px solid $nav-divider-color;
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.active + .divider {
|
||||
@@ -61,14 +60,15 @@ header {
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
.navbar-expand-md ul.nav > li.divider {
|
||||
display: list-item;
|
||||
}
|
||||
}
|
||||
ul.flex-column > li > a {
|
||||
padding: 2px 15px;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
|
||||
// Odoo options classes
|
||||
.jumbotron {
|
||||
margin-bottom: 0;
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="top_menu_collapse">
|
||||
<!-- FIXME We want menu to open to the right by default (except cases handled in JS) -->
|
||||
<ul class="nav navbar-nav ml-auto" id="top_menu">
|
||||
<ul class="nav navbar-nav ml-auto text-right" id="top_menu">
|
||||
<li class="nav-item divider" t-ignore="true" t-if="not user_id._is_public()"/>
|
||||
<li class="nav-item dropdown" t-ignore="true" t-if="not user_id._is_public()">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
|
||||
@@ -55,7 +55,7 @@
|
||||
<main>
|
||||
<t t-raw="0"/>
|
||||
</main>
|
||||
<footer >
|
||||
<footer class="bg-light o_footer">
|
||||
<div class="container mt16 mb16" id="footer">
|
||||
<div class="float-right" t-ignore="true" t-if="not editable">
|
||||
Powered by <a target="_blank" href="http://www.odoo.com?utm_source=db&utm_medium=portal">Odoo</a>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
'category': 'Theme/Corporate',
|
||||
'sequence': 900,
|
||||
'version': '1.0',
|
||||
'depends': ['website'],
|
||||
'depends': ['website', 'website_theme_install'],
|
||||
'data': [
|
||||
'data/theme_bootswatch_data.xml',
|
||||
'views/theme_bootswatch_templates.xml',
|
||||
|
||||
@@ -9,4 +9,8 @@
|
||||
<field name="action_id" ref="action_website"/>
|
||||
<field name="state">open</field>
|
||||
</record>
|
||||
|
||||
<record id="website_theme_install.customize_modal" model="ir.ui.view">
|
||||
<field name="active" eval="False"/>
|
||||
</record>
|
||||
</odoo>
|
||||
@@ -1,87 +1,20 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
<template id="theme_customize" inherit_id="website.theme_customize">
|
||||
<xpath expr="div" position="replace">
|
||||
<div role="dialog" id="theme_customize_modal" class="modal fade bs-example-modal-sm">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="loading_backdrop"></div>
|
||||
<header class="modal-header">
|
||||
<h4 class="modal-title">Customize your theme</h4>
|
||||
<button type="button" class="close">×</button>
|
||||
</header>
|
||||
<main class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-4 offset-4">
|
||||
<label class="checked">
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/bootswatch_default_thumbnail.png" alt="Default Theme"/>
|
||||
<input name="theme" type="radio" data-xmlid="" checked="checked"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/cerulean_thumbnail.png" alt="Cerulean"/>
|
||||
<input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_cerulean_bs_variables,theme_bootswatch.theme_cerulean"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/cosmo_thumbnail.png" alt="Cosmo"/>
|
||||
<input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_cosmo_bs_variables,theme_bootswatch.theme_cosmo" data-disable="ee"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/cyborg_thumbnail.png" alt="Cyborg"/>
|
||||
<input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_cyborg_bs_variables,theme_bootswatch.theme_cyborg"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/flatly_thumbnail.png" alt="Flatly"/>
|
||||
<input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_flatly_bs_variables,theme_bootswatch.theme_flatly"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/journal_thumbnail.png" alt="Journal"/>
|
||||
<input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_journal_bs_variables,theme_bootswatch.theme_journal"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/simplex_thumbnail.png" alt="Simplex"/>
|
||||
<input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_simplex_bs_variables,theme_bootswatch.theme_simplex"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/slate_thumbnail.png" alt="Slate"/>
|
||||
<input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_slate_bs_variables,theme_bootswatch.theme_slate"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/spacelab_thumbnail.png" alt="Spacelab"/>
|
||||
<input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_spacelab_bs_variables,theme_bootswatch.theme_spacelab"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<label>
|
||||
<img style="width: 120px; height: 70px;" src="/theme_bootswatch/static/src/img/united_thumbnail.png" alt="United"/>
|
||||
<input name="theme" type="radio" data-xmlid="theme_bootswatch.theme_united_bs_variables,theme_bootswatch.theme_united"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<xpath expr="//div" position="replace">
|
||||
<div>
|
||||
<content data-string="Themes" data-title="Bootswatch Themes">
|
||||
<opt data-xmlid="" data-icon="/theme_bootswatch/static/src/img/bootswatch_default_thumbnail.png"/>
|
||||
<opt data-xmlid="theme_bootswatch.theme_cerulean_bs_variables,theme_bootswatch.theme_cerulean" data-icon="/theme_bootswatch/static/src/img/cerulean_thumbnail.png"/>
|
||||
<opt data-xmlid="theme_bootswatch.theme_cosmo_bs_variables,theme_bootswatch.theme_cosmo" data-disable="ee" data-icon="/theme_bootswatch/static/src/img/cosmo_thumbnail.png"/>
|
||||
<opt data-xmlid="theme_bootswatch.theme_cyborg_bs_variables,theme_bootswatch.theme_cyborg" data-icon="/theme_bootswatch/static/src/img/cyborg_thumbnail.png"/>
|
||||
<opt data-xmlid="theme_bootswatch.theme_flatly_bs_variables,theme_bootswatch.theme_flatly" data-icon="/theme_bootswatch/static/src/img/flatly_thumbnail.png"/>
|
||||
<opt data-xmlid="theme_bootswatch.theme_journal_bs_variables,theme_bootswatch.theme_journal" data-icon="/theme_bootswatch/static/src/img/journal_thumbnail.png"/>
|
||||
<opt data-xmlid="theme_bootswatch.theme_simplex_bs_variables,theme_bootswatch.theme_simplex" data-icon="/theme_bootswatch/static/src/img/simplex_thumbnail.png"/>
|
||||
<opt data-xmlid="theme_bootswatch.theme_slate_bs_variables,theme_bootswatch.theme_slate" data-icon="/theme_bootswatch/static/src/img/slate_thumbnail.png"/>
|
||||
<opt data-xmlid="theme_bootswatch.theme_spacelab_bs_variables,theme_bootswatch.theme_spacelab" data-icon="/theme_bootswatch/static/src/img/spacelab_thumbnail.png"/>
|
||||
<opt data-xmlid="theme_bootswatch.theme_united_bs_variables,theme_bootswatch.theme_united" data-icon="/theme_bootswatch/static/src/img/united_thumbnail.png"/>
|
||||
</content>
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
@@ -3,14 +3,13 @@
|
||||
|
||||
{
|
||||
'name': 'Default Theme',
|
||||
'description': 'Default website theme to showcase customization possibilities.',
|
||||
'description': 'Default website theme',
|
||||
'category': 'Theme/Corporate',
|
||||
'sequence': 1000,
|
||||
'version': '1.0',
|
||||
'depends': ['website'],
|
||||
'depends': ['website', 'website_theme_install'],
|
||||
'data': [
|
||||
'data/theme_default_data.xml',
|
||||
'views/theme_default_templates.xml',
|
||||
],
|
||||
'images': [
|
||||
'static/description/cover.png',
|
||||
|
||||
@@ -9,4 +9,8 @@
|
||||
<field name="action_id" ref="action_website"/>
|
||||
<field name="state">open</field>
|
||||
</record>
|
||||
</odoo>
|
||||
|
||||
<record id="website_theme_install.customize_modal" model="ir.ui.view">
|
||||
<field name="active" eval="False"/>
|
||||
</record>
|
||||
</odoo>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,7 +0,0 @@
|
||||
|
||||
// TODO review BS4 gray palette for theme default
|
||||
// $gray-900: lighten(#000, 20%);
|
||||
// $gray-800: lighten(#000, 40%);
|
||||
// $gray-700: lighten(#000, 55%);
|
||||
// $gray-600: lighten(#000, 70%);
|
||||
// $gray-200: lighten(#000, 80%);
|
||||
@@ -1,19 +0,0 @@
|
||||
.bg-blue { background-color: $color-blue;}
|
||||
.bg-turquoise { background-color: $color-turquoise;}
|
||||
.bg-green { background-color: $color-green;}
|
||||
.bg-yellow { background-color: $color-yellow;}
|
||||
.bg-orange { background-color: $color-orange;}
|
||||
.bg-red { background-color: $color-red;}
|
||||
.bg-pink { background-color: $color-pink;}
|
||||
.bg-purple { background-color: $color-purple;}
|
||||
.bg-brown { background-color: $color-brown;}
|
||||
|
||||
.text-blue { color: $color-blue;}
|
||||
.text-turquoise { color: $color-turquoise;}
|
||||
.text-green { color: $color-green;}
|
||||
.text-yellow { color: $color-yellow;}
|
||||
.text-orange { color: $color-orange;}
|
||||
.text-red { color: $color-red;}
|
||||
.text-pink { color: $color-pink;}
|
||||
.text-purple { color: $color-purple;}
|
||||
.text-brown { color: $color-brown;}
|
||||
@@ -1,18 +0,0 @@
|
||||
|
||||
#theme_customize_modal {
|
||||
.modal-h5 {
|
||||
color: #ffffff;
|
||||
font-family: "Lato-Regular";
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: normal;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
padding: 4px 0 4px 4px;
|
||||
background-color: #bdc3c7;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
// TODO review BS4 custo for theme default
|
||||
|
||||
// /* COLORED BG -------------------------------------------------------- */
|
||||
|
||||
// .bg-primary {
|
||||
// background-color: $color-clouds;
|
||||
// }
|
||||
// .bg-success {
|
||||
// background-color: $color-purple;
|
||||
// }
|
||||
// .bg-info {
|
||||
// background-color: $color-twilight;
|
||||
// }
|
||||
// .bg-warning {
|
||||
// background-color: $color-purple-dark;
|
||||
// }
|
||||
// .bg-danger {
|
||||
// background-color: $color-midnight;
|
||||
// }
|
||||
|
||||
// .btn .fa {
|
||||
// color: white;}
|
||||
|
||||
// .btn-secondary .fa {
|
||||
// color: gray('900');}
|
||||
|
||||
// /* TRANSPARENT BG --------------------------------------------------- */
|
||||
// Used in snippets Prx Image Color and Prx Image Shade -------------
|
||||
|
||||
// .bg-transparent-color { background: $color-twilight; opacity: 0.85;}
|
||||
// .bg-transparent-shade { background: black; opacity: 0.5;}
|
||||
|
||||
// /* Footer ----------------------------------------------------------- */
|
||||
|
||||
// #wrapwrap footer {
|
||||
// background-color: $color-concrete-dark;
|
||||
// color: gray('600');
|
||||
// }
|
||||
// footer ul li a {
|
||||
// color: $color-clouds;
|
||||
// }
|
||||
// footer ul li a:hover {
|
||||
// color: white;
|
||||
// text-decoration: none;
|
||||
// }
|
||||
// footer h4 {
|
||||
// color: gray('200');
|
||||
// padding-bottom: 12px;
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
// footer .fa {
|
||||
// color: $color-concrete;
|
||||
// }
|
||||
@@ -1,19 +0,0 @@
|
||||
// TODO review BS4 custo for theme default
|
||||
|
||||
// /* GRAYS --------------------------------------------------------- */
|
||||
|
||||
// $gray-900: lighten(#000, 30%);
|
||||
|
||||
// /* TEXTS & LINKS --------------------------------------------------- */
|
||||
|
||||
// $text-muted: $color-primary;
|
||||
// $link-color: $color-primary;
|
||||
// $link-hover-color: $color-success;
|
||||
|
||||
// /* BUTTONS --------------------------------------------------------- */
|
||||
|
||||
// $btn-primary-bg: $color-silver;
|
||||
// $btn-success-bg: $color-concrete;
|
||||
// $btn-info-bg: $color-purple;
|
||||
// $btn-warning-bg: $color-purple-light;
|
||||
// $btn-danger-bg: $color-red;
|
||||
@@ -1,7 +0,0 @@
|
||||
/* COLORS --------------------------------------------------------- */
|
||||
|
||||
$color-primary: $color-purple;
|
||||
$color-success: $color-purple-dark;
|
||||
$color-info: $color-twilight;
|
||||
$color-warning: $color-red-dark;
|
||||
$color-danger: $color-midnight;
|
||||
@@ -1,54 +0,0 @@
|
||||
// TODO review BS4 custo for theme default
|
||||
|
||||
// /* COLORED BG -------------------------------------------------------- */
|
||||
|
||||
// .bg-primary {
|
||||
// background-color: $color-wind;
|
||||
// }
|
||||
// .bg-success {
|
||||
// background-color: $color-silver;
|
||||
// }
|
||||
// .bg-info {
|
||||
// background-color: $color-blue;
|
||||
// }
|
||||
// .bg-warning {
|
||||
// background-color: $color-blue-dark;
|
||||
// }
|
||||
// .bg-danger {
|
||||
// background-color: $color-asphalt;
|
||||
// }
|
||||
|
||||
// .btn .fa {
|
||||
// color: white;}
|
||||
|
||||
// .btn-secondary .fa {
|
||||
// color: gray('900');}
|
||||
|
||||
// /* TRANSPARENT BG --------------------------------------------------- */
|
||||
// Used in snippets Prx Image Color and Prx Image Shade -------------
|
||||
|
||||
// .bg-transparent-color { background: $color-blue-dark; opacity: 0.9;}
|
||||
// .bg-transparent-shade { background: black; opacity: 0.5;}
|
||||
|
||||
// /* Footer ----------------------------------------------------------- */
|
||||
|
||||
// #wrapwrap footer {
|
||||
// background-color: $color-midnight;
|
||||
// color: gray('700');
|
||||
// }
|
||||
// footer ul li a {
|
||||
// color: $color-silver;
|
||||
// }
|
||||
|
||||
// footer ul li a:hover {
|
||||
// color: $color-clouds;
|
||||
// text-decoration: none;
|
||||
// }
|
||||
// footer h4 {
|
||||
// color: $color-stone;
|
||||
// padding-bottom: 12px;
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
// footer .fa {
|
||||
// color: gray('600');
|
||||
// }
|
||||
@@ -1,15 +0,0 @@
|
||||
// TODO review BS4 custo for theme default
|
||||
|
||||
// /* TEXTS & LINKS --------------------------------------------------- */
|
||||
|
||||
// $text-muted: $color-primary;
|
||||
// $link-color: $color-primary;
|
||||
// $link-hover-color: $color-info;
|
||||
|
||||
// BUTTONS ---------------------------------------------------------
|
||||
|
||||
// $btn-primary-bg: $color-blue;
|
||||
// $btn-success-bg: $color-turquoise;
|
||||
// $btn-info-bg: $color-green;
|
||||
// $btn-warning-bg: $color-orange;
|
||||
// $btn-danger-bg: $color-red;
|
||||
@@ -1,7 +0,0 @@
|
||||
/* COLORS --------------------------------------------------------- */
|
||||
|
||||
$color-primary: $color-blue;
|
||||
$color-success: $color-turquoise;
|
||||
$color-info: $color-green;
|
||||
$color-warning: $color-asphalt;
|
||||
$color-danger: $color-midnight;
|
||||
@@ -1,53 +0,0 @@
|
||||
// TODO review BS4 custo for theme default
|
||||
|
||||
// /* COLORED BG -------------------------------------------------------- */
|
||||
|
||||
// .bg-primary {
|
||||
// background-color: $color-wind;
|
||||
// }
|
||||
// .bg-success {
|
||||
// background-color: $color-silver;
|
||||
// }
|
||||
// .bg-info {
|
||||
// background-color: $color-green-dark;
|
||||
// }
|
||||
// .bg-warning {
|
||||
// background-color: $color-green;
|
||||
// }
|
||||
// .bg-danger {
|
||||
// background-color: $color-forest;
|
||||
// }
|
||||
|
||||
// .btn .fa {
|
||||
// color: white;}
|
||||
|
||||
// .btn-secondary .fa {
|
||||
// color: gray('900');}
|
||||
|
||||
// /* TRANSPARENT BG --------------------------------------------------- */
|
||||
// Used in snippets Prx Image Color and Prx Image Shade -------------
|
||||
|
||||
// .bg-transparent-color { background: $color-green-dark; opacity: 0.9;}
|
||||
// .bg-transparent-shade { background: black; opacity: 0.5;}
|
||||
|
||||
// /* Footer ----------------------------------------------------------- */
|
||||
|
||||
// #wrapwrap footer {
|
||||
// background-color: $color-concrete-dark;
|
||||
// color: gray('700');
|
||||
// }
|
||||
// footer ul li a {
|
||||
// color: $color-clouds;
|
||||
// }
|
||||
// footer ul li a:hover {
|
||||
// color: white;
|
||||
// text-decoration: none;
|
||||
// }
|
||||
// footer h4 {
|
||||
// color: $color-silver;
|
||||
// padding-bottom: 12px;
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
// footer .fa {
|
||||
// color: $color-clouds;
|
||||
// }
|
||||
@@ -1,15 +0,0 @@
|
||||
// TODO review BS4 custo for theme default
|
||||
|
||||
// /* TEXTS & LINKS --------------------------------------------------- */
|
||||
|
||||
// $text-muted: $color-success;
|
||||
// $link-color: $color-success;
|
||||
// $link-hover-color: $color-primary;
|
||||
|
||||
// BUTTONS ---------------------------------------------------------
|
||||
|
||||
// $btn-primary-bg: $color-green;
|
||||
// $btn-success-bg: $color-turquoise;
|
||||
// $btn-info-bg: $color-blue;
|
||||
// $btn-warning-bg: $color-orange;
|
||||
// $btn-danger-bg: $color-red;
|
||||
@@ -1,7 +0,0 @@
|
||||
/* COLORS --------------------------------------------------------- */
|
||||
|
||||
$color-primary: $color-green;
|
||||
$color-success: $color-turquoise;
|
||||
$color-info: $color-turquoise-dark;
|
||||
$color-warning: $color-asphalt;
|
||||
$color-danger: $color-midnight;
|
||||
@@ -1,53 +0,0 @@
|
||||
// TODO review BS4 custo for theme default
|
||||
|
||||
// /* COLORED BG -------------------------------------------------------- */
|
||||
|
||||
// .bg-primary {
|
||||
// background-color: $color-sand;
|
||||
// }
|
||||
// .bg-success {
|
||||
// background-color: $color-yellow;
|
||||
// }
|
||||
// .bg-info {
|
||||
// background-color: $color-orange;
|
||||
// }
|
||||
// .bg-warning {
|
||||
// background-color: $color-yellow-dark;
|
||||
// }
|
||||
// .bg-danger {
|
||||
// background-color: $color-orange-dark;
|
||||
// }
|
||||
|
||||
// .btn .fa {
|
||||
// color: white;}
|
||||
|
||||
// .btn-secondary .fa {
|
||||
// color: gray('900');}
|
||||
|
||||
// /* TRANSPARENT BG --------------------------------------------------- */
|
||||
// Used in snippets Prx Image Color and Prx Image Shade -------------
|
||||
|
||||
// .bg-transparent-color { background: $color-orange-dark; opacity: 0.85;}
|
||||
// .bg-transparent-shade { background: black; opacity: 0.5;}
|
||||
|
||||
// /* Footer ----------------------------------------------------------- */
|
||||
|
||||
// #wrapwrap footer {
|
||||
// background-color: $color-orange-dark;
|
||||
// color: white;
|
||||
// }
|
||||
// footer ul li a {
|
||||
// color: $color-beach;
|
||||
// }
|
||||
// footer ul li a:hover {
|
||||
// color: $color-yellow;
|
||||
// text-decoration: none;
|
||||
// }
|
||||
// footer h4 {
|
||||
// color: $color-beach;
|
||||
// padding-bottom: 12px;
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
// footer .fa {
|
||||
// color: $color-beach;
|
||||
// }
|
||||
@@ -1,15 +0,0 @@
|
||||
// TODO review BS4 custo for theme default
|
||||
|
||||
// /* TEXTS & LINKS ------------------------------------------------------- */
|
||||
|
||||
// $text-muted: gray('700');
|
||||
// $link-color: $color-info;
|
||||
// $link-hover-color: $color-primary;
|
||||
|
||||
// /* BUTTONS --------------------------------------------------------- */
|
||||
|
||||
// $btn-primary-bg: $color-yellow;
|
||||
// $btn-success-bg: $color-orange;
|
||||
// $btn-info-bg: $color-yellow-dark;
|
||||
// $btn-warning-bg: $color-orange-dark;
|
||||
// $btn-danger-bg: $color-red-dark;
|
||||
@@ -1,7 +0,0 @@
|
||||
/* COLORS --------------------------------------------------------- */
|
||||
|
||||
$color-primary: $color-orange;
|
||||
$color-success: $color-red;
|
||||
$color-info: $color-yellow-dark;
|
||||
$color-warning: $color-red-dark;
|
||||
$color-danger: $color-orange-dark;
|
||||
@@ -1,53 +0,0 @@
|
||||
// TODO review BS4 custo for theme default
|
||||
|
||||
// /* COLORED BG -------------------------------------------------------- */
|
||||
|
||||
// .bg-primary {
|
||||
// background-color: $color-sand;
|
||||
// }
|
||||
// .bg-success {
|
||||
// background-color: $color-red;
|
||||
// }
|
||||
// .bg-info {
|
||||
// background-color: $color-red-dark;
|
||||
// }
|
||||
// .bg-warning {
|
||||
// background-color: $color-orange;
|
||||
// }
|
||||
// .bg-danger {
|
||||
// background-color: $color-orange-dark;
|
||||
// }
|
||||
|
||||
// .btn .fa {
|
||||
// color: white;}
|
||||
|
||||
// .btn-secondary .fa {
|
||||
// color: gray('900');}
|
||||
|
||||
// /* TRANSPARENT BG --------------------------------------------------- */
|
||||
// Used in snippets Prx Image Color and Prx Image Shade -------------
|
||||
|
||||
// .bg-transparent-color { background: $color-red-dark; opacity: 0.85;}
|
||||
// .bg-transparent-shade { background: black; opacity: 0.5;}
|
||||
|
||||
// /* Footer ----------------------------------------------------------- */
|
||||
|
||||
// #wrapwrap footer {
|
||||
// background-color: $color-burgundy;
|
||||
// color: gray('200');
|
||||
// }
|
||||
// footer ul li a {
|
||||
// color: white;
|
||||
// }
|
||||
// footer ul li a:hover {
|
||||
// color: $color-orange;
|
||||
// text-decoration: none;
|
||||
// }
|
||||
// footer h4 {
|
||||
// color: $color-sand;
|
||||
// padding-bottom: 12px;
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
// footer .fa {
|
||||
// color: $color-red;
|
||||
// }
|
||||
@@ -1,19 +0,0 @@
|
||||
// TODO review BS4 custo for theme default
|
||||
|
||||
// /* GRAYS --------------------------------------------------------- */
|
||||
|
||||
// $gray-700: lighten(#000, 50%);
|
||||
|
||||
// /* TEXT & LINKS -------------------------------------------------------- */
|
||||
|
||||
// $text-muted: gray('700');
|
||||
// $link-color: $color-primary;
|
||||
// $link-hover-color: $color-success;
|
||||
|
||||
// BUTTONS ---------------------------------------------------------
|
||||
|
||||
// $btn-primary-bg: $color-red;
|
||||
// $btn-success-bg: $color-orange;
|
||||
// $btn-info-bg: $color-yellow-dark;
|
||||
// $btn-warning-bg: $color-orange-dark;
|
||||
// $btn-danger-bg: $color-red-dark;
|
||||
@@ -1,7 +0,0 @@
|
||||
/* COLORS --------------------------------------------------------- */
|
||||
|
||||
$color-primary: $color-red;
|
||||
$color-success: $color-red-dark;
|
||||
$color-info: $color-orange;
|
||||
$color-warning: $color-purple;
|
||||
$color-danger: $color-orange-dark;
|
||||
@@ -1,2 +0,0 @@
|
||||
$font-family-sans-serif: Georgia, "Times New Roman", Times, serif;
|
||||
$font-family-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@@ -1,6 +0,0 @@
|
||||
#wrapwrap {
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
$color-blue: #3498DB;
|
||||
$color-turquoise: #1ABC9C;
|
||||
$color-green: #2ECC71;
|
||||
$color-yellow: #F1C40F;
|
||||
$color-orange: #E67E22;
|
||||
$color-red: #E74C3C;
|
||||
$color-pink: #f74b94;
|
||||
$color-purple: #9B59B6;
|
||||
$color-brown: #7b5844;
|
||||
|
||||
$color-blue-dark: #2980B9;
|
||||
$color-turquoise-dark: #16A085;
|
||||
$color-green-dark: #27AE60;
|
||||
$color-yellow-dark: #f3ac12;
|
||||
$color-orange-dark: #D35400;
|
||||
$color-red-dark: #C0392B;
|
||||
$color-pink-dark: #ea3884;
|
||||
$color-purple-dark: #8E44AD;
|
||||
$color-brown-dark: #604434;
|
||||
|
||||
$color-blue-light: lighten($color-blue, 20%);
|
||||
$color-turquoise-light: lighten($color-turquoise, 20%);
|
||||
$color-green-light: lighten($color-green, 20%);
|
||||
$color-yellow-light: lighten($color-yellow, 20%);
|
||||
$color-orange-light: lighten($color-orange, 20%);
|
||||
$color-red-light: lighten($color-red, 20%);
|
||||
$color-pink-light: lighten($color-pink, 20%);
|
||||
$color-purple-light: lighten($color-purple, 20%);
|
||||
$color-brown-light: lighten($color-brown, 20%);
|
||||
|
||||
$color-clouds: #ECF0F1;
|
||||
$color-silver: #BDC3C7;
|
||||
$color-concrete: #95A5A6;
|
||||
$color-stone: #7F8C8D;
|
||||
$color-asphalt: #34495E;
|
||||
$color-midnight: #2C3E50;
|
||||
|
||||
$color-concrete-dark: #445b5c;
|
||||
|
||||
$color-wind: #f7f7f7;
|
||||
$color-clay: #e1dcd5;
|
||||
$color-sand: #c5bcb1;
|
||||
$color-beach: #f3bf91;
|
||||
$color-forest: #254c3a;
|
||||
$color-twilight: #3b2c50;
|
||||
$color-burgundy: #8e362d;
|
||||
$color-marine: #212d3a;
|
||||
@@ -1,214 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
<template id="_assets_primary_variables" inherit_id="web._assets_primary_variables">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/primary_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="_assets_frontend_helpers" inherit_id="web._assets_frontend_helpers">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/bootstrap_overridden.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="assets_frontend" inherit_id="website.assets_frontend">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/colors.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/customize_modal.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="customize_modal" inherit_id="website.theme_customize" name="theme_default modal">
|
||||
<xpath expr="div" position="replace">
|
||||
<div role="dialog" id="theme_customize_modal" class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="loading_backdrop"></div>
|
||||
<header class="modal-header text-center">
|
||||
<button type="button" class="close">×</button>
|
||||
<!-- <a role="button" class="btn btn-primary" href="/web#return_label=Website&action=website.action_module_theme">Click here to change theme</a> -->
|
||||
<hr style="margin: 20px -10px 10px -10px;"/>
|
||||
<h4 class="modal-title">Customize this default theme</h4>
|
||||
</header>
|
||||
<main class="modal-body">
|
||||
<h5 class="modal-h5">LAYOUT</h5>
|
||||
<table name="layout">
|
||||
<tr>
|
||||
<td class=" text-center" width="50%">
|
||||
<label class=" d-block mx-auto">
|
||||
<div class="text-center" style="background-image: url(/theme_default/static/src/img/theme/layout-full.gif); background-size: 100%; line-height: 40px;">FULL WIDTH</div>
|
||||
<input name="layoutvar" type="radio" data-xmlid=""/>
|
||||
</label>
|
||||
</td>
|
||||
<td class=" text-center">
|
||||
<label class=" d-block mx-auto">
|
||||
<div class="text-center" style="background-image: url(/theme_default/static/src/img/theme/layout-boxed.gif); background-size: 100%; line-height: 40px;">BOXED</div>
|
||||
<input name="layoutvar" type="radio" data-xmlid="theme_default.option_layout_boxed"/>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h5 class="modal-h5">MAIN COLOR</h5>
|
||||
<table name="color">
|
||||
<tr>
|
||||
<td>
|
||||
<label class="chd-color-combi">
|
||||
<img src="/theme_default/static/src/img/theme/variant-stone.gif" alt="Stone" class="chd-color-combi-img"/>
|
||||
<input name="colorvar" type="radio" data-xmlid=""/>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label class="chd-color-combi">
|
||||
<img src="/theme_default/static/src/img/theme/variant-emerald.gif" alt="Emerald" class="chd-color-combi-img"/>
|
||||
<input name="colorvar" type="radio" data-xmlid="theme_default.option_color_emerald_variables,theme_default.option_color_emerald_bs_variables,theme_default.option_color_emerald"/>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label class="chd-color-combi">
|
||||
<img src="/theme_default/static/src/img/theme/variant-cobalt.gif" alt="Cobalt" class="chd-color-combi-img"/>
|
||||
<input name="colorvar" type="radio" data-xmlid="theme_default.option_color_cobalt_variables,theme_default.option_color_cobalt_bs_variables,theme_default.option_color_cobalt"/>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label class="chd-color-combi">
|
||||
<img src="/theme_default/static/src/img/theme/variant-amethyst.gif" alt="Amethyst" class="chd-color-combi-img"/>
|
||||
<input name="colorvar" type="radio" data-xmlid="theme_default.option_color_amethyst_variables,theme_default.option_color_amethyst_bs_variables,theme_default.option_color_amethyst"/>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label class="chd-color-combi">
|
||||
<img src="/theme_default/static/src/img/theme/variant-ruby.gif" alt="Blue" class="chd-color-combi-img"/>
|
||||
<input name="colorvar" type="radio" data-xmlid="theme_default.option_color_ruby_variables,theme_default.option_color_ruby_bs_variables,theme_default.option_color_ruby"/>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label class="chd-color-combi">
|
||||
<img src="/theme_default/static/src/img/theme/variant-gold.gif" alt="Gold" class="chd-color-combi-img"/>
|
||||
<input name="colorvar" type="radio" data-xmlid="theme_default.option_color_gold_variables,theme_default.option_color_gold_bs_variables,theme_default.option_color_gold"/>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h5 class="modal-h5">FONTS COMBINATIONS</h5>
|
||||
<table name="font">
|
||||
<tr>
|
||||
<td width="50%">
|
||||
<label>
|
||||
<div>
|
||||
<span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px">Helvetica</span>
|
||||
<span style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px" >/ Georgia</span>
|
||||
</div>
|
||||
<input name="theme" type="radio" data-xmlid=""/>
|
||||
</label>
|
||||
</td>
|
||||
<td width="50%">
|
||||
<label>
|
||||
<div>
|
||||
<span style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px" >Georgia</span>
|
||||
<span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px">/ Helvetica</span>
|
||||
<input name="theme" type="radio" data-xmlid="theme_default.option_font"/>
|
||||
</div>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<!-- Option layout -->
|
||||
<template id="option_layout_boxed" inherit_id="theme_default.assets_frontend" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_layout_boxed.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<!-- Option color -->
|
||||
<template id="option_color_emerald_variables" inherit_id="theme_default._assets_primary_variables" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_emerald_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_color_emerald_bs_variables" inherit_id="theme_default._assets_frontend_helpers" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_emerald_bs_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_color_emerald" inherit_id="theme_default.assets_frontend" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_emerald.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_color_cobalt_variables" inherit_id="theme_default._assets_primary_variables" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_cobalt_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_color_cobalt_bs_variables" inherit_id="theme_default._assets_frontend_helpers" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_color_cobalt" inherit_id="theme_default.assets_frontend" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_cobalt.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_color_amethyst_variables" inherit_id="theme_default._assets_primary_variables" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_amethyst_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_color_amethyst_bs_variables" inherit_id="theme_default._assets_frontend_helpers" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_color_amethyst" inherit_id="theme_default.assets_frontend" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_amethyst.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_color_ruby_variables" inherit_id="theme_default._assets_primary_variables" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_ruby_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_color_ruby_bs_variables" inherit_id="theme_default._assets_frontend_helpers" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_ruby_bs_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_color_ruby" inherit_id="theme_default.assets_frontend" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_ruby.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_color_gold_variables" inherit_id="theme_default._assets_primary_variables" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_gold_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_color_gold_bs_variables" inherit_id="theme_default._assets_frontend_helpers" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_gold_bs_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_color_gold" inherit_id="theme_default.assets_frontend" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_gold.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<!-- Option font -->
|
||||
<template id="option_font" inherit_id="theme_default._assets_frontend_helpers" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_font.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
</odoo>
|
||||
@@ -3,36 +3,38 @@
|
||||
// Those will affect the way bootstrap is generated wherever bootstrap is used
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
@mixin o-bg-color($color, $text-color: null, $with-muted: true) {
|
||||
@if ($color) {
|
||||
$-yiq-color: if($text-color, $text-color, color-yiq($color));
|
||||
background-color: $color !important;
|
||||
color: $-yiq-color; // not important so that text utilities still work
|
||||
|
||||
@if ($with-muted) {
|
||||
.text-muted {
|
||||
color: rgba($-yiq-color, 0.4) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Override background utilities so that they come with a default contrasted
|
||||
// color (especially useful in the frontend editor for example). Also modifies
|
||||
// the way .text-muted elements are rendered in those environments.
|
||||
@mixin bg-variant($parent, $color, $text-color: null) {
|
||||
#{$parent} {
|
||||
$-yiq-color: if($text-color, $text-color, color-yiq($color));
|
||||
background-color: $color !important;
|
||||
color: $-yiq-color; // not important so that text utilities still work
|
||||
|
||||
.text-muted {
|
||||
color: rgba($-yiq-color, 0.4) !important;
|
||||
}
|
||||
@include o-bg-color($color, $text-color);
|
||||
}
|
||||
a#{$parent},
|
||||
button#{$parent} {
|
||||
$-darken-color: darken($color, 10%);
|
||||
@include hover-focus {
|
||||
background-color: $-darken-color !important;
|
||||
color: if($text-color, $text-color, color-yiq($-darken-color));
|
||||
@include o-bg-color(darken($color, 10%), $text-color, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin bg-gradient-variant($parent, $color, $text-color: null) {
|
||||
#{$parent} {
|
||||
$-yiq-color: if($text-color, $text-color, color-yiq($color));
|
||||
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
|
||||
color: $-yiq-color;
|
||||
|
||||
.text-muted {
|
||||
color: rgba($-yiq-color, 0.4) !important;
|
||||
}
|
||||
@include o-bg-color($color, $text-color);
|
||||
background-image: linear-gradient(180deg, mix($body-bg, $color, 15%), $color) !important;
|
||||
background-repeat: repeat-x !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,6 +24,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Allow to change data-toggle="collapse" text according to status
|
||||
:not(.collapsed) > .o-collapsed-label,
|
||||
.collapsed > .o-not-collapsed-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// This is rtl language specific fix
|
||||
// It will fix the extra space in ui-autocomplete class
|
||||
// and flip the next and previous symbols of jquery ui.
|
||||
|
||||
@@ -134,6 +134,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Function to remove all falsy values of a map
|
||||
@function o-map-omit($map) {
|
||||
$-map: ();
|
||||
@each $key, $value in $map {
|
||||
@if $value {
|
||||
$-map: map-merge($-map, (
|
||||
$key: $value,
|
||||
));
|
||||
}
|
||||
}
|
||||
@return $-map;
|
||||
}
|
||||
|
||||
// ------- Kanban grouped mixins -------
|
||||
@mixin o-kanban-icon($base-opacity: 0.5) {
|
||||
display: block;
|
||||
|
||||
@@ -5,24 +5,26 @@
|
||||
<template id="report_assets_common">
|
||||
<t t-call="web._assets_helpers"/>
|
||||
|
||||
<!-- FIXME remove web_editor / portal / website dependency ..? -->
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/primary_variables.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/secondary_variables.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/bootstrap_overridden.scss"/>
|
||||
|
||||
<t t-call="web._assets_bootstrap"/>
|
||||
<link href="/base/static/src/css/description.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<!-- FIXME remove web_editor / portal / website dependency ..? -->
|
||||
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.scss"/>
|
||||
|
||||
<!-- FIXME remove website / portal dependency ..? -->
|
||||
<link rel="stylesheet" type="text/scss" href="/portal/static/src/scss/portal.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.scss"/>
|
||||
|
||||
<link href="/web/static/lib/fontawesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
|
||||
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/report.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/layout_standard.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/layout_background.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/layout_boxed.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/layout_clean.scss"/>
|
||||
|
||||
</template>
|
||||
|
||||
<template id="report_assets_pdf">
|
||||
|
||||
+21
-7
@@ -1,13 +1,27 @@
|
||||
|
||||
// Automatically update bootstrap colors map (unused by BS itself)
|
||||
$-palette: nth($o-color-palettes, $o-color-palette-number);
|
||||
$colors: () !default;
|
||||
$colors: map-merge($-palette, $colors);
|
||||
|
||||
// Automatically extend bootstrap to create theme background/text/button classes
|
||||
$-palette: nth($o-theme-color-palettes, $o-theme-color-palette-number);
|
||||
$-main-color: map-get($-palette, 'primary');
|
||||
$-main-color-lightness: lightness($-main-color);
|
||||
$-palette: map-merge($-palette, (
|
||||
// Compatibility: alpha and beta color exist but will now always be
|
||||
// equal to primary and secondary colors
|
||||
alpha: $-main-color,
|
||||
beta: map-get($-palette, 'secondary'),
|
||||
|
||||
// BS light and dark colors are not used for any BS component, just
|
||||
// for color utilities. By default, we set them to a very light and
|
||||
// very dark version of a desaturate version of the primary color
|
||||
light: lighten(desaturate($-main-color, 40%), min(70%, max(0%, 97% - $-main-color-lightness))), // Does not increase over 97% lightness
|
||||
dark: darken(desaturate($-main-color, 40%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness
|
||||
));
|
||||
$theme-colors: () !default;
|
||||
$theme-colors: map-merge((
|
||||
'alpha': $color-alpha,
|
||||
'beta': $color-beta,
|
||||
'gamma': $color-gamma,
|
||||
'delta': $color-delta,
|
||||
'epsilon': $color-epsilon,
|
||||
), $theme-colors);
|
||||
$theme-colors: map-merge($-palette, $theme-colors);
|
||||
|
||||
// Extend grays with transparent ones (for some reason, BS4 create black-50 and
|
||||
// white-50 but does not allow overridding that with variables). Also add black
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
|
||||
// Hacky way to prevent our web_editor/website themes to affect the backend UI but
|
||||
// still allow to define extra colors for backend HTML editors
|
||||
$theme-colors: map-remove($theme-colors, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark');
|
||||
@@ -220,11 +220,24 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
|
||||
// Edition colors
|
||||
|
||||
// Colors
|
||||
$color-alpha: #1cc1a9 !default;
|
||||
$color-beta: #875A7B !default;
|
||||
$color-gamma: #BA3C3D !default;
|
||||
$color-delta: #0D6759 !default;
|
||||
$color-epsilon: #0B2E59 !default;
|
||||
$o-color-palettes: (
|
||||
(
|
||||
|
||||
),
|
||||
) !default;
|
||||
$o-color-palette-number: 1;
|
||||
|
||||
// Theme colors
|
||||
$o-theme-color-palettes: (
|
||||
(
|
||||
primary: #007bff, // BS default here but needed for compatibility (see bootstrap_overridden)
|
||||
secondary: #6c757d, // BS default here but needed for compatibility (see bootstrap_overridden)
|
||||
gamma: #BA3C3D,
|
||||
delta: #0D6759,
|
||||
epsilon: #0B2E59,
|
||||
),
|
||||
) !default;
|
||||
$o-theme-color-palette-number: 1;
|
||||
|
||||
// Greyscale transparent colours
|
||||
$o-transparent-grays: (
|
||||
|
||||
@@ -69,6 +69,7 @@
|
||||
<template id="_assets_backend_helpers" inherit_id="web._assets_backend_helpers">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden_backend.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -365,14 +365,18 @@ class Website(Home):
|
||||
|
||||
if get_bundle:
|
||||
context = dict(request.context, active_test=True)
|
||||
return request.env["ir.qweb"]._get_asset('web.assets_frontend', options=context)
|
||||
return {
|
||||
'web.assets_common': request.env["ir.qweb"]._get_asset('web.assets_common', options=context),
|
||||
'web.assets_frontend': request.env["ir.qweb"]._get_asset('web.assets_frontend', options=context),
|
||||
'website.assets_editor': request.env["ir.qweb"]._get_asset('website.assets_editor', options=context),
|
||||
}
|
||||
|
||||
return True
|
||||
|
||||
@http.route(['/website/theme_customize_reload'], type='http', auth="public", website=True)
|
||||
def theme_customize_reload(self, href, enable, disable):
|
||||
def theme_customize_reload(self, href, enable, disable, tab=0):
|
||||
self.theme_customize(enable and enable.split(",") or [], disable and disable.split(",") or [])
|
||||
return request.redirect(href + ("&theme=true" if "#" in href else "#theme=true"))
|
||||
return request.redirect(href + ("&theme=true" if "#" in href else "#theme=true") + ("&tab=" + tab))
|
||||
|
||||
@http.route(['/website/multi_render'], type='json', auth="public", website=True)
|
||||
def multi_render(self, ids_or_xml_ids, values=None):
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 371 B |
Binary file not shown.
|
After Width: | Height: | Size: 352 B |
@@ -0,0 +1,18 @@
|
||||
odoo.define('website.tour.customize', function (require) {
|
||||
'use strict';
|
||||
|
||||
var core = require('web.core');
|
||||
var tour = require('web_tour.tour');
|
||||
var base = require('web_editor.base');
|
||||
|
||||
var _t = core._t;
|
||||
|
||||
tour.register('theme_customize', {
|
||||
url: '/',
|
||||
wait_for: base.ready(),
|
||||
}, [{
|
||||
trigger: 'button.o_theme_customize_color_user_primary',
|
||||
content: _t("Click here to choose your main branding color.<br/>It will recompute the palette with suggested matching colors."),
|
||||
position: 'bottom',
|
||||
}]);
|
||||
});
|
||||
@@ -3,8 +3,10 @@ odoo.define('website.theme', function (require) {
|
||||
|
||||
var config = require('web.config');
|
||||
var core = require('web.core');
|
||||
var ColorpickerDialog = require('web.colorpicker');
|
||||
var Dialog = require('web.Dialog');
|
||||
var weContext = require('web_editor.context');
|
||||
var widgets = require('web_editor.widget');
|
||||
var websiteNavbarData = require('website.navbar');
|
||||
|
||||
var _t = core._t;
|
||||
@@ -12,18 +14,26 @@ var _t = core._t;
|
||||
var templateDef = null;
|
||||
|
||||
var ThemeCustomizeDialog = Dialog.extend({
|
||||
xmlDependencies: (Dialog.prototype.xmlDependencies || [])
|
||||
.concat(['/website/static/src/xml/website.editor.xml']),
|
||||
|
||||
template: 'website.theme_customize',
|
||||
events: {
|
||||
'change [data-xmlid], [data-enable], [data-disable]': '_onChange',
|
||||
'click .checked [data-xmlid], .checked [data-enable], .checked [data-disable]': '_onChange',
|
||||
'click .o_theme_customize_color': '_onColorClick',
|
||||
},
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
*/
|
||||
init: function (parent, options) {
|
||||
options = options || {};
|
||||
this._super(parent, _.extend({
|
||||
title: _t("Customize this theme"),
|
||||
}, options || {}));
|
||||
}, options));
|
||||
|
||||
this.defaultTab = options.tab || 0;
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
@@ -46,8 +56,20 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
start: function () {
|
||||
var self = this;
|
||||
|
||||
this._generateDialogHTML();
|
||||
this.$modal.addClass('o_theme_customize_modal');
|
||||
|
||||
// Enable the first option tab or the given default tab
|
||||
var $tabs = this.$('[data-toggle="tab"]');
|
||||
this.opened().then(function () {
|
||||
$tabs.eq(self.defaultTab).tab('show');
|
||||
});
|
||||
|
||||
// Hide the tab navigation if only one tab
|
||||
if ($tabs.length <= 1) {
|
||||
$tabs.closest('.nav').addClass('d-none');
|
||||
}
|
||||
|
||||
this.$inputs = this.$('[data-xmlid], [data-enable], [data-disable]');
|
||||
|
||||
return $.when(
|
||||
@@ -60,6 +82,129 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
// Private
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_generateDialogHTML: function () {
|
||||
var $contents = this.$el.children('content');
|
||||
if ($contents.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
$contents.remove();
|
||||
this.$el.append(core.qweb.render('website.theme_customize_modal_layout'));
|
||||
var $navLinksContainer = this.$('.nav');
|
||||
var $navContents = this.$('.tab-content');
|
||||
|
||||
_.each($contents, function (content) {
|
||||
var $content = $(content);
|
||||
|
||||
var contentID = _.uniqueId('content-');
|
||||
|
||||
// Build the nav tab for the content
|
||||
$navLinksContainer.append($('<li/>', {
|
||||
class: 'nav-item mb-1',
|
||||
}).append($('<a/>', {
|
||||
href: '#' + contentID,
|
||||
class: 'nav-link',
|
||||
'data-toggle': 'tab',
|
||||
text: $content.attr('string'),
|
||||
})));
|
||||
|
||||
// Build the tab pane for the content
|
||||
var $navContent = $(core.qweb.render('website.theme_customize_modal_content', {
|
||||
id: contentID,
|
||||
title: $content.attr('title'),
|
||||
}));
|
||||
$navContents.append($navContent);
|
||||
var $optionsContainer = $navContent.find('.o_options_container');
|
||||
|
||||
// Process content items
|
||||
_processItems($content.children(), $optionsContainer);
|
||||
});
|
||||
|
||||
this.$('[title]').tooltip();
|
||||
|
||||
function _processItems($items, $container) {
|
||||
var optionsName = _.uniqueId('option-');
|
||||
|
||||
_.each($items, function (item) {
|
||||
var $item = $(item);
|
||||
|
||||
switch (item.tagName) {
|
||||
case 'OPT':
|
||||
var colorPalette = $item.data('colorPalette');
|
||||
var icon = $item.data('icon');
|
||||
|
||||
// Build the options template
|
||||
var $multiChoiceLabel = $(core.qweb.render('website.theme_customize_modal_option', {
|
||||
name: optionsName,
|
||||
id: $item.attr('id') || _.uniqueId('o_theme_customize_input_id_'),
|
||||
|
||||
string: $item.attr('string'),
|
||||
icon: icon,
|
||||
color: $item.data('color'),
|
||||
font: $item.data('font'),
|
||||
|
||||
colorPalette: colorPalette,
|
||||
|
||||
xmlid: $item.data('xmlid'),
|
||||
enable: $item.data('enable'),
|
||||
disable: $item.data('disable'),
|
||||
reload: $item.data('reload'),
|
||||
}));
|
||||
|
||||
if ($container.hasClass('form-row')) {
|
||||
var $col = $('<div/>', {class: (icon ? 'col-4' : (colorPalette ? 'col-12' : 'col-6'))});
|
||||
$col.append($multiChoiceLabel);
|
||||
$container.append($col);
|
||||
} else {
|
||||
$container.append($multiChoiceLabel);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'MORE':
|
||||
var collapseID = _.uniqueId('collapse-');
|
||||
|
||||
var $col = $('<div/>', {
|
||||
class: 'col-12',
|
||||
}).appendTo($container);
|
||||
|
||||
var string = $item.attr('string');
|
||||
if (string) {
|
||||
var $button = $('<button/>', {
|
||||
'type': 'button',
|
||||
class: 'btn btn-primary d-block mx-auto mt-3 collapsed',
|
||||
'data-toggle': 'collapse',
|
||||
'data-target': "#" + collapseID,
|
||||
text: string,
|
||||
});
|
||||
$col.append($button);
|
||||
}
|
||||
|
||||
var $collapse = $('<div/>',{
|
||||
id: collapseID,
|
||||
class: 'collapse form-row justify-content-between mt-3',
|
||||
'data-depends': $item.data('depends'),
|
||||
});
|
||||
$col.append($collapse);
|
||||
|
||||
_processItems($item.children(), $collapse);
|
||||
break;
|
||||
|
||||
case 'LIST':
|
||||
var $listContainer = $('<div/>', {class: 'py-1 px-2 o_theme_customize_option_list'});
|
||||
var $col = $('<div/>', {
|
||||
class: 'col-6 mt-2',
|
||||
'data-depends': $item.data('depends'),
|
||||
}).append($('<h6/>', {text: $item.attr('string')}), $listContainer);
|
||||
$container.append($col);
|
||||
_processItems($item.children(), $listContainer);
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@@ -113,10 +258,51 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
return xmlIDs;
|
||||
},
|
||||
/**
|
||||
* @abstract
|
||||
* @private
|
||||
*/
|
||||
_processChange: function ($inputs, event) {},
|
||||
_processChange: function ($inputs) {
|
||||
var self = this;
|
||||
this.$modal.addClass('o_theme_customize_loading');
|
||||
|
||||
var bodyCustomImageXMLID = 'option_custom_body_image';
|
||||
var $inputBodyCustomImage = $inputs.filter('[data-xmlid*="website.' + bodyCustomImageXMLID + '"]');
|
||||
if (!$inputBodyCustomImage.length) {
|
||||
return $.when();
|
||||
}
|
||||
|
||||
var def = $.Deferred();
|
||||
var $image = $('<img/>');
|
||||
var editor = new widgets.MediaDialog(this, {onlyImages: true, firstFilters: ['background']}, null, $image[0]);
|
||||
|
||||
editor.on('save', this, function (media) { // TODO use scss customization instead (like for user colors)
|
||||
var src = $(media).attr('src');
|
||||
self._rpc({
|
||||
model: 'ir.model.data',
|
||||
method: 'get_object_reference',
|
||||
args: ['website', bodyCustomImageXMLID],
|
||||
}).then(function (data) {
|
||||
return self._rpc({
|
||||
model: 'ir.ui.view',
|
||||
method: 'save',
|
||||
args: [
|
||||
data[1],
|
||||
'#wrapwrap { background-image: url("' + src + '"); }',
|
||||
'//style',
|
||||
weContext.get(),
|
||||
],
|
||||
});
|
||||
}).then(function () {
|
||||
def.resolve();
|
||||
});
|
||||
});
|
||||
editor.on('cancel', this, function () {
|
||||
def.resolve();
|
||||
});
|
||||
|
||||
editor.open();
|
||||
|
||||
return def;
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@@ -144,18 +330,33 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
}
|
||||
$set.prop('checked', checked).closest('label').toggleClass('checked', checked);
|
||||
});
|
||||
|
||||
// Mark the collapsed section as visible if their dependencies are met
|
||||
var $collapsedElements = this.$('[data-depends]');
|
||||
_.each($collapsedElements, function (collapsed) {
|
||||
var $collapsed = $(collapsed);
|
||||
var enabled = true;
|
||||
if (self._getInputs($collapsed.data('depends')).not(':checked').length) {
|
||||
enabled = false;
|
||||
}
|
||||
|
||||
if ($collapsed.is('.collapse')) {
|
||||
$collapsed.collapse(enabled ? 'show' : 'hide');
|
||||
} else {
|
||||
$collapsed.toggleClass('d-none', !enabled);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_updateStyle: function (enable, disable, reload) {
|
||||
this.$modal.addClass('loading');
|
||||
|
||||
if (reload || config.debug === 'assets') {
|
||||
window.location.href = $.param.querystring('/website/theme_customize_reload', {
|
||||
href: window.location.href,
|
||||
enable: enable.join(','),
|
||||
disable: disable.join(','),
|
||||
tab: this.$('.nav-link.active').parent().index(),
|
||||
});
|
||||
return $.Deferred();
|
||||
}
|
||||
@@ -168,28 +369,32 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
disable: disable,
|
||||
get_bundle: true,
|
||||
},
|
||||
}).then(function (bundleHTML) {
|
||||
var frontendLinkSelector = 'link[href*=".assets_frontend"]';
|
||||
var $links = $(frontendLinkSelector);
|
||||
var $newLinks = $(bundleHTML).filter(frontendLinkSelector);
|
||||
}).then(function (bundles) {
|
||||
var defs = _.map(bundles, function (bundleContent, bundleName) {
|
||||
var linkSelector = 'link[href*="' + bundleName + '"]';
|
||||
var $links = $(linkSelector);
|
||||
var $newLinks = $(bundleContent).filter(linkSelector);
|
||||
|
||||
var linksLoaded = $.Deferred();
|
||||
var nbLoaded = 0;
|
||||
$newLinks.on('load', function (e) {
|
||||
if (++nbLoaded >= $newLinks.length) {
|
||||
linksLoaded.resolve();
|
||||
}
|
||||
});
|
||||
$newLinks.on('error', function (e) {
|
||||
linksLoaded.reject();
|
||||
window.location.hash = 'theme=true';
|
||||
window.location.reload();
|
||||
var linksLoaded = $.Deferred();
|
||||
var nbLoaded = 0;
|
||||
$newLinks.on('load', function (e) {
|
||||
if (++nbLoaded >= $newLinks.length) {
|
||||
linksLoaded.resolve();
|
||||
}
|
||||
});
|
||||
$newLinks.on('error', function (e) {
|
||||
linksLoaded.reject();
|
||||
window.location.hash = 'theme=true';
|
||||
window.location.reload();
|
||||
});
|
||||
$links.last().after($newLinks);
|
||||
return linksLoaded.then(function () {
|
||||
$links.remove();
|
||||
});
|
||||
});
|
||||
|
||||
$links.last().after($newLinks);
|
||||
return linksLoaded.then(function () {
|
||||
$links.remove();
|
||||
self.$modal.removeClass('loading');
|
||||
return $.when.apply($, defs).then(function () {
|
||||
self.$modal.removeClass('o_theme_customize_loading');
|
||||
});
|
||||
});
|
||||
},
|
||||
@@ -206,7 +411,7 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
var self = this;
|
||||
|
||||
// Checkout the option that changed
|
||||
var $option = $(ev.target).find('input').addBack('input');
|
||||
var $option = $(ev.currentTarget);
|
||||
var $options = $option;
|
||||
var checked = $option.is(':checked');
|
||||
|
||||
@@ -231,12 +436,79 @@ var ThemeCustomizeDialog = Dialog.extend({
|
||||
this._setActive();
|
||||
|
||||
// Update the style according to the whole set of options
|
||||
self._processChange($options, ev);
|
||||
self._updateStyle(
|
||||
self._getXMLIDs($enable),
|
||||
self._getXMLIDs($disable),
|
||||
$option.data('reload') && window.location.href.match(new RegExp($option.data('reload')))
|
||||
);
|
||||
self._processChange($options).then(function () {
|
||||
self._updateStyle(
|
||||
self._getXMLIDs($enable),
|
||||
self._getXMLIDs($disable),
|
||||
$option.data('reload') && window.location.href.match(new RegExp($option.data('reload')))
|
||||
);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
* @param {Event} ev
|
||||
*/
|
||||
_onColorClick: function (ev) {
|
||||
var self = this;
|
||||
var $color = $(ev.currentTarget);
|
||||
var colorName = $color.data('color');
|
||||
var colorType = $color.data('colorType');
|
||||
|
||||
var colorpicker = new ColorpickerDialog(this, {
|
||||
defaultColor: $color.find('span').css('background-color'),
|
||||
});
|
||||
colorpicker.on('colorpicker:saved', this, function (ev) {
|
||||
ev.stopPropagation();
|
||||
|
||||
// TODO improve to be more efficient
|
||||
self._rpc({
|
||||
route: '/web_editor/get_assets_editor_resources',
|
||||
params: {
|
||||
key: 'website.layout',
|
||||
get_views: false,
|
||||
get_scss: true,
|
||||
bundles: false,
|
||||
bundles_restriction: [],
|
||||
},
|
||||
}).then(function (data) {
|
||||
var files = data.scss[0][1];
|
||||
var file = _.find(files, function (file) {
|
||||
switch (colorType) {
|
||||
case 'theme':
|
||||
return file.url === '/website/static/src/scss/options/colors/user_theme_color_palette.scss';
|
||||
case 'typo':
|
||||
return file.url === '/website/static/src/scss/options/colors/user_color_palette_typo.scss';
|
||||
}
|
||||
return file.url === '/website/static/src/scss/options/colors/user_color_palette_' + colorName + '.scss';
|
||||
});
|
||||
|
||||
var colors = {};
|
||||
colors[colorName] = ev.data.hex;
|
||||
if (colorName === 'primary') {
|
||||
colors['secondary'] = 'null';
|
||||
colors['gamma'] = 'null';
|
||||
colors['delta'] = 'null';
|
||||
colors['epsilon'] = 'null';
|
||||
}
|
||||
|
||||
var updatedFileContent = file.arch;
|
||||
_.each(colors, function (colorValue, colorName) {
|
||||
updatedFileContent = updatedFileContent.replace(new RegExp(colorName + ': (?:null|#[a-fA-F0-9]{6}),'), colorName + ': ' + colorValue + ',');
|
||||
});
|
||||
|
||||
return self._rpc({
|
||||
route: '/web_editor/save_scss',
|
||||
params: {
|
||||
url: file.url,
|
||||
bundle_xmlid: 'web.assets_common',
|
||||
content: updatedFileContent,
|
||||
},
|
||||
});
|
||||
}).then(function () {
|
||||
self.$('#' + $color.closest('.o_theme_customize_color_previews').data('depends')).click();
|
||||
});
|
||||
});
|
||||
colorpicker.open();
|
||||
},
|
||||
});
|
||||
|
||||
@@ -254,7 +526,8 @@ var ThemeCustomizeMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
|
||||
start: function () {
|
||||
var def;
|
||||
if ((window.location.hash || '').indexOf('theme=true') > 0) {
|
||||
def = this._openThemeCustomizeDialog();
|
||||
var tab = window.location.hash.match(/tab=(\d+)/);
|
||||
def = this._openThemeCustomizeDialog(tab ? tab[1] : false);
|
||||
window.location.hash = '';
|
||||
}
|
||||
return $.when(this._super.apply(this, arguments), def);
|
||||
@@ -268,10 +541,11 @@ var ThemeCustomizeMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
|
||||
* Instantiates and opens the theme customization dialog.
|
||||
*
|
||||
* @private
|
||||
* @param {string} tab
|
||||
* @returns {Deferred}
|
||||
*/
|
||||
_openThemeCustomizeDialog: function () {
|
||||
return new ThemeCustomizeDialog(this).open();
|
||||
_openThemeCustomizeDialog: function (tab) {
|
||||
return new ThemeCustomizeDialog(this, {tab: tab}).open();
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
|
||||
$body-bg: color('body');
|
||||
|
||||
$body-color: color('text');
|
||||
$yiq-text-dark: color('text');
|
||||
$headings-color: color('h1');
|
||||
|
||||
$font-family-sans-serif: nth($o-theme-fonts, $o-theme-font-number);
|
||||
$headings-font-family: nth($o-theme-fonts, $o-theme-headings-font-number);
|
||||
@@ -0,0 +1,4 @@
|
||||
|
||||
// Enable last color palette, which is the user customized color palette
|
||||
$o-color-palette-number: length($o-color-palettes);
|
||||
$o-theme-color-palette-number: length($o-theme-color-palettes);
|
||||
@@ -0,0 +1,4 @@
|
||||
|
||||
$o-user-color-palette: map-merge((
|
||||
body: null,
|
||||
), o-map-omit($o-user-color-palette));
|
||||
@@ -0,0 +1,4 @@
|
||||
|
||||
$o-user-color-palette: map-merge((
|
||||
footer: null,
|
||||
), o-map-omit($o-user-color-palette));
|
||||
@@ -0,0 +1,4 @@
|
||||
|
||||
$o-user-color-palette: map-merge((
|
||||
menu: null,
|
||||
), o-map-omit($o-user-color-palette));
|
||||
@@ -0,0 +1,10 @@
|
||||
|
||||
$o-user-color-palette: map-merge((
|
||||
text: null,
|
||||
h1: null,
|
||||
h2: null,
|
||||
h3: null,
|
||||
h4: null,
|
||||
h5: null,
|
||||
h6: null,
|
||||
), o-map-omit($o-user-color-palette));
|
||||
@@ -0,0 +1,15 @@
|
||||
|
||||
$o-user-theme-color-palette: map-merge((
|
||||
// Theme colors
|
||||
primary: null,
|
||||
secondary: null,
|
||||
gamma: null,
|
||||
epsilon: null,
|
||||
delta: null,
|
||||
|
||||
// BS state colors
|
||||
success: null,
|
||||
info: null,
|
||||
warning: null,
|
||||
danger: null,
|
||||
), o-map-omit($o-user-theme-color-palette));
|
||||
@@ -0,0 +1,2 @@
|
||||
|
||||
$o-theme-font-number: 1; // Note: this is the default
|
||||
@@ -0,0 +1,2 @@
|
||||
|
||||
$o-theme-font-number: 2;
|
||||
@@ -0,0 +1,2 @@
|
||||
|
||||
$o-theme-font-number: 3;
|
||||
@@ -0,0 +1,2 @@
|
||||
|
||||
$o-theme-font-number: 4;
|
||||
@@ -0,0 +1,2 @@
|
||||
|
||||
$o-theme-font-number: 5;
|
||||
@@ -0,0 +1,2 @@
|
||||
|
||||
$o-theme-font-number: 6;
|
||||
@@ -0,0 +1,2 @@
|
||||
|
||||
$o-theme-headings-font-number: 1; // Note: this is the default
|
||||
@@ -0,0 +1,2 @@
|
||||
|
||||
$o-theme-headings-font-number: 2;
|
||||
@@ -0,0 +1,2 @@
|
||||
|
||||
$o-theme-headings-font-number: 3;
|
||||
@@ -0,0 +1,2 @@
|
||||
|
||||
$o-theme-headings-font-number: 4;
|
||||
@@ -0,0 +1,2 @@
|
||||
|
||||
$o-theme-headings-font-number: 5;
|
||||
@@ -0,0 +1,2 @@
|
||||
|
||||
$o-theme-headings-font-number: 6;
|
||||
@@ -0,0 +1,5 @@
|
||||
|
||||
#wrapwrap {
|
||||
background-size: auto;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
#wrapwrap {
|
||||
padding: 0 7.5%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Colors
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
// Extend default color palettes with website-related colors
|
||||
$-palettes: ();
|
||||
@each $palette in $o-color-palettes {
|
||||
$-palettes: append($-palettes, map-merge((
|
||||
body: null, // Default to bootstrap
|
||||
menu: #F9F9F9,
|
||||
footer: #F9F9F9,
|
||||
text: null, // Default to bootstrap
|
||||
h1: null, // Default to text
|
||||
h2: null, // Default to h1
|
||||
h3: null, // Default to h2
|
||||
h4: null, // Default to h3
|
||||
h5: null, // Default to h4
|
||||
h6: null, // Default to h5
|
||||
), $palette));
|
||||
}
|
||||
$o-color-palettes: $-palettes;
|
||||
|
||||
// By default, all user color palette values are null. Each null value is automatically replaced
|
||||
// with corresponsing color of color palette 1.
|
||||
$o-user-color-palette: () !default;
|
||||
|
||||
// By default, all user theme color palette values are null. Each null value is automatically
|
||||
// replaced with corresponsing color of theme color palette 1.
|
||||
$o-user-theme-color-palette: () !default;
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Fonts
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
$o-theme-fonts: (
|
||||
(-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), // This is BS default
|
||||
('Open Sans', sans-serif),
|
||||
('Source Sans Pro', sans-serif),
|
||||
('Raleway', sans-serif),
|
||||
('Noto Serif', serif),
|
||||
('Arvo', Times, serif),
|
||||
) !default;
|
||||
$o-theme-font-urls: (
|
||||
null,
|
||||
'Open+Sans:400,400i,700,700i',
|
||||
'Source+Sans+Pro:400,400i,700,700i',
|
||||
'Raleway:400,400i,700,700i',
|
||||
'Noto+Serif:400,400i,700,700i',
|
||||
'Arvo:400,400i,700,700i',
|
||||
) !default;
|
||||
$o-theme-font-names: (
|
||||
'Bootstrap',
|
||||
'Open Sans',
|
||||
'Source Sans Pro',
|
||||
'Raleway',
|
||||
'Noto Serif',
|
||||
'Arvo',
|
||||
) !default;
|
||||
$o-theme-font-number: 1 !default;
|
||||
$o-theme-headings-font-number: 1 !default;
|
||||
@@ -0,0 +1,25 @@
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Colors
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
// By default, all user color palette values are null. Each null value is automatically
|
||||
// replaced with corresponsing color in color palette 1.
|
||||
$-palette-1: nth($o-color-palettes, 1);
|
||||
$o-color-palettes: append($o-color-palettes, map-merge($-palette-1, o-map-omit($o-user-color-palette)));
|
||||
|
||||
// Generate default theme color scheme if primary is set
|
||||
$-primary: map-get($o-user-theme-color-palette, 'primary');
|
||||
@if ($-primary) {
|
||||
$o-user-theme-color-palette: map-merge($o-user-theme-color-palette, map-merge((
|
||||
secondary: lighten(desaturate($-primary, 60%), 30%),
|
||||
gamma: desaturate(adjust-hue($-primary, -45deg), 10%),
|
||||
delta: desaturate(adjust-hue($-primary, 45deg), 10%),
|
||||
epsilon: desaturate(adjust-hue($-primary, 180deg), 10%),
|
||||
), o-map-omit($o-user-theme-color-palette)));
|
||||
}
|
||||
|
||||
// By default, all user theme color palette values are null. Each null value is automatically
|
||||
// replaced with corresponsing color in theme color palette 1.
|
||||
$-palette-1: nth($o-theme-color-palettes, 1);
|
||||
$o-theme-color-palettes: append($o-theme-color-palettes, map-merge($-palette-1, o-map-omit($o-user-theme-color-palette)));
|
||||
@@ -1,4 +1,175 @@
|
||||
|
||||
@each $url in $o-theme-font-urls {
|
||||
@if $url {
|
||||
@import url("https://fonts.googleapis.com/css?family=#{unquote($url)}");
|
||||
}
|
||||
}
|
||||
|
||||
.modal.o_theme_customize_modal {
|
||||
|
||||
&.o_theme_customize_loading {
|
||||
pointer-events: none;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
@include o-position-absolute(0, 0, 0, 0);
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
@include o-position-absolute(0, 2%);
|
||||
width: 96%;
|
||||
max-width: 550px;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: $o-brand-odoo;
|
||||
color: white;
|
||||
border-radius: 0;
|
||||
|
||||
* {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav {
|
||||
padding: 0;
|
||||
|
||||
.nav-item {
|
||||
text-align: center;
|
||||
background-color: $o-brand-lightsecondary;
|
||||
|
||||
.nav-link {
|
||||
color: $o-main-text-color;
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
background-color: white;
|
||||
border: 1px solid #d9d7d7;
|
||||
border-left: 1px solid #333333;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_theme_customize_option {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
|
||||
+ label {
|
||||
@include o-position-absolute(0, 0, 0, 0);
|
||||
width: auto;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
width: 100%;
|
||||
min-height: 24px;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
border: 2px solid transparent;
|
||||
background-color: $o-brand-lightsecondary;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
|
||||
&.o_theme_customize_option_palette_label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&.checked {
|
||||
border-color: $o-brand-odoo;
|
||||
color: $o-brand-odoo;
|
||||
}
|
||||
}
|
||||
|
||||
$i: 1;
|
||||
@each $font in $o-theme-fonts {
|
||||
&.o_theme_customize_option_font_#{$i} {
|
||||
font-family: if($font, $font, $font-family-base);
|
||||
|
||||
> label > span::before {
|
||||
content: nth($o-theme-font-names, $i);
|
||||
}
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
}
|
||||
|
||||
.o_theme_customize_color_previews {
|
||||
h6, a {
|
||||
font-size: 12px;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.o_theme_customize_color {
|
||||
> span {
|
||||
display: inline-block;
|
||||
width: 48px;
|
||||
height: 27px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
$i: 1;
|
||||
@each $palette in $o-theme-color-palettes {
|
||||
@each $name, $value in map-merge($theme-colors, $palette) {
|
||||
&.o_theme_customize_color_#{if($i == length($o-theme-color-palettes), 'user', $i)}_#{$name} > span {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
$i: 1;
|
||||
@each $palette in $o-color-palettes {
|
||||
$-text-color: if(map-get($palette, 'text'), map-get($palette, 'text'), $body-color);
|
||||
$-h1-color: if(map-get($palette, 'h1'), map-get($palette, 'h1'), $-text-color);
|
||||
$-h2-color: if(map-get($palette, 'h2'), map-get($palette, 'h2'), $-h1-color);
|
||||
$-h3-color: if(map-get($palette, 'h3'), map-get($palette, 'h3'), $-h2-color);
|
||||
$-h4-color: if(map-get($palette, 'h4'), map-get($palette, 'h4'), $-h3-color);
|
||||
$-h5-color: if(map-get($palette, 'h5'), map-get($palette, 'h5'), $-h4-color);
|
||||
$-h6-color: if(map-get($palette, 'h6'), map-get($palette, 'h6'), $-h5-color);
|
||||
$-defaults: (
|
||||
'body': $body-bg,
|
||||
'text': $-text-color,
|
||||
'h1': $-h1-color,
|
||||
'h2': $-h2-color,
|
||||
'h3': $-h3-color,
|
||||
'h4': $-h4-color,
|
||||
'h5': $-h5-color,
|
||||
'h6': $-h6-color,
|
||||
);
|
||||
|
||||
@each $name, $value in $palette {
|
||||
&.o_theme_customize_color_#{if($i == length($o-color-palettes), 'user', $i)}_#{$name} > span {
|
||||
background-color: if($value, $value, map-get($-defaults, $name));
|
||||
}
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_theme_customize_option_input {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.o_theme_customize_option_list {
|
||||
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.o_homepage_editor_welcome_message {
|
||||
padding-top: 128px;
|
||||
padding-bottom: 128px;
|
||||
|
||||
@@ -2,10 +2,50 @@
|
||||
/// This file regroups the website design rules.
|
||||
///
|
||||
|
||||
$-theme-font: nth($o-theme-font-urls, $o-theme-font-number);
|
||||
@if $-theme-font {
|
||||
@import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}");
|
||||
}
|
||||
@if $o-theme-font-number != $o-theme-headings-font-number {
|
||||
$-theme-font: nth($o-theme-font-urls, $o-theme-headings-font-number);
|
||||
@if $-theme-font {
|
||||
@import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}");
|
||||
}
|
||||
}
|
||||
|
||||
#wrapwrap {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
font[style*='background'], font[class*='bg-'] {
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
@include o-bg-color(color('menu'));
|
||||
}
|
||||
.o_footer {
|
||||
@include o-bg-color(color('footer'));
|
||||
}
|
||||
h2, h3, h4, h5, h6 {
|
||||
color: color('h2');
|
||||
}
|
||||
h3, h4, h5, h6 {
|
||||
color: color('h3');
|
||||
}
|
||||
h4, h5, h6 {
|
||||
color: color('h4');
|
||||
}
|
||||
h5, h6 {
|
||||
color: color('h5');
|
||||
}
|
||||
h6 {
|
||||
color: color('h6');
|
||||
}
|
||||
|
||||
// Odoo image background classes
|
||||
.oe_img_bg {
|
||||
background-size: cover;
|
||||
|
||||
@@ -418,54 +418,6 @@ body .modal {
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
// CUSTOMIZE THEME
|
||||
#theme_error {
|
||||
background: #ffc;
|
||||
}
|
||||
#theme_customize_modal {
|
||||
overflow: visible;
|
||||
display: block;
|
||||
.modal-dialog {
|
||||
@include o-position-absolute($o-navbar-height + 10, 10px);
|
||||
width: auto;
|
||||
margin: 0;
|
||||
font-family: Roboto;
|
||||
}
|
||||
.loading_backdrop {
|
||||
display: none;
|
||||
}
|
||||
&.loading .loading_backdrop {
|
||||
@include o-position-absolute(0, 0, 0, 0);
|
||||
display: block;
|
||||
background: black;
|
||||
opacity: 0.3;
|
||||
z-index: 1;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
text-align: center;
|
||||
> div, > img {
|
||||
border: 1px solid #fff;
|
||||
line-height: 30px;
|
||||
font-size: 0.9em;
|
||||
margin: 2px 4px;
|
||||
}
|
||||
&.checked > div, &.checked > img {
|
||||
box-shadow: 2px 2px 3px #888;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
img {
|
||||
width: 60px;
|
||||
height: 35px;
|
||||
margin: 2px;
|
||||
border: 1px solid rgba(136, 136, 136, 0.5);
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ACE EDITOR
|
||||
.o_ace_view_editor {
|
||||
@include o-w-preserve-base;
|
||||
|
||||
@@ -5,9 +5,69 @@
|
||||
<p class="lead d-none d-md-block">Let's start designing.</p>
|
||||
<div class="o_tooltip_container d-none d-md-block">Follow all the <div class="o_tooltip bottom"/> signs to get your website ready in no time.</div>
|
||||
</div>
|
||||
|
||||
<div t-name="website.leaving_current_page_edition">
|
||||
<p>What do you want to do?</p>
|
||||
<p class="text-muted">Your current changes will be saved automatically.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div t-name="website.theme_customize_modal_layout" class="d-flex align-items-start">
|
||||
<ul class="nav flex-column flex-shrink-0 w-25"/>
|
||||
<div class="tab-content pl-3 pb-2 flex-grow-1"/>
|
||||
</div>
|
||||
<div t-name="website.theme_customize_modal_content" t-att-id="id" class="tab-pane">
|
||||
<h5 class="mt-0"><t t-esc="title"/></h5>
|
||||
<div class="form-row justify-content-between o_options_container"/>
|
||||
</div>
|
||||
<t t-name="website.theme_customize_modal_option">
|
||||
<div t-attf-class="o_theme_customize_option my-1 flex-grow-0 #{font ? 'o_theme_customize_option_font_' + font : ''}">
|
||||
<img t-if="icon" t-att-src="icon"/>
|
||||
<label t-attf-class="d-flex align-items-center justify-content-center text-center #{color ? 'bg-' + color : ''} #{colorPalette ? 'o_theme_customize_option_palette_label' : ''}">
|
||||
<input t-att-id="id" t-att-name="name" type="radio" class="o_theme_customize_option_input" t-att-data-xmlid="xmlid" t-att-data-enable="enable" t-att-data-disable="disable" t-att-data-reload="reload"/>
|
||||
<span><t t-esc="string"/></span>
|
||||
</label>
|
||||
<div t-if="colorPalette" class="o_theme_customize_color_previews" t-att-data-depends="id">
|
||||
<div>
|
||||
<h6>Main colors</h6>
|
||||
<t t-foreach="{'primary': _t('Primary'), 'secondary': _t('Secondary'), 'gamma': _t('Extra Color 1'), 'delta': _t('Extra Color 2'), 'epsilon': _t('Extra Color 3')}" t-as="color">
|
||||
<t t-call="website.theme_customize_color_palette_button">
|
||||
<t t-set="color_type" t-value="'theme'"/>
|
||||
</t>
|
||||
</t>
|
||||
</div>
|
||||
<div>
|
||||
<h6>Background colors</h6>
|
||||
<t t-foreach="{'body': _t('Body'), 'menu': _t('Menu'), 'footer': _t('Footer')}" t-as="color">
|
||||
<t t-call="website.theme_customize_color_palette_button"/>
|
||||
</t>
|
||||
</div>
|
||||
<div>
|
||||
<h6>Text colors</h6>
|
||||
<t t-foreach="{'text': _t('Text'), 'h1': _t('Headings 1'), 'h2': _t('Headings 2'), 'h3': _t('Headings 3'), 'h4': _t('Headings 4'), 'h5': _t('Headings 5'), 'h6': _t('Headings 6')}" t-as="color">
|
||||
<t t-call="website.theme_customize_color_palette_button">
|
||||
<t t-set="color_type" t-value="'typo'"/>
|
||||
</t>
|
||||
</t>
|
||||
</div>
|
||||
<div>
|
||||
<h6>State colors</h6>
|
||||
<t t-foreach="{'success': _t('Success'), 'info': _t('Info'), 'warning': _t('Warning'), 'danger': _t('Error')}" t-as="color">
|
||||
<t t-call="website.theme_customize_color_palette_button">
|
||||
<t t-set="color_type" t-value="'theme'"/>
|
||||
</t>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="website.theme_customize_color_palette_button">
|
||||
<button type="button"
|
||||
t-att-disabled="colorPalette != 'user' ? 'disabled' : undefined"
|
||||
t-attf-class="btn btn-sm btn-secondary d-flex align-items-center w-100 mt-2 justify-content-between o_theme_customize_color o_theme_customize_color_#{colorPalette}_#{color}"
|
||||
t-att-data-color="color"
|
||||
t-att-data-color-type="color_type">
|
||||
<t t-esc="color_value"/>
|
||||
<span/>
|
||||
</button>
|
||||
</t>
|
||||
</templates>
|
||||
|
||||
@@ -1,6 +1,22 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
<!-- Assets -->
|
||||
<template id="_assets_primary_variables" inherit_id="web._assets_primary_variables">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/primary_variables.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/user_color_palette_body.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/user_color_palette_footer.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/user_color_palette_menu.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/user_color_palette_typo.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/user_theme_color_palette.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="_assets_secondary_variables" inherit_id="web._assets_secondary_variables">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/secondary_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="assets_backend" inherit_id="web.assets_backend" name="Website Backend Assets (used in backend interface)">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.backend.scss"/>
|
||||
@@ -18,6 +34,12 @@
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="_assets_frontend_helpers" inherit_id="web._assets_frontend_helpers">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/bootstrap_overridden.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="assets_frontend" inherit_id="web.assets_frontend" name="Website Assets">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.scss"/>
|
||||
@@ -59,6 +81,7 @@
|
||||
<script type="text/javascript" src="/website/static/src/js/menu/translate.js"/>
|
||||
|
||||
<script type="text/javascript" src="/website/static/src/js/tours/banner.js"/>
|
||||
<script type="text/javascript" src="/website/static/src/js/tours/customize.js"/>
|
||||
<script type="text/javascript" src="/website/static/src/js/tours/rte.js"/>
|
||||
|
||||
<script type="text/javascript" src="/website/static/src/js/widgets/ace.js"/>
|
||||
@@ -371,41 +394,200 @@
|
||||
</template>
|
||||
|
||||
<!--
|
||||
Customize Themes
|
||||
XML template to be processed for theme customization modal.
|
||||
|
||||
Use INPUT type 'checkbox' or 'radio' or use OPTION in select box
|
||||
'data-xmlid' (optional) xml id of the template to add if the input is checked.
|
||||
You can set a list of xml id separate by comma (all template is enable or
|
||||
disable in same time)
|
||||
'data-enable' (optional) to checked one or more HTML ids, or list separate by comma
|
||||
'data-disable' (optional) to unchecked one or more HTML ids, or list separate by comma
|
||||
'data-reload="/"' (optional) force the reloading of the page if the url match with
|
||||
the string ( = regexp).
|
||||
Otherwise, only the '/web/content/web.assets_frontend' is reloaded
|
||||
Allowed tags in the root <div/> elements:
|
||||
|
||||
For the sets (data-enable and/or data-disable without data-xmlid), the set is
|
||||
automatically checked if:
|
||||
- all related fields are enabled for data-enable
|
||||
- all related fields are disabled for data-disable
|
||||
else unchecked
|
||||
<content>: Declares a new set of options (a tab pane in the dialog)
|
||||
-> string = tab's nav text
|
||||
-> title = tab's heading
|
||||
|
||||
HTML apply classes:
|
||||
- 'checked': on the parent label when input is checked
|
||||
- 'in': on the container (e.g.: bootstrap modal) after added in DOM (removed together
|
||||
out is added)
|
||||
- 'out': on the container 1 second before removed from ths DOM
|
||||
- 'loading': on the container/modal when the new css is loading
|
||||
Allowed tags in the <content/> elements:
|
||||
|
||||
<opt>: Declares a new toggle option
|
||||
-> id (optional) = an ID to associate to the option
|
||||
-> string (optional) = option's text
|
||||
-> data-icon (optional) = an image URL to set as option's background
|
||||
-> data-xmlid (optional) = template(s) to enable if the input is checked (list of comma-separated xml ids)
|
||||
-> data-enable (optional) = enable other options (list of comma-separated option ids)
|
||||
-> data-disable (optional) = disable other options (list of comma-separated option ids)
|
||||
-> data-reload (optional) = force the reloading of the page if the url matches the value
|
||||
Otherwise, only the main assets are reloaded
|
||||
-> data-font (optional) = indicates which fonts to use to style the option and adds
|
||||
default sample text if no 'string' is specified
|
||||
(see $o-theme-fonts in scss)
|
||||
-> data-color-palette (optional) = indicates which color palette to use to style the option
|
||||
(see $o-theme-color-palettes in scss)
|
||||
|
||||
<more>: Declares a subset of options which is hidden by default (with a button to show it)
|
||||
-> string = button's text
|
||||
|
||||
<list>: Declares a subset of options showed as a list
|
||||
-> string = list's title
|
||||
-->
|
||||
<template id="website.theme_customize" name="Theme Modal for Customization">
|
||||
<div role="dialog" id="theme_customize_modal" class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<header class="modal-header text-center">
|
||||
<h4 class="modal-title">Please install a theme in order to customize your website.</h4>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template id="theme_customize">
|
||||
<div>
|
||||
<!-- Color options -->
|
||||
<content string="Colors" title="Choose the theme colors">
|
||||
<opt data-xmlid="website.option_color_user_variables" data-color-palette="user" string="Choose your colors"/>
|
||||
<opt data-xmlid="" data-color-palette="1" string="Default theme colors"/>
|
||||
|
||||
<list string="Menu text">
|
||||
<opt string="Dark" data-xmlid="" data-reload="/"/>
|
||||
<opt string="Light" data-xmlid="website.option_navbar_dark" data-reload="/"/>
|
||||
</list>
|
||||
</content>
|
||||
|
||||
<!-- Layout Options -->
|
||||
<content string="Layout" title="Choose your layout">
|
||||
<list string="Menu">
|
||||
<opt string="Top Bar" data-xmlid="" data-reload="/"/>
|
||||
<opt string="Hamburger" data-xmlid="website.option_hamburger_menu, website.no_autohide_menu" data-reload="/"/>
|
||||
</list>
|
||||
<more data-depends="">
|
||||
<list string="Body">
|
||||
<opt string="Full" data-xmlid="website.option_layout_full" data-enable="option_no_background" data-icon="/website/static/src/img/options/layout-full.png"/>
|
||||
<opt id="option_layout_boxed" string="Boxed" data-xmlid="website.option_layout_boxed" data-icon="/website/static/src/img/options/layout-boxed.png"/>
|
||||
</list>
|
||||
<list string="Background" data-depends="option_layout_boxed">
|
||||
<opt id="option_no_background" string="None" data-xmlid=""/>
|
||||
<opt string="Choose an image" data-xmlid="website.option_custom_body_image"/>
|
||||
<opt string="Choose a pattern" data-xmlid="website.option_custom_body_image, website.option_custom_body_pattern"/>
|
||||
</list>
|
||||
</more>
|
||||
</content>
|
||||
|
||||
<!-- Font options -->
|
||||
<content string="Fonts" title="Choose your fonts">
|
||||
<list string="Title">
|
||||
<opt id="option_font_title_01" data-xmlid="website.option_font_title_01_variables" data-font="1"/>
|
||||
<opt id="option_font_title_02" data-xmlid="website.option_font_title_02_variables" data-font="2"/>
|
||||
<opt id="option_font_title_03" data-xmlid="website.option_font_title_03_variables" data-font="3"/>
|
||||
<opt id="option_font_title_04" data-xmlid="website.option_font_title_04_variables" data-font="4"/>
|
||||
<opt id="option_font_title_05" data-xmlid="website.option_font_title_05_variables" data-font="5"/>
|
||||
<opt id="option_font_title_06" data-xmlid="website.option_font_title_06_variables" data-font="6"/>
|
||||
</list>
|
||||
<list string="Body">
|
||||
<opt id="option_font_body_01" data-xmlid="website.option_font_body_01_variables" data-font="1"/>
|
||||
<opt id="option_font_body_02" data-xmlid="website.option_font_body_02_variables" data-font="2"/>
|
||||
<opt id="option_font_body_03" data-xmlid="website.option_font_body_03_variables" data-font="3"/>
|
||||
<opt id="option_font_body_04" data-xmlid="website.option_font_body_04_variables" data-font="4"/>
|
||||
<opt id="option_font_body_05" data-xmlid="website.option_font_body_05_variables" data-font="5"/>
|
||||
<opt id="option_font_body_06" data-xmlid="website.option_font_body_06_variables" data-font="6"/>
|
||||
</list>
|
||||
</content>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Color options -->
|
||||
<template id="option_color_user_variables" inherit_id="website._assets_secondary_variables" active="True">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/option_color_user_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<!-- Menu color options -->
|
||||
<template id="option_navbar_dark" inherit_id="website.layout" active="False">
|
||||
<xpath expr="//header/nav" position="attributes">
|
||||
<attribute name="class" remove="navbar-light" add="navbar-dark" separator=" "/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<!-- Menu options -->
|
||||
<template id="option_hamburger_menu" inherit_id="website.layout" active="False">
|
||||
<xpath expr="//header/nav" position="attributes">
|
||||
<attribute name="class" remove="navbar-expand-md" separator=" "/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<!-- Layout options -->
|
||||
<template id="option_layout_full" inherit_id="website.assets_frontend" active="True">
|
||||
<xpath expr="//link[last()]" position="after"/>
|
||||
</template>
|
||||
<template id="option_layout_boxed" inherit_id="website.assets_frontend" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/layout/option_layout_boxed.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="option_custom_body_image" inherit_id="website.assets_frontend" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<style>
|
||||
<!-- Patched by JS option -->
|
||||
</style>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="option_custom_body_pattern" inherit_id="website.assets_frontend" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/layout/option_custom_body_pattern.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<!-- TODO use scss customization for fonts instead (like for user colors) -->
|
||||
|
||||
<!-- Title font options -->
|
||||
<template id="option_font_title_01_variables" inherit_id="website._assets_primary_variables" active="True">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_title_01_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_font_title_02_variables" inherit_id="website._assets_primary_variables" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_title_02_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_font_title_03_variables" inherit_id="website._assets_primary_variables" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_title_03_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_font_title_04_variables" inherit_id="website._assets_primary_variables" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_title_04_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_font_title_05_variables" inherit_id="website._assets_primary_variables" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_title_05_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_font_title_06_variables" inherit_id="website._assets_primary_variables" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_title_06_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<!-- Body font options -->
|
||||
<template id="option_font_body_01_variables" inherit_id="website._assets_primary_variables" active="True">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_body_01_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_font_body_02_variables" inherit_id="website._assets_primary_variables" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_body_02_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_font_body_03_variables" inherit_id="website._assets_primary_variables" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_body_03_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_font_body_04_variables" inherit_id="website._assets_primary_variables" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_body_04_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_font_body_05_variables" inherit_id="website._assets_primary_variables" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_body_05_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="option_font_body_06_variables" inherit_id="website._assets_primary_variables" active="False">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_body_06_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="kanban">
|
||||
|
||||
@@ -91,8 +91,10 @@ action = {
|
||||
|
||||
<!-- Add link to theme install in default customize modal -->
|
||||
<template id="customize_modal" inherit_id="website.theme_customize" priority="1">
|
||||
<xpath expr="//*[hasclass('modal-header')]" position="inside">
|
||||
<a href="/web#action=website_theme_install.theme_install_kanban_action">See themes here</a>
|
||||
<xpath expr="//div" position="replace">
|
||||
<div>
|
||||
Please <a href="/web#action=website_theme_install.theme_install_kanban_action">install a theme</a> to customize your website.
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
</odoo>
|
||||
|
||||
Reference in New Issue
Block a user