[MIG]web_widget_image_download: Migration to 16.0

web_widget_image_download/README.rst

@@ -7,7 +7,7 @@ Web Widget - Image Download
    !! This file is generated by oca-gen-addon-readme !!
    !! changes will be overwritten.                   !!
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-   !! source digest: sha256:01e27e70406c021c12f0ccba353c64aea71f52d5f06cd7eee48668ad281a029d
+   !! source digest: sha256:fbbaac2dd53338854af6551564ac3c565458b7a3a430c38d5a5d593e54332607
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 
 .. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png
@@ -17,13 +17,13 @@ Web Widget - Image Download
     :target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html
     :alt: License: LGPL-3
 .. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github
-    :target: https://github.com/OCA/web/tree/15.0/web_widget_image_download
+    :target: https://github.com/OCA/web/tree/16.0/web_widget_image_download
     :alt: OCA/web
 .. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png
-    :target: https://translation.odoo-community.org/projects/web-15-0/web-15-0-web_widget_image_download
+    :target: https://translation.odoo-community.org/projects/web-16-0/web-16-0-web_widget_image_download
     :alt: Translate me on Weblate
 .. |badge5| image:: https://img.shields.io/badge/runboat-Try%20me-875A7B.png
-    :target: https://runboat.odoo-community.org/builds?repo=OCA/web&target_branch=15.0
+    :target: https://runboat.odoo-community.org/builds?repo=OCA/web&target_branch=16.0
     :alt: Try me on Runboat
 
 |badge1| |badge2| |badge3| |badge4| |badge5|
@@ -44,7 +44,7 @@ To use this module, an example path is:
 #. Go to the section `Contacts`.
 #. Click on a contact.
 #. Edit the contact.
-#. Click the `Download` button (between `Edit` and `Clear`).
+#. Click the `Download` button (on the top left corner).
 
 Bug Tracker
 ===========
@@ -52,7 +52,7 @@ Bug Tracker
 Bugs are tracked on `GitHub Issues <https://github.com/OCA/web/issues>`_.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us to smash it by providing a detailed and welcomed
-`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_widget_image_download%0Aversion:%2015.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
+`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_widget_image_download%0Aversion:%2016.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
 
 Do not contact contributors directly about support or help with technical issues.
 
@@ -93,6 +93,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 <https://github.com/OCA/web/tree/15.0/web_widget_image_download>`_ project on GitHub.
+This module is part of the `OCA/web <https://github.com/OCA/web/tree/16.0/web_widget_image_download>`_ project on GitHub.
 
 You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

web_widget_image_download/__manifest__.py

@@ -3,7 +3,7 @@
 {
     "name": "Web Widget - Image Download",
     "summary": "Allows to download any image from its widget",
-    "version": "15.0.1.0.0",
+    "version": "16.0.1.0.0",
     "category": "web",
     "website": "https://github.com/OCA/web",
     "author": "Tecnativa, Odoo Community Association (OCA), Kaushal Prajapati",
@@ -13,11 +13,8 @@
     "depends": ["web"],
     "assets": {
         "web.assets_backend": [
-            "web_widget_image_download/static/src/js/**/*",
+            "web_widget_image_download/static/src/components/*",
-            "web_widget_image_download/static/src/scss/**/*",
+            "web_widget_image_download/static/src/xml/*",
-        ],
-        "web.assets_qweb": [
-            "web_widget_image_download/static/src/xml/**/*",
         ],
     },
 }

web_widget_image_download/i18n/web_widget_image_download.pot

@@ -4,7 +4,7 @@
 #
 msgid ""
 msgstr ""
-"Project-Id-Version: Odoo Server 15.0\n"
+"Project-Id-Version: Odoo Server 16.0\n"
 "Report-Msgid-Bugs-To: \n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -14,7 +14,7 @@ msgstr ""
 "Plural-Forms: \n"
 
 #. module: web_widget_image_download
-#. openerp-web
+#. odoo-javascript
 #: code:addons/web_widget_image_download/static/src/xml/web_widget_image_download.xml:0
 #: code:addons/web_widget_image_download/static/src/xml/web_widget_image_download.xml:0
 #, python-format

web_widget_image_download/readme/USAGE.rst

@@ -3,4 +3,4 @@ To use this module, an example path is:
 #. Go to the section `Contacts`.
 #. Click on a contact.
 #. Edit the contact.
