Modus for SketchUp Extensions - doubts!

SketchWoodShop · December 16, 2022, 8:28am

Modus as a UI style seems too foreign to the SketchUp overall GUI style.
I don’t see too many extensions using it. Any experiences with it in a real extension?

tt_su · December 16, 2022, 9:37am

You mean SketchUp for Desktop?

It’s closer to SketchUp for Web/Mobile atm. Desktop has a major rewamp coming up.

That being said, we found that the Modus style is a bit pale out of the box. For Extension Sources I had to apply some overrides to make the general appearance feature less white:

github.com

thomthom/extension-sources/blob/ed95090c10eb21f9d68e000d147cc3bb89703985/src/tt_extension_sources/view/ui/css/dialog.css#L9


      
          html {
            cursor: default;
          }
          
          
[v-cloak] {
            display: none;
          }
          
          
/* *** SketchUp style overrides *** */
          
          
/* Text size can probably benefit from being a tad smaller. But that will
          affect the vertical flow of the layout. This is something to revisit later. */
          
          
body,
          .list-group-item,
          .dropdown-menu {
            /* P11 background color */
            background-color: #f1f1f6;
          }

We had to do some similar treatment to our HtmlDialog example when we migrated that to modus:

We’ve seen some extensions migrating to it: (top-left: before)

Since it needs some massaging we haven’t pushed it that much yet. But overall we’re hoping to provide better resources for a consistent look and feel. But Modus is closer to where Trimble/SketchUp is going. Though it’s still a work in progress and a guide, not a rule.

SketchWoodShop · December 16, 2022, 9:52am

Thanks, Thom. That looks better to me. I like the consistency across extensions look and feel and SketchUp. But I prefer simplicity of the SketchUp’s interface - Modus as of now has too much wasted space - big buttons, padding and etc. And I prefer no visual effects at all.

Taxsola · December 16, 2022, 10:59pm

I do use Modus on my extension, you can check it on:

1- Its not 100% Modus, it has default inputboxes.
2- It doensn’t follows strictly the guidelines since Im not aware of all UI datails (yet).
But thats a real application already

Agreed thats not compact, but many components has small class version such “class=‘btn btn-sm’” for buttons. ~~And you could override padding if its rlly obstructing you~~.
I wonder if theres a way of defining a scale factor for a htmldialog while using modus, would be great I guess.

If theres too much input params I stay on inputbox,
but if I’m going to htmldialog no doubt I use Modus, its pretty and consistent.

I kinda have a plan to share/publish Modus presets here on forum, hopefully it would help devs to migrate and encourage new devs also.
But I’m not really good at Modus just yet, so would be spreading some bad practices unintentionally…

Taxsola · December 16, 2022, 11:35pm

Btw, while we’re here talking about it…

Idk why its so hard to find the Modus dependencies, It took me so much time.
thanks a lot to Eneroth and Thom for posting it on:

There should be a big DOWNLOAD button on Homepage | SketchUp Developer
So we get them all (up to date) at once, also telling us the Modus version or smth.

For keeping it up to date, links can be found here: Getting Started | Trimble Modus Bootstrap Developer Guide
but its missing icons, any guide on how to get it? thanks.

DanRathbun · December 17, 2022, 1:19am

Thomas and I discussed this at length here:

github.com/SketchUp/htmldialog-inputbox

"inputbox.html" uses CSS zoom incorrectly

opened 01:24PM - 31 Jul 18 UTC

DanRathbun

bug

### "inputbox.html" uses CSS zoom incorrectly In the style element of the fil…e ... ```css /* Applying a global zoom to scale down the default size of Bootstrap. */ html { zoom: 0.8; } ``` **`zoom`** does **not** work outside an **`@viewport`** at-rule. _**It is ignored according to the docs**_. **Ref:** https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport ---- ### **EDIT:** (2018-08-31) After further tests, neither `zoom` nor `-ms-zoom` works, outside of a `@viewport` rule, in `UI::WebDialog` on **MS Windows** which runs in a MSIE WebBrowser Control. It **DOES** work in Chromium dialogs, outside of a `@viewport` rule, which is used by the `UI::HtmlDialog` class on SU2017 or higher. (This example is only written to use the new `UI::HtmlDialog` class, so the lack of `zoom` working in a `UI::WebDialog` may not be considered a bug for this example.) Also tested the following in a MSIE `UI::WebDialog` and it also does NOT work. ```css @viewport { -ms-min-width: auto; -ms-max-width: none; -ms-zoom: 0.75; -ms-user-zoom: fixed; } ```

