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.push(lastTocEntry);
} }
deepestActiveTocEntries.forEach(deepestTocEntry => { deepestActiveTocEntries.forEach(deepestTocEntry => {
let tocEntryToHighlight;
const childTocEntryList = deepestTocEntry.querySelector('ul'); const childTocEntryList = deepestTocEntry.querySelector('ul');
if (childTocEntryList) { // The TOC entry has an associated TOC entry list. if (childTocEntryList) { // The TOC entry has an associated TOC entry list.
tocEntryToHighlight = deepestTocEntry;
childTocEntryList.classList.add('show'); 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; 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 { @mixin o-code {
display: inline-block; display: inline-block;
overflow-wrap: anywhere; overflow-wrap: anywhere;
background: $o-literals-bg; background: $o-literals-bg;
font-size: 0.875rem;
font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace; font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
font-weight: inherit; font-weight: inherit;
color: inherit; color: inherit;

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

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

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

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

3
static/css/showcase_tables.css
View File

@ -4,8 +4,10 @@
} }
table.o-showcase-table > tbody > tr.row-odd > td { table.o-showcase-table > tbody > tr.row-odd > td {
display: block;
border: 1px solid #d5d5d5; border: 1px solid #d5d5d5;
padding: 2rem; padding: 2rem;
border-radius: 3px 3px 0 0;
} }
table.o-showcase-table > tbody > tr.row-odd > td .highlight-text { 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; padding: 1rem;
background: #f8f8f8; background: #f8f8f8;
border: 0; border: 0;
border-radius: 0 0 3px 3px;
} }