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

fix: User profile timeline style

Browse source
This commit is contained in:
Suraj Shetty 2020-12-08 09:08:52 +05:30
parent 9bab8e9546
commit 6ea72016ae
6 changed files with 44 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
frappe/desk/page/user_profile/user_profile.css
View file

@ -1,3 +1,26 @@
.recent-activity .new-timeline {
padding-top: 0;
}
.recent-activity-title {
font-weight: 700;
font-size: var(--text-xl);
color: var(--text-color);
}
.recent-activity .recent-activity-footer {
margin-left: calc(var(--timeline-left-padding) + var(--timeline-item-left-margin));
max-width: var(--timeline-content-max-width);
}
.recent-activity .show-more-activity-btn {
display: block;
margin: auto;
width: max-content;
margin-top: 35px;
font-size: var(--text-md);
}
.recent-activity {
padding-bottom: 60px;
}

5
frappe/desk/page/user_profile/user_profile.html
View file

@ -36,8 +36,9 @@
</div>
</div>
<div class="recent-activity">
<p class="recent-activity-title h6 uppercase">{%=__("Recent Activity") %}</p>
<div class="recent-activity-list py-2"></div>
<div class="recent-activity-title">{%=__("Recent Activity") %}</div>
<div class="recent-activity-list"></div>
<div class="recent-activity-footer"></div>
</div>
</div>
</div>

7
frappe/desk/page/user_profile/user_profile.js
View file

@ -1,9 +1,8 @@
frappe.pages['user-profile'].on_page_load = function (wrapper) {
frappe.ui.make_app_page({
parent: wrapper,
title: __('User Profile'),
});
frappe.require('assets/js/user_profile_controller.min.js', () => {
frappe.ui.make_app_page({
parent: wrapper,
});
let user_profile = new frappe.ui.UserProfile(wrapper);
user_profile.show();
});

7
frappe/desk/page/user_profile/user_profile_controller.js
View file

@ -15,7 +15,9 @@ class UserProfile {
//validate if user
if (route.length > 1) {
frappe.dom.freeze(__('Loading user profile') + '...');
frappe.db.exists('User', this.user_id).then(exists => {
frappe.dom.unfreeze();
if (exists) {
this.make_user_profile();
} else {
@ -376,6 +378,7 @@ class UserProfile {
setup_user_activity_timeline() {
this.user_activity_timeline = new UserProfileTimeline({
parent: this.wrapper.find('.recent-activity-list'),
footer: this.wrapper.find('.recent-activity-footer'),
user: this.user_id
});
@ -421,9 +424,9 @@ class UserProfileTimeline extends BaseTimeline {
}
setup_show_more_activity() {
this.show_more_button = $(`<button class="btn btn-default btn-xs show-more-activity">${__('Show More')}</button>`);
this.show_more_button = $(`<a class="show-more-activity-btn">${__('Show More Activity')}</a>`);
this.show_more_button.hide();
this.timeline_wrapper.after(this.show_more_button);
this.footer.append(this.show_more_button);
this.show_more_button.on('click', () => this.show_more_activity());
}

7
frappe/public/scss/desk/css_variables.scss
View file

@ -214,4 +214,11 @@
--criticism-color: var(--red-600);
--criticism-bg: var(--red-100);
--btn-height: 28px;
// timeline
--timeline-item-icon-size: 34px;
--timeline-item-left-margin: var(--margin-xl);
--timeline-item-bottom-margin: var(--margin-sm);
--timeline-content-max-width: 700px;
--timeline-left-padding: calc(var(--padding-xl) + var(--timeline-item-icon-size)/2)
}

10
frappe/public/scss/desk/timeline.scss
View file

@ -18,12 +18,8 @@ $threshold: 34;
}
.new-timeline {
--timeline-item-icon-size: 34px;
--timeline-item-left-margin: var(--margin-xl);
--timeline-item-bottom-margin: var(--margin-sm);
position: relative;
padding-left: calc(var(--padding-xl) + var(--timeline-item-icon-size)/2);
padding-left: var(--timeline-left-padding);
padding-top: var(--padding-lg);
@include media-breakpoint-down(xs) {
@ -32,7 +28,7 @@ $threshold: 34;
&:before {
content: ' ';
top: 45px;
top: 25px;
position: absolute;
border-left: 1px solid var(--dark-border-color);
bottom: calc(-1 * var(--timeline-item-bottom-margin));
@ -92,7 +88,7 @@ $threshold: 34;
font-weight: var(--text-bold);
}
.timeline-content {
max-width: 700px;
max-width: var(--timeline-content-max-width);
padding: var(--padding-sm);
margin-left: var(--timeline-item-left-margin);
&.frappe-card {