From 41cc599d92507f6ec596530fb57be02aebbf9d41 Mon Sep 17 00:00:00 2001 From: Jan Verbeek Date: Tue, 22 Oct 2019 18:02:46 +0200 Subject: [PATCH] [MIG] Migrate web_widget_mermaid to 12.0 --- web_widget_mermaid/README.rst | 12 +- web_widget_mermaid/__init__.py | 2 +- web_widget_mermaid/__manifest__.py | 10 +- .../static/description/index.html | 8 +- .../static/src/js/web_widget_mermaid.js | 25 ++-- .../web_widget_mermaid_default_theme.scss} | 130 +++++++++--------- .../static/src/xml/web_widget_mermaid.xml | 12 -- .../view/web_widget_mermaid_view.xml | 2 +- 8 files changed, 89 insertions(+), 112 deletions(-) rename web_widget_mermaid/static/src/{less/web_widget_mermaid_default_theme.less => scss/web_widget_mermaid_default_theme.scss} (78%) delete mode 100644 web_widget_mermaid/static/src/xml/web_widget_mermaid.xml diff --git a/web_widget_mermaid/README.rst b/web_widget_mermaid/README.rst index f01628626..79d025050 100644 --- a/web_widget_mermaid/README.rst +++ b/web_widget_mermaid/README.rst @@ -14,13 +14,13 @@ Mermaid flowchart widget :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html :alt: License: AGPL-3 .. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github - :target: https://github.com/OCA/web/tree/10.0/web_widget_mermaid + :target: https://github.com/OCA/web/tree/12.0/web_widget_mermaid :alt: OCA/web .. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png - :target: https://translation.odoo-community.org/projects/web-10-0/web-10-0-web_widget_mermaid + :target: https://translation.odoo-community.org/projects/web-12-0/web-12-0-web_widget_mermaid :alt: Translate me on Weblate .. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png - :target: https://runbot.odoo-community.org/runbot/162/10.0 + :target: https://runbot.odoo-community.org/runbot/162/12.0 :alt: Try me on Runbot |badge1| |badge2| |badge3| |badge4| |badge5| @@ -60,7 +60,7 @@ As an example, this text:: Produces this flowchart: -.. image:: https://raw.githubusercontent.com/OCA/web/10.0/web_widget_mermaid/static/description/flowchart_example.png +.. image:: https://raw.githubusercontent.com/OCA/web/12.0/web_widget_mermaid/static/description/flowchart_example.png :alt: Flowchart Demonstration @@ -101,7 +101,7 @@ Bug Tracker Bugs are tracked on `GitHub Issues `_. In case of trouble, please check there if your issue has already been reported. If you spotted it first, help us smashing it by providing a detailed and welcomed -`feedback `_. +`feedback `_. Do not contact contributors directly about support or help with technical issues. @@ -131,6 +131,6 @@ OCA, or the Odoo Community Association, is a nonprofit organization whose mission is to support the collaborative development of Odoo features and promote its widespread use. -This module is part of the `OCA/web `_ project on GitHub. +This module is part of the `OCA/web `_ project on GitHub. You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute. diff --git a/web_widget_mermaid/__init__.py b/web_widget_mermaid/__init__.py index 40a96afc6..e58fedf20 100644 --- a/web_widget_mermaid/__init__.py +++ b/web_widget_mermaid/__init__.py @@ -1 +1 @@ -# -*- coding: utf-8 -*- +# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl.html) diff --git a/web_widget_mermaid/__manifest__.py b/web_widget_mermaid/__manifest__.py index 2cef70e2f..d3bd469b0 100644 --- a/web_widget_mermaid/__manifest__.py +++ b/web_widget_mermaid/__manifest__.py @@ -1,4 +1,3 @@ -# -*- coding: utf-8 -*- # Copyright 2019 Therp BV # License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl.html) @@ -6,7 +5,7 @@ "name": "Mermaid flowchart widget", "category": "Web", "author": "Therp BV,Odoo Community Association (OCA)", - "version": "10.0.8.4.0", + "version": "12.0.8.4.0", "license": "AGPL-3", "summary": "Render mermaid markdown flowcharts", "website": "https://github.com/OCA/web", @@ -14,13 +13,6 @@ "data": [ "view/web_widget_mermaid_view.xml", ], - "js": [ - "static/lib/mermaid/mermaid.js", - "static/src/js/web_widget_mermaid.js", - ], - "qweb": [ - "static/src/xml/web_widget_mermaid.xml", - ], "demo": [ "demo/res_users_flowchart.xml", ], diff --git a/web_widget_mermaid/static/description/index.html b/web_widget_mermaid/static/description/index.html index 96008cea0..cb9f640b4 100644 --- a/web_widget_mermaid/static/description/index.html +++ b/web_widget_mermaid/static/description/index.html @@ -367,7 +367,7 @@ ul.auto-toc { !! This file is generated by oca-gen-addon-readme !! !! changes will be overwritten. !! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --> -

