NextERP/documentation
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] odoo_theme: design improvements

Browse Source 
Revamp of the side menu;
Round all borders for consistency with the buttons;
Improve .sig-* and .o_code elements;
Improve sphinx-tabs hover effect;

task-3046383

closes odoo/documentation#4114

X-original-commit: 3056c7b62d
Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
This commit is contained in:
Elisabeth Dickinson 2023-01-03 07:48:29 +00:00 committed by Antoine Vandevenne (anv)
parent 9dc32cdd4e
commit 81d1f2d21b
5 changed files with 111 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
extensions/odoo_theme/static/js/menu.js
View File

@ -59,15 +59,11 @@
deepestActiveTocEntries.push(lastTocEntry);
}
deepestActiveTocEntries.forEach(deepestTocEntry => {
let tocEntryToHighlight;
const childTocEntryList = deepestTocEntry.querySelector('ul');
if (childTocEntryList) { // The TOC entry has an associated TOC entry list.
tocEntryToHighlight = deepestTocEntry;
childTocEntryList.classList.add('show');
} else { // The TOC entry is at the last level of its branch.
tocEntryToHighlight = deepestTocEntry.parentElement.parentElement;
}
tocEntryToHighlight.classList.add('o_deepest_active_toc_entry');
deepestTocEntry.classList.add('o_deepest_active_toc_entry');
});
return deepestActiveTocEntries;
};

9
extensions/odoo_theme/static/scss/_mixins.scss
View File

