-
Notifications
You must be signed in to change notification settings - Fork 115
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
262 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
78 changes: 78 additions & 0 deletions
78
addons/html_builder/static/src/sidebar/theme_colors_option.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { Component, useState, onMounted } from "@odoo/owl"; | ||
| import { getCSSVariableValue } from "@html_builder/utils/utils_css"; | ||
| import { defaultBuilderComponents } from "../core/default_builder_components"; | ||
|
|
||
| export class ThemeColorsOption extends Component { | ||
| static template = "html_builder.ThemeColorsOption"; | ||
| static components = { ...defaultBuilderComponents }; | ||
| static props = {}; | ||
| setup() { | ||
| this.presets = useState([]); | ||
| this.palettes = this._getPalettes(); | ||
| const observer = new MutationObserver(this._updatePresets.bind(this)); | ||
| onMounted(() => { | ||
| this.iframeDocument = document.querySelector("iframe").contentWindow.document; | ||
| observer.observe(this.iframeDocument.documentElement, { | ||
| attributes: true, | ||
| childList: true, | ||
| subtree: true, | ||
| attributeFilter: ["style"], | ||
| }); | ||
| this._updatePresets(); | ||
| }); | ||
| } | ||
|
|
||
| _getPalettes() { | ||
| const palettes = []; | ||
| const style = window.getComputedStyle(document.documentElement); | ||
| const allPaletteNames = getCSSVariableValue("palette-names", style) | ||
| .split(", ") | ||
| .map((name) => name.replace(/'/g, "")); | ||
| for (const paletteName of allPaletteNames) { | ||
| const palette = { | ||
| name: paletteName, | ||
| colors: [], | ||
| }; | ||
| [1, 3, 2].forEach((c) => { | ||
| const color = getCSSVariableValue(`o-palette-${paletteName}-o-color-${c}`, style); | ||
| palette.colors.push(color); | ||
| }); | ||
| palettes.push(palette); | ||
| } | ||
| return palettes; | ||
| } | ||
|
|
||
| _updatePresets() { | ||
| this.presets.length = 0; | ||
| for (let i = 1; i <= 5; i++) { | ||
| const preset = { | ||
| id: i, | ||
| background: this._getColor(`o-cc${i}-bg`), | ||
| backgroundGradient: this._getColor(`o-cc${i}-bg-gradient`), | ||
| text: this._getColor(`o-cc${i}-text`), | ||
| headings: this._getColor(`o-cc${i}-headings`), | ||
| primaryBtn: this._getColor(`o-cc${i}-btn-primary`), | ||
| primaryBtnText: this._getColor(`o-cc${i}-btn-primary-text`), | ||
| primaryBtnBorder: this._getColor(`o-cc${i}-btn-primary-border`), | ||
| secondaryBtn: this._getColor(`o-cc${i}-btn-secondary`), | ||
| secondaryBtnText: this._getColor(`o-cc${i}-btn-secondary-text`), | ||
| secondaryBtnBorder: this._getColor(`o-cc${i}-btn-secondary-border`), | ||
| }; | ||
|
|
||
| // TODO: check if this is necessary | ||
| if (preset.backgroundGradient) { | ||
| preset.backgroundGradient += ", url('/web/static/img/transparent.png')"; | ||
| } | ||
| this.presets.push(preset); | ||
| } | ||
| } | ||
|
|
||
| _getColor(color) { | ||
| if (!this.iframeStyle) { | ||
| this.iframeStyle = this.iframeDocument.defaultView.getComputedStyle( | ||
| this.iframeDocument.documentElement | ||
| ); | ||
| } | ||
| return getCSSVariableValue(color, this.iframeStyle); | ||
| } | ||
| } |
154 changes: 154 additions & 0 deletions
154
addons/html_builder/static/src/sidebar/theme_colors_option.xml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,154 @@ | ||
| <?xml version="1.0" encoding="UTF-8"?> | ||
| <templates xml:space="preserve"> | ||
| <t t-name="html_builder.ThemeColorsOption"> | ||
| <BuilderContext preview="false"> | ||
| <!-- TODO | ||
| <we-alert class="o_old_color_system_warning d-none mt-2"> | ||
| It appears your website is still using the old color system of | ||
| Odoo 13.0 in some places. We made sure it is still working but | ||
| we recommend you to try to use the new color system, which is | ||
| still customizable. | ||
| </we-alert>--> | ||
| <BuilderRow> | ||
| <div class="d-flex flex-row gap-3 w-100 justify-content-between" style="height: 50px"> | ||
| <div class="d-flex flex-column h-100 justify-content-between"> | ||
| <span class="font-italic">Main</span> | ||
| <div class="d-flex flex-row"> | ||
| <BuilderColorPicker | ||
| title="Primary" | ||
| action="'customizeWebsiteColor'" | ||
| actionParam="'o-color-1'"/> | ||
| <BuilderColorPicker | ||
| title="Secondary" | ||
| action="'customizeWebsiteColor'" | ||
| actionParam="'o-color-2'"/> | ||
| <BuilderColorPicker | ||
| action="'customizeWebsiteColor'" | ||
| actionParam="'o-color-3'"/> | ||
| </div> | ||
| </div> | ||
| <div class="d-flex flex-column h-100 justify-content-between"> | ||
| <span class="font-italic">Light & Dark</span> | ||
| <div class="d-flex flex-row"> | ||
| <BuilderColorPicker | ||
| action="'customizeWebsiteColor'" | ||
| actionParam="'o-color-4'" /> | ||
| <BuilderColorPicker | ||
| action="'customizeWebsiteColor'" | ||
| actionParam="'o-color-5'" /> | ||
| </div> | ||
| </div> | ||
| <div class="d-flex flex-column h-100"> | ||
| <!-- TODO: use icon for palette selection button --> | ||
| <!-- <button class="btn btn-primary h-100 p-2"> | ||
| <img class="p-2 h-100" src="/website/static/src/img/snippets_options/palette.svg" /> | ||
| </button> --> | ||
| <div class="d-flex flex-column h-100 justify-content-between"> | ||
| <span class="font-italic">Palette</span> | ||
| <BuilderSelect action="'customizeWebsiteVariable'" actionParam="'color-palettes-name'"> | ||
| <t t-foreach="palettes" t-as="palette" t-key="palette.name"> | ||
| <BuilderSelectItem actionValue="palette.name"> | ||
| <div class="d-flex flex-row" style="min-width: 60px"> | ||
| <t t-foreach="palette.colors" t-as="color" t-key="color"> | ||
| <span class="w-100" t-attf-style="background-color: {{color}}; height: 25px"></span> | ||
| </t> | ||
| </div> | ||
| </BuilderSelectItem> | ||
| </t> | ||
| </BuilderSelect> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </BuilderRow> | ||
| <BuilderRow label.translate="Color Presets"> | ||
| <div></div> <!-- This is required, without it the row is not displayed at all --> | ||
| <t t-set-slot="collapse"> | ||
| <t t-foreach="presets" t-as="preset" t-key="preset.id"> | ||
| <BuilderRow> | ||
| <div | ||
| t-attf-class=" | ||
| w-100 p-2 d-flex justify-content-between | ||
| align-items-center" | ||
| t-attf-style=" | ||
| background-color: {{preset.background}}; | ||
| background-image: {{preset.backgroundGradient}}; | ||
| color: {{preset.text}}"> | ||
| <h3 | ||
| class="m-0" | ||
| t-attf-style="color: {{preset.headings}}"> | ||
| Title | ||
| </h3> | ||
| <p class="m-0"> | ||
| Text | ||
| </p> | ||
| <button | ||
| class="btn btn-sm" | ||
| t-attf-style=" | ||
| background-color: {{preset.primaryBtn}}; | ||
| color: {{preset.primaryBtnText}}; | ||
| border: 1px solid {{preset.primaryBtnBorder}}"> | ||
| Button | ||
| </button> | ||
| <button | ||
| class="btn btn-sm" | ||
| t-attf-style=" | ||
| background-color: {{preset.secondaryBtn}}; | ||
| color: {{preset.secondaryBtnText}}; | ||
| border: 1px solid {{preset.secondaryBtnBorder}}"> | ||
| Button | ||
| </button> | ||
| </div> | ||
| <t t-set-slot="collapse"> | ||
| <BuilderRow label.translate="Background"> | ||
| <BuilderColorPicker | ||
| action="'customizeWebsiteColor'" | ||
| actionParam="`o-cc${preset.id}-bg`" /> | ||
| </BuilderRow> | ||
| <BuilderRow label.translate="Text"> | ||
| <BuilderColorPicker | ||
| action="'customizeWebsiteColor'" | ||
| actionParam="`o-cc${preset.id}-text`" /> | ||
| </BuilderRow> | ||
| <BuilderRow label.translate="Headings"> | ||
| <BuilderColorPicker | ||
| action="'customizeWebsiteColor'" | ||
| actionParam="`o-cc${preset.id}-headings`" /> | ||
| <t t-set-slot="collapse"> | ||
| <t t-foreach="[2, 3, 4, 5, 6]" t-as="j" t-key="j"> | ||
| <BuilderRow label="`Headings ${j}`"> | ||
| <BuilderColorPicker | ||
| action="'customizeWebsiteColor'" | ||
| actionParam="`o-cc${preset.id}-h${j}`"/> | ||
| </BuilderRow> | ||
| </t> | ||
| </t> | ||
| </BuilderRow> | ||
| <BuilderRow label.translate="Links"> | ||
| <BuilderColorPicker | ||
| action="'customizeWebsiteColor'" | ||
| actionParam="`o-cc${preset.id}-link`" /> | ||
| </BuilderRow> | ||
| <BuilderRow label.translate="Primary Buttons"> | ||
| <BuilderColorPicker | ||
| action="'customizeWebsiteColor'" | ||
| actionParam="`o-cc${preset.id}-btn-primary`" /> | ||
| <BuilderColorPicker | ||
| action="'customizeWebsiteColor'" | ||
| actionParam="`o-cc${preset.id}-btn-primary-border`" /> | ||
| </BuilderRow> | ||
| <BuilderRow label.translate="Secondary Buttons"> | ||
| <BuilderColorPicker | ||
| action="'customizeWebsiteColor'" | ||
| actionParam="`o-cc${preset.id}-btn-secondary`" /> | ||
| <BuilderColorPicker | ||
| action="'customizeWebsiteColor'" | ||
| actionParam="`o-cc${preset.id}-btn-secondary-border`" /> | ||
| </BuilderRow> | ||
| </t> | ||
| </BuilderRow> | ||
| </t> | ||
| </t> | ||
| </BuilderRow> | ||
| </BuilderContext> | ||
| </t> | ||
| </templates> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters