Disable/dim the Add step button until a module is selected

[tech4GT]

Hi, this is a first-timers-only issue. This means we've 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 that's you, we're interested in helping you take the first step and can answer questions and help you out as you do. Note that we're especially interested in contributions from people from groups underrepresented in free and open source software!

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

The Issue:
We need to disable the Add Step button which is used to add steps until a step has been selected from dropdown. ie The button should not be clickable till none option is selected.

We can use the same kinds of selectors to modify it, add more text, change the styling -- using Bootstrap styles:

https://getbootstrap.com/docs/3.3/css/

[gitmate]

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

Possibly related issues are #302 (Disable/dim the Save button until step inputs have been changed), #269 (Prior steps need not re-run when a new module is added or deleted), #158 (Add a Saturation Module), #27 (add fisheyegl module), and #138 (Add a Dithering module).

[gitmate]

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

Possibly related issues are #302 (Disable/dim the Save button until step inputs have been changed), #269 (Prior steps need not re-run when a new module is added or deleted), #158 (Add a Saturation Module), #27 (add fisheyegl module), and #138 (Add a Dithering module).

[coderjolly]

can u attach an image for visual representation ?

[tech4GT]

hi @coderjolly Welcome to the community😁

[tech4GT]

Here, since I have not selected any step the button should be disabled

[tech4GT]

image-sequencer/examples/index.html

Line 76 in 0c01473

<button class="btn btn-success btn-lg" name="add">Add Step</button>

We have made the button here

[jywarren]

I think you can disable with the Bootstrap style "disabled" if that's helpful!

…

On Tue, Jul 17, 2018 at 7:32 AM Varun Gupta ***@***.***> wrote: https://github.com/publiclab/image-sequencer/blob/0c0147354e679fdc561b194ec8b98d0bfbefc1ac/examples/index.html#L76 We have made the button here — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#303 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ0aQ5AszeRJMAqgcZcQRUh8nK4hbks5uHcs_gaJpZM4VRAM8> .

[LostLaser]

I'm not sure if anyone is working on this at the moment, but do you mind if I take a shot?

[tech4GT]

Go ahead!! Thanks

[kevinkmmak]

I am a first-timer. I have forked and cloned the repo.
Am I supposed to add scripts inside examples/index.html, or add to demo.js?
I think I will control the attribute "disabled" by using prop method.

[tech4GT]

You can do it in either but we prefer to do it in demo.js

[ebinxavier]

I have raised a PR : #311 for this issue. please check.

[jywarren]

Is this complete in #310? Thanks, everyone!

[tech4GT]

Yes @jywarren !!