Taxsola · December 18, 2022, 6:07am

@ene_su Can you pls help me to implement those Modus icons locally/offline?

I can make it work by using the online reference:

<link rel='stylesheet' href='https://modus.trimble.com/assets/0.5.1/fonts/modus-icons.css'>

To download and use “modus-icons.css” isn’t working.
Am I skipping steps or its just not available?

Thanks

DanRathbun · December 18, 2022, 2:52pm

It looks like the paths to the font files in “modus-icons.css” are relative to where the css file is opened from. So the font file(s) would also need to be downloaded (or their web urls edited to the full "https://modus.trimble.com/assets/0.5.1/fonts/" assets path.)

But for a SketchUp extension that only runs in a Chromium UI::HtmlDialog window, I do not think that you need all of them. (EDIT: The browser engine in use, would use the best choice for it from the @font-face rule’s src attribute resource list. The question is: which is best for our Chromium Embedded Framework dialogs ?)

Also some of the CSS rules in “modus-icons.css” for other browsers would not be needed for an extension.

Taxsola · December 18, 2022, 4:20pm

Thanks Dan!

So I’m aiming to download the font files so it can run all offline.
The full path is working except for SVG file:
https://modus.trimble.com/assets/0.5.1/fonts/modus-icons.svg?50783e4f41ce4a8b1c9426e5c9375829#modus-icons
I’m not sure how to download it yet.

Agreed I dont need all that stuff, but I think they ship it alltogether so…
I wont be digging inside files on what I rlly use or not since its lightweight.
I probly would break something anyways

and I’m trying to understand those Chromium concepts, new thing to me.

Thanks for the full link idea.

Taxsola · December 18, 2022, 4:31pm

I think I got all the files, but still no idea how to link them properly on css.
Never edited a css file in my life :l

also those are the first lines of SVG file:

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">

Dont those links means another online reference? would it work as is offline? (noob question)

DanRathbun · December 18, 2022, 7:26pm

You likely got it by now. But for any other readers, pasting the URL into a Chrome browser does not usually display anything. But right-clicking the document area and choosing “View page source” will render the document in plain text.

Then it’s just select all, copy and paste into a code editor and save locally.

Those are just the specification URLs for the document type identifiers which the rendering agent would use to know how to render the resource, in this case SVG elements.

It’s is not likely that CEF would need to look up these DTDs. All it really would need to recognize is the version of SVG used, ie here it is 1.1 as opposed to 2.0 or higher. There are changes with the 2.0 specification. Look up SVG on Wikipedia if you wish more info.

If the icons files are in the same local folder as the CSS file, then you would not likely need to edit them as the URLs point out onto the web, which you do not want.

Another consideration is that Chris has informed us that the recent releases of the Chrome Embedded Framework are enforcing stricter cross origin security. My reading into the specifications this morning indicates that web served font files may be subject to CO restrictions and might require the resource server to have certain settings.

So copying the resources locally with your extension is probably safer going forward.

See: Cross-Origin Resource Sharing (CORS) - HTTP | MDN

Taxsola · December 18, 2022, 10:00pm

True, forgot that. Thx.
To be even more specific, theres currently 5 icon files to download listed in “modus-icons.css”:

.eot - link
.woff2 - link
.woff - link
.ttf - link
.svg - link
(svg) - To render file: Open link > right-click > “View page source”
(svg) - To download: Open link > right-click > “save as”

Good, -1 problem to solve hehe. Thx

Gonna do some tests, I return the results.

Yeah, I though it wouldnt impact me (cookies & CORS). ok, good to know.

Great news! thx

I’ll post details as soon as I manage to get it working locally. Thanks once again

Taxsola · December 18, 2022, 10:27pm

And yey!!! Modus icons is finally working locally.

BASIC HOW TO:

My file structure:

Tax_Engineering/Dependencies/modus.css
Tax_Engineering/Dependencies/modus-icons.css
Tax_Engineering/Dependencies/jquery.js
Tax_Engineering/Dependencies/bootstrap.bundle.min.js
Tax_Engineering/Dependencies/modus-layout.css
Tax_Engineering/Dependencies/modus-layout.js

