[16.0][IMP] web_form_view_resizable: proporitonal min/maxWidth, resize with pdfpreview, jumping issue when resizing

web_form_view_resizable/__manifest__.py

@@ -10,7 +10,8 @@
     "depends": ["web"],
     "assets": {
         "web.assets_backend": [
-            "web_form_view_resizable/static/src/js/form_view_resizable.esm.js"
+            "web_form_view_resizable/static/src/js/form_view_resizable.esm.js",
+            "web_form_view_resizable/static/src/scss/form_view_resizable.scss",
         ]
     },
 }

web_form_view_resizable/static/description/index.html

@@ -8,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.
@@ -274,7 +275,7 @@
   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 }
@@ -300,7 +301,7 @@
 span.pre {
   white-space: pre }
 
-span.problematic {
+span.problematic, pre.problematic {
   color: red }
 
 span.section-subtitle {
@@ -418,7 +419,9 @@ <h2><a class="toc-backref" href="#toc-entry-5">Contributors</a></h2>
 <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>

web_form_view_resizable/static/src/js/form_view_resizable.esm.js

@@ -10,8 +10,18 @@ patch(FormRenderer.prototype, "web_form_view_resizable", {
     _mounted() {
         $("div.o_form_view_container").resizable({
             handles: "e",
-            minWidth: 400,
-            maxWidth: 1200,
+            minWidth: window.innerWidth * 0.1,
+            maxWidth: window.innerWidth * 0.9,
+            classes: {
+                "ui-resizable": "remove_flex",
+            },
+            // Allow user to drag over the preview of a pdf
+            start: function () {
+                $("div.o_attachment_preview").addClass("remove_hover_effect");
+            },
+            stop: function () {
+                $("div.o_attachment_preview").removeClass("remove_hover_effect");
+            },
         });
     },
 });

web_form_view_resizable/static/src/scss/form_view_resizable.scss

@@ -0,0 +1,11 @@
+// Unset flex property otherwise, when clicking on handler,
+// the div tries to grow before actually dragging the div
+.remove_flex {
+    flex: unset !important;
+}
+
+// Unset pointer-event while dragging otherwise,
+// when hovering the div while dragging, it will stop the scaling of the div
+.remove_hover_effect {
+    pointer-events: none !important;
+}