@ -64,19 +64,10 @@
}
}
@mixin o-content-tab-selected {
font-weight: $font-weight-bolder;
border-bottom: 1px solid $white;
border-left: 1px solid $o-gray-border;
border-right: 1px solid $o-gray-border;
background: $white;
}
@mixin o-code {
display: inline-block;
overflow-wrap: anywhere;
background: $o-literals-bg;
font-size: 0.875rem;
font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
font-weight: inherit;
color: inherit;

2
extensions/odoo_theme/static/scss/_variables.scss
View File

@ -136,7 +136,7 @@ $o-codecol-width: 43%;
// Paddings and margins
$o-padding-xs: .5rem;
$o-padding-s: 1rem;
$o-padding-m: 2rem;
$o-padding-m: 1.5rem;
$o-padding-l: 3rem;
$o-margin-s: $o-padding-s;
$o-margin-m: $o-padding-m;

162
extensions/odoo_theme/static/style.scss
View File

@ -213,14 +213,13 @@ header {
background-color: lighten($secondary, 70%) ;
color: $secondary;
font-weight: $font-weight-normal;
@include font-size($font-size-sm);
@include media-breakpoint-up(lg) {
width: $o-side-nav-width;
height: calc(100vh - #{$o-headers-height});
left: 0;
padding-top: $o-padding-m;
padding-left: $o-padding-m;
padding-left: $o-padding-s;
}
&::-webkit-scrollbar {
@ -248,42 +247,34 @@ header {
}
}
}
.o_main_toc {
ul {
&.current li.o_active_toc_entry {
color: $secondary;
}
}
.toctree-l1 {
padding-bottom: $o-padding-xs;
> .o_toc_entry_wrapper a {
> .o_toc_entry_wrapper {
a, i {
color: $secondary;
font-weight: 600;
font-weight: $o-font-weight-medium;
}
}
.o_main_toc > ul li {
&.o_active_toc_entry {
&:not(.toctree-l1) > .o_toc_entry_wrapper i[class^="i-"]:not(.collapsed), > a , > .o_toc_entry_wrapper a, > .o_toc_entry_wrapper i {
color: $secondary;
}
&[class*="o_menu_"] {
&.o_deepest_active_toc_entry > .o_toc_entry_wrapper i {
color: $white;
}
a {
&.current {
color: $secondary;
> .o_toc_entry_wrapper > i:before {
@include o-inline-icon(0 $o-icon-margin 0 0);
}
}
}
ul {
.o_deepest_active_toc_entry {
margin-left: -3px;
border-left: 3px solid $o-toc-border;
background-color: $o-toc-bg;
}
> .toctree-l1 {
&[class*="o_menu_"] > .o_toc_entry_wrapper > i:before {
content: $i-doc-apps;
@include o-inline-icon(0 5px 0 0);
color: $secondary;
}
&.o_menu_applications > .o_toc_entry_wrapper > i:before {
content:'#{$i-doc-apps}';
@ -304,59 +295,83 @@ header {
&.o_menu_contributing > .o_toc_entry_wrapper > i:before {
content:'#{$i-doc-contribute}';
}
}
}
}
.o_main_toc, .o_page_toc_nav {
a, .o_toc_entry_wrapper {
display: flex;
align-items: baseline;
width: 100%;
border-radius: $border-radius 0 0 $border-radius;
}
a {
padding: .3rem;
text-decoration: none;
color: $o-gray-color;
font-weight: $font-weight-normal;
@include font-size($font-size-sm);
}
ul {
padding-left: $o-padding-s;
list-style: none;
li {
> a.reference {
padding-left: .875rem;
&.o_active_toc_entry {
font-weight: $font-weight-bolder;
&:not(.toctree-l1) > .o_toc_entry_wrapper i[class^="i-"]:not(.collapsed) {
transform: rotate(90deg);
}
a {
display: inline-block;
padding: .4rem 0;
color: $o-gray-color;
font-weight: $font-weight-normal;
> .o_toc_entry_wrapper a, > a {
color: inherit;
font-weight: inherit;
}
&.o_deepest_active_toc_entry {
> a, > .o_toc_entry_wrapper, > .o_toc_entry_wrapper a {
background-color: $secondary;
color: $white;
font-weight: inherit;
}
}
}
&:not(.toctree-l1) .o_toc_entry_wrapper {
&:not(.o_page_toc_title) {
display: flex;
align-items: baseline;
}
> i[class^="i-"] {
display: inline-block;
margin-right: .125rem;
transition: rotate, .3s;
cursor: pointer;
font-size: .75rem;
&[aria-expanded="true"] {
transform: rotate(90deg);
}
}
}
&.o_active_toc_entry {
&:not(.toctree-l1) > .o_toc_entry_wrapper i[class^="i-"]:not(.collapsed) {
transform: rotate(90deg);
&:not(.o_deepest_active_toc_entry) {
> .o_toc_entry_wrapper:hover, > a:hover {
background-color: $o-gray-bg;
}
}
> a , > .o_toc_entry_wrapper a, > .o_toc_entry_wrapper i {
font-weight: $font-weight-bolder;
.o_toc_entry_wrapper > i {
cursor: pointer;
margin-left: $o-icon-margin;
}
> a {
padding-left: 1.25rem;
}
}
}
> ul { //is first ul in toc
> ul {
padding-left: 0;
}
}
@ -367,7 +382,6 @@ header {
aside.o_page_toc {
color: $body-color;
@include font-size($font-size-sm);
&:not(.o_in_nav_toc) {
position: -webkit-sticky;
@ -380,7 +394,7 @@ aside.o_page_toc {
display: block;
grid-area: toc;
top: $o-headers-height;
padding: $o-padding-m $o-padding-s $o-padding-m 0;
padding: $o-padding-m 0;
overflow-y: auto;
}
}
@ -395,17 +409,11 @@ aside.o_page_toc {
h5 {
margin-bottom: $o-padding-xs;
padding-left: $o-padding-xs;
font-weight: $font-weight-bolder;
color: $o-gray-color;
text-transform: uppercase;
}
a {
font-weight: $font-weight-normal;
color: $o-gray-color
}
.o_page_toc_title {
display:none;
@ -740,6 +748,7 @@ div[class^="highlight"] {
overflow-x: auto;
margin: 1px 0 24px 0;
border: 1px solid $o-gray-border;
border-radius: $border-radius;
div[class^="highlight"] {
margin: 0;
@ -788,6 +797,7 @@ ol ol {
.o_code {
padding: 0 .3rem;
border-radius: $border-radius;
//File
&.file {
@ -841,6 +851,7 @@ abbr {
//(ex: https://www.odoo.com/documentation/master/developer/reference/backend/orm.html#fields)
.sig {
font-size: 0.875rem;
.sig-prename {
padding-left: .3rem;
@ -849,6 +860,14 @@ abbr {
}
}
.sig-name:first-of-type {
padding-left: .3rem;
}
.sig-name:last-of-type {
padding-right: .3rem;
}
em.property + .sig-name {
padding-left: .3rem;
}
@ -1118,7 +1137,6 @@ span.viewcode-link {
width: 100%;
overflow-x: auto;
overflow-y: clip;
border-color: $o-gray-border;
}
*:focus-visible {
@ -1137,25 +1155,25 @@ span.viewcode-link {
padding: $o-padding-xs $o-padding-s;
border: 0;
border-top: solid 1px $o-gray-border;
background: $o-gray-bg;
color: $o-gray-color;
background-color: $o-gray-bg;
color: lighten($o-gray-color, 15%);
&:hover {
&:not([aria-selected="true"]) {
cursor: pointer;
border-radius: 0;
background: tint-color($secondary, 80%);
color: $secondary;
transition: color .15s, background .15s;
color: $o-gray-color;
background-color: darken($o-gray-bg, 3%);
transition: color .2s, background .2s;
}
}
&:first-of-type {
border-left: solid 1px $o-gray-border;
border-radius: $border-radius 0 0 0;
}
&:last-of-type {
border-right: solid 1px $o-gray-border;
border-radius: 0 $border-radius 0 0;
}
&:focus {
@ -1163,17 +1181,14 @@ span.viewcode-link {
}
&[aria-selected="true"] {
@include o-content-tab-selected();
margin-top: 0;
margin-bottom: -1px;
font-weight: $font-weight-bolder;
border-left: 1px solid $o-gray-border;
border-right: 1px solid $o-gray-border;
color: $o-gray-color;
background: $white;
&:hover {
cursor: unset;
}
&:first-of-type {
@include o-content-tab-selected();
}
}
}
@ -1182,6 +1197,7 @@ span.viewcode-link {
border: 1px solid $o-gray-border;
background: $white;
color: $o-gray-color;
border-radius: 0 $border-radius $border-radius $border-radius;
&:focus {
outline: none;

3
static/css/showcase_tables.css
View File

@ -4,8 +4,10 @@
}
table.o-showcase-table > tbody > tr.row-odd > td {
display: block;
border: 1px solid #d5d5d5;
padding: 2rem;
border-radius: 3px 3px 0 0;
}
table.o-showcase-table > tbody > tr.row-odd > td .highlight-text {
@ -17,4 +19,5 @@ table.o-showcase-table > tbody > tr.row-even > td {
padding: 1rem;
background: #f8f8f8;
border: 0;
border-radius: 0 0 3px 3px;
}