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

[jywarren]

When selecting a new step to add at the demo, https://sequencer.publiclab.org, we should have a way to quickly add the most common types of

Sort of like the Instagram menu shown in this screenshot!

This can be a design issue first - needing mockups, sketched ideas, discussion. We'd love some help!

We can use Fontawesome icons: https://fontawesome.com/v4.7.0/

Please help out by identifying good icons (pasting in a URL to FontAwesome's icon page, and a screenshot of the icon itself) for:

• brightness
• contrast
• saturation
• rotate
• crop

If you have ideas for the design, please upload an image of your mockup or sketch!

[SidharthBansal]

This task is published on GCI dashboard. Thanks all.

[jywarren]

The "adjust" icon is generic but good, maybe for brightness? https://fontawesome.com/v4.7.0/icon/adjust

[jywarren]

Refresh is good! https://fontawesome.com/v4.7.0/icon/refresh

[jonxuxu]

Hi, I'd like to work on this task. Before I get on making a prototype, I would like to confirm the icon set with you guys.

How are these icons: brightness: https://fontawesome.com/icons/sun?style=regular

contrast: https://fontawesome.com/icons/adjust?style=solid

saturation: https://fontawesome.com/icons/tint?style=solid

rotate: https://fontawesome.com/icons/redo?style=solid

crop: https://fontawesome.com/icons/crop-alt?style=solid

[jywarren]

this is great! Good finds! Yes, and one GCI task was just finding the icons, so that's a great start. We'd love your help with this!

On Wed, Nov 14, 2018 at 6:29 PM Jonathan Xu notifications@github.com wrote:

Hi, I'd like to work on this task. Before I get on making a prototype, I would like to confirm the icon set with you guys.

How are these icons: brightness: https://fontawesome.com/icons/sun?style=regular [image: image] https://user-images.githubusercontent.com/22998430/48519299-7399b300-e83a-11e8-90f5-0184d18c0baf.png

contrast: https://fontawesome.com/icons/adjust?style=solid [image: image] https://user-images.githubusercontent.com/22998430/48519203-1aca1a80-e83a-11e8-8adc-4e1d2b87a26d.png

saturation: https://fontawesome.com/icons/tint?style=solid [image: image] https://user-images.githubusercontent.com/22998430/48519458-fae72680-e83a-11e8-98f4-2e3217e7a1e7.png

rotate: https://fontawesome.com/icons/redo?style=solid [image: image] https://user-images.githubusercontent.com/22998430/48519417-d5f2b380-e83a-11e8-9a99-7a658480e3c7.png

crop: https://fontawesome.com/icons/crop-alt?style=solid [image: image] https://user-images.githubusercontent.com/22998430/48519498-1f430300-e83b-11e8-88ea-f41146bac60c.png

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/publiclab/image-sequencer/issues/432#issuecomment-438857934, or mute the thread https://github.com/notifications/unsubscribe-auth/AABfJ32RO4v0V6t6Our12-dUDXDbSoyaks5uvKdEgaJpZM4Xyy_x .

[jonxuxu]

Sounds good :) Here's a prototype I put together on photoshop. Am I good for coding this? Also if you could link me to the icon task, maybe I could claim that too, thanks!

[jywarren]

this looks good, but perhaps it could be displayed below the step, similarly to how the Add Step box is shown, but wider. And then perhaps Add Step with the dropdown could be below these quick button options, since we won't have a button for everything. What do you think?

Hmm, i can't seem to find that task... perhaps it got changed or deleted. Sorry!

On Wed, Nov 14, 2018 at 7:29 PM Jonathan Xu notifications@github.com wrote:

Sounds good :) Here's a prototype I put together on photoshop. Am I good for coding this? Also if you could link me to the icon task, maybe I could claim that too, thanks! [image: prototype] https://user-images.githubusercontent.com/22998430/48521651-6cc36e00-e843-11e8-839a-144e1ed1b513.png

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/publiclab/image-sequencer/issues/432#issuecomment-438869801, or mute the thread https://github.com/notifications/unsubscribe-auth/AABfJ6qJmeAFjwkAXI34IBEO7_D2_jNoks5uvLUpgaJpZM4Xyy_x .

[jonxuxu]

So something like this?

[jywarren]

I think that looks great. Maybe you can move "Select a new module..." up above it, and have the existing Add Step in the same box but below your icons. It could say "More modules" above the Add Step area. How about that?

On Wed, Nov 14, 2018 at 8:01 PM Jonathan Xu notifications@github.com wrote:

So something like this?

[image: prototype2] https://user-images.githubusercontent.com/22998430/48522777-fd03b200-e847-11e8-9a91-489772ab76ea.png

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/publiclab/image-sequencer/issues/432#issuecomment-438876455, or mute the thread https://github.com/notifications/unsubscribe-auth/AABfJ2pD29q7BtwCGQOEUcMmdLihU6oAks5uvLzLgaJpZM4Xyy_x .

[jonxuxu]

How's this? Also, when coding this, would you like me to fork the image-sequencer repo and make a pull request?

[jywarren]

This is awesome. Just be sure that clicking Add Step while "More modules" is selected doesn't do anything! I think there may be a way to disable the initial option in a select... worth looking up!

This is so exciting :-)

On Wed, Nov 14, 2018 at 8:54 PM Jonathan Xu notifications@github.com wrote:

How's this? [image: prototype2] https://user-images.githubusercontent.com/22998430/48524681-528f8d00-e84f-11e8-831d-b6e344ee1547.png

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/publiclab/image-sequencer/issues/432#issuecomment-438886888, or mute the thread https://github.com/notifications/unsubscribe-auth/AABfJ7URTBiokzXCKPTommHRrNWuK29wks5uvMkggaJpZM4Xyy_x .

[jonxuxu]

Great, I'll start coding this now. By the way, do you have auto-reload capabilities with grunt serve on localhost?

Also, I'm having some trouble loading specific icons: As you can see in the code, the number within the tags is just to see where the icons ought to be.

There are no errors in the console. I suspect this is because we're using Font Awesome v 4.5 instead of the latest version. I haven't upgraded the node module because I don't think v 5.5 is backwards compatible. Should I use PNGs instead, or do you know if there's another reason?

Edit Turns out it was because the icons I pulled up were the v 5.5 versions. I've changed the code to work with the v 4.5 icons, from this cheatsheet: http://swwwitch.com/dl/Font-Awesome-Cheetsheet-4.5.0.pdf

[jywarren]

Hi, hmm, you should be able to auto-detect and build with just the command grunt!

Ah ok, so your icons now work? Could you open a pull request for this, it's tremendous! Thank you!

[jywarren]

Could you put each icon in a circle, to make it seem more "clickable"? You can set the border-radius:40px; in CSS or there may be a Bootstrap style for round things... Awesome!!!

[jonxuxu]

Yeah sure I'll work on it right now!

[jonxuxu]

I've finished the bulk of your requests, but am having some issues. I've opened a pull request so you can see the details: https://github.com/publiclab/image-sequencer/pull/479

[grvsachdeva]

@jywarren could you please update the issue as per work done by Jonathan, so that we would be able to figure out the remaining work. thanks!

[tech4GT]

@gauravano I think we can close this one, this is pretty much done! :tada:

[grvsachdeva]

Thanks @tech4GT for update :smile: !