Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "UIGraphics : Specifications : GraphicTypes"

Line 15: Line 15:
 
=== Product ===
 
=== Product ===
  
Description: The Product icon, also known as the Application icon, represents the branding of the product and is always located on the far left of the window title bar before the perspective, document, and product name. These icons are also used to launch the product from the menu or from a desktop or treeview shortcut, and as product identifiers in the About screen. Since these icons are intended for use in specific places, they are not meant for use on toolbars or in the user interface in general.
+
'''Description:''' The Product icon, also known as the Application icon, represents the branding of the product and is always located on the far left of the window title bar before the perspective, document, and product name. These icons are also used to launch the product from the menu or from a desktop or treeview shortcut, and as product identifiers in the About screen. Since these icons are intended for use in specific places, they are not meant for use on toolbars or in the user interface in general.
  
 
'''Example:'''
 
'''Example:'''
Line 94: Line 94:
  
 
===View===
 
===View===
'''
+
 
Description:''' View icons are found on the left side of the titlebar of each view within the workbench. These icons indicate each view’s function or the type of object a view contains.
+
'''Description:''' View icons are found on the left side of the titlebar of each view within the workbench. These icons indicate each view’s function or the type of object a view contains.
'''
+
 
Example:'''
+
'''Example:'''
  
 
: [[Image:spec_type_view.gif]]
 
: [[Image:spec_type_view.gif]]
Line 179: Line 179:
  
 
'''Size:''' 7 x 8 pixels
 
'''Size:''' 7 x 8 pixels
 +
 +
'''Format:''' GIF
 +
 +
 +
===Table===
 +
 +
'''Description:''' Table icons are a type of model object icon used specifically in tables as labels, status indication, or to give additional information about the items they accompany in a table row. Although these icons are a type of model object, they are created smaller than regular model objects in order to fit in the table row without distortion or crowding the space.
 +
 +
'''Example:'''
 +
 +
: [[Image:]]
 +
 +
