Full Version: Dark Gray Theme

Show messages:  1-6  7-26  27-46  47-62

Hey, nameless. I installed Max's CustomUI.2.0.beta2.zip file on a clean install of MoI 4.0 beta. The buttons showed up, but I did get script errors. I then installed some required scripts from separate downloads (there's a lot to track down) and the errors went away. I then installed the Dark Gray Theme and nothing changed. Missing scripts produced errors and installed scripts worked fine. Here's a screenshot of the "Subdiv / Bridge / Split / Scale" scripts installed, but I omitted the "ImpObj" and it produced an error.



I don't think the Dark Gray Theme is interfering with anything, as far as I can tell. If you remove the Dark Gray Theme and the errors go away, give me a specific example.

----------

Axel, you're welcome. I'm glad you like it. I'll tinker with it further as time goes on and keep sharing.

I just prefer a clean, subtle, dark interface to my programs and want the content that I'm creating to stand out and be the focus of my attention.

Image Attachments:
beta4-custom-ui.gif 

---

You are absolutely correct. I copied my installation and run Moi without the startup contents of the AppData folder and it run fine with your theme. I then added startup and it run fine again.

I had all the scripts to begin with, I am not sure what happened in my previous run. The errors I got were before the program even launched and then got me into a black screen. But everything seems to be working fine now. Congrats.

The only minor problem I have is that the icons on the bottom bar reserve too much width and I end up seeing very few of them. I am not sure why this happens. I normally do not have a scroll bar at the bottom, I get to see everything.

Image Attachments:
Dark.jpg 

---

Hey, nameless. Thanks for the feedback. Glad you got the script problem figured out.

I don't use the Custom UI much, but I've changed the "moi.css" file back to the default spacer styles that control the gap between icons. Everything should be peachy again. ;-) You only have to overwrite the "moi.css" file, if you want.

When I first started changing MoI, I didn't know what anything was and it had been a over a decade since I last did any serious HTML/CSS/JS stuff. When MoI 4.0 makes it's official release, I'll be doing a clean up of everything and making sure my changes are minimal to the code.

----------

That said, I've updated the top post with the new v1.1 Dark Gray Themes for both MoI 3.0 and 4.0 beta. This change fixes the spacing problems experienced with Max Smirnov's Custom UI. And it updates the installation instructions for the beta version, in that it removes any mention of installing the Custom UI. I understand how Michael made it work automatically now. He's a smart cookie. I takes me a while to catch on.

And, of course, feel free to comment on any issues or concerns with this theme and I'll do my best to address them.

-- Cody

---

Yay! Thanks for the update! It looks amazing.

What was the parameter you reverted to normal in moi.css? I was curious!

