Tool bar - customizing All  1-20

Next
 From:  TOM (SIRTOM)
7971.1 
Hi,

I am a fan of Moi´s mininmalistic approach and want to go on minimizing my UI -
here my question :

How do I cancel the text "file", "save" etc from the bottom toolbar to make it narrower
to get more working space ?




Attachments:

  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  Stardust
7971.2 In reply to 7971.1 
Hi Tom

Nice looking UI and icons
Can you upload it?


/Stardust



- Michael for Nobel Prize -
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  TOM (SIRTOM)
7971.3 In reply to 7971.2 
"Nice looking UI"
I enjoy working with it. Tried to visually match the
zen-minimalistic approach of MOI.

"Can you upload it?"
See below. It is for V2 - in case you work with
V3 you will need to do some manual work I
guess.

EDITED: 31 May 2016 by SIRTOM

  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  Michael Gibson
7971.4 In reply to 7971.1 
Hi Tom, you can edit the CommandBar.htm file which is inside the \uii folder to do that.

The text that you are interested in is defined by <moi:Text> elements that are inside each <moi:CommandMenuButton> (for the File one) or <moi:CommandButton> control.

You can just delete those <moi:Text> elements, like replace this:

code:
<moi:CommandMenuButton style="icon:res://FILEICON;" menu="FileMenu.htm"><moi:Text textid="File"/></moi:CommandMenuButton>


With this (where the <moi:Text> portion has been deleted):

code:
<moi:CommandMenuButton style="icon:res://FILEICON;" menu="FileMenu.htm"></moi:CommandMenuButton>


Or another way which is probably better is to set up a style rule in the <style> block at the top of the file, to hide all <moi:Text> elements that are contained inside of a <moi:CommandButton> or <moi:CommandMenuButton>. That would look like this:

code:
		<style>
			moi\:CommandButton moi\:Text, moi\:CommandMenuButton moi\:Text
			{
				display:none;
			}



You will then run into a problem where the command buttons are set up to align to the bottom of the container, so your new shorter buttons will not look quite like what you show, they will hug the bottom edge. To solve that you could add an additional rule to apply some margin to the bottom of those buttons to push them up a bit, like this:

code:
		
			moi\:CommandButton, moi\:CommandMenuButton
			{
				margin-bottom:0.3em;
			}

- Michael
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  TOM (SIRTOM)
7971.5 In reply to 7971.4 
Thank you Michael ! Its really nice that MOi offers the opportunity to create ones own UI.

I managed to let the text disapear. What is left is to move the xyz / coordinate boxes down.
Is there a way to define the gaps between the buttons ? See attachments.
I played around with the values in the htm-file bui did not come up with a solution to my question ...

Would appreciate your instrctions :-)

EDITED: 28 May 2016 by SIRTOM

Image Attachments:
Size: 50.7 KB, Downloaded: 65 times, Dimensions: 991x444px
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  Michael Gibson
7971.6 In reply to 7971.5 
Hi Tom, you mean you want to make a wider horizontal space between some pieces?

I think there are <moi:Spacer> elements separating things there, with a couple of <moi:SmallSpacer> ones in certain spots.

To make more space you can change all the widths of all spacers by putting in a style rule in the <style> block at the top like this:

code:
			moi\:Spacer
			{
				width:3em;
			}


If you want to increase the space of just one, you can change just one spacer to have a particular width by setting it directly on the element which uses what's called an "inline" style like this:

code:
<moi:Spacer style="width:5em"/>


And if there isn't a spacer at a particular spot where you want more space you just insert a <moi:Spacer> element at that spot.

- Michael
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  centropolis
7971.7 In reply to 7971.1 
hello TOM,

When you have finished your new UI can give the link?
Very minimal and very cool !

centropolis
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  TOM (SIRTOM)
7971.8 In reply to 7971.6 
"Hi Tom, you mean you want to make a wider horizontal space between some pieces?"


Yes thats what I meant. Thank you and I will see if I understood how to proceed.
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  TOM (SIRTOM)
7971.9 In reply to 7971.7 
Hi centropolis,

I´ll post it when I am finished. I like an UI to be as restrained and simple as possible
and its great that MOI offers the possibility to tailor it to ones own taste and need.
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  TOM (SIRTOM)
7971.10 In reply to 7971.3 
Here is the new Ui.


