From 2a0901af028d4214dda7efa94f7e7fac50ac2f41 Mon Sep 17 00:00:00 2001 From: pratu16x7 Date: Sun, 27 Aug 2017 13:58:59 +0530 Subject: [PATCH] [user-progress] slide action cards --- frappe/public/build.json | 4 +- frappe/public/css/desk.css | 39 ++++ frappe/public/js/frappe/misc/help.js | 2 +- frappe/public/js/frappe/ui/slides.js | 2 +- .../frappe/ui/toolbar/user_progress_dialog.js | 200 +++++++++++++----- frappe/public/less/desk.less | 62 ++++++ 6 files changed, 254 insertions(+), 55 deletions(-) diff --git a/frappe/public/build.json b/frappe/public/build.json index 9756cf7628..15dc9e313b 100755 --- a/frappe/public/build.json +++ b/frappe/public/build.json @@ -88,9 +88,7 @@ "public/js/frappe/form/controls/read_only.js", "public/js/frappe/form/controls/button.js", "public/js/frappe/form/controls/html.js", - "public/js/frappe/form/controls/heading.js", - "public/js/frappe/form/user_progress_dialog.js", - "public/js/frappe/form/user_progress_slide.html" + "public/js/frappe/form/controls/heading.js" ], "css/desk.min.css": [ "public/js/lib/datepicker/datepicker.min.css", diff --git a/frappe/public/css/desk.css b/frappe/public/css/desk.css index baf9449f12..2049e0a170 100644 --- a/frappe/public/css/desk.css +++ b/frappe/public/css/desk.css @@ -1126,3 +1126,42 @@ input[type="checkbox"]:checked:before { color: #fff; border-color: #b1bdca; } +.cards-container .card-container { + background-color: #fff; + margin: 10px 7px; + border: 1px solid #e5e5e5; + border-radius: 3px; + display: flex; +} +.cards-container .card-container.done { + background-color: #fafbfc; +} +.cards-container .card-container.done .title { + color: #8D99A6; +} +.cards-container .card-container.single_action { + cursor: pointer; +} +.cards-container .title { + margin-top: 0px; +} +.cards-container .content { + font-size: 12px; +} +.cards-container img { + width: 195px; +} +.cards-container img.clip { + margin: -15px 0px; + clip-path: inset(15px 0px 15px 0px); +} +.cards-container .content-container { + padding: 10px; + width: 516px; +} +.cards-container .actions { + margin-top: 15px; +} +.cards-container .actions button:not(:first-child) { + margin-left: 15px; +} diff --git a/frappe/public/js/frappe/misc/help.js b/frappe/public/js/frappe/misc/help.js index f67628142b..754bc25185 100644 --- a/frappe/public/js/frappe/misc/help.js +++ b/frappe/public/js/frappe/misc/help.js @@ -24,7 +24,7 @@ frappe.help.show_video = function(youtube_id, title) { var dialog = frappe.msgprint('' + (frappe.help_feedback_link || ""), - title || __("Help")); + title || __("Help")); dialog.$wrapper.find(".modal-content").addClass("video-modal"); } diff --git a/frappe/public/js/frappe/ui/slides.js b/frappe/public/js/frappe/ui/slides.js index 20c9468c99..a14702c111 100644 --- a/frappe/public/js/frappe/ui/slides.js +++ b/frappe/public/js/frappe/ui/slides.js @@ -35,7 +35,7 @@ frappe.ui.Slide = class Slide { this.$form = this.$body.find(".form"); this.$primary_btn = this.slides_footer.find('.btn-primary').addClass('primary'); - if(this.help) this.$content.append($(`

${this.help}

`)); + if(this.help) this.$content.append($(`

${this.help}

`)); if(this.image_src) this.$content.append( $(``)); diff --git a/frappe/public/js/frappe/ui/toolbar/user_progress_dialog.js b/frappe/public/js/frappe/ui/toolbar/user_progress_dialog.js index d7049fcbdc..dad21e477a 100644 --- a/frappe/public/js/frappe/ui/toolbar/user_progress_dialog.js +++ b/frappe/public/js/frappe/ui/toolbar/user_progress_dialog.js @@ -4,6 +4,119 @@ frappe.provide("frappe.setup"); frappe.provide("frappe.ui"); +frappe.ui.ActionCard = class { + constructor({ + data = null + }) { + this.data = data; + this.make(); + this.setup(); + } + + make() { + this.container = $(`
+
+ +
+
+
+
+
+
+
+
+
+ +
+
`); + this.property_components = [ + { card_property: 'content', component_name: '$content', class_name: 'content' }, + { card_property: 'image', component_name: '$img_container', class_name: 'img-container'}, + { card_property: 'done', component_name: '$check', class_name: 'check' }, + { card_property: 'actions', component_name: '$actions', class_name: 'actions' }, + { card_property: 'help_links', component_name: '$help_links', class_name: 'help-links' }, + ]; + } + + setup() { + this.property_components.map(d => { + this[d.component_name] = this.container.find('.' + d.class_name); + }); + + if(this.data.video_id) { + this.data.image = `http://img.youtube.com/vi/${this.data.video_id}/1.jpg`; + this.$img_container.find('.image-overlay').removeClass('hide'); + } + + this.refresh(); + if(this.data.video_id) { + this.bind_single_action(() => { + frappe.help.show_video(this.data.video_id, this.title); + }); + } + } + + refresh() { + // render according to props + this.property_components.map(d => { + if(!this.data[d.card_property]) { + this[d.component_name].hide(); + } + }); + + this.render(); + } + + render() { + this.container.find('.title').html(this.data.title); + if(this.data.image) { + this.$img_container.find('img').attr({"src": this.data.image}); + } + if(this.data.content) { + this.$content.html(this.data.content); + } + if(this.data.done) { + this.container.addClass("done"); + } + if(this.data.actions) { + this.data.actions.map(action => { + let $btn = $(``); + this.$actions.append($btn); + if(action.route) { + $btn.on('click', () => { + frappe.set_route(action.route); + }); + } if(action.new_doc) { + $btn.on('click', () => { + frappe.new_doc(action.new_doc); + }); + } + }); + } + if(this.data.help_links) { + this.data.help_links.map(link => { + let $link = $(`${link.label}`); + this.$help_links.append($link); + }); + } + } + + bind_single_action(onclick) { + if(this.data.video_id) { + // on entire card click + this.container.on('mouseenter', () => { + this.container.addClass('single_action'); + }).on('mouseleave', () => { + this.container.removeClass('single_action'); + }).on('click', onclick); + } + } + + mark_as_done() {} + +} + frappe.setup.UserProgressSlide = class UserProgressSlide extends frappe.ui.Slide { constructor(slide = null) { super(slide); @@ -15,61 +128,27 @@ frappe.setup.UserProgressSlide = class UserProgressSlide extends frappe.ui.Slide setup_done_state() { this.$body.find(".form-wrapper").hide(); - - this.make_done_state(); - this.bind_done_state(); + this.$body.find(".slide-help").hide(); + this.make_action_cards(); } - make_done_state() { + make_action_cards() { this.$done_state = $(`
-
-

-

${__("Completed!")}

-
-
-
- - - -
-
- ${__("Check it out")} -
-
-
${__("Going Further")}
- ${__("help link")} -
+
+
`).appendTo(this.$body); + + this.$actions = this.$done_state.find('.actions'); + this.action_cards.map(this.add_card.bind(this)); } - bind_done_state() { - if(this.doctype) { - this.$body.find('.doctype-actions').removeClass("hide"); - this.$list = this.$body.find('.list-btn') - .html("Go to " + this.name) - .on('click', () => { - frappe.set_route("List", this.doctype); - }); - if(this.sec_doctype) { - this.$sec_list = this.$body.find('.sec-list-btn') - .removeClass("hide") - .html("Go to " + this.sec_doctype + "s") - .on('click', () => { - frappe.set_route("List", this.sec_doctype); - }); - } - this.$import = this.$body.find('.import-btn') - .html("Import " + this.name) - .on('click', () => { - frappe.set_route("data-import-tool"); - }); - } else if (this.route) { - this.$body.find('.doc-actions').removeClass("hide"); - this.$doc = this.$body.find('.doc-btn').on('click', () => { - frappe.set_route(this.route); - }); - } + add_card(data) { + let card = new frappe.ui.ActionCard({ + data: data + }); + + card.container.appendTo(this.$actions); } before_show() { @@ -97,6 +176,10 @@ frappe.setup.UserProgressSlide = class UserProgressSlide extends frappe.ui.Slide }); } } + + mark_as_done() { + // most hard + } }; frappe.setup.UserProgressDialog = class UserProgressDialog { @@ -104,6 +187,11 @@ frappe.setup.UserProgressDialog = class UserProgressDialog { slides = [] }) { this.slides = slides; + // Add a progress bar + // show the last visited slide + // Add a mark as done button + // this.progress_state_dict = this.slides.map(); + this.setup(); } @@ -130,6 +218,18 @@ frappe.setup.UserProgressDialog = class UserProgressDialog { this.make_dismiss_button(); } + listen_for_updates() { + // on every notif 30 sec event + this.update_progress_state(); + } + + update_progress_state() { + // update states of slides and cards and refresh them + // Update the progress bar in both the toolbar and the dialog + + // remove on_update from original slides container + } + make_dismiss_button() { this.dialog.set_primary_action(__('Dismiss'), () => { $('.user-progress').addClass('hide'); @@ -140,11 +240,11 @@ frappe.setup.UserProgressDialog = class UserProgressDialog { this.$dismiss_button.addClass('hide'); $(document).on("user-initial-setup-complete", () => { - this.show_dismiss_button(); + this.add_finish_slide_and_make_dismissable(); }); } - show_dismiss_button() { + add_finish_slide_and_make_dismissable() { this.$dismiss_button.removeClass('hide'); } diff --git a/frappe/public/less/desk.less b/frappe/public/less/desk.less index b829110422..1ed397a3bf 100644 --- a/frappe/public/less/desk.less +++ b/frappe/public/less/desk.less @@ -1074,3 +1074,65 @@ input[type="checkbox"] { } } } + +// Action Cards +.cards-container { + .card-container { + background-color: #fff; + margin: 10px 7px; + border: 1px solid #e5e5e5; + border-radius: 3px; + display: flex; + + &.done { + background-color: #fafbfc; + + .title { + color: #8D99A6; + } + } + + &.single_action { + cursor: pointer; + + // .title { + // color: blue; + // } + + // emphasize image overlay + } + } + + .title { + margin-top: 0px; + } + + .content { + font-size: 12px; + } + // .img-container { + + // } + + img { + width: 195px; + + &.clip { + margin: -15px 0px; + clip-path: inset(15px 0px 15px 0px); + } + } + + .content-container { + padding: 10px; + width: 516px; + } + + .actions { + margin-top: 15px; + + button:not(:first-child) { + margin-left: 15px; + } + } +}