-#. Click the `Download` button (between `Edit` and `Clear`).
+#. Click the `Download` button (on the top left corner).

web_widget_image_download/static/description/index.html

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
@@ -9,10 +8,11 @@
 
 /*
 :Author: David Goodger (goodger@python.org)
-:Id: $Id: html4css1.css 8954 2022-01-20 10:10:25Z milde $
+:Id: $Id: html4css1.css 9511 2024-01-13 09:50:07Z milde $
 :Copyright: This stylesheet has been placed in the public domain.
 
 Default cascading style sheet for the HTML output of Docutils.
+Despite the name, some widely supported CSS2 features are used.
 
 See https://docutils.sourceforge.io/docs/howto/html-stylesheets.html for how to
 customize this style sheet.
@@ -275,7 +275,7 @@ pre.literal-block, pre.doctest-block, pre.math, pre.code {
   margin-left: 2em ;
   margin-right: 2em }
 
-pre.code .ln { color: grey; } /* line numbers */
+pre.code .ln { color: gray; } /* line numbers */
 pre.code, code { background-color: #eeeeee }
 pre.code .comment, code .comment { color: #5C6576 }
 pre.code .keyword, code .keyword { color: #3B0D06; font-weight: bold }
@@ -301,7 +301,7 @@ span.option {
 span.pre {
   white-space: pre }
 
-span.problematic {
+span.problematic, pre.problematic {
   color: red }
 
 span.section-subtitle {
@@ -367,9 +367,9 @@ ul.auto-toc {
 !! This file is generated by oca-gen-addon-readme !!
 !! changes will be overwritten.                   !!
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-!! source digest: sha256:01e27e70406c021c12f0ccba353c64aea71f52d5f06cd7eee48668ad281a029d
+!! source digest: sha256:fbbaac2dd53338854af6551564ac3c565458b7a3a430c38d5a5d593e54332607
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
-<p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external image-reference" href="http://www.gnu.org/licenses/lgpl-3.0-standalone.html"><img alt="License: LGPL-3" src="https://img.shields.io/badge/licence-LGPL--3-blue.png" /></a> <a class="reference external image-reference" href="https://github.com/OCA/web/tree/15.0/web_widget_image_download"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/web-15-0/web-15-0-web_widget_image_download"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/web&amp;target_branch=15.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
+<p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external image-reference" href="http://www.gnu.org/licenses/lgpl-3.0-standalone.html"><img alt="License: LGPL-3" src="https://img.shields.io/badge/licence-LGPL--3-blue.png" /></a> <a class="reference external image-reference" href="https://github.com/OCA/web/tree/16.0/web_widget_image_download"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/web-16-0/web-16-0-web_widget_image_download"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/web&amp;target_branch=16.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
 <p>This module was written to extend the functionality of the image widget and
 allows to download it.</p>
 <p><strong>Table of contents</strong></p>
@@ -392,7 +392,7 @@ allows to download it.</p>
 <li>Go to the section <cite>Contacts</cite>.</li>
 <li>Click on a contact.</li>
 <li>Edit the contact.</li>
-<li>Click the <cite>Download</cite> button (between <cite>Edit</cite> and <cite>Clear</cite>).</li>
+<li>Click the <cite>Download</cite> button (on the top left corner).</li>
 </ol>
 </div>
 <div class="section" id="bug-tracker">
@@ -400,7 +400,7 @@ allows to download it.</p>
 <p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us to smash it by providing a detailed and welcomed
-<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_widget_image_download%0Aversion:%2015.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
+<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_widget_image_download%0Aversion:%2016.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
 <p>Do not contact contributors directly about support or help with technical issues.</p>
 </div>
 <div class="section" id="credits">
@@ -431,11 +431,13 @@ If you spotted it first, help us to smash it by providing a detailed and welcome
 <div class="section" id="maintainers">
 <h2><a class="toc-backref" href="#toc-entry-6">Maintainers</a></h2>
 <p>This module is maintained by the OCA.</p>
-<a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a>
+<a class="reference external image-reference" href="https://odoo-community.org">
+<img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" />
+</a>
 <p>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.</p>
-<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/15.0/web_widget_image_download">OCA/web</a> project on GitHub.</p>
+<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/16.0/web_widget_image_download">OCA/web</a> project on GitHub.</p>
 <p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>
 </div>
 </div>

web_widget_image_download/static/src/components/image_field.esm.js

@@ -0,0 +1,21 @@
+/** @odoo-module **/
+
+/* Copyright 2016 Flavio Corpa <flavio.corpa@tecnativa.com>
+ * Copyright 2016 Jairo Llopis <jairo.llopis@tecnativa.com>
+ * Copyright 2024 Manuel Regidor <manuel.regidor@sygel.es>
+ * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
+
+import {patch} from "@web/core/utils/patch";
+import {ImageField} from "@web/views/fields/image/image_field";
+
+patch(ImageField.prototype, "web_widget_image_download", {
+    download() {
+        const downloadLink = document.createElement("a");
+        downloadLink.setAttribute("href", this.getUrl(this.props.name));
+        downloadLink.setAttribute("download", "");
+        downloadLink.click();
+    },
+    onFileDownload() {
+        this.download();
+    },
+});

web_widget_image_download/static/src/js/web_widget_image_download.js

@@ -1,30 +0,0 @@
-/* Copyright 2016 Flavio Corpa <flavio.corpa@tecnativa.com>
- * Copyright 2016 Jairo Llopis <jairo.llopis@tecnativa.com>
- * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
-odoo.define("web_widget_image_download.widget", function (require) {
-    "use strict";
-
-    var FieldBinaryImage = require("web.basic_fields").FieldBinaryImage;
-
-    FieldBinaryImage.include({
-        _render: function () {
-            this._super();
-            var $widget = this.$el.find(".o_form_binary_file_download");
-            this.imgSrc = this.$el.find('img[name="' + this.name + '"]').attr("src");
-
-            $.ajax({
-                // Avoid downloading full image, just headers
-                type: "HEAD",
-                url: this.imgSrc,
-                complete: function (xhr) {
-                    $widget.attr(
-                        "download",
-                        xhr.getResponseHeader("Content-Type").replace("/", ".")
-                    );
-                },
-            });
-
-            $widget.attr("href", this.imgSrc);
-        },
-    });
-});

web_widget_image_download/static/src/scss/web_widget_image_download.scss

@@ -1,38 +0,0 @@
-.o_field_widget {
-    &.o_field_image {
-        .o_form_image_controls {
-            > .fa,
-            .o_form_binary_file_download {
-                margin: 5px 0;
-                padding: 1px 0;
-                width: 33.333333%;
-            }
-            .o_form_binary_file_download {
-                border: none;
-                background-color: transparent;
-                line-height: 0px;
-
-                > button.fa {
-                    width: 100%;
-                    height: 100%;
-                    margin: 0px;
-                    border: none;
-                    background-color: transparent;
-                    cursor: pointer;
-                }
-            }
-        }
-        @include media-breakpoint-down(xs, $o-extra-grid-breakpoints) {
-            .o_form_image_controls {
-                .o_form_binary_file_download {
-                    display: none;
-                }
-                > .fa {
-                    width: 50%;
-                    padding: 6px;
-                    margin: 0px;
-                }
-            }
-        }
-    }
-}

web_widget_image_download/static/src/xml/web_widget_image_download.xml

@@ -2,17 +2,28 @@
 <!-- Copyright 2016 Flavio Corpa <flavio.corpa@tecnativa.com>
      License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
 <template>
-    <t t-extend="FieldBinaryImage">
+    <t
-        <t t-jquery=".o_select_file_button" t-operation="after">
+        t-name="web_widget_image_download.ImageField"
-            <t t-if="widget.value">
+        t-inherit="web.ImageField"
-                <a
+        t-inherit-mode="extension"
-                    class="o_form_binary_file_download float-left"
+        owl="1"
-                    title="Download"
-                    aria-label="Download"
     >
-                    <button class="fa fa-download fa-lg" />
+        <xpath expr="//FileUploader/../.." position="after">
-                </a>
+            <div
-            </t>
+                t-attf-class="position-absolute top-0 opacity-0 opacity-100-hover {{isMobile ? 'o_mobile_controls' : ''}}"
-        </t>
+                aria-atomic="true"
+                t-att-style="sizeStyle"
+            >
+                <button
+                    t-if="props.value and state.isValid"
+                    class="o_form_binary_file_download btn btn-light border-0 rounded-circle m-1 p-1"
+                    data-tooltip="Download"
+                    aria-label="Download"
+                    t-on-click="onFileDownload"
+                >
+                    <i class="fa fa-download fa-fw" />
+                </button>
+            </div>
+        </xpath>
     </t>
 </template>