Cleanup "user interface" doc pages

org.eclipse.wb.doc.user/html-src/userinterface/component_tree.asciidoc

@@ -1,9 +1,13 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Component Tree
 
-image:images/component_tree.png[image,width=289,height=303]
+image:images/component_tree.png[image]
 
 The *Component Tree* shows the hierarchical relationship between all of
-the components in the *link:design_view.html[Design View]*.
+the components in the xref:design_view.adoc[*Design View*].
 
 Each component in the tree shows is icon (with potential decorators),
 its variable name and text label. Components may be represented as local
@@ -16,13 +20,13 @@ Icon decorators (see table below) are used to indicate whether a component
 defines and events or is exposed as a public component of a custom container.
 
 Expand the components in the tree using the *Expand All*
-image:images/expand_all.gif[image,width=16,height=16] button, and
+image:images/expand_all.gif[image] button, and
 collapse them using the *Collapse All*
-image:images/collapse_all.gif[image,width=16,height=16] button.
+image:images/collapse_all.gif[image] button.
 
 Right-click on an entry in the tree to access the same
-link:context_menu.html[context menu] available in the
-*link:design_view.html[Design View]*. Components may be re-arranged in
+xref:context_menu.adoc[context menu] available in the
+xref:design_view.adoc[*Design View*]. Components may be re-arranged in
 the tree via drag/drop and deleted using the *Delete* key.
 
 Multiple components may be selected in the tree by holding down the
@@ -33,18 +37,15 @@ contiguous selections.
 
 [width="100%",cols="10%,20%,70%"]
 |===
-a|
-=== Icon
-a|
-=== Decorator Name
-a|
-=== Description
+|*Icon*
+|*Decorator Name*
+|*Description*
 
 |image:images/exposed_decorator.png[image]
 |*Exposed*
 |Child widgets exposed in a custom container.
 
-|image:images/event_decorator.gif[image,width=7,height=7]
+|image:images/event_decorator.gif[image]
 |*Event* 
 |Components with one or more event handlers defined.
 |===

org.eclipse.wb.doc.user/html-src/userinterface/context_menu.asciidoc

@@ -1,22 +1,23 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Context Menu
 
 The *Context Menu* provides access to commands commonly used in the
-*link:design_view.html[Design View]* and
-*link:component_tree.html[Component Tree].*
+xref:design_view.adoc[*Design View*] and
+xref:component_tree.adoc[*Component Tree*].
 
 [width="100%",cols="10%,20%,70%",]
 |===
-a|
-=== Icon
-a|
-=== Menu Name
-a|
-=== Description
+|*Icon*
+|*Menu Name*
+|*Description*
 
 |image:images/cut_edit.gif[image]
 |*Cut*
 |Copy the selected components to the clipboard and remove them from the
-*link:design_view.html[Design View]*.
+ xref:design_view.adoc[*Design View*].
 
 |image:images/copy_edit.gif[image]
 |*Copy*
@@ -26,9 +27,9 @@ a|
 |*Paste* 
 |Paste the selected components from the clipboard.
 
-|image:images/delete.gif[image,width=16,height=16]
+|image:images/delete.gif[image]
 |*Delete*
-|Delete the selected components from the *link:design_view.html[Design View]*.
+|Delete the selected components from the xref:design_view.adoc[*Design View*].
 
 |image:images/test.png[image]
 |*Test/Preview*
@@ -37,31 +38,23 @@ layout and resizing behavior of your components.
 
 |image:images/editor_refresh.png[image]
 |*Refresh*
-|Re-parse the current source and refresh the *link:design_view.html[Design View]*.
+|Re-parse the current source and refresh the xref:design_view.adoc[*Design View*].
 
 |
 |* Add event handler >*
-|Implement an link:../features/event_handling.html[event handler] for an
-event triggered by the selected component.
+|Implement an xref:../features/event_handling.adoc[event handler] for an
+ event triggered by the selected component.
 
