Merge branch '12.0-one-doc-edi' of github.com:odoo/documentation-user into 12.0-one-doc-edi

extensions/odoo_theme/layout.html

@@ -28,9 +28,7 @@
         integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
         crossorigin="anonymous"></script>
     {# TODO EDI boostrap beta cdn ??? Isn't there a stable CDN ? It looks like this cdn won't exist forever :D #}
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
-        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
-        crossorigin="anonymous"></script>
     <script type="text/javascript">$.noConflict(true);</script>
 {% endblock %}
 

extensions/odoo_theme/layout_templates/language_switcher.html

@@ -1,6 +1,8 @@
 <div class="o_languages me-2">
-	<div class="languages dropdown">
+	<div class="dropdown">
-        <button class="btn border dropdown-toggle" id="languages">{{ language }}</button>
+        <button class="btn border dropdown-toggle" id="languages" data-bs-toggle="dropdown">
+            {{ language }} {# The current language #}
+        </button>
         <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="languages">
             {% for alternate_language, language_code, url in alternate_languages %}
                 <li><a class="dropdown-item" href="{{ url }}">{{ alternate_language }}</a></li>

extensions/odoo_theme/layout_templates/version_switcher.html

@@ -4,7 +4,9 @@
     </div>
     <div class="col-8">
         <div class="dropdown">
-            <button class="btn border dropdown-toggle" id="versions">{{ version }}</button>
+            <button class="btn border dropdown-toggle" id="versions" data-bs-toggle="dropdown">
+                {{ version }} {# The current version #}
+            </button>
             <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="versions">
                 {% for alternate_version, url in alternate_versions %}
                     <li><a class="dropdown-item" href="{{ url }}">{{ alternate_version }}</a></li>

extensions/odoo_theme/pygments_override.py

@@ -1,121 +1,39 @@
 # -*- coding: utf-8 -*-
 from pygments.style import Style
-from pygments.token import Keyword, Name, Comment, String, Error, Text, \
+from pygments.token import Keyword, Name, Comment, String, Error, \
-    Number, Operator, Generic, Whitespace, Punctuation, Other, Literal
+    Number, Other, Whitespace, Generic
-
-
-BACKGROUND = '#272727'
-CURRENT_LINE = "#41323f"
-SELECTION = "#4f424c"
-FOREGROUND = "#e7e9db"
-COMMENT = "#776e71"
-RED = "#ef6155"
-ORANGE = "#f99b15"
-YELLOW = "#fec418"
-GREEN = "#48b685"
-AQUA = "#5bc4bf"
-BLUE = "#06b6ef"
-PURPLE = "#815ba4"
 
 class OdooStyle(Style):
-    """Modified version of Paraiso Dark style to avoid Pygments version
+    """
-    annoyances.
+    Style inspired by SAS' enhanced program editor. Note This is not
-
+    meant to be a complete style. It's merely meant to mimic SAS'
-    Paraíso (Dark) by Jan T. Sott
+    program editor syntax highlighting.
-
+    :copyright: Copyright 2006-2021 by the Pygments team, see AUTHORS.
-    Pygments template by Jan T. Sott (https://github.com/idleberg)
+    :license: BSD, see LICENSE for details.
-    Created with Base16 Builder by Chris Kempson
-    (https://github.com/chriskempson/base16-builder).
-
-    :copyright: Copyright 2006-2014 by the Pygments team
-    :license: BSD
     """
 
     default_style = ''
 
-    background_color = BACKGROUND
+    background_color = '#F8F8F8'
-    highlight_color = SELECTION
 
     styles = {
-        # No corresponding class for the following:
+        Whitespace: '#bbbbbb',
-        Text:                      FOREGROUND,
+        Comment: 'italic #008800',
-        Whitespace:                "",
+        String: '#800080',
-        Error:                     RED,
+        Number: 'bold #2e8b57',
-        Other:                     "",
+        Other: 'bg:#ffffe0',
-
+        Keyword: '#2c2cff',
-        Comment:                   COMMENT,
+        Keyword.Reserved: 'bold #353580',
-        Comment.Multiline:         "",
+        Keyword.Constant: 'bold',
-        Comment.Preproc:           "",
+        Name.Builtin: '#2c2cff',
-        Comment.Single:            "",
+        Name.Function: 'bold italic',
-        Comment.Special:           "",
+        Name.Variable: 'bold #2c2cff',
-
+        Name.Attribute: '#2c2cff',
-        Keyword:                   '#cb49a8',
+        Name.Tag: "bold #008000",
-        Keyword.Constant:          "",
+        Generic: '#2c2cff',
-        Keyword.Declaration:       "",
+        Generic.Emph: '#008800',
-        Keyword.Namespace:         AQUA,
+        Generic.Error: '#d30202',
-        Keyword.Pseudo:            "",
+        Error: 'bg:#e3d2d2 #a61717'
-        Keyword.Reserved:          "",
-        Keyword.Type:              YELLOW,
-
-        Operator:                  AQUA,
-        Operator.Word:             "",
-
-        Punctuation:               FOREGROUND,
-
-        Name:                      FOREGROUND,
-        Name.Attribute:            BLUE,
-        Name.Builtin:              "",
-        Name.Builtin.Pseudo:       "",
-        Name.Class:                YELLOW,
-        Name.Constant:             RED,
-        Name.Decorator:            AQUA,
-        Name.Entity:               "",
-        Name.Exception:            RED,
-        Name.Function:             BLUE,
-        Name.Property:             "",
-        Name.Label:                "",
-        Name.Namespace:            YELLOW,
-        Name.Other:                BLUE,
-        Name.Tag:                  '#21b799',
-        Name.Variable:             RED,
-        Name.Variable.Class:       "",
-        Name.Variable.Global:      "",
-        Name.Variable.Instance:    "",
-
-        Number:                    ORANGE,
-        Number.Float:              "",
-        Number.Hex:                "",
-        Number.Integer:            "",
-        Number.Integer.Long:       "",
-        Number.Oct:                "",
-
-        Literal:                   ORANGE,
-        Literal.Date:              GREEN,
-
-        String:                    GREEN,
-        String.Backtick:           "",
-        String.Char:               FOREGROUND,
-        String.Doc:                COMMENT,
-        String.Double:             "",
-        String.Escape:             ORANGE,
-        String.Heredoc:            "",
-        String.Interpol:           ORANGE,
-        String.Other:              "",
-        String.Regex:              "",
-        String.Single:             "",
-        String.Symbol:             "",
-
-        Generic:                   "",
-        Generic.Deleted:           RED,
-        Generic.Emph:              "italic",
-        Generic.Error:             "",
-        Generic.Heading:           "bold " + FOREGROUND,
-        Generic.Inserted:          GREEN,
-        Generic.Output:            "",
-        Generic.Prompt:            "bold " + COMMENT,
-        Generic.Strong:            "bold",
-        Generic.Subheading:        "bold " + AQUA,
-        Generic.Traceback:         "",
     }
 
 import types

extensions/odoo_theme/static/scss/_mixins.scss

@@ -132,7 +132,7 @@
 @mixin code-col(){
   content: "";
   background: $doc_code-bg;
-  @include box-shadow(inset 40px 0 40px -18px rgba(22, 24, 29, 0.3));
+  /* @include box-shadow(inset 40px 0 40px -18px rgba(22, 24, 29, 0.3)); */
   @include o-position-absolute($top: 3rem, $right:0);
   width: 43%;
   height: calc(100% - 3rem);

extensions/odoo_theme/static/scss/_sphinx_basic.scss

@@ -325,12 +325,12 @@ blockquote::after {
 
 /* -- tables ---------------------------------------------------------------- */
 
-table.docutils {
+/* table.docutils {
     margin-top: 10px;
     margin-bottom: 10px;
     border: 0;
     border-collapse: collapse;
-}
+} */
 
 table.align-center {
     margin-left: auto;
@@ -349,13 +349,13 @@ table caption span.caption-number {
 table caption span.caption-text {
 }
 
-table.docutils td, table.docutils th {
+/* table.docutils td, table.docutils th {
     padding: 1px 8px 1px 5px;
     border-top: 0;
     border-left: 0;
     border-right: 0;
     border-bottom: 1px solid #aaa;
-}
+} */
 
 table.footnote td, table.footnote th {
     border: 0 !important;

extensions/odoo_theme/static/scss/_variables.scss

@@ -213,13 +213,13 @@ $secondary:                                 $o-violet-dark;
 $brand-primary :                            $o-violet;
 $brand-success :                            #50AF51;
 $brand-info:                                #4B9EB6;
-$brand-warning :                            #F0AD4E;
+$brand-warning :                            #f39c1e;
 $brand-danger  :                            #D9534F;
 
 $doc_paper_dark:                            $gray-lighter;
 $doc_paper:                                 #ffffff;
 $doc_exercise:                              #938E94;
-$doc_code-bg:                               $gray-darker;
+$doc_code-bg:                               #F8F8F8;
 $doc_lime:                                  #CDDC39;
 $doc_orange:                                #FF5722;
 $doc_cyan:                                  $color-alpha;

extensions/odoo_theme/static/style.scss

@@ -155,43 +155,15 @@ header.o_main_header{
 // Main page content
 //------------------------------------------------------------------------------
 
-// TODO EDI this fixes the scroll height issue but surely needs to be re-written
-section {
-  padding-top: $o-header-height;
-  margin-top: -$o-header-height;
-}
-dt {
-  padding-top: $o-header-height;
-  margin-top: -$o-header-height;
-}
-
-// TODO EDI this makes permalinks only visible on hover. Please re-write and sort
-
-a.headerlink {
-    visibility: hidden !important;
-    &:after {
-        @include inline-icomoon($i-link, 0 1rem 0 0);
-        visibility: hidden;
-        color: $gray-light;
-        opacity: 0;
-        transition: .1s
-    }
-}
-
-h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption {
-    &:hover > a.headerlink:after{
-        visibility: visible;
-        opacity: 1;
-    }
-}
-
 #wrap {
     margin-top: $o-header-height;
     display: flex;
     justify-content: space-between;
-    main{
+
+    main {
         position: relative;
         padding-top: 3rem;
+
         @include media-breakpoint-up(lg) {
             left: $o-side-nav-width;
             width: calc(100vw - #{$o-side-nav-width} - #{$o-on-page-width});
@@ -200,17 +172,19 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption {
 
         &.index, &.doc-toc, &.has_code_col {
             @include media-breakpoint-up(lg) {
-                width: calc(100vw - #{$o-side-nav-width});
+                width: calc(100vw - #{$o-side-nav-width} );
             }
         }
 
         // Homepage
 
-        &.index{
+        &.index {
+
             h2[class*="o_title_"] {
                 color: $o-violet-dark;
                 font-weight: $fw_bold;
                 margin-bottom: 1rem;
+
                 &:before {
                     @include inline-icomoon($i-o-services , 0 1rem 0 0);
                     display: block;
@@ -233,6 +207,7 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption {
                     content: '#{$i-advanced}';
                 }
             }
+
             ul {
                 padding: 1rem;
                 > li {
@@ -246,6 +221,7 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption {
                 }
             }
         }
+
         &.doc-toc {
             .toctree-wrapper {
                 > ul {
@@ -275,6 +251,7 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption {
                 margin-bottom: 1rem;
             }
         }
+
         &.has_code_col {
 
             article.doc-body {
@@ -371,25 +348,47 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption {
                 }
             }
 
-            h1 {
+            dt {
+                padding-top: $o-header-height;
+                margin-top: -$o-header-height;
+            }
+
+            section {
+            // This fixes the scroll position
+                padding-top: $o-header-height;
+                margin-top: -$o-header-height;
+
+                > h1 {
                     color: $o-violet-dark;
-                margin-bottom: 2rem;
+                    font-weight: $fw_semibold;
                     max-width: calc(100% - 120px);
                 }
 
-           h2 {
+                > h2 {
                     color: $gray-darker;
                     padding-bottom: .5rem;
                     border-bottom: 1px solid $gray-light;
-                 /* margin-bottom: 2rem;
-                margin-top: 2rem; */
                 }
 
-            /* h3 {
+                a.headerlink {
-                font-size: 20px;
+                    visibility: hidden !important;
-                font-weight: $fw_regular;
+                    &:after {
-                color: $gray-darker;
+                        @include inline-icomoon($i-link, 0 1rem 0 0);
-            } */
+                        visibility: hidden;
+                        font-size: 1rem;
+                        color: $gray-light;
+                        opacity: 0;
+                        transition: .1s
+                    }
+                }
+                // This makes permalinks only visible on hover.
+                h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption {
+                    &:hover > a.headerlink:after{
+                        visibility: visible;
+                        opacity: 1;
+                    }
+                }
+            }
 
             .img-fluid {
                 @include box-shadow(0 3px 6px rgba(0, 0, 0, .16));
@@ -398,6 +397,31 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption {
 
         }
 
+        &:not(.has_code_col) {
+            div[class^="highlight"] {
+                border: 1px solid $gray-light;
+            }
+        }
+
+        div[class^="highlight"] {
+            // This styles the consoles like read-the-doc's consoles
+            overflow-x: auto;
+            margin: 1px 0 24px 0;
+
+            div[class^="highlight"] {
+                padding: 0px;
+                border: none;
+                margin: 0;
+            }
+            pre {
+                white-space: pre;
+                margin: 0;
+                padding: 1rem;
+                display: block;
+                overflow: auto;
+            }
+        }
+
 //------------------------------------------------------------------------------
 // Alerts
 //------------------------------------------------------------------------------
@@ -414,6 +438,10 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption {
             border-radius: 0;
             border-width: 0 0 0 3px;
 
+            > p {
+                margin-bottom: 0;
+            }
+
             > h3, > .alert-title {
                 font-size: 1.642857143em;
                 line-height: 1em;
@@ -486,9 +514,7 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption {
             }
 
             &.alert-warning, &.warning {
-                border-color: lighten($brand-warning, 30%);
+                border-color: $warning;
-                background-color: lighten($brand-warning, 35%);
-                color: darken($brand-warning, 35%);
 
                 > .alert-title, > h3 {
                     color: $brand-warning;
@@ -500,9 +526,7 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption {
             }
 
             &.alert-danger {
-                border-color: lighten($brand-danger, 30%);
+                border-color: $danger;
-                background-color: lighten($brand-danger, 40%);
-                color: darken($brand-danger, 35%);
 
                 > .alert-title, > h3 {
                     color: $brand-danger
@@ -602,33 +626,6 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption {
     }
 }
 
-/* .highlight {
-  background: $doc_code-bg;
-  color: $gray-light;
-  border-radius: $border-radius;
-  padding: 1rem;
-  margin-bottom: ($line-height-base/2)*1rem;
-
-  pre {
-    margin-bottom:  0;
-  }
-} */
-/*
-
-pre {
-    font-size: 0.8em;
-    color: $gray-light;
-    font-family: $font-family-monospace;
-    font-weight:  $fw_semibold;
-    position: relative;
-    border: none;
-    max-width: 100%;
-    overflow: auto;
-    margin: 0;
-    margin-bottom: ($line-height-base / 2)rem;
-}
- */
-
 //------------------------------------------------------------------------------
 // Footer
 //------------------------------------------------------------------------------

extensions/switcher/__init__.py

@@ -26,7 +26,7 @@ class SwitcherDirective(Directive):
     def run(self):
         self.assert_has_content()
 
-        body = nodes.compound('\n'.join(self.content), classes=['tabs'])
+        body = nodes.compound('\n'.join(self.content), classes=['tab-content'])
         self.state.nested_parse(self.content, self.content_offset, body)
 
         titles = []
@@ -39,9 +39,9 @@ class SwitcherDirective(Directive):
                 )
                 titles.append(' '.join(child['names']))
         tabs = nodes.bullet_list('', *[
-            nodes.list_item('', nodes.Text(title))
+            nodes.list_item('', nodes.Text(title), classes=['nav-link'])
             for title in titles
-        ])
+        ], classes=['nav nav-tabs'] )
         node = nodes.compound('', tabs, body, classes=['content-switcher'])
         return [node]
 

extensions/switcher/static/js/switcher.js

@@ -6,8 +6,11 @@
         document.querySelectorAll('.content-switcher').forEach(switcher => {
             const links = switcher.querySelectorAll('ul li');
             const linksArray = Array.from(links);
-            const tabs = switcher.querySelectorAll('.tabs > div');
+            const tabs = switcher.querySelectorAll('.tab-content > div');
 
+            tabs.forEach(tab => {
+                tab.classList.add('tab-pane');
+            })
             function select(index) {
                 links.forEach(link => {
                     link.classList.remove('active');