Tax_Engineering/Dependencies/Modus_Icons/modus-icons.eot
Tax_Engineering/Dependencies/Modus_Icons/modus-icons.svg
Tax_Engineering/Dependencies/Modus_Icons/modus-icons.ttf
Tax_Engineering/Dependencies/Modus_Icons/modus-icons.woff
Tax_Engineering/Dependencies/Modus_Icons/modus-icons.woff2

Link the Modus base files on html:

<link href='Tax_Engineering/Dependencies/modus.css' rel='stylesheet'>
<link href='Tax_Engineering/Dependencies/modus-icons.css' rel='stylesheet'>
<script src='Tax_Engineering/Dependencies/jquery.js'></script>
<script src='Tax_Engineering/Dependencies/bootstrap.bundle.min.js'></script>
<link rel='stylesheet' href='Tax_Engineering/Dependencies/modus-layout.css'>
<script src='Tax_Engineering/Dependencies/modus-layout.js'></script>

Edit “modus-icons.css” links:

src: url("Modus_Icons/modus-icons.eot") format("embedded-opentype"),
url("Modus_Icons/modus-icons.woff2") format("woff2"),
url("Modus_Icons/modus-icons.woff") format("woff"),
url("Modus_Icons/modus-icons.ttf") format("truetype"),
url("Modus_Icons/modus-icons.svg") format("svg");

Thanks Dan, u saved the day again

DanRathbun · December 19, 2022, 2:21am

Congrats!

tt_su · December 19, 2022, 3:10pm

Yea, that’s another issue, apart from the whiteness of the current bootstrap framework; padding and sizing is leaning more toward web-app. So also there we found it desirable to tweak.

Good point. We’ve also talked about providing a custom Modus package - refined for SketchUp usage.

Which icons?

DanRathbun · December 19, 2022, 9:05pm

This has been solved, see the above discussion.

The icons are shown here …
https://modus-bootstrap.trimble.com/foundations/icons/#icons

Doing a little testing, perhaps they should be available via …

modus_path = Sketchup.find_support_file("Modus","Support")

The “package” can be either in the binary path or the Program Data path and the method will still find it.

There could be versioned subfolders beneath the “Modus” folder. (I think y’all are using v1.0.0 at this time?)

Taxsola · December 19, 2022, 10:19pm

Solved as Dan said but Github modus folder (html examples) is missing icons sources.

Modus version? not sure how to check, those links says “Bootstrap v4.6.2” tho. Im using them.

DanRathbun · December 20, 2022, 3:15pm

There are several “editions” floating around that did not formally say what version the were …

For example … the edition at the HtmlDialog Examples repo extended Bootstrap v4.4.1.
This was likely Modus v0.9.2.

The Live Components configurator is using Modus v0.9.0 that encapsulates Bootstrap v4.3.1 and Modus all into a single CSS file. (Yet they are using bootstrap.js v4.4.1 ?)

There is a SketchUp project testing with Modus v1.0.0 that encapsulates bootstrap.css v4.5.3 and Modus all into a single CSS file, labeled modus-v1.0.0.

The edition you found at the Trimble "assets/0.5.1" path extends Bootstrap v4.6.2.
This is Modus v1.5.3 or v1.5.4.

Note that you still should use a matching version of bootstrap.js to go along with what version bootstrap.css that Modus is using.

So, basically, there is a version number for the Modus edition (or package, whatever it’s called.)

Not sure how the “assets” version fits in to all this.

See the Modus version history here …

It seems as though the icons are versioned separately.

Taxsola · December 20, 2022, 11:03pm

Gonna be hard to keep up adpating newer modus for sketchup
on the other hand it shouldnt be hard to code an algorithm to automate it*
(*) since old params dont get changed, just added new stuff.

I’ve tried new modus version but just realized Thom have made a good work adpating the old one.
it changes padding, sliders, buttom sizes… messed my htmldialogs.
so for now its way better to stay with github versions and get only icons from official website.

Thanks Thom for adapting that

Great addition, thanks

DanRathbun · December 21, 2022, 12:28am

Right and I think there are several “kinds” of Modus.

They have “Light” and “Basic” which I think are aimed at mobile platforms, cellphones and tablets.
Perhaps a normal full edition for large web applications like Trimble Connect ?

For use inside SketchUp dialogs and inspector panels I would think one of the two lightweight editions would be all that is needed.