Thank you so much for your kind knowledge and assistance. You were absolutely right about the text affecting the positions of the icons (the
tags. Hey look at me, I'm learning! lol). So I've made some changes and very nearly got to the look that I'm after. As you probably noticed, I am using a custom UI from a source that I can't remember and can no longer find the original UI webpage? Anyway, the only issue I am facing now is the Option, Help and Window controls all insisting on being bottom aligned (I think?)
This is the CommandBar.htm that I am currently using, forgive me for butchering your original beautiful, clean code! ;)
code:
<html>
<head>
<style>
body {
white-space:nowrap;
}
body > hbox {
height:100%;
-webkit-box-align:end;
}
body > hbox > flex, body > hbox > div {
height:100%;
}
body > hbox > flex > *, body > hbox > div > * {
vertical-align:center;
}
moi\:ViewTabs, moi\:CoordinateControls {
display:-webkit-inline-box;
-webkit-box-orient:horizontal;
-webkit-box-align:center;
height:100%;
}
.vspacer {
display:inline-block;
width:0;
height:100%;
}
moi\:CommandButton > div, moi\:CommandMenuButton > div, moi\:CommandSplitButton > div {
display:none;
}
<!--
Remove Icon Text
The command above removes the text from below the icons of CommandButton.htm, CommandMenuButton.htm and CommandSplitButton.htm
-->
</style>
</head>
<body class="CommandBarBody">
<hbox>
<flex>
<!-- Include vertical spacer to make vertical-align:bottom work well with command buttons !-->
<moi:CommandMenuButton menu="FileMenu.htm" icon="moi://ui/icons/File.png"><moi:Text textid="File"></moi:CommandMenuButton>
<moi:CommandButton icon="moi://ui/icons/Save.png" command="save" rcommand="saveas"><moi:Text textid="Save"></moi:CommandButton>
<moi:Spacer>
<moi:CommandButton icon="moi://ui/icons/Undo.png" onclick="moi.command.undo();"><moi:Text textid="Undo"></moi:CommandButton>
<moi:CommandButton icon="moi://ui/icons/Redo.png" onclick="moi.command.redo();"><moi:Text textid="Redo"></moi:CommandButton>
<moi:Spacer>
<moi:CommandButton icon="moi://ui/icons/Delete.png" command="delete"><moi:Text textid="Delete"></moi:CommandButton>
<moi:SmallSpacer>
<moi:ViewTabs>
<moi:Spacer>
<moi:CoordinateControls>
<moi:Spacer>
<vcenter>
<moi:StateButton
binding="value = moi.drawingAids.gridSnap"
menu="GridSnapMenu.htm">
<moi:Text textid="Grid Snap">
</moi:StateButton>
</vcenter>
<vcenter>
<moi:StateButton
binding="value = moi.drawingAids.straightSnap">
<moi:Text textid="Straight Snap">
</moi:StateButton>
</vcenter>
<vcenter>
<moi:StateButton
binding="value = moi.drawingAids.objectSnap"
menu="ObjectSnapMenu.htm">
<moi:Text textid="Object Snap">
</moi:StateButton>
</vcenter>
<moi:Spacer>
<vcenter>
<script type="text/javascript" src="customui/CustomInit.js">
</vcenter>
<moi:Spacer>
<vcenter>
<moi:CommandButton icon="moi://ui/icons/ToggleLines.png" onclick="script:var breps = moi.geometryDatabase.getObjects().getBReps(); var hide = true; for ( var i = 0; i < breps.length; ++i ) { var edges = breps.item(i).getEdges(); if ( i == 0 ) hide = !edges.item(0).hidden; edges.setProperty( 'hidden', hide ); }"><moi:Text textid="Edges"></moi:CommandButton>
</vcenter>
<vcenter>
<moi:CommandButton icon="moi://ui/icons/ToggleHiddenLines.png" onclick="script:moi.view.showHiddenLines =! moi.view.showHiddenLines;"><moi:Text textid="HL"></moi:CommandButton>
</vcenter>
<vcenter>
<moi:CommandButton icon="moi://ui/icons/wireframe.png" onclick="var breps = moi.geometryDatabase.getObjects().getBReps(); var hide = true; for ( var i = 0; i < breps.length; ++i ) { var faces = breps.item(i).getFaces(); if ( i == 0 ) hide = !faces.item(0).hidden; faces.setProperty( 'hidden', hide ); }"><moi:Text textid="Wire"></moi:CommandButton>
</vcenter>
<vcenter>
<moi:CommandButton icon="moi://ui/icons/seledges.png" onclick="script: /* switch selection from a face to its edges */ var gd = moi.geometryDatabase; var faces = gd.getSelectedObjects().getFaces(); gd.deselectAll(); for ( var i = 0; i < faces.length; ++i ) faces.item(i).getEdges().setProperty( 'selected', true );"><moi:Text textid="SelEdges"></moi:CommandButton>
</vcenter>
<vcenter>
<moi:CommandButton icon="moi://ui/icons/nakededges.png" onclick="script:var gd = moi.geometryDatabase; gd.deselectAll(); var breps = gd.getObjects().getBreps(); for ( var i = 0; i < breps.length; ++i ) breps.item(i).getNakedEdges().setProperty( 'selected', true );"><moi:Text textid="NakEdges"></moi:CommandButton>
</vcenter>
<vcenter>
<moi:CommandButton icon="moi://ui/icons/ImportOBJExact.png" command="_ImportObj exact"><moi:Text textid="ImportObj"></moi:CommandButton>
</vcenter>
<vcenter>
<moi:CommandButton icon="moi://ui/icons/Node Editor.png" command="moi.ui.createDialog( 'nodeeditor/index.html', 'resizeable,defaultWidth:680,defaultHeight:420', moi.ui.mainWindow )"><moi:Text textid="NodeEditor"></moi:CommandButton>
</vcenter>
<vcenter>
<moi:CommandButton icon="moi://ui/icons/measure.png" command="MeasureDistance"><moi:Text textid="Measure"></moi:CommandButton>
</vcenter>
</flex>
<vcenter>
<moi:CommandButton icon="moi://ui/icons/Options.png" onclick="if ( event.ctrlKey && event.shiftKey ) { LlamaMode(); } else { moi.ui.createDialog( 'Options.htm', 'resizeable,defaultWidth:43em,defaultHeight:32em' ); }"><moi:Text textid="Options"></moi:CommandButton>
</vcenter>
<vcenter>
<moi:CommandSplitButton icon="moi://ui/icons/Help.png" menu="HelpMenu.htm" onclick="moi.launchHelp();"><moi:Text textid="Help"></moi:CommandSplitButton>
</vcenter>
<moi:Spacer>
<moi:Spacer>
<!-- <moi:CommandButton icon="Minimize.png" style="position:absolute; right:0;" onclick="moiWindow.minimize();"></moi:CommandButton>
<moi:CommandButton icon="Restore.png" style="position:absolute; right:0;" onclick="moiWindow.restore();"></moi:CommandButton>
-->
<script>
var g_InLlamaMode = false;
function LlamaMode()
{
g_InLlamaMode = !g_InLlamaMode;
var panels = moi.ui.getUIPanels();
for ( var i = 0; i < panels.length; ++i )
{
var images = panels.item(i).document.images;
for ( var j = 0; j < images.length; ++j )
{
var img = images[j];
if ( img.parentElement.tagName.indexOf('COMMAND') == -1 )
continue;
if ( !img.savedSrc )
img.savedSrc = img.src;
if ( g_InLlamaMode )
{
img.src = 'res://llamaicon';
img.style.webkitTransition = '-webkit-transform 10s linear';
img.style.webkitTransform = 'rotate(360deg)';
}
else
{
img.src = img.savedSrc;
img.style.webkitTransform = '';
}
}
}
}
</script>
<moi:SidePaneTitleBar style="display:block;">
</hbox>
</body>
</html>
Thanks again for your time and patience Michael, I am really very grateful!
Kind regards,
Tim
