-
Notifications
You must be signed in to change notification settings - Fork 98
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Make save dropdown menu #505
Conversation
@@ -20,7 +20,7 @@ | |||
#endif | |||
#include <list> | |||
#include <map> | |||
#if !__APPLE__ | |||
#if __has_include(<memory_resource>) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I ran into a problem where __APPLE__
is not defined for a WASM build even on my Mac. However, it looks like C++17 has a much better solution. There are probably some other places we should use this too.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Interesting. I somehow remember that another issue I encounter is the lack of support for pstl, that is why I put __APPLE__
to those macros using PSTL. I think the <execution>
header is there, but it does not contain the required definitions.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thinking about it, __APPLE__
is not defined for WASM build sounds fine, as that is cross compilation and the target platform is indeed not apple. It is interesting that it builds correctly for me, as emscripten is using clang, which should not have <memory_resource>
as well.
Anyway, this looks fine to me.
Codecov ReportPatch and project coverage have no change.
Additional details and impacted files@@ Coverage Diff @@
## master #505 +/- ##
=======================================
Coverage 90.36% 90.36%
=======================================
Files 35 35
Lines 4431 4431
=======================================
Hits 4004 4004
Misses 427 427
☔ View full report in Codecov by Sentry. |
bindings/wasm/examples/index.html
Outdated
@@ -40,16 +40,25 @@ | |||
<div class="page"> | |||
<div class="container header" style="background-color: #A288B3;"> | |||
<p style="flex: 2;"><a target="_blank" href="https://github.com/elalish/manifold">Manifold</a>CAD </p> | |||
<div class="margin" style="position: relative;"> | |||
<button type="button" id="file" class="blue"><b class="uparrow"></b> <span | |||
<div class="margin" style="position: relative; width: 250px;"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the best practice right now is to avoid using px, and use things like em instead?
As px can behave weirdly on mobiles with different dpi.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it is ok to use px. CSS pixel is not the same as physical pixel. See the docs of devicePixelRatio.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh OK, I haven't done frontend development for years now. Will have a look at the actual result on PC and mobile later today.
I am fine for the desktop UI. However, the mobile UI seems unreadable (the height of the editor is only a few pixels, and the buttons are not aligned). I did some modification to the css and html file and changed the mobile UI a bit, it now looks something like this (not great but I am not sure how to make it look better): diff --git a/bindings/wasm/examples/editor.css b/bindings/wasm/examples/editor.css
index b188a39..7b3a1e0 100644
--- a/bindings/wasm/examples/editor.css
+++ b/bindings/wasm/examples/editor.css
@@ -130,7 +130,7 @@ model-viewer {
.header .margin {
font-size: 16px;
- margin: 1em;
+ margin: 1em 0.5em;
}
.dropdown {
@@ -212,6 +212,15 @@ model-viewer {
background-color: rgb(255, 177, 177);
}
+#file-margin {
+ position: relative;
+ width: 250px;
+}
+
+#save {
+ width: 125px;
+}
+
@media only screen and (max-width: 600px) {
.container {
flex-direction: column;
@@ -220,5 +229,31 @@ model-viewer {
.col {
width: 100%;
+ height: 50%;
+ }
+
+ #file-margin {
+ width: calc(100% - 32px);
}
-}
\ No newline at end of file
+
+ p {
+ margin: .2em 1em;
+ text-align: center;
+ }
+
+ .header .margin {
+ margin: 0.2em 16px;
+ }
+
+ #button-container {
+ flex-direction: row;
+ margin-left: 8px;
+ margin-right: 8px;
+ width: calc(100% - 16px);
+ }
+
+ #button-container .margin {
+ width: calc(50% - 16px);
+ margin: 8px;
+ }
+}
diff --git a/bindings/wasm/examples/index.html b/bindings/wasm/examples/index.html
index 0c025d3..20464c8 100644
--- a/bindings/wasm/examples/index.html
+++ b/bindings/wasm/examples/index.html
@@ -40,22 +40,24 @@
<div class="page">
<div class="container header" style="background-color: #A288B3;">
<p style="flex: 2;"><a target="_blank" href="https://github.com/elalish/manifold">Manifold</a>CAD </p>
- <div class="margin" style="position: relative; width: 250px;">
+ <div class="margin" id="file-margin" >
<button type="button" id="file" class="blue item"><b class="uparrow"></b> <span
id="current">Intro</span></button>
<div class="dropdown" id="fileDropdown">
<button type="button" class="green item" id="new">New</button>
</div>
</div>
- <button type="button" id="compile" class="margin green" disabled><span>Run</span></button>
- <div id="save" class="margin" style="position: relative; width: 125px;">
- <div class="item">
- <button type="button" id="glb" class="blue item">Save GLB</button>
- <button type="button" class="icon"><b class="uparrow" style="right: 2px;"></b></button>
- </div>
- <div class="dropdown" id="saveDropdown">
+ <div class="container" id="button-container">
+ <button type="button" id="compile" class="margin green" disabled><span>Run</span></button>
+ <div id="save" class="margin" style="position: relative; ">
<div class="item">
- <button type="button" id="threemf" class="blue item">Save 3MF</button>
+ <button type="button" id="glb" class="blue item">Save GLB</button>
+ <button type="button" class="icon"><b class="uparrow" style="right: 2px;"></b></button>
+ </div>
+ <div class="dropdown" id="saveDropdown">
+ <div class="item">
+ <button type="button" id="threemf" class="blue item">Save 3MF</button>
+ </div>
</div>
</div>
</div>
@@ -84,4 +86,4 @@
<script type="module" src="editor.js"></script>
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js"></script>
-</html>
\ No newline at end of file
+</html> |
That definitely looks much improved on mobile - I still don't know how anyone would actually use manifoldCAD on mobile, but at least they can if they really want to. Would you like to just add your commit to my PR? |
Sure. I don't expect people to actually use it on mobile either, but just in case they clicked on the url on the phone, they can view some code and run something. |
* fix include * made new dropdown * mobile ui * cleanup --------- Co-authored-by: pca006132 <[email protected]>
Follow-on to #500
This cleans up the UX of ManifoldCAD.org by putting all file types under one dropdown menu, which will also make it easier to add more as necessary without cluttering the UI.