(Note: This attached UI is for MoI version 2 and won't work properly with version 3)

EDITED: 31 May 2016 by MICHAEL GIBSON

Attachments:

Image Attachments:
Size: 142.1 KB, Downloaded: 68 times, Dimensions: 1919x1200px
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  TOM (SIRTOM)
7971.11 In reply to 7971.10 
Some further changes I would like to make but did not find out yet how :

-Decreasing the height of the command bar making it narrower.

-Decreasing the size of the Snap - bottons.

-Delete the text under the icons "optopns and "help" in the Commandbarright.
Image Attachments:
Size: 64.8 KB, Downloaded: 21 times, Dimensions: 1919x381px
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  Michael Gibson
7971.12 In reply to 7971.11 
Hi Tom, your UI above is for version 2, right? I'll edit your message to indicate that so that people don't try to use it for V3 where it won't work.

> -Decreasing the height of the command bar making it narrower.

The command bar will fit its height to the content inside of it, so you would need to shrink whatever the largest elements are in there in order to make it smaller.


> -Decreasing the size of the Snap - bottons.

Those are fit to the size of the text contained inside of them, so you would need to make the text inside them to be smaller in order for them to shrink.

You can do that by adding a style rule in the <style> block at the top of the file like this:

code:
			moi\:StateButton
			{
				font-size:75%;
			}



> -Delete the text under the icons "optopns and "help" in the Commandbarright.

In version 2 those are contained inside of separate file named CommandBarRight.htm - you will need to add a <style> block to it inside the <head> section, and put in the same rules that were used to hide the text as before, as described previously here:
http://moi3d.com/forum/index.php?webtag=MOI&msg=7971.4

- Michael
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  TOM (SIRTOM)
7971.13 In reply to 7971.12 
"Tom, your UI above is for version 2, right? I'll edit your message to indicate that so that people don't try to use it for V3 where it won't work."

I had mentioned it in my post - yes.



"In version 2 those are contained inside of separate file named CommandBarRight.htm - you will need to add a <style> block to it inside the <head> section, and put in the same rules that were used to hide the text as before, as described previously here:"

I had tried it but got some strange results - will go for it again. MOi is awesome TOM
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  TOM (SIRTOM)
7971.14 In reply to 7971.13 
"Tom, your UI above is for version 2, right? I'll edit your message to indicate that so that people don't try to use it for V3 where it won't work."

So when updating to V3 it is necessary to repeat all the steps done fpr the V2 - Ui ?
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  Michael Gibson
7971.15 In reply to 7971.14 
Hi James,

> So when updating to V3 it is necessary to repeat all the steps done fpr the V2 - Ui ?

Yes, that's correct. But also a few of the steps may need to be altered because the structure of V3 can be slightly different, for example in V3 there isn't any file CommandBarRight.htm , in v3 all the stuff including the options and help buttons are contained inside the CommandBar.htm file.

Also colors for things like buttons are different in v3 - instead of being controlled by images in v3 button colors are defined by color values in the moi.css file instead.

- Michael
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  TOM (SIRTOM)
7971.16 In reply to 7971.15 
> -Decreasing the height of the command bar making it narrower.
The command bar will fit its height to the content inside of it, so you would need to shrink whatever the largest elements are in there in order to make it smaller.<

The icons are way smaller than the bar so currently I am uncertain which elements I should decrease in size.
I added the commandbar.htm and the icons.
Attachments:

  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  Michael Gibson
7971.17 In reply to 7971.16 
Hi Tom,

> The icons are way smaller than the bar so currently I am uncertain which
> elements I should decrease in size.

Well, first of all did you also do the shrinking on the CommandbarRight.htm as well?

Then the next thing to look for is that several controls might have either padding or margins on them which makes blank space around them. You may need to reduce padding or margins in order to shrink them down more.

Probably the best way to figure out which particular things are taking up the most space is to temporarily delete one control at a time out of the file, then view it, and when you find the one where the size reduces a lot when it's removed, then you know that particular element is the one you need to shrink. You can then look at the style at the top of CommandBar.htm and also any style rules inside moi.css for that particular type of control to see if there is padding or margins set on it and experiment with removing them.

- Michael
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  TOM (SIRTOM)
7971.18 In reply to 7971.17 
>Well, first of all did you also do the shrinking on the CommandbarRight.htm as well?<

I thought this could be the reason and tried to leiminate the text below the icons.
But when I insert the Style command I get what you see below.


  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  Michael Gibson
7971.19 In reply to 7971.18 
Hi Tom, there's an error in your CommandBarRight.htm , a style block needs to start with <style> and end with </style> (note especially the backslash for the closing one).

Instead of an opening and then a closing one, you've got 2 opening ones and so the parser will think that everything coming after belongs to a new second opened style block.

Edit your CommandBarRight.htm line #11 to have </style> with a backslash and that will fix that part, although another thing is the Help button is a slightly different type of command button and so you need to make the style rule have an extra part (for a <moi:CommandSplitButton>) to it to cover that as well, like this:

code:
		<style>
		    moi\:CommandButton moi\:Text, moi\:CommandMenuButton moi\:Text, moi\:CommandSplitButton moi\:Text
			{
				display:none;				
			}	
			
                </style>


Then the vertical scroll bar that appears is a bug where the v2 UI engine is off by a few pixels when it measures the size of the command bar content (like maybe it's missing measuring some padding or something like that). It probably wouldn't happen in v3. It may go away when you tweak the heights of other things some more or it may just be something you're stuck with in v2.

- Michael
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
 From:  TOM (SIRTOM)
7971.20 In reply to 7971.19 
<Hi Tom, there's an error in your CommandBarRight.htm>
Yes ! Thx for helping.

<Then the vertical scroll bar that appears is a bug>
Tried many waya to get rid of it but yes, looks like its is a V2 bug.
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged
 

Reply to All Reply to All

 

 
 
Show messages: All  1-20