Also, now that you are a moi customization veteran, do you know if I could ditch the help button from my personal setup? (of course it's a must have for your release!!! I am just in the mood for destruction now ^^)

---

((( in case anybody else is reading this, these tips pertain to MoI 4.0 beta (October 17, 2018) with Max Smirnov's Custom UI 2.0 beta 2 )))

Hey nameless,

In the "ui" folder, you'll find the "CommandBar.htm" file. Open it up and scroll down to near the bottom (line 174-ish). You'll find a line of code that looks like...

<moi:CommandSplitButton icon="icons/HelpIcon.png" menu="HelpMenu.htm" onclick="moi.launchHelp();"><moi:Text textid="Help"></moi:CommandSplitButton>

I don't recommend removing any code if you don't have to. Simply add HTML comment tags around it.

<!-- <moi:CommandSplitButton icon="icons/HelpIcon.png" menu="HelpMenu.htm" onclick="moi.launchHelp();"><moi:Text textid="Help"></moi:CommandSplitButton> -->

This should hide the button and keep the code still available for future consideration.

There are spacers used through out the Custom UI that control the gaps between icons. If you want to tighten up the buttons further or make them looked more grouped, you can open up the "startup" folder, for example, and open the "05 Select Buttons.js" file. Again, you can modify the code to remove or add extra spacers...

var html='<moi:Spacer>'; can become var html='<!-- <moi:Spacer> -->';

...and that removes the first spacer from the Custom UI and will tuck the first "Sel all" button a little closer to the 3 "snap" buttons. You could comment out all the spacers in that file to tighten up everything even more. Like, how the "undo" and "redo" button have no gap between them. This would allow you to increase the UI size further in the Options window in MoI.

You can also alter the "moi.css" file around line 986 and change the width of the spacer, but I wouldn't recommend doing that as these spacers are used in other places, I believe. There are tricks to targeting specific spacers in the bottom command bar, but it's not worth it, I feel (these were the parameters that I had changed before and then reverted back to the default values). Instead I would use a combination of altering the "CommandBar.htm" file and the JS files in the "startup" folder with commenting out (basically removing) spacer tags and adding combinations of <moi:Spacer> at 0.5 units wide and it's little buddy <moi:SmallSpacer> at 0.2 units wide as declared in the CSS file. These units are relative to the UI Size set in the Options window.

My mind reading abilities tell me that you might be interested in removing the clock I added to the right of the "Options" button. I commented out 3 lines of code to disable the clock and attached the file. You'll have to comment out the help button yourself though.

----------

I didn't realize how busy the Custom UI can get. Because I've already edited the "CommandBar.htm" file in my theme, I might as well carry on. I'll look into making the Custom UI appear nicely below the regular buttons at the very bottom. They'll have their own dedicated bar that won't interfere with the default buttons. I'm pretty busy this week, but It's on my radar. This is what I enjoy doing, by the way. I've always loved web application design.

I think I've melted my own brain now. ;-)

-- Cody

Attachments:
Clock Disabled.zip

---

Well, sir you are a rockstar. I am sure people will find this information very helpful. I really appreciate the time to give such a thorough reply... Brain melted but mind reading abilities, on point...

Respect!!!

---

Thanks to nameless for bringing Max Smirnov's Custom UI to my full attention. I've created a Dark Gray Theme optional add-on. Now Max's Custom UI will appear in it's own horizontally scrolling bar at the very bottom of the MoI 4.0 beta application. No more scrolling back and forth between MoI's default command buttons and the Custom UI buttons.

Here's a picture to show what I'm describing.



To install this add-on, please install the "Dark Gray Theme (MoI 4.0 beta) v1.1.zip" first and then the "Dark Gray Theme (MoI 4.0 beta) - Custom UI Bar.zip".

For those with a bit more technical knowledge, I've briefly described the process in the installation text file to achieve this result with any other theme or even the default MoI 4.0 beta installation.

Enjoy!

---

This is great stuff. Now one can set icons at optimal size without losing anything other than a little vertical real estate, which is totally acceptable. And it's much easier to see snaps and view toggles, with them being more separated. Even in smaller monitors you have more access.

It really shows that you love UI design Cody :)

---

Very nice! Thanks for all of your work.

---

Thanks, nameless and shane. I do appreciate the encouragement and it's always good to get feedback.

----------

I just wanted to let everyone know that I've now included a Custom UI Bar add-on for the MoI 3.0 version of the Dark Gray Theme. You'll find it in the first post of this thread. You must have the full v1.1 theme installed first as well as Max Smirnov's Custom UI 1.03 mod. This add-on requires both.

If you don't have the need for a lot of extra command bar buttons, don't worry about this add-on. However, if you have to scroll your bottom command buttons horizontally back and forth or are holding back increasing the UI size in MoI to avoid scrolling, then this is the add-on for you. It works just like the MoI 4.0 beta add-on and the top post shows you how it's implemented in the last screenshot.

-- Cody

---

Maybe you will like my icons for your theme:

https://moi3d.com/forum/index.php?webtag=MOI&msg=9138.1

---

This looks so good (color scheme/icons...) that Michael should consider that dark Theme to be default for MOI v4 FINAL.

---

Those are really nice icons, van. Thanks for sharing the link. Very inspirational! I love UI design.

----------

Hey, Lewis3D. Thanks for the compliment, man.

This is what mods are all about; optional changes. Not everybody likes a dark theme. However, I am thinking about offering a light version too or a way to easily change the color scheme.

The funny thing about this Dark Gray theme is that it all sparked from my first day using MoI. When I was navigating the Construct/Transform and the Curve/Solid tabs, I didn't know which tab was the active tab. One was blue and the other was white. Consequently, the white one looked more "active" to me so I'd click on the blue one to switch, and then the whole pane would frustratingly collapse. It didn't take long before I had the entire application turned inside out. ;-)

----------

I just wanted to let people know that there is a very minor graphical fix to the MoI 4.0 Beta version of this theme. The browser tabs now have the same look as the 3.0 version of this theme. They look the way they are supposed to now. Feel free to download the new Dark Gray Theme (MoI 4.0 beta) v1.1.1.zip file at your leisure.

If you use the optional UI bar add-on for Max Smirnov's CustomUI, you'll need to re-apply the Dark Gray Theme (MoI 4.0 beta) - Custom UI Bar.zip file after the v1.1.1 installation.



Once MoI 4.0 is out of beta, I'll be releasing a final version. (This theme was originally built for MoI 3.0.)

Note: If you've changed the Dark Gray Theme yourself and are concerned with overwriting your changes with this patch, you can manually apply this fix by finding line #631 in the moi.css file...

border-left:1px solid #444 !important; border-right:1px solid #444 !important;

...!important overrides any conflicting styles declared throughout the application. If you find yourself wanting to change something, but nothing you do seems to be working properly, this is the best way to override all of Michael's hard work. ;-)

-- Cody

Image Attachments:
browser-tab-fix.png 

---

Very nice UI .... can you maybe add a kind of tooltips - like here tooltip.js
https://popper.js.org/tooltip-examples.html

would be nice, if on mousehoover you will see the shortcuts as a small tooltip/popup (like in Photoshop e.g.) - Or is this better a task for michael gibson? ;)

As default UI I would like see it also very much.

---

Hey, Lordfox.

I don't believe shortcuts are setup for all the buttons by default, as far as I can tell. And when you make a shortcut, it's not attached to any specific button. I don't think tooltips showing shortcuts is feasible at this time. Someone can correct me, if I'm wrong.

Glad you like this theme!

-- Cody

---

Hi Lordfox, re: tooltips - MoI's standard UI is intentionally designed not to have tooltips since it already has text labels underneath each button.

But it is possible to add a tooltip to any MoI control by putting in a title="" attribute, like:

    <moi:CommandButton title="This is a tooltip"></moi:CommandButton>

- Michael

---

This Theme is absolutely stunning! thank you very much for putting this together.

---

Thanks, man!

I've been so busy with work, but I'm working on a light version of this theme that's based on Michael's default MoI colour scheme. It's a little trickier than I thought though, but I love a challenge.

I still get excited when I get a chance to use MoI. I played around with quite a few modelling programs and this is the only one that "gets it" when it comes to ease of use.

---

I like this theme, but I now have two issues with me install. Once I installed this theme I noticed my buttons on the command bar are round and it created two rows. I will prefer ever thing to be one row. How do I fix this?

Image Attachments:
Annotation 2019-07-04 133404.png 

---

Hi Ron, can you please post your moi.css and CommandBar.htm files? I'll take a look at what's going on.

That looks like the kind of thing that can happen if something isn't right with flexboxes. MoI uses a layout mechanism called flexbox to arrange that command bar UI horizontally. In your UI either some flexbox properties or some structure isn't right. MoI v3 and v4 use slightly different flexbox implementations and so you can get that kind of thing if you try to apply a v4 UI onto v3 for example.

- Michael

---

Show messages:  1-6  7-26  27-46  47-62