'''Table icons shown in context
 +
 +
'''Type:''' Table
 +
 +
'''Folder name:''' obj16
 +
 +
'''Size:''' They are designed in the 16 x 16 pixel space, but the actual image size is no greater than 15 x 14 pixels.
  
 
'''Format:''' GIF
 
'''Format:''' GIF

Revision as of 09:45, 11 August 2007

* Work in progress *

Return to the main UI Graphics section on the UI Best Practices page.

The Eclipse style graphics have been categorized into separate types so that each can be optimized for its specific location. The majority of interface graphics are 16 x 16 pixels in size, though there are some graphic types that come in additional or unconventional sizes suited specifically to their use. Details on size and placement of the image see the next subsection on Icon Size & Placement. The following graphic types are described below:

Icons

Spec type icon.gif


Product

Description: The Product icon, also known as the Application icon, represents the branding of the product and is always located on the far left of the window title bar before the perspective, document, and product name. These icons are also used to launch the product from the menu or from a desktop or treeview shortcut, and as product identifiers in the About screen. Since these icons are intended for use in specific places, they are not meant for use on toolbars or in the user interface in general.

Example:

Spec type prod.gif


Perspective

Description: Perspective icons represent different working environments called "Perspectives". Each perspective is a set of views and content editors with a layout conducive to the tasks associated with that environment. The perspective icons allow the user to quickly switch between different opened perspectives. By default, these icons are located in the top right of the user interface to the right of the main toolbar, and have a horizontal orientation. They can also be docked on the top left just below the toolbar, keeping a horizontal orientation, or on the left of the navigator view with a vertical orientation.

Example:

Spec type persp.gif

Type: View

Folder name: view16

Size: 16 x 16 pixels

Format: GIF


Fast View

Description: Fast View icons allow users to quickly display different views that have been created as fast views. These icons are by default located in the bottom left of the user interface and have a horizontal orientation. They can also be docked with a vertical orientation on the left of the navigator view, or on the far right of the user interface.

Example:

Spec type fastview.gif

Type: View

Folder name: view16

Size: 16 x 16 pixels

Format: GIF


Toolbar

Description: Toolbar icons are located on the main toolbar across the top of the workbench. They represent actions, and will invoke a command, either globally or within the editor.

Example:

Spec type tool.gif

Type: Toolbar

Folder names: etool16 and dtool16

Size: 16 x 16 pixels

Format: GIF


Toolbar Wizard

Description: Toolbar wizard icons are found on the main toolbar across the top of the workbench as well as in the New wizard dialog list. Selecting one of these icons will launch a wizard. The most common type of toolbar wizard is for creating "new" objects or resources. These are easily recognized by their gold sparkle in the upper right corner of the icon. The other common type of toolbar wizard is for generating files. These icons are distinguished by two stacked files in front of a diskette.

Example:

Spec type toolwiz.gif

Type: Toolbar

Folder names: etool16 and dtool16

Size: 16 x 16 pixels

Format: GIF


View

Description: View icons are found on the left side of the titlebar of each view within the workbench. These icons indicate each view’s function or the type of object a view contains.

Example:

Spec type view.gif

Type: View

Folder name: view16

Size: 16 x 16 pixels

Format: GIF


Local Toolbar

Description: Local toolbar icons are found to the right of the view icon on the titlebar of each view within the workbench. They represent actions, and invoke commands on objects in that view only. Local toolbar type icons are also used in all menus, including main, pull down, and context menus. Example:

Spec type lcltool.gif

Type: Local Toolbar

Folder names: elcl16 and dlcl16

Size: 16 x 16 pixels

Format: GIF


Model Object

Description: Model Object icons are found in tree views, list views, and on editor tabs within the workbench. They represent objects and sometimes states, but not actions. Examples of model object icons are project folders and file types. Note that objects selected in the navigator view, such as the Package Explorer in the Java Perspective, have a one-to-one relationship with the file open in the Editor View, i.e., the same icon is used in both the navigator view and the Editor tab. In contrast, in the Outline View, the model object selected is not shown in the Editor, but the selection itself is shown in both the Outline View and the source code within the Editor.

Examples: One-to-one relationship between model object in treeview and icon in Editor tab

Spec type obj-lg.gif

Model object in Outline View is not shown in the Editor, but the selection is shown in both views

Spec type icon-ol-edit.gif

Type: Model Object

Folder name: obj16

Size: 16 x 16 pixels

Format: GIF


Object Overlay (and Underlay)

Description: Object overlay icons are decorator elements that are used in tree or list views. They are appended to model object icons as signifiers of an object type, status, attribute, transition state, multiplicity or some sort of change. Underlays are a special type of underlay that go under the model object. Like the overlay, they signify some kind of change about the model object they append to.

Example:

Spec type ovr.gif


There are six main types of overlays:

1. Project Nature or Type overlays are displayed in the Navigator and the Package views. They are completely superimposed on the model object at the top right corner of the 16 x 16 icon space.

Only a few project nature overlay icons have been created to prevent crowding in the interface. Project nature overlays quickly identify the various types of projects that can be contained in the Navigator and mirroring views.

The white keyline border is applied around the image to enhance legibility.

Example:

Spec type ovr-proj-type.gif


Type: Object Overlay

Folder name: ovr16

Size: 7 x 8 pixels

Format: GIF


Table

Description: Table icons are a type of model object icon used specifically in tables as labels, status indication, or to give additional information about the items they accompany in a table row. Although these icons are a type of model object, they are created smaller than regular model objects in order to fit in the table row without distortion or crowding the space.

Example:

[[Image:]]

Table icons shown in context

Type: Table

Folder name: obj16

Size: They are designed in the 16 x 16 pixel space, but the actual image size is no greater than 15 x 14 pixels.

Format: GIF

Copyright © Eclipse Foundation, Inc. All Rights Reserved.