Add "STL Download" to project profile page

Irev-Dev / cadhub

We're out to raise awareness and put CodeCAD on the map. The success of CadHub can be measured by the amount it promotes the use of CodeCAD within the mechanical/manufacturing industry and the strength the CadHub community.

https://cadhub.xyz

GNU General Public License v3.0

316 stars 59 forks source link

Add "STL Download" to project profile page #585

Closed smartin015 closed 2 years ago

smartin015 commented 2 years ago

Closes #584

Extras:

Clarified in CONTRIBUTING.md about a missing env var I ran into (running on Ubuntu 20.04, brand new postgres installation)
Moved the EditorMenu STL download helper to src/helpers/so the import is more sensical when using it in a different component
Added the document-download icon from https://heroicons.com/ to Svg.tsx to make the button look fancy

Demo:

Screenshot from 2021-12-28 18-59-53

Tested by clicking the button and receiving a file. I didn't see any available unit test infra, so please LMK if I'm missing any and I'll add it.

Irev-Dev commented 2 years ago

This is a great idea and one we've considered adding before, and the PR is well implemented 👏

It's just the stl downloads is one of the more buggy parts of the app, it should get better with some backend changing I'm trying to do but I'm on the fence at to whether this should be added or not now.

While we're talking about it, @franknoirot if we were to add it. Where on the page do you think it should be? do you think it's current placement mixed in with the metadata is okay?

franknoirot commented 2 years ago

Hey thanks so much for this @smartin015, great work!

The point that @Irev-Dev mentioned above is my only concern. Is there any way you could do just a couple design-based tweaks to this? Here's what I've mocked up in Figma (link to the frame is here):

Align the download button to the right. Might require some flexbox stuff, I would prefer flex: wrap and using flex-grow on the "built with" content so that if for some reason they get squeezed on smaller screens the download button can wrap to the next line.
Use the pink button styling that is found in the Comment button lower in this section or the Editor button in the IdeHeader component, including the button background and icon.

PR-585 Download Button Placement

smartin015 commented 2 years ago

How's this?

Peek 2022-01-09 12-53

franknoirot commented 2 years ago

Yo I love it! I can take review @Irev-Dev, try it out across packages.

Irev-Dev commented 2 years ago

Awesome, thanks again @smartin015, and thanks for reviewing @franknoirot.

Curv download is working for me @franknoirot, what browser are you using?

franknoirot commented 2 years ago

Weird @Irev-Dev, I was using Chrome on MacOS last night when I tried it 🤷, glad it's working though.

Irev-Dev commented 2 years ago