-+++
-<p>
-  <img src="images/evant_handler_swing.png">
-  <img src="images/evant_handler_swt.png" align="top">
-</p>
-+++
+image:images/evant_handler_swing.png[image]
+image:images/evant_handler_swt.png[image]
 
 |
 |* Style >*
 | Change the style of the selected components.
 
-+++
-<p>
-  <img src="images/change_style1.png">
-  <img src="images/change_style2.png" align="top">
-  <img src="images/change_style3.png" align="top">
-</p>
-+++
+image:images/change_style1.png[image]
+image:images/change_style2.png[image]
+image:images/change_style3.png[image]
 
 |
 |*Set Layout >*
@@ -80,35 +73,30 @@ image:images/order_menu.png[image]
 |image:images/exposeComponent.gif[image,width=16,height=16]
 |* Expose Component...*
 | Add a public or protected accessor for the selected component. Components
-exposed in link:../features/visual_inheritance.html[superclasses] or in
-link:../features/custom_composites.html[embedded panels] can be selected
+exposed in xref:../features/visual_inheritance.adoc[superclasses] or in
+xref:../features/custom_composites.adoc[embedded panels] can be selected
 and edited by the user.
 
 image:images/expose_component.png[image]
 
 |image:images/morph2.gif[image,width=16,height=16]
 |* Morph >*
-| link:../features/morphing.html[Morph] the selected components into
+| xref:../features/morphing.adoc[Morph] the selected components into
 another type. Similar component types are listed. Direct subclasses of
 the select component may also be selected as can any other arbitrary
 class.
 
+image:images/morph_menu1.png[image]
+image:images/morph_menu2.png[image]
 
-+++
-<p>
-  <img src="images/morph_menu1.png" align="top">
-  <img src="images/morph_menu2.png" align="top">
-</p>
-+++
-
-|image:images/factory.gif[image,width=16,height=16]
+|image:images/factory.gif[image]
 |* Factory >*
-| Create a link:../features/factories.html[factory] from the selected
+| Create a xref:../features/factories.adoc[factory] from the selected
 component or apply a factory to the selected component.
 
-image:images/factory_menu.png[image,width=159,height=58]
+image:images/factory_menu.png[image]
 
-|image:images/rename_convert2.gif[image,width=16,height=16]
+|image:images/rename_convert2.gif[image]
 |* Rename...*
 | Rename the selected components and/or convert them to fields or local
 variables.

org.eclipse.wb.doc.user/html-src/userinterface/design_view.asciidoc

@@ -1,38 +1,42 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = Design View
 
 The *Design View* is your virtual sketchpad. You can add or remove
 components, edit layout properties, direct edit labels, and see what
 your overall design looks like as it evolves.
 
-image:images/design_view.png[image,width=558,height=446]
+image:images/design_view.png[image]
 
 Select a component in the *Design View* to make it appear in the
-*link:property_pane.html[Property Pane]*, where you can edit its
+xref:property_pane.adoc[*Property Pane*], where you can edit its
 properties. This will also activate selection handles for the component.
 Selection handles allow you change layout properties of the selected
 control and, for some layout managers, also layout properties of sibling
 controls. All properties that can be changed in the *Design View* can be
-also changed in the *link:property_pane.html[Property Pane]*. Depending
-on the link:../layoutmanagers/index.html[layout manager] in effect, row
+also changed in the xref:property_pane.adoc[*Property Pane*]. Depending
+on the xref:../layoutmanagers/index.adoc[layout manager] in effect, row
 and column headers may be visible in the header area.
 
 Right-click on component to access the same
-link:context_menu.html[context menu] available in the
-*link:component_tree.html[Component Tree]*. Components may added by
-choosing them from the *link:palette.html[Palette]* and deleted using
+xref:context_menu.adoc[context menu] available in the
+xref:component_tree.adoc[*Component Tree*]. Components may added by
+choosing them from the *xref:palette.adoc[*Palette*] and deleted using
 the *Delete* key.
 
 == Component Selection
 
 Use the image:images/SelectionTool.gif[image,width=16,height=16]
