[FIX] web_editor, website: properly display the redirect old url list

When a user clicks on 'could be used in' in the page properties after
chaing the URL, a list is displayed in a popup. This popup was
not properly rendered:
- the content could not be scrolled through, it was thus truncated
- the popup appeared behind the technical modal that kicks in on small
screens

Now the popup is better positioned, a scrollbar is available to access
its content when it is too long and on small screens it is displayed on
top of the technical modal, making it visible on small screens.

task-2092269

closes odoo/odoo#83693

X-original-commit: e2f1f4967a2dd4d730895e924f0c7ca02e23a17b
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Jitendra Prajapati <jpr@odoo.com>
Co-authored-by: Benoit Socias <bso@odoo.com>

addons/web_editor/static/src/scss/web_editor.common.scss

@@ -545,11 +545,11 @@ a.o_underline {
     // modal select media
     .o_technical_modal.o_web_editor_dialog {
         // see template 'web_editor.FieldTextHtml.fullscreen'
-        z-index: 2001;
+        z-index: $o-we-technical-modal-zindex;
 
         > .o_select_media_dialog {
             max-width: inherit !important;
-            z-index: 2001;
+            z-index: $o-we-technical-modal-zindex;
 
             .modal-dialog, .model-content {
                 height: 100%;

addons/web_editor/static/src/scss/web_editor.variables.scss

@@ -187,6 +187,8 @@ $o-we-sidebar-content-field-toggle-control-height: $o-we-sidebar-content-field-t
 $o-we-sidebar-content-field-toggle-control-bg: $o-we-fg-lighter !default;
 $o-we-sidebar-content-field-toggle-control-shadow: 0 2px 3px 0 $o-we-bg-darkest !default;
 
+$o-we-technical-modal-zindex: 2001;
+
 //------------------------------------------------------------------------------
 // Preview component Mixins
 //------------------------------------------------------------------------------

addons/website/static/src/js/menu/content.js

@@ -132,8 +132,20 @@ var PagePropertiesDialog = weWidgets.Dialog.extend({
             });
             dep_text = dep_text.join(', ');
             self.$('#dependencies_redirect').html(qweb.render('website.show_page_dependencies', { dependencies: dependencies, dep_text: dep_text }));
-            self.$('#dependencies_redirect [data-toggle="popover"]').popover({
-                container: 'body',
+            self.$('a.o_dependencies_redirect_link').on('click', () => {
+                self.$('.o_dependencies_redirect_list_popover').popover({
+                    html: true,
+                    title: _t('Dependencies'),
+                    boundary: 'viewport',
+                    placement: 'right',
+                    trigger: 'focus',
+                    content: () => {
+                        return qweb.render('website.get_tooltip_dependencies', {
+                            dependencies: dependencies,
+                        });
+                    },
+                    template: qweb.render('website.page_dependencies_popover'),
+                }).popover('toggle');
             });
         }));
 

addons/website/static/src/scss/website.ui.scss

@@ -555,3 +555,15 @@ body .modal {
         }
     }
 }
+
+// Page Properties
+.o_redirect_old_url {
+    @include media-breakpoint-down(sm) {
+        // Because o_technical_modal class class has a higher z-index than $zindex-modal.
+        z-index: $o-we-technical-modal-zindex + ($zindex-popover - $zindex-modal);
+    }
+    .popover-body {
+        overflow-y: auto;
+        max-height: 14.2rem;
+    }
+}

addons/website/static/src/xml/website.pageProperties.xml

@@ -33,7 +33,14 @@
     <t t-set="depTooltip">
         <t t-call="website.get_tooltip_dependencies"/>
     </t>
-    (could be used in <a href="#" data-toggle="popover" t-att-data-content="depTooltip" data-html="true" title="Dependencies"><t t-esc="dep_text" /></a>)
+    (could be used in <a href="#" class="o_dependencies_redirect_link"><t t-esc="dep_text" /></a>)
+</t>
+<t t-name="website.page_dependencies_popover">
+    <div class="popover o_redirect_old_url" role="tooltip">
+        <div class="arrow"/>
+        <h3 class="popover-header"/>
+        <div class="popover-body"/>
+    </div>
 </t>
 
 <!-- Page Properties -->
@@ -74,7 +81,7 @@
                             </label>
                         </a>
                     </div>
-                    <div class="col-md-7 mt4">
+                    <div class="col-md-7 mt4 o_dependencies_redirect_list_popover">
                         <span class="text-muted" id="dependencies_redirect"></span>
                     </div>
                 </div>