[IMP] base: Document layout preview improvements

The document layout preview is a complete defferent simplified template
with its own css that replicates at best the different styles.
It does not have the external layout features and lack of fidelity.

The new preview actually use the real documents templates and put the
result in an iframe. It now has a high fidelity, though not perfect.

The goal is for a better onboarding, where clients see easely how
documents will look if they had an app to generate them. Of course, the
data on the document is a false invoice.

Refactor all this from base to web.

Task ID 2304177

closes odoo/odoo#56415

Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>

2 files changed, 56 insertions, 108 deletions

diff --git a/addons/web/static/src/scss/base_document_layout.scss b/addons/web/static/src/scss/base_document_layout.scss
index bf75cb71158..4203fe2bb73 100644
--- a/addons/web/static/src/scss/base_document_layout.scss
+++ b/addons/web/static/src/scss/base_document_layout.scss
@@ -9,6 +9,7 @@
             max-height: 100px;
         }
         .o_document_layout_colors {
+            margin-bottom: 32px;
             vertical-align: middle;
             display: flex;
             flex-direction: row;
@@ -33,114 +34,6 @@
         }
 
     }
-    .o_document_layout_preview {
-        flex: 4;
-        border: 1px solid;
-        border-color: gray;
-        margin-right: 12px;
-        padding: 12px;
-        display: flex;
-        min-height: 420px;
-        flex-direction: column;
-    }
-}
-
-.o_document_layout_preview_logo img {
-    padding-left: 5px;
-    max-height: 45px;
-}
-
-.o_document_layout_preview_html {
-    flex: 1;
-    .o_readonly {
-        height: 100%;
-    }
-    .o_preview_layout {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-    }
-    .header {
-        padding: 0 10px;
-        border-top: 1px solid;
-        h2 {
-            margin: 40px 0;
-        }
-        .o_layout_information {
-            margin-bottom: 20px;
-        }
-    }
-    .article {
-        flex: 1;
-        padding: 0 10px;
-        table th, table td {
-            text-align: right;
-            &:first-child {
-                text-align: left;
-            }
-        }
-    }
-    .footer {
-        border-top: 1px solid;
-    }
-    .o_preview_background_layout {
-        background-image: url(/base/static/img/bg_background_template.jpg);
-        background-size: cover;
-        background-position: bottom center;
-        background-repeat: no-repeat;
-        .table tbody tr:nth-child(odd) {
-            background-color: rgba(220, 205, 216, 0.2);
-        }
-        .row table tbody tr:nth-child(odd) {
-            background-color: transparent !important;
-        }
-        .footer {
-            border-bottom: 1px solid;
-        }
-    }
-    .o_preview_clean_layout {
-        .header {
-            border: none;
-        }
-        .article table {
-            border-bottom: 1px solid;
-            border-top: 1px solid;
-            margin: 0;
-        }
-        thead th {
-            border-top: 1px solid;
-            text-transform: uppercase;
-        }
-    }
-    .o_preview_standard_layout {
-        .o_subtotal, .o_total {
-            td {
-                border-top: 1px solid;
-            }
-        }
-    }
-    .o_preview_boxed_layout {
-        table {
-            border: 1px solid gray('700');
-            thead th {
-                border: 1px solid gray('700');
-                text-transform: uppercase;
-            }
-            tbody tr td {
-                border-top: none;
-                border-right: 1px solid gray('700');
-            }
-        }
-        .o_subtotal td, .o_total td {
-            border-right: none;
-            border-top: 1px solid gray('700');
-        }
-        .o_total td {
-            strong, span {
-                color: white;
-            }
-        }
-    }
 }
 
 @media (max-width: 620px) {
diff --git a/addons/web/static/src/scss/special_fields.scss b/addons/web/static/src/scss/special_fields.scss
new file mode 100644
index 00000000000..cabdf919c09
--- /dev/null
+++ b/addons/web/static/src/scss/special_fields.scss
@@ -0,0 +1,55 @@
+/*
+ IFRAME WRAPPER SCSS
+ */
+
+$preview_height: 1123 + 32;
+$preview_width: 794;
+$preview_scale: 0.50;
+
+@mixin o_preview_iframe_styling($scale) {
+
+  .o_preview_iframe_wrapper {
+    padding: 0;
+    overflow: hidden;
+    width: ($preview_width * $scale) + 0px;
+    height: ($preview_height * $scale) + 0px;
+    position: relative;
+  }
+
+  .o_preview_iframe {
+    width: $preview_width + 0px;
+    height: $preview_height + 0px;
+    border: 2px solid lightgrey;
+    overflow: hidden;
+
+    padding-top: 16px;
+    padding-bottom: 16px;
+
+    -ms-zoom: 0.5;
+    -moz-transform: scale($scale);
+    -moz-transform-origin: 0 0;
+    -o-transform: scale($scale);
+    -o-transform-origin: 0 0;
+    -webkit-transform: scale($scale);
+    -webkit-transform-origin: 0 0;
+  }
+
+  .o_iframe_wrapper_spinner {
+    position: absolute;
+    left: (($preview_width * $scale) / 2) - 40 + 0px;
+    top: (($preview_height * $scale) / 2) - 40 + 0px;
+    // -40 for width/2 and height/2 of the spinner
+  }
+
+}
+
+
+@include o_preview_iframe_styling($preview_scale)
+
+@media (max-width: 1488px) {
+  @include o_preview_iframe_styling($preview_scale * 0.80)
+}
+
+@media (max-width: 600px) {
+  @include o_preview_iframe_styling($preview_scale * 0.60)
+}