Display a flash message on removal of a step

[Mridul97]

We are preparing to participate in Google Code-in, and have reserved this issue for participants in GCI - but we'd love to have your help with another one! Please check out https://code.publiclab.org to see more.

First Timers Only

Hi, this is a first-timers-only issue. This means this has been worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

The Problem

We want to display a flash message like 'Step Removed' whenever user removes a step.

The Solution

Ideally we would like that the message should fade in whenever a step gets removed and fade out after a short time like 1 second. So that it makes the website more interactive and also doesn't disturb the flow of the website.

A function to display the message can be triggered on click of remove button.

Remove button is made here:

image-sequencer/examples/lib/defaultHtmlStepUi.js

Lines 38 to 43 in 88364de

	var tools =
	'<div class="tools btn-group">\
	<button confirm="Are you sure?" class="remove btn btn btn-default">\
	<i class="fa fa-trash"></i>\
	</button>\
	</div>';

The function should fade in the display message and fade it out after 1 second.

[gitmate]

GitMate.io thinks the contributor most likely able to help you is @tech4GT.

Possibly related issues are #338 (Display an installation message to user in the CLI), and #49 (image degredation over repeated steps (invert)).

[gitmate]

GitMate.io thinks the contributor most likely able to help you is @tech4GT.

Possibly related issues are #338 (Display an installation message to user in the CLI), and #49 (image degredation over repeated steps (invert)).

[tech4GT]

Good one, @Mridul97 Let's make this one a medium gci issue, Thanks!

[jywarren]

Hi, great! Is there a simple "flash notification" library you'd recommend for someone, or example code of what a notification could look like? Bootstrap has an "alert" component you could use; you could try linking to that -- https://getbootstrap.com/docs/3.3/

[adisapphire]

please review

[Mridul97]

Actually bootstrap alert doesn't disappear itself so we will have to make it disappear using js, I think we can either use bootstrap alert or create a customized alert by just using a
<p>Step Removed</p>
tag and add styling using css. And then we can set it to fade in and fade out using js
$(selector for remove button).click(showFlashMessage)
showFlashMessage would be the function that will fade in and fade out the message after 1 second.

[jywarren]

We could also get a bootstrap alert to fade away using js!

…

On Sat, Sep 29, 2018, 6:25 AM Mridul97 ***@***.***> wrote: Actually Bootstrap alert doesn't disappear itself, we can create a customized alert by just using a <p>Step Removed</p> tag and adding styling using css. And then we can set it to fade in and fade out using js $(selector for remove button).click(showFlashMessage) showFlashMessage is the function which will fade in the message and fade out the message after 1 second. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#345 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ-meGr9cYhIo8ranPPTYHTmiXoeWks5uf2aagaJpZM4W-fzF> .

[SidharthBansal]

This task is published on GCI dashboard. Thanks all.