From 6e77e9c5a1165fa68c2cf1c97d0ccbeca4c4516a Mon Sep 17 00:00:00 2001 From: "stefanorigano (SRI)" Date: Fri, 4 Feb 2022 20:42:59 +0000 Subject: [PATCH] [REF] base: onboarding-panel, review/simplify scss Part of the overall v16 SCSS optimization/restyle (task-2704984). task-2753905 closes odoo/odoo#84058 Related: odoo/upgrade#3228 Signed-off-by: Pierre Paridans (app) --- .../base/static/img/onboarding_confetti.svg | 1 + .../base/static/src/scss/onboarding.scss | 502 +++++------------- odoo/addons/base/views/onboarding_views.xml | 126 ++--- 3 files changed, 171 insertions(+), 458 deletions(-) create mode 100644 odoo/addons/base/static/img/onboarding_confetti.svg diff --git a/odoo/addons/base/static/img/onboarding_confetti.svg b/odoo/addons/base/static/img/onboarding_confetti.svg new file mode 100644 index 00000000000..92b984c300a --- /dev/null +++ b/odoo/addons/base/static/img/onboarding_confetti.svg @@ -0,0 +1 @@ + diff --git a/odoo/addons/base/static/src/scss/onboarding.scss b/odoo/addons/base/static/src/scss/onboarding.scss index 2fb27a7c55c..13c63cace09 100644 --- a/odoo/addons/base/static/src/scss/onboarding.scss +++ b/odoo/addons/base/static/src/scss/onboarding.scss @@ -1,409 +1,165 @@ -$o-onboarding-dot-size: 20px; -$o-onboarding-dot-timing: 0.5s; +// = Onboarding Panel +// ============================================================================ +.o_onboarding_main { + $o-onboarding-base-time: 0.5s; + $o-onboarding-dot-size: 20px; + $o-onboarding-progress-size: 2px; + $o-onboarding-step-width: map-get($container-max-widths, 'lg') / 4; -$o-onboarding-blue-bg-1: #60ABC3; -$o-onboarding-blue-bg-2: #4187AE; -$o-onboarding-blue-ui-1: #F39D9B; -$o-onboarding-blue-ui-2: #FBEEC8; + $o-onboarding-colors: ( + 'blue': ( + 'bg': (#60ABC3, #4187AE), + 'ui': (#fcb157, #FBEEC8), + ), + 'orange': ( + 'bg': (#DA9D77, #B9684F), + 'ui': (#0774f4, #68B3C9), + ), + 'violet': ( + 'bg': (#6070C3, #475DA4), + 'ui': (#F39D9B, #FBEEC8), + ), + ); -$o-onboarding-orange-bg-1: #DA9D77; -$o-onboarding-orange-bg-2: #B9684F; -$o-onboarding-orange-ui-1: #599FF1; -$o-onboarding-orange-ui-2: #68B3C9; - -$o-onboarding-violet-bg-1: #6070C3; -$o-onboarding-violet-bg-2: #475DA4; -$o-onboarding-violet-ui-1: #F39D9B; -$o-onboarding-violet-ui-2: #FBEEC8; - -@mixin o-onboarding-vertical-gradient($startColor: #555, $endColor: #333) { - background-color: mix($startColor, $endColor); - background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor)); - background-image: -webkit-linear-gradient(top, $startColor, $endColor); - background-image: -moz-linear-gradient(top, $startColor, $endColor); - background-image: -ms-linear-gradient(top, $startColor, $endColor); - background-image: -o-linear-gradient(top, $startColor, $endColor); - background-image: linear-gradient(to bottom, $startColor, $endColor); -} - -.o_onboarding { - position: relative; - overflow: hidden; background: white center top; background-size: cover; - border-bottom: 1px solid gray('300'); + + // = Color Variations + // ------------------------------------------------------------------------ + @each $key, $values in $o-onboarding-colors { + &.o_onboarding_#{$key} { + $-bg: map-get($values, 'bg'); + $-ui: map-get($values, 'ui'); + + @include print-variable('o-onboarding-done-color', nth($-ui, 1)); + @include print-variable('o-onboarding-todo-color', nth($-ui, 2)); + @include print-variable('o-onboarding-bg_1-color', fade-out(nth($-bg, 1), 0.5)); + @include print-variable('o-onboarding-bg_2-color', nth($-bg, 2)); + } + } .o_onboarding_wrap { - padding: $o-horizontal-padding*2 $o-horizontal-padding; - - @include media-breakpoint-down(sm) { - overflow-x: auto; - } - } - .o_onboarding_step_title, a.o_onboarding_all_done { - cursor: pointer; + overflow-x: auto; + background-color: var(--o-onboarding-bg_1-color); + background-image: linear-gradient(to bottom, var(--o-onboarding-bg_1-color), var(--o-onboarding-bg_2-color)); } - .o_onboarding_btn_close { - @include o-position-absolute(auto, 0, 0); - padding: 6px 12px; - cursor: pointer; - } - - .o_onboarding_btn_close { - top: 0; - bottom: auto; - } .o_onboarding_completed_message { - @include o-position-absolute(auto, 0,0,0); - //transform: translateY(115%); - //transition: transform $o-onboarding-dot-timing; - box-shadow: 0 2px 10px gray(600); - padding: $o-horizontal-padding; - background-color: white; - color: $o-main-text-color; - opacity: 0; - z-index: -1; - &.o_onboarding_steps_just_done { - animation: o_onb_fadeIn ($o-onboarding-dot-timing*3); - } - &.o_onboarding_steps_done { - opacity: 1; - z-index: auto; - } - } - - .o_onboarding_steps, .o_onboarding_step { - display: flex; - } - - .o_onboarding_steps { - flex-flow: row nowrap; - justify-content: initial; + box-shadow: 0 -7px 20px -5px rgba(#000, 0.3); + animation: o_onboarding_slideInUp $o-onboarding-base-time ease-out; } + // = Step Design + // ------------------------------------------------------------------------ .o_onboarding_step { - flex-flow: column nowrap; - flex: 1 1 auto; - align-items: center; - text-align: center; - position: relative; - opacity: 0.6; + flex: 1 1 0; - @include media-breakpoint-down(sm) { - flex: 1 0 auto; - margin-bottom: 16px; - align-items: baseline; - - .o_onboarding_step_content { - max-width: none; - } - } - - &:first-of-type { - .o_onboarding_progress { - display: none !important; - } - - .o_onboarding_dot { - transition-delay: 0s; + @for $i from 1 through 5 { + &.o_onboarding_step__todo:nth-child(#{$i}) { + @include print-variable('o-onboarding-animation-delay', $i * .15s); } } .o_onboarding_step_content { - @include media-breakpoint-up(lg) { - min-width: 230px; - } - /* Progressbar should not break in mobile view */ - @include media-breakpoint-down(sm) { - min-width: 230px; - } - max-width: 230px; - padding: 0 10px; - - .o_onboarding_step_action { - border: 1px solid gray('200'); - display: none; - } - - p { - opacity: 0.8; - } - } - - .o_onboarding_progress { - @include o-position-absolute($o-onboarding-dot-size*0.5 - 2px, calc(50% + 10px)); - width: calc(100% - 20px); - height: 4px; - background-color: gray('200'); - - .progress-bar { - background-image: linear-gradient(90deg, $o-brand-primary, $o-brand-odoo); - transition: opacity $o-onboarding-dot-timing; - } - } - - .o_onboarding_dot { - @include media-breakpoint-down(sm) { - margin-left: auto; - margin-right: auto; - } - width: $o-onboarding-dot-size; - height: $o-onboarding-dot-size; - color: transparent; - padding-top: 5px; - font-size: 11px; - display: inline-block; - border-radius: 100%; - background-color: gray('200'); - position: relative; - transition: background $o-onboarding-dot-timing ease $o-onboarding-dot-timing; - } - - .o_onboarding_all_done { - display: none; - } - - // Steps' Status - &.o_onboarding_current, &.o_onboarding_done { - opacity: 1; - - .o_onboarding_progress .progress-bar { - width: 100%; - box-shadow: none; - transition: width $o-onboarding-dot-timing; - } - } - - &.o_onboarding_current { - .o_onboarding_step_action, .o_onboarding_dot { - animation: bounceIn ($o-onboarding-dot-timing*2); - } - - .o_onboarding_step_action { - display: inline-block; - } - - .o_onboarding_dot { - background: $o-brand-odoo; - } - } - - &.o_onboarding_done { - .o_onboarding_dot { - background: $o-brand-primary; - color: white; - } - - .o_onboarding_all_done { - display: block; - } - - + .o_onboarding_done { - .o_onboarding_dot { - transition-delay: 0s; - } - - .o_onboarding_progress { - background: $o-brand-primary; - } - - .progress-bar { - opacity: 0; - } - } - } - - &.o_onboarding_just_done { - - .o_onboarding_all_done { - animation: bounceIn ($o-onboarding-dot-timing*2); - display: block; - } - .o_onboarding_step_content_info { - animation: o_onb_fadeIn ($o-onboarding-dot-timing*3); - } - } - - } - - @keyframes o_onb_fadeIn { - 0% {opacity: 0} - 33% {opacity: 0} - 100% {opacity: 1} - } - - // ========= Color Variations ========= - // ====================================== - - // ========= Variation Mixin ========== - @mixin o-onboarding-variation($bg1, $bg2, $ui1, $ui2) { - &, .o_onboarding_step_title, .o_onboarding_step_action, a.o_onboarding_all_done, .o_onboarding_all_done > .fa, .o_onboarding_btn_close { - color: white !important; - } - - .o_onboarding_wrap { - @include o-onboarding-vertical-gradient(fade-out($bg1, 0.5), $bg2); - box-shadow: inset 0 -7px 20px -5px fade-out(black, 0.7); - } - - .o_onboarding_dot, .o_onboarding_progress { - background-color: fade-out(white, 0.5); + width: $o-onboarding-step-width; } .o_onboarding_step_action { - border-color: fade-out(white, 0.5); + min-width: $o-onboarding-step-width * .5; } - .progress-bar { - background-image: linear-gradient(90deg, $ui1, $ui2); + .o_onboarding_progress { + height: $o-onboarding-progress-size; + width: calc(100% - #{$o-onboarding-dot-size}); + background: var(--o-onboarding-todo-color, #{$o-brand-odoo}); + transform: + translateX(-100%) + translateY($o-onboarding-dot-size * .5 - $o-onboarding-progress-size * .5); } - .o_onboarding_step { - &.o_onboarding_done, .o_onboarding_done + .o_onboarding_done { - .o_onboarding_dot, .o_onboarding_progress { - background: $ui1; - } + .o_onboarding_dot { + width: $o-onboarding-dot-size; + height: $o-onboarding-dot-size; + padding-top: .5em; + background-color: var(--o-onboarding-todo-color, $o-brand-odoo); + color: transparent; + transition: all $o-onboarding-base-time ease; + transform: scale3d(.5, .5, .5); + } + + &:first-of-type .o_onboarding_progress { + display: none; + } + + // = "To do" Step Design + // -------------------------------------------------------------------- + &[data-step-state="not_done"] { + .o_onboarding_step_content_info { + animation: o_onboarding_zoomIn ($o-onboarding-base-time * 1.5) both; + animation-delay: var(--o-onboarding-animation-delay, 0); } - &.o_onboarding_current .o_onboarding_dot { - background: $ui2; + .o_onboarding_step_action { + animation: o_onboarding_slideInUp ($o-onboarding-base-time * 2) both; + animation-delay: var(--o-onboarding-animation-delay, 0); + } + } + + // = "Done" Step Design + // -------------------------------------------------------------------- + &:not([data-step-state="not_done"]) { + .o_onboarding_dot, + .o_onboarding_step:not([data-step-state="not_done"]) .o_onboarding_progress { + background: var(--o-onboarding-done-color, #{$o-brand-primary}); + } + + .o_onboarding_dot { + transform: scale3d(1, 1, 1); + } + } + + // = "Just Done" Step Design + // -------------------------------------------------------------------- + &[data-step-state="just_done"] { + .o_onboarding_step_content_info { + animation: o_onboarding_fadeIn ($o-onboarding-base-time * 3); + } + + .o_onboarding_step_action__done { + animation: bounceIn ($o-onboarding-base-time * 2); + } + + .o_onboarding_confetti { + animation: o_onboarding_fadeInOut ($o-onboarding-base-time * 3) ease 0s 1 forwards; } } } - // ========= Variation Templates ========== - &.o_onboarding_blue { - @include o-onboarding-variation($o-onboarding-blue-bg-1, $o-onboarding-blue-bg-2, $o-onboarding-blue-ui-1, $o-onboarding-blue-ui-2); - } - - &.o_onboarding_orange { - @include o-onboarding-variation($o-onboarding-orange-bg-1, $o-onboarding-orange-bg-2, $o-onboarding-orange-ui-1, $o-onboarding-orange-ui-2); - } - - &.o_onboarding_violet { - @include o-onboarding-variation($o-onboarding-violet-bg-1, $o-onboarding-violet-bg-2, $o-onboarding-violet-ui-1, $o-onboarding-violet-ui-2); - } - - // ========= "Cannon Confetti" animation ========== - .o_onboarding_confetti { - animation: cannon-explosion ($o-onboarding-dot-timing*3) ease-out 0s 1 normal both; - @include o-position-absolute(0, 50%, 30px); - transform-origin: 50% 100%; - display: none; - width: 1px; - - @keyframes cannon-explosion { - 0% { - transform: scale(0); - } - 70% { - opacity: 1; - } - 100% { - opacity: 0; - } - } - - > div { - @include o-position-absolute(auto, 0, 5px,0); - transform-origin: 50% 100%; - display: flex; - flex-flow: column nowrap; - justify-content: space-around; - align-content: center; - padding-bottom: 30%; - - &:nth-child(1), &:nth-child(5) { - height: 90%; - transform: rotate(-20deg); - } - &:nth-child(2), &:nth-child(4) { - height: 95%; - transform: rotate(-10deg); - } - &:nth-child(3) { - height: 100%; - } - &:nth-child(4) { - transform: rotate(10deg); - } - &:nth-child(5) { - transform: rotate(20deg); - } - - > div { - flex: 0 1 auto; - animation: confetti-rotate-l ($o-onboarding-dot-timing*3) ease-out 0s 1 normal both; - - &:nth-child(odd) { - animation: confetti-rotate-r ($o-onboarding-dot-timing*3) ease-out 0s 1 normal both; - } - - @keyframes confetti-rotate-l { - 0% { - transform: rotate(0) scaleY(1); - } - 50% { - transform: rotate(2turn) scaleY(1.5); - opacity: 1; - } - 100% { - transform: rotate(2.05turn) scaleY(1); - opacity: 0; - } - } - - @keyframes confetti-rotate-r { - 0% { - transform: rotate(0) scaleY(1); - } - 50% { - transform: rotate(-2turn) scaleY(1.5); - opacity: 1; - } - 100% { - transform: rotate(-2.05turn) scaleY(1); - opacity: 0; - } - } - - &.ribbon { - width: .3em; - height: .7em; - border-radius: .1em; - } - - &.flake { - width: .3em; - height: .3em; - border-radius: 50%; - } - - // Confetti Colors - &.color-1 { - background-color: #feb535; - } - - &.color-2 { - background-color: #bea4ff; - } - - &.color-3 { - background-color: #ff6e83; - } - - &.color-4 { - background-color: #58cafe; - } - } + // = Animations + // ------------------------------------------------------------------------ + @keyframes o_onboarding_slideInUp { + from { + transform: translate3d(0, 20%, 0); + opacity: 0; } } - .o_onboarding_just_done { - // Activate confetti cannon when step is done - .o_onboarding_confetti { - display: block; + @keyframes o_onboarding_zoomIn { + from { + transform: scale3d(0.8, 0.8, 0.8); + opacity: 0; } + 50% { + opacity: 1; + } + } + + @keyframes o_onboarding_fadeIn { + 10%, 66% { opacity: 0; } + 0%, 100% { opacity: 1; } + } + + @keyframes o_onboarding_fadeInOut { + 10%, 66% { opacity: 1; } + 0%, 100% { opacity: 0; } } } diff --git a/odoo/addons/base/views/onboarding_views.xml b/odoo/addons/base/views/onboarding_views.xml index 1a17666f23d..967b9581df5 100644 --- a/odoo/addons/base/views/onboarding_views.xml +++ b/odoo/addons/base/views/onboarding_views.xml @@ -24,110 +24,66 @@ +
-
-
- - - -
- -
-
- - - + +
+ + +
+ +
+ + + Nice work! Your configuration is done. - - Close - + + Close +
+ - +