Toolbar Guidelines¶

• This document shows the basic guidelines of the toolbar located under the header.

• Toolbar structure
• Placement method of the process link
• [Note] In this guideline, tool bar for all functions is not mandatory

• Usage Example

• Placement of Process link (Icon)

• “Create new” link, “Setting” link

• Change of Display

• MyBox/GroupBox of IMBox
• Scheduled month/week/day

Toolbar Structure¶

Toolbar is structured in multiple div.

Process link, process icon are placed either to the left or to the right of the tool bar.

Basic structure of the toolbar

<div class="imui-toolbar-wrap">[1]
  <div class="imui-toolbar-inner">[2]
    <ul class="imui-list-toolbar">[3]
      <li><a href="#" class="imui-toolbar-icon" title="Back"><span class="im-ui-icon-common-16-back"></span></a></li>[4-1]
    </ul>
    <ul class="imui-list-toolbar-utility">[5]
      <li><a href="#" class="imui-toolbar-icon" title="Refresh"><span class="im-ui-icon-common-16-refresh"></span></a></li>[4-2]
    </ul>
  </div>
</div>

When mr-5 is specified, margin-right:5px !important is specified.

Placement of the process link (Implementation)

Placement Details

HTML Coding

	Name	<li> class	<a> class	<a> title	<span> class	Displayed Icon
a	Back	–	imui-toolbar-icon	Back	im-ui-icon-common-16-back
b	Separator line	icon-split	–	–	–	–
c	Process link	–	imui-toolbar-icon	–	im-ui-icon-common-16-settings mr-5
b	Separator line	icon-split	–	–	–	–
d	Tab icon	–	imui-toolbar-tab	Specified in each function	im-ui-icon-common-16-star mr-5| im-ui-icon-common-16-search mr-5| im-ui-icon-common-16-question mr-5|
b	Separator line	icon-split	–	–	–	–
e	Refresh	–	imui-toolbar-icon	Refresh	im-ui-icon-common-16-refresh

Capture source mentioned above

<div class="imui-toolbar-wrap">
  <div class="imui-toolbar-inner">
    <!-- Toolbar left side -->
    <ul class="imui-list-toolbar">
      <!-- Back -->
      <li><a href="#" class="imui-toolbar-icon" title="Back"><span class="im-ui-icon-common-16-back mr-5"></span></a></li>
      <!-- Separator line -->
      <li class="icon-split"></li>
      <!-- Set up button -->
      <li><a href="#" class="imui-toolbar-icon"><span class="im-ui-icon-common-16-settings mr-5"></span>Settings</a></li>
      <!-- Separator line -->
      <li class="icon-split"></li>
      <!-- Tab Favorite button -->
      <li><a href="#" class="imui-toolbar-tab"><span class="im-ui-icon-common-16-star mr-5"></span></a></li>
      <!-- Tab Search button -->
      <li><a href="#" class="imui-toolbar-tab"><span class="im-ui-icon-common-16-search mr-5"></span></a></li>
      <!-- Tab Help button  -->
      <li><a href="#" class="imui-toolbar-tab"><span class="im-ui-icon-common-16-question mr-5"></span></a></li>
      <!-- Separator line -->
      <li class="icon-split"></li>
    </ul>
    <!-- Toolbar at the right side -->
    <ul class="imui-list-toolbar-utility">
      <li><a href="#" class="imui-toolbar-icon" title="Refresh"><span class="im-ui-icon-common-16-refresh"></span></a></li>
    </ul>
  </div>
</div>

When placing the process icon (Process link) for every function¶

Expressions of Toolbar

1 Icon

Procedure

1. Display method of the image using CSS Sprite
2. HTML coding

<li><a href="AA" class="imui-toolbar-icon" title="BB"><span class="CC"></span></a></li>

AA	Specify transition destination
BB	Display contents of tooltip
CC	Specify class of CSS Sprite

2 Icon+Character link

Procedure

1. Display method of the image where CSS Sprite is used
2. HTML coding

<li><a href="AA" class="imui-toolbar-icon" title="BB"><span class="CC mr-5"></span>DD</a></li>

AA	Specify transition destination
BB	Display contents of tooltip
CC	Specify class of CSS Sprite
DD	Character link display contents

3 Character link

Procedure

1. HTML Coding

<li><a href="AA" class="imui-toolbar-icon" title="BB">CC</a></li>

AA	Specify transition destination
BB	Display contents of tooltip
CC	Character link display contents

4 Tab Icon

Procedure

1. Display method of the image where CSS Sprite is used
2. HTML Coding

<li><a href="AA" class="imui-toolbar-tab" title="BB"><span class="CC"></span></a></li>

AA	Specify transition destination
BB	Display contents of tooltip
CC	Specify class of CSS Sprite

Notes¶

• When the toolbar is to be displayed in 1024 x 768 resolution, it should fit into 1 row.
• In case of dialog, it should fit into 1 row in the specified window size.
• If the process link to be displayed does not fit in 1 row, take the following measures.

1. Reconsider the character count and see that it fits in.
2. Display only the icon and the characters should be displayed in the tooltip.