-*Selection* tool in the *link:palette.html[Palette]* to select one or
+*Selection* tool in the xref:palette.adoc[*Palette*] to select one or
 more widgets. Hold the *Shift* or *Ctrl* key down to select multiple
 widgets.
 
 image:images/single_selection.png[image]
 
-Use the image:images/MarqueeSelectionTool.gif[image,width=16,height=16]
-*Marquee* tool in the *link:palette.html[Palette]* to rubber band select
+Use the image:images/MarqueeSelectionTool.gif[image]
+*Marquee* tool in the xref:palette.adoc[*Palette*] to rubber band select
 multiple widgets. Hold the *Alt* key and start dragging to automatically
 activate the  *Marquee* tool.
 
@@ -47,7 +51,7 @@ columns. First select a component in the **Design View**, and then hit
 the *Space* key to reveal an edit box in which you can set the
 component's text property.
 
-image:images/direct_edit.png[image,width=230,height=147]
+image:images/direct_edit.png[image]
 
 == Moving Components
 
@@ -58,7 +62,7 @@ showing its current location. Dynamic snap / alignment points are
 provided to make it convenient to align the component with other
 components or the window margin.
 
-image:images/feedback_drag_xy.png[image,width=229,height=124]
+image:images/feedback_drag_xy.png[image]
 
 In grid oriented layouts different feedback is shown depending on which
 cell the cursor is over. If the cursor is positioned over an open cell,
@@ -69,9 +73,9 @@ column will be inserted. If the cursor is positioned over an already
 populated cell, that cell is highlighted in red and the cursor shows a
 red minus sign.
 
-image:images/feedback_drag_grid1.png[image,width=229,height=124] 
-image:images/feedback_drag_grid2.png[image,width=229,height=124] 
-image:images/feedback_drag_grid3.png[image,width=229,height=124]
+image:images/feedback_drag_grid1.png[image] 
+image:images/feedback_drag_grid2.png[image] 
+image:images/feedback_drag_grid3.png[image]
 
 == Resizing Components
 
@@ -84,7 +88,7 @@ the window margin. Resizing a component also snaps to the preferred size
 of the resized component or to the size (vertical or horizontal) of any
 other component on the same parent.
 
-image:images/feedback_size_xy.png[image,width=229,height=124]
+image:images/feedback_size_xy.png[image]
 
 In grid oriented layouts, resizing a component will cause it to span
 more than one rows or columns. During the resize operation, the cells

org.eclipse.wb.doc.user/html-src/userinterface/index.asciidoc

@@ -1,3 +1,7 @@
+ifdef::env-github[]
+:imagesdir: ../../html/userinterface/
+endif::[]
+
 = User Interface
 
 The editor looks like this:
@@ -6,11 +10,11 @@ image:images/userinterface.png[image]
 
 The editor is composed of the following major components:
 
-* *link:design_view.html[Design View]* - the main visual layout area.
-* *link:source_view.html[Source View]* - write code and review the generated code
-* *link:structure_view.html[Structure View]* - composed of the *Component Tree* and the *Property Pane.*
-** *link:component_tree.html[Component Tree]* - shows the hierarchical relationship between all of the components.
-** *link:property_pane.html[Property Pane]* - displays properties and events of the selected components.
-* *link:palette.html[Palette]* - provides quick access to toolkit-specific components.
-* *link:toolbar.html[Toolbar]* - provides access to commonly used commands.
-* *link:context_menu.html[Context Menu]* - provides access to commonly used commands.
+* xref:design_view.adoc[*Design View*] - the main visual layout area.
+* xref:source_view.adoc[*Source View*] - write code and review the generated code
+* xref:structure_view.adoc[*Structure View*] - composed of the *Component Tree* and the *Property Pane.*
+** xref:component_tree.adoc[*Component Tree*] - shows the hierarchical relationship between all of the components.
+** xref:property_pane.adoc[*Property Pane*] - displays properties and events of the selected components.
+* xref:palette.adoc[*Palette*] - provides quick access to toolkit-specific components.
+* xref:toolbar.adoc[*Toolbar*] - provides access to commonly used commands.
+* xref:context_menu.adoc[*Context Menu*] - provides access to commonly used commands.