vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: move onboarding widget when sidebar is collapsed (#38395)

Browse source 
* fix: move onboarding widget when sidebar is collapsed

* fix: add animation for collapse/expand
This commit is contained in:
Nikhil Kothari 2026-04-03 23:30:05 +05:30 • committed by GitHub
parent 816a60cbee
commit 707f685154
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 121 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

185
frappe/public/js/frappe/ui/user_onboarding/OnboardingPanel.vue
View file

@ -239,107 +239,114 @@ function markReset(step) {
</div>
</div>
<div v-if="!collapsed" class="body">
<div class="onb-title">
<div class="onb-title-icon" v-html="headerIcon"></div>
<div
class="onb-collapsible"
:class="collapsed ? 'onb-collapsible--collapsed' : 'onb-collapsible--expanded'"
>
<div class="body">
<div class="onb-title">
<div class="onb-title-icon" v-html="headerIcon"></div>
<div class="text-base font-medium">{{ title }}</div>
<div class="text-base font-medium">{{ title }}</div>
<div class="onb-title-steps">
{{ completedCount }}/{{ steps.length }} {{ __("steps completed") }}
</div>
</div>
<div class="onb-progress-row">
<div v-if="progress !== 100">
<div class="onb-progress-badge">{{ progress }}% {{ __("completed") }}</div>
</div>
<div v-else>
<div class="onb-progress-badge-complete">
{{ progress }}% {{ __("completed") }}
<div class="onb-title-steps">
{{ completedCount }}/{{ steps.length }} {{ __("steps completed") }}
</div>
</div>
<div v-if="skippAll">
<span class="onb-skip" @click="resetAll(steps)"> {{ __("Reset All") }}</span>
</div>
<div v-else>
<span class="onb-skip" @click="skipAll(steps)">{{ __("Skip All") }}</span>
</div>
</div>
<!-- Steps -->
<div class="onb-steps flex flex-col gap-2.5 overflow-hidden">
<div
style="width: 100%"
v-for="(step, i) in steps"
:key="i"
:class="{ is_complete: step.is_complete }"
>
<div
class="onb-group w-full step-title flex items-center"
style="align-items: center"
:class="
step.is_complete
? 'text-extra-muted onb-select-cursor'
: 'text-ink-gray-8 onb-select-cursor'
"
>
<div class="onb-step-left" @click="handleAction(step)">
<div class="onb-step-icon" v-if="step.is_complete">
<div v-html="completeChecklistIcon"></div>
</div>
<div class="onb-step-icon" v-else>
<div v-html="checklistIcon"></div>
</div>
<div v-if="!step.is_skipped">
<span
class="text-base onb-step-text"
:class="step.is_complete ? 'text-extra-muted' : ''"
>
{{ __(step.action_label) }}
</span>
</div>
<div v-else>
<span
class="text-base onb-step-text text-extra-muted"
style="text-decoration-line: line-through"
>
{{ __(step.action_label) }}
</span>
</div>
<div class="onb-progress-row">
<div v-if="progress !== 100">
<div class="onb-progress-badge">{{ progress }}% {{ __("completed") }}</div>
</div>
<div v-else>
<div class="onb-progress-badge-complete">
{{ progress }}% {{ __("completed") }}
</div>
</div>
<div v-if="!step.is_complete">
<div v-if="!step.is_skipped">
<div class="ml-auto onb-show-on-hover text-sm w-12 text-right">
<div v-if="skippAll">
<span class="onb-skip" @click="resetAll(steps)">
{{ __("Reset All") }}</span
>
</div>
<div v-else>
<span class="onb-skip" @click="skipAll(steps)">{{ __("Skip All") }}</span>
</div>
</div>
<!-- Steps -->
<div class="onb-steps flex flex-col gap-2.5 overflow-hidden">
<div
style="width: 100%"
v-for="(step, i) in steps"
:key="i"
:class="{ is_complete: step.is_complete }"
>
<div
class="onb-group w-full step-title flex items-center"
style="align-items: center"
:class="
step.is_complete
? 'text-extra-muted onb-select-cursor'
: 'text-ink-gray-8 onb-select-cursor'
"
>
<div class="onb-step-left" @click="handleAction(step)">
<div class="onb-step-icon" v-if="step.is_complete">
<div v-html="completeChecklistIcon"></div>
</div>
<div class="onb-step-icon" v-else>
<div v-html="checklistIcon"></div>
</div>
<div v-if="!step.is_skipped">
<span
style="
font-size: 12px;
vertical-align: text-top;
margin-right: 0px;
"
class="text-ink-gray-7"
@click="markSkip(step)"
class="text-base onb-step-text"
:class="step.is_complete ? 'text-extra-muted' : ''"
>
{{ __("Skip") }}
{{ __(step.action_label) }}
</span>
</div>
<div v-else>
<span
class="text-base onb-step-text text-extra-muted"
style="text-decoration-line: line-through"
>
{{ __(step.action_label) }}
</span>
</div>
</div>
<div v-if="step.is_skipped">
<div class="ml-auto onb-show-on-hover text-sm w-12 text-right">
<span
style="
font-size: 12px;
vertical-align: text-top;
margin-right: 0px;
"
class="text-ink-gray-7"
@click="markReset(step)"
>
{{ __("Reset") }}
</span>
<div v-if="!step.is_complete">
<div v-if="!step.is_skipped">
<div class="ml-auto onb-show-on-hover text-sm w-12 text-right">
<span
style="
font-size: 12px;
vertical-align: text-top;
margin-right: 0px;
"
class="text-ink-gray-7"
@click="markSkip(step)"
>
{{ __("Skip") }}
</span>
</div>
</div>
<div v-if="step.is_skipped">
<div class="ml-auto onb-show-on-hover text-sm w-12 text-right">
<span
style="
font-size: 12px;
vertical-align: text-top;
margin-right: 0px;
"
class="text-ink-gray-7"
@click="markReset(step)"
>
{{ __("Reset") }}
</span>
</div>
</div>
</div>
</div>

27
frappe/public/js/frappe/ui/user_onboarding/user_onboarding.bundle.js
View file

@ -72,7 +72,7 @@ function addStyles() {
.onb-panel {
position: fixed;
left: 236px;
left: 66px;
bottom: 24px;
width: 310px;
max-height: 80vh;
@ -83,7 +83,30 @@ function addStyles() {
z-index: 1000;
display: flex;
flex-direction: column;
}
overflow-y: auto;
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.expanded .onb-panel {
left: 236px;
}
.onb-collapsible {
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.onb-collapsible--expanded {
max-height: 3000px;
pointer-events: auto;
}
.onb-collapsible--collapsed {
max-height: 0;
pointer-events: none;
}
.onb-header-main {
display: flex;