Beta License: AGPL-3 OCA/web Translate me on Weblate Try me on Runbot

+

Beta License: AGPL-3 OCA/web Translate me on Weblate Try me on Runbot

This module adds a basic widget for rendering text fields as flowcharts using mermaid.

Table of contents

@@ -409,7 +409,7 @@ graph LR 12.0 -.-> 13.0

Produces this flowchart:

-Flowchart +Flowchart

Demonstration

@@ -455,7 +455,7 @@ targets: {

Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported. If you spotted it first, help us smashing it by providing a detailed and welcomed -feedback.

+feedback.

Do not contact contributors directly about support or help with technical issues.

@@ -479,7 +479,7 @@ If you spotted it first, help us smashing it by providing a detailed and welcome

OCA, or the Odoo Community Association, is a nonprofit organization whose mission is to support the collaborative development of Odoo features and promote its widespread use.

-

This module is part of the OCA/web project on GitHub.

+

This module is part of the OCA/web project on GitHub.

You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

diff --git a/web_widget_mermaid/static/src/js/web_widget_mermaid.js b/web_widget_mermaid/static/src/js/web_widget_mermaid.js index 5649c41a3..f9b9d20b8 100644 --- a/web_widget_mermaid/static/src/js/web_widget_mermaid.js +++ b/web_widget_mermaid/static/src/js/web_widget_mermaid.js @@ -2,7 +2,8 @@ odoo.define('web.web_widget_mermaid', function(require) { "use strict"; var core = require('web.core'); - var form_widgets = require('web.form_widgets'); + var basic_fields = require('web.basic_fields'); + var field_registry = require('web.field_registry'); // Calling mermaid.initialize() multiple times is ok. // But there's a catch: it will keep the config of previous calls unless @@ -53,35 +54,31 @@ odoo.define('web.web_widget_mermaid', function(require) { fontFamily: '"Lucida Grande", Helvetica, Verdana, Arial, ' + 'sans-serif', // Match Odoo's font choices numberSectionStyles: 4, + // Match configured date format axisFormat: core._t.database.parameters.date_format, } }; - var MermaidField = form_widgets.FieldChar.extend({ + var MermaidField = basic_fields.FieldText.extend({ init: function() { this._super.apply(this, arguments); this.chartId = _.uniqueId('mermaid_chart_'); }, - template: "MermaidField", - widget_class: 'o_form_field_mermaid', - render_value: function() { - if (!this.get('effective_readonly')) { - return this._super(); - } - var value = this.get('value'); - if (!value) { + className: 'o_form_field_mermaid', + _renderReadonly: function() { + if (!this.value) { return; } var config = _.extend( {}, defaultConfig, - this.options + this.attrs.options ); mermaid.mermaidAPI.initialize(config); try { mermaid.mermaidAPI.render( this.chartId, - value, + this.value, this.$el.html.bind(this.$el) ); } catch (e) { @@ -92,9 +89,9 @@ odoo.define('web.web_widget_mermaid', function(require) { // rid of it if it's still around. The id is based on the chartId. $('#d' + this.chartId).remove(); } - }) + }); - core.form_widget_registry.add('mermaid', MermaidField); + field_registry.add('mermaid', MermaidField); return { MermaidField: MermaidField, diff --git a/web_widget_mermaid/static/src/less/web_widget_mermaid_default_theme.less b/web_widget_mermaid/static/src/scss/web_widget_mermaid_default_theme.scss similarity index 78% rename from web_widget_mermaid/static/src/less/web_widget_mermaid_default_theme.less rename to web_widget_mermaid/static/src/scss/web_widget_mermaid_default_theme.scss index 26caf4584..1f9aab945 100644 --- a/web_widget_mermaid/static/src/less/web_widget_mermaid_default_theme.less +++ b/web_widget_mermaid/static/src/scss/web_widget_mermaid_default_theme.scss @@ -8,43 +8,43 @@ .o_form_field_mermaid .node .label { font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; - color: @label-color; } + color: $o-tooltip-color; } .o_form_field_mermaid .cluster .label { font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; - color: @odoo-main-text-color; } + color: $o-main-text-color; } .o_form_field_mermaid .label text { - fill: @odoo-main-text-color; } + fill: $o-main-text-color; } .o_form_field_mermaid .node rect, .o_form_field_mermaid .node circle, .o_form_field_mermaid .node ellipse, .o_form_field_mermaid .node polygon { - fill: @odoo-brand-primary; - stroke: @odoo-brand-optional; + fill: $o-brand-primary; + stroke: $o-brand-primary; stroke-width: 1px; } .o_form_field_mermaid .node.clickable { cursor: pointer; } .o_form_field_mermaid .arrowheadPath { - fill: @odoo-main-text-color; } + fill: $o-main-text-color; } .o_form_field_mermaid .edgePath .path { - stroke: @odoo-main-text-color; + stroke: $o-main-text-color; stroke-width: 1.5px; } .o_form_field_mermaid .edgeLabel { background-color: #e8e8e8; } .o_form_field_mermaid .cluster rect { - fill: @odoo-brand-secondary; - stroke: @odoo-main-color-muted; + fill: $o-brand-secondary; + stroke: $o-main-color-muted; stroke-width: 1px; } .o_form_field_mermaid .cluster text { - fill: @odoo-main-text-color; } + fill: $o-main-text-color; } .o_form_field_mermaid div.mermaidTooltip { position: absolute; @@ -53,15 +53,15 @@ padding: 2px; font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; font-size: 12px; - background: @odoo-brand-secondary; - border: 1px solid @odoo-main-color-muted; + background: $o-brand-secondary; + border: 1px solid $o-main-color-muted; border-radius: 2px; pointer-events: none; z-index: 100; } .o_form_field_mermaid .actor { - stroke: @odoo-brand-optional; - fill: @odoo-brand-primary; } + stroke: $o-brand-primary; + fill: $o-brand-primary; } .o_form_field_mermaid text.actor { fill: white; @@ -73,33 +73,33 @@ .o_form_field_mermaid .messageLine0 { stroke-width: 1.5; stroke-dasharray: '2 2'; - stroke: @odoo-main-text-color; } + stroke: $o-main-text-color; } .o_form_field_mermaid .messageLine1 { stroke-width: 1.5; stroke-dasharray: '2 2'; - stroke: @odoo-main-text-color; } + stroke: $o-main-text-color; } .o_form_field_mermaid #arrowhead { - fill: @odoo-main-text-color; } + fill: $o-main-text-color; } .o_form_field_mermaid .sequenceNumber { fill: white; } .o_form_field_mermaid #sequencenumber { - fill: @odoo-main-text-color; } + fill: $o-main-text-color; } .o_form_field_mermaid #crosshead path { - fill: @odoo-main-text-color !important; - stroke: @odoo-main-text-color !important; } + fill: $o-main-text-color !important; + stroke: $o-main-text-color !important; } .o_form_field_mermaid .messageText { - fill: @odoo-main-text-color; + fill: $o-main-text-color; stroke: none; } .o_form_field_mermaid .labelBox { - stroke: @odoo-brand-optional; - fill: @odoo-brand-primary; } + stroke: $o-brand-primary; + fill: $o-brand-primary; } .o_form_field_mermaid .labelText { fill: white; @@ -112,10 +112,10 @@ .o_form_field_mermaid .loopLine { stroke-width: 2; stroke-dasharray: '2 2'; - stroke: @odoo-brand-optional; } + stroke: $o-brand-primary; } .o_form_field_mermaid .note { - stroke: @odoo-main-color-muted; + stroke: $o-main-color-muted; fill: #fff5ad; } .o_form_field_mermaid .noteText { @@ -153,16 +153,16 @@ opacity: 0.2; } .o_form_field_mermaid .sectionTitle0 { - fill: @odoo-main-text-color; } + fill: $o-main-text-color; } .o_form_field_mermaid .sectionTitle1 { - fill: @odoo-main-text-color; } + fill: $o-main-text-color; } .o_form_field_mermaid .sectionTitle2 { - fill: @odoo-main-text-color; } + fill: $o-main-text-color; } .o_form_field_mermaid .sectionTitle3 { - fill: @odoo-main-text-color; } + fill: $o-main-text-color; } .o_form_field_mermaid .sectionTitle { text-anchor: start; @@ -194,12 +194,12 @@ font-size: 11px; } .o_form_field_mermaid .taskTextOutsideRight { - fill: @odoo-main-text-color; + fill: $o-main-text-color; text-anchor: start; font-size: 11px; } .o_form_field_mermaid .taskTextOutsideLeft { - fill: @odoo-main-text-color; + fill: $o-main-text-color; text-anchor: end; font-size: 11px; } @@ -233,16 +233,16 @@ .o_form_field_mermaid .task1, .o_form_field_mermaid .task2, .o_form_field_mermaid .task3 { - fill: @odoo-brand-primary; - stroke: @odoo-brand-primary; } + fill: $o-brand-primary; + stroke: $o-brand-primary; } .o_form_field_mermaid .taskTextOutside0, .o_form_field_mermaid .taskTextOutside2 { - fill: @odoo-main-text-color; } + fill: $o-main-text-color; } .o_form_field_mermaid .taskTextOutside1, .o_form_field_mermaid .taskTextOutside3 { - fill: @odoo-main-text-color; } + fill: $o-main-text-color; } /* Active task */ .o_form_field_mermaid .active0, @@ -250,13 +250,13 @@ .o_form_field_mermaid .active2, .o_form_field_mermaid .active3 { fill: #bfc7ff; - stroke: @odoo-brand-primary; } + stroke: $o-brand-primary; } .o_form_field_mermaid .activeText0, .o_form_field_mermaid .activeText1, .o_form_field_mermaid .activeText2, .o_form_field_mermaid .activeText3 { - fill: @odoo-main-text-color !important; } + fill: $o-main-text-color !important; } /* Completed task */ .o_form_field_mermaid .done0, @@ -271,7 +271,7 @@ .o_form_field_mermaid .doneText1, .o_form_field_mermaid .doneText2, .o_form_field_mermaid .doneText3 { - fill: @odoo-main-text-color !important; } + fill: $o-main-text-color !important; } /* Tasks on the critical line */ .o_form_field_mermaid .crit0, @@ -310,18 +310,18 @@ .o_form_field_mermaid .doneCritText1, .o_form_field_mermaid .doneCritText2, .o_form_field_mermaid .doneCritText3 { - fill: @odoo-main-text-color !important; } + fill: $o-main-text-color !important; } .o_form_field_mermaid .activeCritText0, .o_form_field_mermaid .activeCritText1, .o_form_field_mermaid .activeCritText2, .o_form_field_mermaid .activeCritText3 { - fill: @odoo-main-text-color !important; } + fill: $o-main-text-color !important; } .o_form_field_mermaid .titleText { text-anchor: middle; font-size: 18px; - fill: @odoo-main-text-color; } + fill: $o-main-text-color; } .o_form_field_mermaid g.classGroup text { fill: white; @@ -330,74 +330,74 @@ font-size: 10px; } .o_form_field_mermaid g.classGroup rect { - fill: @odoo-brand-primary; - stroke: @odoo-main-text-color; } + fill: $o-brand-primary; + stroke: $o-main-text-color; } .o_form_field_mermaid g.classGroup line { - stroke: @odoo-main-text-color; + stroke: $o-main-text-color; stroke-width: 1; } .o_form_field_mermaid .classLabel .box { stroke: none; stroke-width: 0; - fill: @odoo-brand-primary; + fill: $o-brand-primary; opacity: 0.5; } .o_form_field_mermaid .classLabel .label { - fill: @odoo-main-text-color; + fill: $o-main-text-color; font-size: 10px; font-weight: normal; } .o_form_field_mermaid .relation { - stroke: @odoo-main-text-color; + stroke: $o-main-text-color; stroke-width: 1; fill: none; } .o_form_field_mermaid #compositionStart { - fill: @odoo-main-text-color; - stroke: @odoo-main-text-color; + fill: $o-main-text-color; + stroke: $o-main-text-color; stroke-width: 1; } .o_form_field_mermaid #compositionEnd { - fill: @odoo-main-text-color; - stroke: @odoo-main-text-color; + fill: $o-main-text-color; + stroke: $o-main-text-color; stroke-width: 1; } .o_form_field_mermaid #aggregationStart { - fill: @odoo-brand-primary; - stroke: @odoo-main-text-color; + fill: $o-brand-primary; + stroke: $o-main-text-color; stroke-width: 1; } .o_form_field_mermaid #aggregationEnd { - fill: @odoo-brand-primary; - stroke: @odoo-main-text-color; + fill: $o-brand-primary; + stroke: $o-main-text-color; stroke-width: 1; } .o_form_field_mermaid #dependencyStart { - fill: @odoo-main-text-color; - stroke: @odoo-main-text-color; + fill: $o-main-text-color; + stroke: $o-main-text-color; stroke-width: 1; } .o_form_field_mermaid #dependencyEnd { - fill: @odoo-main-text-color; - stroke: @odoo-main-text-color; + fill: $o-main-text-color; + stroke: $o-main-text-color; stroke-width: 1; } .o_form_field_mermaid #extensionStart { - fill: @odoo-main-text-color; - stroke: @odoo-main-text-color; + fill: $o-main-text-color; + stroke: $o-main-text-color; stroke-width: 1; } .o_form_field_mermaid #extensionEnd { - fill: @odoo-main-text-color; - stroke: @odoo-main-text-color; + fill: $o-main-text-color; + stroke: $o-main-text-color; stroke-width: 1; } .o_form_field_mermaid .commit-id, .o_form_field_mermaid .commit-msg, .o_form_field_mermaid .branch-label { fill: lightgrey; - color: @odoo-main-text-color; } + color: $o-main-text-color; } .o_form_field_mermaid .node-label p { margin-top: 9px; } @@ -405,4 +405,4 @@ .o_form_field_mermaid .pieTitleText { text-anchor: middle; font-size: 25px; - fill: @odoo-main-text-color; } + fill: $o-main-text-color; } diff --git a/web_widget_mermaid/static/src/xml/web_widget_mermaid.xml b/web_widget_mermaid/static/src/xml/web_widget_mermaid.xml deleted file mode 100644 index b114b192c..000000000 --- a/web_widget_mermaid/static/src/xml/web_widget_mermaid.xml +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/web_widget_mermaid/view/web_widget_mermaid_view.xml b/web_widget_mermaid/view/web_widget_mermaid_view.xml index 3bb52241f..0f2a67293 100644 --- a/web_widget_mermaid/view/web_widget_mermaid_view.xml +++ b/web_widget_mermaid/view/web_widget_mermaid_view.xml @@ -4,7 +4,7 @@ - +