display add step menu with common modules as "quick" buttons

[jonxuxu]

Fixes #432

Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!

• tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR -- or run tests locally with rake test
• code is in uniquely-named feature branch and has no merge conflicts
• PR is descriptively titled
• ask @publiclab/reviewers for help, in a comment below

Hi there,
I'm competing in CodeIn, and I've made a basic selector with commonly used buttons in response to #432 .

Some things I still need help on:

• Deselect a dropdown option when a button is pressed
• Send the button values to the addStepUi, or the dropdown values if no button is selected

This will be my first pull request on this repository, so I'd appreciate it if you let me know if there's any issues with my pull request. Thanks for your time!

[welcome]

Thanks for opening this pull request! Dangerbot will test out your code and reply in a bit with some pointers and requests.
There may be some errors, but don't worry! We're here to help! 👍🎉😄

[jywarren]

Hi, what if clicking the icon buttons just add automatically, without having to press add step, so then the deselect of the drop-down wouldnt matter?

[jonxuxu]

That sounds like a good idea.

image-sequencer/examples/demo.js

Lines 33 to 40 in eadc047

	$("#addStep select").on("change", function(){
	$(".radio-group").find('.radio').removeClass('selected');
	ui.selectNewStepUi;
	});
	$("#addStep #add-step-btn").on("click", function(){
	//TODO: Get step option from either buttons or dropdown
	ui.addStepUi;
	});

Could I get a pointer to how ui.addStepUi works? Also where can I find modulesInfo, specifically the name?

I'm thinking of changing the selected value in the dropdown and call the addStepUi function when a corresponding button is pressed.

[jonxuxu]

@jywarren I've added the action exactly as you described. Now clicking the buttons calls the ui.selectNewStepUi() and ui.addStepUi() functions for their respective filters.

[jywarren]

Oh that's awesome. Can you upload a gif of how it works?

…

On Mon, Nov 19, 2018, 9:29 PM Jonathan Xu ***@***.*** wrote: @jywarren <https://github.com/jywarren> I've added the action exactly as you described. Now clicking the buttons calls the ui.selectNewStepUi() and ui.addStepUi() functions for their respective filters. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#479 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ5bgDOMlJhn_fNxPWRVWUYSfAj7Zks5uw2jRgaJpZM4Yn_6r> .

[jonxuxu]

@jywarren here it is.

[jywarren]

This looks amazing! OK - last few tweaks -- can you:

1. set border radius to something larger, like 100px, so that the buttons appear truly circular
2. move the button text outside so it doesn't have to be inside the circle, but below it
3. add some margin below the row of circular buttons
4. make sure the button returns to a normal style once the step is added

Thanks so much, this is tremendous!

[jywarren]

I'm so excited!!! 🎉 👍 👍 🎈

[jywarren]

Also, it looks like, since we recently merged in some new changes to the master branch, you need to rebase your work on top of the latest main branch. You can do that by following the process outlined here, but you may be able to skip step 2 if your master is still in sync with publiclab's main branch: https://publiclab.org/wiki/contributing-to-public-lab-software#Rewinding+the+master+branch

Thanks!

[jonxuxu]

I believe that I've applied the changes, but grunt serve is not reflecting any of the changes, whether it be css, js or html. The page loads fine and there are no errors, just that it is loading an old version somehow. Is there a way to resolve this?

[jywarren]

I just resolved the merge conflicts here, let's see!

[jywarren]

Also, there is a cache, so you may have to open it in the dev console, and then clearing cache that way.

I'll check, there is supposed to be a message in the footer with a link to clear the cache.

[jonxuxu]

Thanks for merging the pull request. Grunt is still serving an old version of the site, after I cleared cache, restarted the browser, reinstalled grunt and restarted my computer. It started yesterday and I'm not sure why.

As you can see in the console, it's still referencing an error in demo.js line 163 despite it being only 148 lines long now.

Could it be that gruntfile.js was modified and stopped watching the examples folder?

EDIT: I've managed to get grunt to watch the examples folder for a change there. However it's still loading an old version of the page and no change is reflected. I'm completely lost on how to get grunt working again. 😅

[jywarren]

Hmm, actually it shouldn't need to be watching for changes at all, since demo.js is not compiled... Hmm

[jywarren]

Did you try clearing cache with the reload button menu as in my screenshot? I am pretty sure the cache is in the browser and not the backend.

Another temporary fix would be to use an incognito window, which wouldn't use the cache.

[jywarren]

Could you push up your changes and rebase (or merge should be fine too) so once we resolve the issues i can merge this in? Thanks!

[jonxuxu]

Thanks, it turns out Firefox doesn't clear the browser cache even when I manually do it in the settings. In private mode I was able to view the changes. I've applied the changes you've requested:

[jywarren]

This is gorgeous. I think you still need to push up the changes to this branch? And there are still some merge conflicts to be resolved by a rebase. But it should be pretty simple -- tell me if you'd like some help!

[jywarren]

Oh lol there are your commits!

[jywarren]

But yes, see if you can resolve the conflicts! ⚡⚡👍🏽

[jonxuxu]

Yep, I just fixed the merge conflicts. I kept the stepmodule stuff in the js.

[jywarren]

Re-added package-lock.json which had been removed, and then i'll merge! 👍 🎉

[welcome]

Congrats on merging your first pull request! 🙌🎉⚡️
Your code will likely be published to https://sequencer.publiclab.org in the next few days.
In the meantime, can you tell us your Twitter handle so we can thank you properly?
Now that you've completed this, you can help someone else take their first step!
See: Public Lab's coding community!

[jywarren]

Publishing to gh-pages so we can try it out! Fantastic!!

[jywarren]

This is a pretty interesting alternative way to select a step, which you might be interested in as a next issue: #247

it's a big one, but if you'd like, I'm happy to make a GCI issue from it!

[jywarren]

It's live, by the way!!!! Amazing!!!

[jonxuxu]

Great, thanks for your help throughout! @247 looks cool! I've submitted this task for review. Can't wait to work on my next GCI task.